five-for-the-future/themes/wporg-5ftf/css
Kelly Dwan 619af97bd1
Forms: Use button class directly on buttons for consistent display
Adding the `button` mixin into `input[type="submit"] caused conflicts with the other button classes (`.button-primary`) due to specificity. The button classes should be used on all buttons instead. This also updates which button on the Manage Pledge form is the "primary" action, since it's easy to skip the Update button when it's not primary.
2019-12-09 11:15:39 -05:00
..
base Pledge List Filters: Update style and add filter on-change functionality 2019-10-28 19:39:16 -04:00
components Manage Pledge: Update email dialog to use JS submission (#104) 2019-11-21 15:31:29 -05:00
generic Theme: Move above pub/ folder to avoid clutter from sync commits. 2019-09-24 16:49:35 -07:00
objects Forms: Use button class directly on buttons for consistent display 2019-12-09 11:15:39 -05:00
settings Manage Pledge: Update email dialog to use JS submission (#104) 2019-11-21 15:31:29 -05:00
tools Theme: Move above pub/ folder to avoid clutter from sync commits. 2019-09-24 16:49:35 -07:00
utilities Theme: Tweak paralleogram styles 2019-10-28 16:58:39 -04:00
README.md Update and document CSS structure 2019-10-02 10:57:31 -04:00
style-editor.scss Homepage: clean up item positioning 2019-10-24 13:10:40 -04:00
style.scss Move blocks and block styles to the correct places in the CSS structure 2019-10-02 15:54:45 -04:00

CSS Structure

This loosely follows ITCSS.

01 Settings

Typography, colors, any spacing variables, etc should be set here.

02 Tools

This contains any mixins. We inherit the following libraries:

  • breakpoint
  • kube
  • modular-scale

03 Generic

Any generic styles. Used for normalize & reset styles. We inherit:

  • kube
  • normalize

04 Base (aka Elements)

Styles for plain html elements. We inherit the base theme's styling here.

05 Objects

These are pieces of UI. These should be self-contained (or nested so that they are self-contained). Blocks should be defined here.

06 Components

This section puts together the base and objects to create pages. Page-specific styles are defined here.

07 Utilities

The is-*/has-* classes, these custom classes override previous styles. For example, has-background would be defined here. This is where block styles should live.

Editor Styles

Editor styles will use a custom import of a subset of the above folders, TBD?