progress-style-guide

Style guide

You can run the style guide locally by running:

• npm install
• npm start
• Go to http://localhost:3000/styleguide/

Naming convention

We will use the following naming convention

component-name
component-name--modifierName
component-name_descendent
is-*

// utilities
u-*

// Extended
has-*
no-*
js-*

Variables

You can find the variables of the style guide inside the public/styles/variables.less. All the variables start with sg-* (Style Guide). The currently exposed variables are:

@sg-font-family
@sg-font-size
@sg-spacing

Publish

The code is published on npm, it will be automatically bundled into a css file during the publishing process.

git commit -m 'Changed something'

# For small changes
npm version patch
npm publish
git push origin master

# To push the tags in Bitbucket
git push --tags

API

You can also require the style guide and mount the express app on your server, check example/index.js

How to build UI

Spacing

• Default spacing should be the font-size, 16px here.
• If you want to add spacing to an element you should use a multiplier of @spacing, @spacing * 2, @spacing / 2
• For symmetrical spacing (both top/bottom or left/right) you should use padding (padding: @spacing 0)
• Always push down UI elements with a margin-bottom, it will make them fit coherently in a layout. If you want to customize the margin-bottom in the html template with the utility classes: u-mb1, u-mb2

Colors

• Don't create a color that is too close to another one
• Ban light grays, it has very low contrast and readability

Other

• Use pseudo-elements when you can so that you can toggle it with CSS classes (example: is-required)
• When you need a special case of a CSS element, either generalize it with a modifier class or create a utility class (reference: http://www.basscss.com/)