plexus-css

plexus-CSS was a CSS library and a visual styleguide for InVision and is now declared end of life.

End of Life

• All stakeholders have agreed that no changes apart from critical bug fixes will be done on them ever again.
• Do not use artifacts from this repository in new applications.
• Maintenance: No javascript library updates any more, especially no major version changes or updates of css-loader, sass-loader or resolve-url-loader.

Conventions for writing CSS

plexus-css follows the BEM methodology and takes some advice from cssguidelin.es and ITCSS.

Writing classes

• Use BEM to name your classes.

  • Block: .block
  • Element: .block__element – Nested inside a block
  • Modifier: .block--modifier or block__element--modifier

• Avoid nesting.

CSS spacing

To avoid pixel counting we use a pragmatic rule for margin and padding.

• Add margin and padding in five pixel steps
• This is correct: padding: 20px 25px
• This is wrong: padding: 18px 23px

Folder structure

plexus-css uses the folder structure advocated by ITCSS. You should use the same folder structure in your app if you are adding or extending modules.

1. Settings: Global variables, config switches like color-variables
2. Themes: Themes for our products
3. Tools: Default Sass mixins and functions
4. Base: HTML elements like h1 - h6 and inputs
5. Objects: Cosmetic-free design patterns like links or header
6. Components: Highly reusable elements for the UI like buttons or forms
7. Trumps: Helpers and overrides

Note that folders 4-7 are sorted by CSS specificity.

Development setup

Prerequisites

• Install npm and Git and Ruby and the bundler gem (gem install bundler)
• git clone <repository-url> this repository
• change to new directory
• bundle install
• yarn install

Get up and running

• yarn start

Open http://localhost:4000/styleguide in your web browser

Testing

• yarn test

This uses the stylelint linter for SCSS with the stylelint-config-standard configuration, and also eslint with airbnb style.

Building

• yarn build

Deployment

Bumping the version

Important: Do not use npm version patch/minor/major

This would bump the version and also tag the file, but we need to recreate the styleguide with the new version. If you do so, the tagged version will have an outdated styleguide version number.

Do it manually.