Style Guide

This page outlines the global styles and components for the site. Please keep it updated and use as a reference for building new pages - in terms of components and code style. Happy stylin'.

For a reference on code style, check out the template and stylesheet for this style guide: /assets/scss/global/_style-guide.scss

h1 main heading

h2 sub heading

h3 small heading

h4 feature heading

A paragraph of lead-in copy is slightly larger than normal.

A paragraph of body copy looks like this, although no-one really reads much of it, because, y'know, text is boring to read, innit?

<!-- A lead in paragraph -->
<p class="lead">lorem ipsum</p>

<div class="page__intro">
  <?php the_content(); ?>
</div>

.lead,
.page__intro p:first-child,
.page__intro p:first-of-type {
  font-size: rem-calc($font-size-intro);
  line-height: rem-calc($font-leading-intro);
}
  • Unordered list item
  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item

Blockquote:
I like leaving Big Fish so much, I've done it 3 times.

Guy Routledge

Colours

Colors are stored as Sass variables eg. $color-brand and $color-hover

Buttons & Links

This is a paragraph of text with a link in it.

CTA

Primary CTA

Code example

<a class="button" href="#">CTA</a>
<a class="button button--primary" href="#">Primary CTA</a>

Form styles

When creating forms, you will need to add a couple of CSS classes in gravity forms for checkboxes and select menus.

.form__checkbox { }
.form__select { }

The Grid

The 12-column responsive grid has been made using Foundation mixins using the BEM naming convention.

Mobile, tablet and desktop classes can be combined to change the layout of columns on devices with different screen sizes.

Code example:

<div class="grid__row">
  <div class="grid__column grid__mobile--12 grid__desktop--12">12</div>
</div>
<div class="grid__row">
  <div class="grid__column grid__mobile--3 grid__tablet--4">4</div>
  <div class="grid__column grid__mobile--3 grid__tablet--4">4</div>
  <div class="grid__column grid__mobile--6 grid__tablet--4">4</div>
</div>

For more information on the grid, check out http://foundation.zurb.com/docs/components/grid.html

12
6
6
4
4
4
3
3
3
3
4
8
9
3
12

Code Style

As Foundation makes use of the multi-class pattern, the rest of the site will also use this style for creating and using modules.

As such, over-use of @extend should be avoided but can be used for things like .clearfix as this is so common, it can clutter the markup unnecessarily.

To keep things more readable - a module based naming convention is used (see below).

Naming convention

BEM

To keep in the multi-class CSS approach of Foundation, but maintain some degree of consistency and logic, the site has been architected using the BEM naming methodology - Block, Element, Modifier pattern.

.module { }
.module__element { }
.module--modifier { }

For example, taking the media object:

.media {
  // container for the media module
}
.media__img {
  // the image component of the module
  // floated to the left by default
}
.media__content {
  // the text content of the module
}
.media--flipped {
  // a modified version of .media where the .media__img
  // is floated to the right instead
}

Sass Variables

Sass variables, found in assets/scss/includes/_variables.scss use the following naming convention:

  • $color-
    for colours
  • $font-
    for font families, size, leading etc.
  • $image-
    for paths to images etc.
  • $global-
    for vertical rhythm, padding etc.
  • $media-
    for common media query breakpoints (in ems)

Javascript

Javascript concatenation, minification and linting is handled by Grunt. See the Gruntfile for more info or checkout the Readme.

Custom scripts are found in the assets/js/roddas folder and use the following pattern for separating concerns into different files while allowing you to use properties and methods of the `roddas` object across multiple files.

(function($){

  var roddas = window.roddas || roddas || {};

  roddas.foo = {
    bar: function(){
      // do stuff
    },
    init: function(){
      roddas.foo.bar();
    }
  };

  window.roddas = roddas;

  // On DOM ready run roddas.foo.init()
  $( roddas.foo.init );

})(jQuery);