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 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

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

Issue summary:View changes

added #2003742

echoz’s picture

Issue summary:View changes

added #2006496

ry5n’s picture

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

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

Issue summary:View changes

Add link to the Seven Style Guide sandbox.

adubovskoy’s picture

Issue tags:+CodeSprintCIS

Good task for CodeSprintCIS

adubovskoy’s picture

Issue summary:View changes

Added new sub-task.

LewisNyman’s picture

Issue tags:+CSS, +frontend
LewisNyman’s picture

Project:Drupal 8 Mobile Initiative» Drupal core
Version:» 8.0.x-dev
Component:Meta» CSS

Moving this into core

LewisNyman’s picture

Issue summary:View changes

Moved a lot of Ryans comment into the issue summary

LewisNyman’s picture

Issue summary:View changes
LewisNyman’s picture

Issue summary:View changes
LewisNyman’s picture

Title:[Meta] Refactor module CSS files to use component-style selectors» [Meta] Refactor module CSS files inline with our CSS standards
LewisNyman’s picture

Issue summary:View changes
LewisNyman’s picture

Issue summary:View changes
Issue tags:-CodeSprintCIS
LewisNyman’s picture

Issue summary:View changes
LewisNyman’s picture

Issue summary:View changes
hass’s picture

LewisNyman’s picture

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