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.
Conventions for writing CSS
Use BEM to name your classes.
.block__element– Nested inside a block
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
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.
- Settings: Global variables, config switches like color-variables
- Themes: Themes for our products
- Tools: Default Sass mixins and functions
- Base: HTML elements like h1 - h6 and inputs
- Objects: Cosmetic-free design patterns like links or header
- Components: Highly reusable elements for the UI like buttons or forms
- Trumps: Helpers and overrides
Note that folders 4-7 are sorted by CSS specificity.
- Install npm and Git and Ruby and the bundler gem (
gem install bundler)
git clone <repository-url>this repository
- change to new directory
Get up and running
Open http://localhost:4000/styleguide in your web browser
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.