/chilli_styleguide

Chilli website styleguide

Primary LanguageHTML

Tools use

  • PostCSS: Transforming styles with JS plugins
  • Gulp: Automate and enhance workflow

Chilli Styleguide

Copy design style from Money Advice Service (MAS) style guide.

Typography

Font Family

  • Primary font (body text): Source Sans Pro
  • Secondary font (heading text): Alegreya
  • Special font: AguafinaScript Regular

Text variants

  • Text mute
  • Menu text link
  • Dish name
  • Dish description
  • Meal title
  • Article heading
  • Article meta info
  • Text link

Lists

  • No bullet List
  • Bullet list
  • Sidebar list with bullet
  • Sidebar list no bullet

Forms

Form components will have to type

  • Form in light bg
  • Form in dark bg

Form components

  • Input field
  • Checkbox, Radio button
  • Select
  • Textarea

Buttons

  • Button in light bg
  • Button in dark bg
  • Success, danger, warning

Icons

Use FontAwesome.

Grid system

Use Foundation Grid or LostGrid

Notes

☀️ Keep project simple as possible ☀️

Gulp plugins

  • gulp-load-plugins: Automatically load any gulp plugins in your package.json.
  • gulp-postcss: gulp plugin to pipe CSS through several processors, but parse CSS only once.
  • gulp-plumber: Prevent pipe breaking caused by errors from gulp plugins.
  • gulp-sourcemaps: Source map support for Gulp.js.
  • wiredep: Wire Bower dependencies to your source code.
  • gulp-jade: Compile Jade templates .
  • browser-sync: Keep multiple browsers & devices in sync when building websites.
  • precss: Use Sass-like markup in your CSS.
  • gulp-uglify: Minify files with UglifyJS.
  • gulp-copy: Plugin copying files to a new destination and using that destination for other actions.

PostCSS plugins

  • autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use.
  • postcss-bem: PostCSS plugin implementing BEM as at-rules.
  • postcss-scss: tool that allows you to use Sass-like markup in your CSS files.
  • cssnano: A modular minifier, built on top of the PostCSS ecosystem.
  • stylelint: A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets.
  • postcss-font-magician: Magically generate all the @font-face rules.
  • postcss-pxtorem: A plugin for PostCSS that generates rem units from pixel units.

CSS Guide

  • Class naming follow BEM method.
  • Structure CSS follow SMACSS method.
  • Using relative unit (em, rem).

Misc

  • CSS class for styleguide need prefix (ex: .sg-something) to avoid conflict with components's class.