Copy design style from Money Advice Service (MAS) style guide.
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.
Use Foundation Grid or LostGrid
☀️ Keep project simple as possible ☀️
- 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.
- 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.
- Class naming follow BEM method.
- Structure CSS follow SMACSS method.
- Using relative unit (em, rem).
- CSS class for styleguide need prefix (ex: .sg-something) to avoid conflict with components's class.