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
Tayane Fernandes edited this page May 2, 2017 · 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. Again in January '17, we began to migrate the new components to ReactJS and Webpack, which also led to the restructuring of the CSS to follow the new component-based architecture.

To compile the SCSS sources from before the migration to Webpack, run npm run build:compass in the pixelated-user-agent/web-ui directory. This triggers a compass compile command, see the package.json. For the newer components, the SCSS is bundled with the JS, so a simple npm run build should take care of all bundling for front-end development.

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 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, or in the same folder as the JS components inside the pixelated-user-agent/web-ui/src folder.

More info on BEM:

Login and Account Recovery Pages

For those pages we follow the "Mobile First" approach, that is designing for the smallest screen and adapting for the big screens.

Mobile:

Tablets:

Desktop:

We are using media queries to make it responsive, for example:

@media only screen and (min-width : 500px) {
  form {
    display: flex;
    flex-direction: column;

    .input-field-group, .submit-button, .link-content {
      width: 70%;
      align-self: center;
    }
  }
}

@media only screen and (min-width : 960px) {
  .backup-email-container{
    width: 60%;
    max-width: 700px;
    padding: 3em;
    align-items: flex-start;
    flex-direction: row;
  }
}
Clone this wiki locally