Skip to content
This repository has been archived by the owner on Jan 2, 2020. It is now read-only.

CSS Architecture

Jump to bottom
Felix Hammerl edited this page Jun 3, 2016 · 9 revisions

The User-Agent was initially built upon the Foundation CSS framework, which at this point serves mainly for the menu drawer on the left side of the UI, using SCSS w/ Compass as a preprocessor. The CSS of the User-Agent underwent a partial rewrite in April '16. There, many elements have been rewritten in according to the BEM (Block Element Modifier) methodology, that helps to achieve reusable components and code sharing in the front-end.

To compile the SCSS sources, run ./go build in the pixelated-user-agent/web-ui directory. This triggers a compass compile command, see the package.json.

Whenever you touch the User-Agent's CSS, please keep the following ideas in mind:

  • Predictable CSS means your rules behave as you’d expect. When you add or update a rule, it shouldn’t affect parts of your site that you didn’t intend. It also avoids cross-contamination by namespacing classes. A CSS rule should apply to one element, one type of mixin, etc.
  • Reusable CSS rules should be abstract and decoupled enough that you can build new components quickly from existing parts without having to recode patterns and problems you’ve already solved. Extend components with modifier classes. SASS allows to do that easily! You should never reach into an element from the parent selector, solely depending on where it's used.
  • Maintainable CSS means new components and features can to be added, updated or rearranged on our site without refactoring existing CSS. In order to do this, it is vital to avoid cross-contamination. If you want to replace a button with another one, this is possible because of a separation of positioning and visual representation.
  • Scalable CSS means our CSS architecture is easily approachable without requiring an enormous learning curve.

You'll find the SCSS files in pixelated-user-agent/web-ui/app/scss:

sandbox.scss (no imports, used in the iFrame sandbox in the read view)
style.scss (imports everything else)
|
|-- base
|   |-- _colors.scss
|   |-- _fonts.scss
|   |-- _scaffolding.scss
|
|-- mixins
|   |-- _position-helpers.scss 
|   |-- _tags.scss
|
|-- templates
|   |-- _no-content-placeholder.scss
|   |-- _unread-count.scss
|
|-- vendor
|   |-- _foundation.scss
|   |-- _reset.scss
|   |-- _scut.scss
|
|-- views
|   |-- _action-bar.scss (TODO: not yet refactored!)
|   |-- _close-button.scss
|   |-- _compose-button.scss (TODO: not yet refactored!)
|   |-- _compose-view.scss (TODO: not yet refactored!)
|   |-- _mail-list.scss
|   |-- _message-panel.scss
|   |-- _navigation.scss
|   |-- _no-mails-available.scss
|   |-- _no-message-selected.scss
|   |-- _read-view.scss
|   |-- _security-labels.scss
|
|-- _mixins.scss (TODO: not yet refactored!)
|-- _others.scss (misc styles)

More info on BEM:

Clone this wiki locally