Problem/Motivation

This drupal.org documentation page describes many common pitfalls of Drupal module's CSS: http://drupal.org/node/1887918#pitfalls

Proposed resolution

To remove these problems, we should follow the best practices guidelines outlined on this drupal.org documentation page: http://drupal.org/node/1887918#best-practices

Remaining tasks

Create an issue for each component and fix them. Here is a proposal of how we could architect the module CSS:

Global utilities
  • layout [.clearfix, .inline-x, .nowrap, .float-start/end ]
  • js [js-show]
  • text [align-start/center/end]
  • accessibility [visually-hidden]

See: #2395853: Split system.module.css and system.theme.css files into SMACSS style components

Layouts
  • form layout (label positioning, above/left)
  • node-form [some or all moved to Seven theme?]
Components

User interface changes

None. The design objects that style the Drupal module's functionality should be look roughly the same after as they do now.

API changes

All of core's modules will have new CSS selectors that better match the design objects being used for their content.

Tasks

#2012020: Complete a survey of 3rd party resources to aid with component naming conventions
#2003742: Refactor nested side menus with new component-style selectors
#2006496: Refactor tabs with new component-style selectors

Comments

echoz’s picture

echoz commented
Title: Refactor module CSS files to use component-style selectors » [Meta] Refactor module CSS files to use component-style selectors
Project: Drupal core » Drupal 8 Mobile Initiative
Version: 8.x-dev »
Component: CSS » Meta
Status: Postponed » Active
echoz’s picture

echoz commented
Issue summary: View changes

added #2003742

echoz’s picture

echoz commented
Issue summary: View changes

added #2006496

ry5n’s picture

ry5n commented

I’ve gone through core and referred to the Seven Style Guide and come up with a starting list o fstuff that we should examine to abstract out our design objects. Stuff listed under building blocks is pretty well modularized; other stuff may not be.

Core CSS

Potential abstractions (base/layout/components)

- these abstractions may or may not currently exist in core
- #js == component will need JavaScript attached
- notes are in [square brackets]

utilities
- layout [.clearfix, .inline-x, .nowrap, .float-start/end ]
- js [js-show]
- text [align-start/center/end]
- accessibility [visually-hidden]
layouts
- form layout (label positioning, above/left)
- node-form [some or all moved to Seven theme?]
components
- details #js
- icons
- spinners [throbber]
- progress #js
- buttons #js → [for dropbuttons]
- button-groups
- popups #js
- menus #js [application-style menus, not navs]
- media-block [see bit.ly/cCY3Ew]
- tabs
- vertical tabs
- slats [?? see http://pea.rs/content/slats-text-only]
- messages [note tables and forms have inline status states/messages]
- modal #js
- overlay #js
- pager
- breadcrumb
- book-nav [footer navigation for book module]
- ckeditor
- comments
- search results [??]
- password strength thing
forms/
- form-field [container for label, input, prefix/suffix like Twitter Bootstrap, plus description & inline error]
- input-text [all text-like inputs, incl. textarea]
- input-select
- input-radio
- input-checkbox
- input-search
- input-file [?? wrappers?]
- autocomplete ← extends or includes textfield, popup, menu, spinner #js

Seven Theme

components/
- grid system [requires abstracting from current layouts]
- admin-table
- admin-table--draggable #js
- typography
- content header
- link [for styling buttons as links]
- panel [island object; base for details/fieldset appearance]
- captioned nav [e.g. admin/ or variant at admin/config] ← could be built on slats (see above)
- well [inset style; needed??]

Complex UIs

We should be able to build many of Core’s complex user interfaces using
the basic components above, plus custom components in Seven.

Idea: define a base theme from which Seven inherits markup/css/js required for
all Drupal admin themes.

Complex UIs:
- diff [core/modules/system/css/system.diff.css]
- admin filters [in filters.module; what is this?]
- admin exposed filters [in system.admin.css; what is this?]
- admin modules ui
- admin views ui
- admin blocks ui
- admin color ui
- admin image ui [styles, etc.]
- admin locale ui [in locale module. What is this?]
- admin layout ui [SCOTCH stub??]
- admin theme settings ui
- admin node edit ui
- admin field ui
- admin taxonomy ui
- admin entity translation ui
- admin update ui
- admin shortcut button
- admin contextual links
- admin inline edit ui
- admin toolbar
- admin db log
- admin simpletest results
- admin tour
- forum module [??]
- help module
- openid login [??]

ry5n’s picture

ry5n commented

For an idea of how this could potentially get structured as files, see #1663622-54: Change directory structure for JavaScript files.

If we go all the way on this, we might end up pulling almost all CSS out of core/modules. What this would be is our own front-end framework, used by modules but no longer split up within them. The last piece would be Twig + theme functions for matching markup, and we have would #1804488: [meta] Introduce a Theme Component Library.

ry5n’s picture

ry5n commented
Issue summary: View changes

Add link to the Seven Style Guide sandbox.

adubovskoy’s picture

adubovskoy commented
Issue tags: +CodeSprintCIS

Good task for CodeSprintCIS

adubovskoy’s picture

adubovskoy commented
Issue summary: View changes

Added new sub-task.

lewisnyman’s picture

lewisnyman
he/him
commented
Issue tags: +CSS, +frontend
lewisnyman’s picture

lewisnyman
he/him
commented
Project: Drupal 8 Mobile Initiative » Drupal core
Version: » 8.0.x-dev
Component: Meta » CSS

Moving this into core

lewisnyman’s picture

lewisnyman
he/him
commented
Issue summary: View changes

Moved a lot of Ryans comment into the issue summary

lewisnyman’s picture

lewisnyman
he/him
commented
Issue summary: View changes
lewisnyman’s picture

lewisnyman
he/him
commented
Issue summary: View changes
lewisnyman’s picture

lewisnyman
he/him
commented
Title: [Meta] Refactor module CSS files to use component-style selectors » [Meta] Refactor module CSS files inline with our CSS standards
lewisnyman’s picture

lewisnyman
he/him
commented
Issue summary: View changes
lewisnyman’s picture

lewisnyman
he/him
commented
Issue summary: View changes
Issue tags: -CodeSprintCIS
lewisnyman’s picture

lewisnyman
he/him
commented
Issue summary: View changes
lewisnyman’s picture

lewisnyman
he/him
commented
Issue summary: View changes
hass’s picture

hass commented
Related issues: +#2029187: [meta] Make sure CSS classes are prefixed properly
lewisnyman’s picture

lewisnyman
he/him
commented

You can now view a webpage of all the errors in all the CSS files in core :) http://lewisnyman.co.uk/drupalcore-frontend-toolkit/

lewisnyman’s picture

lewisnyman
he/him
commented
Category: Task » Plan
davidhernandez’s picture

davidhernandez
Primary language English
Location USA
commented

LewisNyman++ that's very nice. Maybe link that in the theme docs somewhere?

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

quietone’s picture

quietone commented
Parent issue: » #3319843: [Meta] Fix coding standards in core

Add parent.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.