node package manager

fido-styleguide

Fido Style Guide

Built with Grunt

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
  1. Sass

Getting Started

  1. Clone the repository: git clone git@github.com: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

Polyfills

The following scripts are included for IE8 and below:

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.