Examples of all CSS components and configuration.
Use to apply a background color to an element. Add your colors to the $bg-colors array in config/bg-colors.scss.
<div class="bg--white">I have a white background color</div>Use to give an element's text a different color. This class affects everything, including headings and links.
<div class="bg--lightgray color--white">
<h2>I have white</h2>
<p>Text and
<a href="#">links</a>
</p>
</div>Use to create labels that act as placeholders until the field is focused. Note that the field must also have a placeholder
<p class="floating-label">
<input type="email" name="email" id="styleguide-placeholder-label-example"
placeholder="This wont be shown but is required" required>
<label for="styleguide-placeholder-label-example">E-mail</label>
</p>Form styling.
<form method="post" action="">
<p>
<label> Search
<br>
<input type="search" name="q" placeholder="Search the site"> </label>
</p>
<p>
<label> Name
<br>
<input type="text" name="name" placeholder="eg. John Doe"> </label>
</p>
<p>
<label> Email
<abbr title="Required">*</abbr>
<br>
<input type="email" name="email" placeholder="eg. john.doe@example.com"
required> </label>
</p>
<p>
<label> Sex
<br>
<select name="sex">
<option value="f">Female</option>
<option value="m">Male</option>
</select>
</label>
</p>
<p> Smoker?
<br>
<label>
<input type="radio" name="smoker" value="1"> Yes</label>
<label>
<input type="radio" name="smoker" value="0"> No</label>
</p>
<p>
<label>
<span class="value">${age}</span> Age
<br>
<input type="range" name="age" min="1" max="150"> </label>
<strong class="error">You have to be at least 18 to conitnue</strong>
</p>
<p>
<label> Message
<br>
<textarea name="message" rows="3" cols="60" placeholder="Write your message here"></textarea>
</label>
</p>
<p>
<label>
<input type="checkbox" name="agree"> I agree</label>
</p>
<p>
<input type="submit" value="Go" class="button button--wide">
</p>
</form>Use to align elements in rows and columns. Perfect for use on ul/li setups or indeed any parent/child markup. Use bp--modifiers to set number of columns in different widths. Customize gutter and breakpoints in config file. You can also use ul {@include flex-grid(3)}.
<ul class="flex--2--tablet flex--3--laptop">
<li>
<img src="http://placehold.it/320x240" class="img--wide"> I'm two columns</li>
<li>
<img src="http://placehold.it/320x240" class="img--wide"> In low resolution</li>
<li>
<img src="http://placehold.it/320x240" class="img--wide"> But three columns</li>
<li>
<img src="http://placehold.it/320x240" class="img--wide"> In high</li>
<li>
<img src="http://placehold.it/320x240" class="img--wide"> Resolutions</li>
<li>
<img src="http://placehold.it/320x240" class="img--wide"> Cool?</li>
</ul>Uses inline-block to create a grid. Useful if you dynamically toggle elemens in the grid and need them to adapt to new positions. Note that @inline-grid sets the child element's font-size back to $font-size-default.
<ul class="inline-grid inline-grid--2--tablet">
<li>Two column grid</li>
<li>Two column grid</li>
<li>Two column grid</li>
<li>Two column grid</li>
</ul>Use to add icons to elements. Icons added to empty elements will have zero spacing around them whereas icons added to elements with content will have some spacing. Add icons to the icons.json file (using fontello.com) and Gulp takes care of the rest.
<p>
<a href="#" class="icon-facebook">Facebook</a>
<a href="#" class="icon-twitter">Twitter</a>
<a href="#" class="icon-facebook" title="Facebook"></a>
<a href="#" class="icon-twitter" title="Twitter"></a>
<button class="icon-search">Find</button>
<a href="#" class="icon-right icon--after">Icon after text</a>
</p>Allows you to use a figure element (and its img) as a background image.
<header class="color--white" style="position:relative; overflow:hidden">
<p>My background image is actually an img</p>
<p>Note that the styleguide example containers have a background
of their own which shines through here - make sure you
_don't_ have a background when you use this component
and it will look good</p>
<figure class="figure-background">
<img src="http://placehold.it/1920x1080">
</figure>
</header>Various helper classes for styling images.
<img src="http://placehold.it/100x100" class="img--round">
<img src="http://placehold.it/100x100" class="img--rounded">
<img src="http://lorempixel.com/800/600/nature" class="img--grayscale img--wide">Centers an element on the screen at a width of $site-width. Containers should be direct decendants of body/main (any full width element actually) and don't work properly when nested like this. You can also use @include container and pass an optional width;
<div class="container bg--white">
<h1>I'm centered</h1>
<p>In the middle of the page</p>
</div>Use to separate elements with a border. Can be used on a single element (or hr), or using --above or --below modifiers.
<p class="divider--below">I have a separator below me.</p>
<p>I'm just a normal paragraph</p>
<p class="divider--above">I have a separator above me.</p>
<p>Below me is a lone divider</p>
<hr>Use this class to add margin-bottom to an element.
<div class="card bg--white group--x-large">
<h2>I have margin</h2>
<p>More than usual</p>
</div>A full width section with loads of padding and white text. This is a typical UI component in modern websites and is often displayed at the top of the page.
<header class="hero">
<h2>I'm a hero</h2>
<p>With some content</p>
<figure>
<img src="http://placehold.it/1920x1080">
</figure>
</header>Creates a full width section with centered content (based on $site-width). Sections should be direct decendants of body/main (any full width element actually) and don't work properly nested like in the styleguide (that's why it looks broken here).
<div class="section bg--white">
<h2>I'm a section</h2>
<p>With some content</p>
</div>Use to apply a shadow to an element. Add your shadows to the $shadows array in config/shadows.scss.
<div class="bg--white shadow--4">I have a white background color and a level 4 shadow</div>Link styling. You can use the link class to make anything look like a link.
<a href="#">Normal link</a>
<span class="link">Not a link at all</span>
<a href="#" class="link--neutral">Link that looks like text</a>
<a href="#" class="link--underline">Link with underline</a>Various classes you can use on lists, or list like markup.
<h2>Pipe separated</h2>
<ul class="list--pipe-separated">
<li>Pipes</li>
<li>Separate</li>
<li>Me</li>
</ul>
<h2>Inline list</h2>
<ul class="list--inline text--center">
<li>Inline list</li>
<li>Inline list</li>
<li>Inline list</li>
<li>Inline list</li>
</ul>
<h2>Plain list</h2>
<ul class="list--plain">
<li>Plain list</li>
<li>Plain list</li>
<li>Plain list</li>
<li>Plain list</li>
</ul>
<h2>Bordered list</h2>
<ul class="list--border">
<li>Bordered list</li>
<li>Bordered list</li>
<li>Bordered list</li>
<li>Bordered list</li>
</ul>Use to create a popup. Works well with popup.js but isn't necessarily required.
<a href="#my-popup">Open popup</a>
<div class="popup" id="my-popup">
<div class="popup__content">
<a href="#" class="popup__close">×</a>
<h2>I'm a popup</h2>
<p>Built with CSS.</p>
</div>
</div>Use to create headings. H1-H6 automatically get the correct styling, however you can use the heading--X classes to make non-headings look like headings, and headings of one size appear to have a different size. You can also use @include heading;
<h1>I'm an H1</h1>
<h2>I'm an H2</h2>
<h3>I'm an H3</h3>
<h4>I'm an H4</h4>
<h5>I'm an H5</h5>
<h6>I'm an H6</h6>
<p class="heading--1">I'm a paragraph</p>Various helper classes for working with text.
<p class="text--center">This text is centered and
<strong class="text--upper">upper case</strong>
</p>
<p class="text--right text--large">This large text is right aligned.</p>
<p class="text--ellipsis">Regardless of how long this text gets it will never line break
regardless of how long this text gets it will never line
break etc etc.</p>Wrapping class for responsive, embedded videos (from https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php)
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JSuYuPz0dlU"
frameborder="0" allowfullscreen></iframe>
</div>Use to render a Google Map.
<div class="google-map" data-lat="40.7058253" data-lng="-74.1180864">
<img src="https://maps.googleapis.com/maps/api/staticmap?maptype=roadmap&center=40.7058253,-74.1180864&markers=40.7058253,-74.1180864&zoom=14&size=600x400&key=GOOGLE_MAPS_API_KEY"> </div>Styling for the Slick Carousel jQuery Plugin.
<div data-slideshow="3">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
<div>Slide 6</div>
</div>