$blue | #198aaa
$orange | #df7255
$green | #39927e
$black | #3d3d3d
$taupe | #858176
$blueLight | #71d4f0
$blueDark | #0b486c
$greenLight | #4bae98
$grey | #c3c2be
h1: PMN Caecilia Roman | 50px | $black
h2: PMN Caecilia Roman | 30px | $black
h3: PMN Caecilia Roman | 21px | $black
h4: PMN Caecilia Roman | 18px | $black
h5: PMN Caecilia Roman | 16px | $black
h6: Lato Normal | 12px | $taupe | uppercase
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: Lato Normal | 16px | $black
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: Lato Book | 20px | $black
" This is a blockquote, an element that represents a section that is being quoted from another source."
blockquote: PMN Caecelia Light | 18px | $black
.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 vendor/_icomoon.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.)
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 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.
@include hidden(); Visually hide an element but keep it visible to screen readerss.
.bottomless: Removes a bottom margin from an element which has one by default