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. Make sure you are signed in via npm login
. See npm documentation for more information.
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/
)