Client Style Guide
This style guide was built with Foundation for Sites. For more information on how to use this responsive front-end framework, check out the documentation.
This style guide was built with Foundation for Sites. For more information on how to use this responsive front-end framework, check out the documentation.
Below is a list of the templates available in the design system. Components can be assembled into additional templates. And templates can be used for purposes other than what is implied by their name.
Problem: You've got tons of content, each needing different sized cells, and don't know how to quick and easily get it all done. Solution: The awesome XY grid!
The grid is built around two key elements: grid-x and cells. grid-container create a max-width and contain the grid, and cells create the final structure. Everything on your page that you don't give a specific structural style to should be within a grid-x or cell.
In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells.
Using this framework is easy. Here's how your code will look when you use a series of <div> tags to create cells.
<div class="grid-x">
<div class="cell small-6 medium-4 large-3">...</div>
<div class="cell small-6 medium-8 large-9">...</div>
</div>In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells.
<div class="grid-x">
<div class="cell small-8">8
<div class="grid-x">
<div class="cell small-8">8 Nested
<div class="grid-x">
<div class="cell small-8">8 Nested Again</div>
<div class="cell small-4">4</div>
</div>
</div>
<div class="cell small-4">4</div>
</div>
</div>
<div class="cell small-4">4</div>
</div>As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes.
<div class="grid-x">
<div class="cell small-2">2</div>
<div class="cell small-10">10, last</div>
</div>
<div class="grid-x">
<div class="cell small-3">3</div>
<div class="cell small-9">9, last</div>
</div>Below you can find the different values we created that support the primary color variable you can change at any time in _settings.scss
This design uses Helvetica Neue for headings and paragraph text.
Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest)
Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the web, we follow similar conventions.
These buttons are primary calls to action and should be used sparingly. Their size can be adjusted with the .tiny, .small, and .large classes.
<a href="javascript:void(0)" class="primary large button">Large button</a>
<a href="javascript:void(0)" class="primary button">Regular button</a>
<a href="javascript:void(0)" class="primary small button">Small button</a>
<a href="javascript:void(0)" class="primary tiny button">Tiny button</a>These buttons are used for less important, secondary actions on a page.
<a href="javascript:void(0)" class="secondary large button">Large button</a>
<a href="javascript:void(0)" class="secondary button">Regular button</a>
<a href="javascript:void(0)" class="secondary small button">Small button</a>
<a href="javascript:void(0)" class="secondary tiny button">Tiny button</a>Use forms to allow users to interact with the site and provide information to the company.
A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order):
Make forms great and easy to use with the following rules:
<ul class="inline-list">.Check out the Foundation Docs to learn about how flexible our forms are for creating different layouts. It works perfectly with the grid to meet all your form needs.
Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:
.medium-6, .small-6.<form>
<div class="grid-x">
<div class="cell large-12">
<label>Label</label>
<input type="text" placeholder="placeholder">
</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell large-6">
<label>Label</label>
<input type="text" placeholder="placeholder">
</div>
<div class="cell large-6">
<label>Label</label>
<div class="input-group">
<input class="input-group-field" type="text" placeholder="placeholder">
<span class="input-group-label">.com</span>
</div>
</div>
</div>
<div class="grid-x">
<div class="cell large-12">
<label>Select Box</label>
<select>
<option value="good">Go od</option>
<option value="better">Better</option>
<option value="best">Best</option>
</select>
</div>
</div>
<div class="grid-x">
<div class="cell large-6">
<label>Choose Your Favorite</label>
<input type="radio" name="radio1" value="radio1" id="radio1"><label for="radio1">Red</label>
<input type="radio" name="radio2" value="radio2" id="radio2"><label for="radio2">Blue</label>
</div>
<div class="cell large-6">
<label>Check these out</label>
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
</div>
</div>
<div class="grid-x">
<div class="cell large-12">
<label>Textarea Label</label>
<textarea placeholder="placeholder"></textarea>
</div>
</div>
</form>