$black | #221f1f
$orange | #f16e20
$orangeDark | #dc5e13
$yellow | #f3bc4d
$sand | #eaddcd
$blueLight | #c4dff0
$blue | #8eb8d2
$blueDark | #0258c5
$navy | #123d59
$blueShadow | #6d9dbe
$orangeShadow | #b14708
$yellowShadow | #cc8546
$sandShadow | #b9b0a6
$greyLight | #979797
$grey | #5f5e5e
$greyDark | #474444
.bg-sand
.bg-blue
.bg-black
.bg-grey
.bg-yellow
h1: franklin-gothic-urw book | 30px | $black
h2: franklin-gothic-urw-condensed medium | 30px | $black
h3: franklin-gothic-urw medium | 24px | $black
h4: franklin-gothic-urw-condensed medium | 20px | $black
h5: franklin-gothic-urw-condensed medium | 18px | $black
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
.text-center: For center aligned text.
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!
.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.)
.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
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
We're using the grid system from Foundation 3. Read up on the documentation.
.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
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
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)