Fido Style Guide

Requirements

Ensure that the following is installed on your computer:

1. Git
2. Node.js
3. RubyInstaller for Windows

• Ruby is pre-installed on Mac

4. Sass

Getting Started

1. Clone the repository: git clone [email protected]:we-are-next/fido-styleguide.git
2. Change to the directory you cloned the repository into: e.g. cd fido-styleguide
3. Install the required dependencies: npm install
4. 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

• Normalize.css
• jQuery
• Circliful
• Modal
• Placeholder
• Slick
• Tooltip

Polyfills

The following scripts are included for IE8 and below:

• html5shiv
• matchMedia.js
• requestAnimationFrame
• Respond.js

Linting

1. CSS: grunt csslint:build
2. 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.