Fido Style Guide
Requirements
Ensure that the following is installed on your computer:
- Ruby is pre-installed on Mac
Getting Started
- Clone the repository:
git clone git@github.com:we-are-next/fido-styleguide.git
- Change to the directory you cloned the repository into: e.g.
cd fido-styleguide
- Install the required dependencies:
npm install
- Start a local server:
npm start
Features
- Mobile first approach:
- Layout-specific media queries with breakpoints introduced as needed
- Sass to preprocess CSS with:
- Imports, mixins and nesting
- Configurable variables:
- Breakpoints, colors, font stacks and z-indexes
- Utility classes to assist with:
- Color, display and visibility of elements, responsive embeds and typography
- HTML code samples for all elements, patterns and forms
- Template for previewing the style of typographic markup
Components
Polyfills
The following scripts are included for IE8 and below:
Linting
- CSS:
grunt csslint:build
- JavaScript:
grunt eslint
Publishing Releases
First make sure you have the correct environment variables setup.
cp .env.example .env
Then increment the package version and add a git tag, you can do this manually or using something like cut-release. Please try and stick to semver as much as possible when picking a new version number.
cut-release
Next up you'll need to run the release
task.
grunt release
Once that's done, please create a new release on GitHub.