Elements

This is a set of elements and styles used around Get Fitter. It's inspired by GOV.UK elements, and the work done by both GOV.UK and Lonely Planet on "living styleguides".

It covers everything from standard typography, colours and form elements to also describing how each element should be used and possible issues you might come across.

Usage

There's two parts to Elements; a set of reusable styles and a live guide to those styles.

A live version exists at: http://getfitter-elements.herokuapp.com.

with Rails (>= 4)

It's structured to add itself to the Sprockets asset path when including as a gem, so just add it as a normal dependency to your Gemfile and then add to your application.css.scss like so:

@import 'elements';

Contributing

There's a built in Rack application which allows this to be self-hosting. You can run this locally by doing the following:

bundle exec rackup

A few rules:

1. Ensure that new stylesheets are referenced in: app/assets/stylesheets/_elements.css.scss
2. Ensure you don't change anything in either the bourbon or neat directories.
3. If you're adding new styles, make sure they're given an example in index.html.erb.

Updating Dependencies

Bourbon and Neat can be updated independently of the rest of the project. They're not included formally on the assumption that this should be manual (in the possibility of breaking changes).

gem install bourbon
gem install neat

Then run bourbon install and neat install to overwrite their relevant directories. Following this, check the local copy still works and fix any deprecation warnings.

Authors

• Nick Charlton nick@nickcharlton.net

License

Copyright (c) Nick Charlton 2014. MIT Licensed.

Includes Bourbon & Neat for SASS mixins and the grid framework.