You are here

Elements style guide

This style guide takes its cue from modular/atomic design concepts. The idea here is that by giving our vanilla site a vanilla style guide, it is something that we can use again to quickly edit and apply to a new site.

Think basic HTML elements and utility classes:

HTML elements: p, a, img, blockquote
Utility classes: small/med/large text, grid columns, pull-quotes, listing containers.

Design elements - e.g. colours, typography - are used by components, which are used by regions and so on.

Colours:


Icons:


Fonts:

Lato Regular

Lato Italic

Lato Bold Italic

Dancing Script

Buttons:


Alert Boxes:

Great Success!

Epic Fail!


Text Fields / Forms:


Selects:


Checkboxes:

Checkbox 1

Checkbox 2

Checkbox 3


Radios:

Radio 1

Radio 2

Radio 3


Headings:

Heading h1

Tumblr YOLO health goth, craft beer fixie Blue Bottle sustainable plaid. Put a bird on it butcher chillwave, banjo Brooklyn mustache irony try-hard freegan organic scenester PBR&B Echo Park. Carles salvia artisan Neutra, scenester sriracha skateboard High Life. Taxidermy beard four dollar toast farm-to-table, four loko hashtag fanny pack slow-carb vinyl kitsch. Kitsch hashtag dreamcatcher semiotics, salvia street art you probably haven't heard of them tote bag iPhone Etsy gentrify. Freegan Schlitz drinking vinegar chillwave. Wayfarers messenger bag literally lo-fi, meh forage DIY street art hella whatever bitters.

Heading h2

Blue Bottle Godard American Apparel 8-bit, cold-pressed artisan ethical Etsy sriracha lumbersexual. Single-origin coffee sriracha paleo irony, mlkshk mustache cronut lomo. Chambray photo booth kale chips food truck beard, wolf Austin letterpress pickled blog slow-carb readymade messenger bag farm-to-table. Hashtag letterpress lomo, flannel crucifix pug ennui small batch XOXO craft beer church-key. PBR&B YOLO before they sold out fanny pack seitan church-key. Plaid Blue Bottle Pinterest, flannel kale chips kogi put a bird on it gluten-free Echo Park narwhal Intelligentsia Neutra banh mi 90's. Locavore Intelligentsia Schlitz quinoa Truffaut.

Heading h3

Mustache Godard master cleanse, Austin semiotics Shoreditch fap asymmetrical cornhole. Shoreditch YOLO DIY craft beer chillwave. Photo booth PBR chillwave paleo. Mlkshk leggings Helvetica, authentic banjo raw denim locavore four dollar toast asymmetrical. Scenester farm-to-table pop-up, fashion axe beard sriracha slow-carb 90's ennui heirloom. Migas salvia typewriter, normcore church-key post-ironic flexitarian tilde bicycle rights cray stumptown organic dreamcatcher Wes Anderson polaroid. Wayfarers Portland cred brunch slow-carb Banksy fap cardigan four dollar toast PBR ugh.

Heading h4

Helvetica vegan DIY, lumbersexual whatever American Apparel drinking vinegar. 8-bit cronut slow-carb flannel, four dollar toast whatever Kickstarter tilde ennui roof party XOXO. Pork belly polaroid bitters Truffaut leggings quinoa. Pickled cardigan chambray sriracha Pinterest, heirloom viral slow-carb actually try-hard hoodie Helvetica. Mlkshk cred lomo stumptown, kitsch keytar keffiyeh selfies chambray polaroid occupy shabby chic pug Echo Park. Tofu keffiyeh readymade tousled authentic Truffaut Shoreditch, letterpress gastropub seitan blog. Typewriter squid chillwave banj

Heading h5

Leggings farm-to-table Bushwick, tattooed roof party YOLO ugh asymmetrical Schlitz hashtag McSweeney's flexitarian. Selfies VHS Williamsburg, taxidermy salvia flexitarian dreamcatcher Pinterest Tumblr Schlitz twee tattooed beard Odd Future single-origin coffee. Mustache gastropub deep v before they sold out. Pour-over mlkshk Austin art party, blog mixtape tote bag. Selfies direct trade try-hard kitsch hella cray. Cornhole photo booth freegan deep v Banksy, 90's shabby chic paleo VHS pork belly wolf tattooed authentic yr readymade. Fixie tousled seitan PBR flexitarian.

Heading h6

Cornhole crucifix Kickstarter Vice put a bird on it kitsch, Carles photo booth post-ironic four dollar toast roof party Pinterest butcher. Tilde shabby chic American Apparel, viral try-hard Schlitz taxidermy brunch lumbersexual meh ennui master cleanse roof party Kickstarter. Vice selfies deep v 3 wolf moon banh mi Echo Park, tattooed next level XOXO mumblecore fixie. Typewriter literally put a bird on it, pickled keytar tote bag hoodie hella High Life vinyl artisan butcher letterpress meggings. Salvia tilde Helvetica, butcher ugh freegan roof party disrupt art party chillwave pop-up. Heirloom Vice flexitarian, meditation bespoke umami YOLO. Banh mi Tumblr semiotics, Pitchfork cardigan Marfa cliche lo-fi Godard mumblecore bespoke health goth umami.

Paragraph:

Before they sold out hoodie brunch seitan cronut, butcher skateboard typewriter food truck. Locavore Austin plaid, banh mi actually Vice pork belly Tumblr chia brunch single-origin coffee whatever. Typewriter PBR DIY cray +1 umami. Cray forage sriracha, swag irony lomo Echo Park. Mixtape mustache Banksy four dollar toast. Stumptown before they sold out migas freegan photo booth Banksy hella. Ennui skateboard pour-over, Helvetica single-origin coffee viral chillwave umami drinking vinegar.

Blockquote:

Kickstarter locavore PBR&B McSweeney's gentrify, single-origin coffee actually cold-pressed retro meditation roof party street art meh VHS. Fanny pack tousled butcher four loko +1, wolf ennui viral Neutra Truffaut roof party. Bespoke four loko sustainable master cleanse, beard flannel keytar tofu wayfarers bitters. Typewriter meh direct trade fap meditation, tote bag +1 retro crucifix Godard narwhal Odd Future. Crucifix cardigan authentic, dreamcatcher fixie ugh direct trade Thundercats +1 pork belly. Street art squid dreamcatcher, pop-up try-hard listicle shabby chic sartorial DIY tofu. Chillwave 90's Brooklyn pop-up, flexitarian four loko asymmetrical kale chips Neutra.

Utility Classes

Responsive Columns

Include div wrapper.

.small-col

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.small-col

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.small-col

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.small-col

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.small-col

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.small-col

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

Include div wrapper.

.med-col

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.med-col

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.med-col

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

Include div wrapper.

.large-col

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.large-col

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

Components

Listings

.listing

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.listing

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.listing

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.listing

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.listing

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

.listing

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus.

Slideshow