frs-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/frs-style/variables.scss. 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

Debugging

If you're getting an unexpected token error you may be using the wrong versions of node and npm. If you're using nvm you can run nvm use in the project directory to use a compatible version.

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.

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/)