Think Logistics Style Guide

Colours

Core Colours

Supplementary Colours

Patterns

Typography

Heading One

h1: franklin-gothic-urw book | 30px | $black

Heading Two

h2: franklin-gothic-urw-condensed medium | 30px | $black

Heading Three

h3: franklin-gothic-urw medium | 24px | $black

Heading Four

h4: franklin-gothic-urw-condensed medium | 20px | $black

Heading Five

h5: franklin-gothic-urw-condensed medium | 18px | $black

Heading Six
Make sure you check to see what this looks like on more than one line, even though I doubt that'll ha

h6: franklin-gothic-urw-condensed book | 13px | $black

This is a sample paragraph. I do not clearly remember the arrival of the curate, so that probably I dozed. I became aware of him as a seated figure in soot-smudged shirt sleeves, and with his upturned, clean-shaven face staring at a faint flickering that danced over the sky. The sky was what is called a mackerel sky--rows and rows of faint down-plumes of cloud, just tinted with the midsummer sunset.

Content can contain inline styles such as hyperlinks, strong text and emphasizied text

p: franklin-gothic-urw book | 16px | $grey

An introductory paragraph is a great way to summarise the content before the reader really digs into the detail of your story. With a .intro class attached, this special paragraph can have a unique text size while inheriting its other attributes from it's parent.

p.intro: franklin-gothic-urw-condensed book | 22px | $black

" This is a blockquote, an element that represents a section that is being quoted from another source."

blockquote: franklin-gothic-urw-condensed book | 20px | $black | uppercase

Typography Utliity Classees

.text-center: For center aligned text.

Icons

All icons should be added to the custom built icon font, using the IcoMoon generator. Use the config file found in the _fonts folder to load and modifty the font on IcoMoon. Make sure to save and update the config file, font files and _type.scss when you're done!

Twitter

.icon-twitter: Use IcoMoo provided classes to add icons where the mapped character shouldn't appear in the markup. (i.e. This shouldn't read as "t Twitter", icon is added via CSS only)

.icon: Use a generic icon class and a character entity when the entity is meaningful in your markup. (i.e. ⇒ is an arrow character in all font-faces, so it's safe to use in markup.)

Components

Buttons

Default Button

.button

Black Button

.button-black

.arrow-button: use an HTML character entity of ⇒ for right arrow

.arrow-button-blue: use an HTML character entity of ⇓ for down arrow

+

.plus-button: use a plus sign wrapped in a span <span>+<span> so that the plus sign can be rotated to become an x

+

.plus-button.rotated: add a class of rotated to turn into a close button. Will animate with CSS transitions if added dynamically.

+

.plus-button-sm: Used in lists, so you'll have to attach the hover styles to the hover state via the parent list item (use @include plus-button-sm-hover;).

nav.tabs: active tab has a class of .active

Forms

Form Title

Form Label

form, label, input, select, textarea: default styles are mainly for appearance | add layout styles using grid markup or custom css
.form-title: use whichever heading markup is appropriate and add this class to change colour & bottom margin
input[type="submit"]: use the standard .button class in your markup

Layout

Grid

We're using the grid system from Foundation 3. Read up on the documentation.

Helpful Classes and Mixins

You may find the following classes useful for layout:

.clearfix | @include clearfix(); Applies a micro clearfix. Add directly in markup with a class, or include the mixin in Sass.

.bottomless: Removes a bottom margin from an element which has one by default

Islands

Themed Islands

Use the panel mixin to quickly generate themed islands (standalone layout blocks). Automatically includes a bottom margin of 3px so that the shadow below is alwasy visible, but you can disable (if you're adding your own margins) using a second "false" param.

Eg. 1 @include panel("blue");

Eg. 2 @include panel("yellow", false);

Theme options: blue | yellow | orange

Adding Notches

Add matching arrow notches to any island with the notch mixin. Specify theme, (optional) position and (optional)width.

Eg. 1 @include notch("blue", "top", 12px);

Eg. 2 @include notch("blue", "top");

Eg. 3 @include notch("orange");

Theme options: blue | yellow | orange

Position options: bottom (defult) | top

Width: ##px (defaults to 8px if not specified)