Why Gemfury?
Push, build, and install
RubyGems
npm packages
Python packages
Maven artifacts
PHP packages
Go Modules
Debian packages
RPM packages
NuGet packages
getfitter
getfitter / getfitter-elements ruby
Repository URL to install this package:
|
Version:
2.2 ▾
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Fitter Elements</title>
<link rel="stylesheet" href="/stylesheets/application.css">
</head>
<body>
<header class="page-toolbar">
<p class="page-toolbar-item"><a href="https://github.com/getfitter">GitHub</a></p>
</header>
<div class="outer-container">
<main id="page-container" role="main">
<header class="page-header">
<h1>Get Fitter Elements</h1>
<h2 class="subtitle">Layout, typography, colour and form styles</h2>
</header>
<hr>
<p class="lede">
This is a set of elements and styles used around <a href="https://getfitter.co/">
Get Fitter</a>. It's inspired by <a href="http://govuk-elements.herokuapp.com">
GOV.UK elements</a>, and the work done by both
<a href="https://gdstechnology.blog.gov.uk/2014/12/11/govuk-living-style-guide/">
GOV.UK</a> and
<a href="http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html">
Lonely Planet</a> on “living styleguides”.
</p>
<p class="lede">
It covers everything from standard typography, colours and form elements to
also describing how each element should be used and possible issues you
might come across.
</p>
<ol class="list-number">
<li><a href="#guide-layout">Layout</a></li>
<li><a href="#guide-typography">Typography</a></li>
<li><a href="#guide-color">Colour</a></li>
<li><a href="#guide-forms">Forms</a></li>
<li><a href="#guide-buttons">Buttons</a></li>
<li><a href="#guide-data">Data</a></li>
<li><a href="#guide-errors">Errors and validation</a></li>
<li><a href="#guide-misc">Misc</a></li>
</ol>
<div id="guide-layout">
<h2>1. Layout</h2>
<p>TBD.</p>
</div>
<div id="guide-typography">
<h2>2. Typography</h2>
<p>
Typography contains everything to do with the standard text units used
such as headers, paragraphs and lists.
</p>
<div class="guide-example">
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<p>A straightforward paragraph of text, which can contain <a href="#">links</a>
and <code>void main() {}</code> blocks. And then lists:</p>
<ul class="list-bullet">
<li>One</li>
<li>Two</li>
</ul>
<ol class="list-number">
<li>One</li>
<li>Two</li>
</ol>
</div>
</div>
<div id="guide-colour">
<h2 class="heading-large heading-with-border">3. Colour</h2>
<p>
This is the standard palette, which is extended with a few specific
colours where helpful.
</p>
<h3>Grayscale palette</h3>
<div class="guide-example">
<div class="swatch-wrapper">
<div class="swatch swatch-white"></div>
<ul>
<li><b>#FFFFF</b></li>
<li>rgb(255, 255, 255)</li>
<li>$white</li>
</ul>
</div>
<div class="swatch-wrapper">
<div class="swatch swatch-light-gray"></div>
<ul>
<li><b>#F7F7F7</b></li>
<li>rgb(247, 247, 247)</li>
<li>$light-gray</li>
</ul>
</div>
<div class="swatch-wrapper">
<div class="swatch swatch-medium-gray"></div>
<ul>
<li><b>#D8D8D8</b></li>
<li>rgb(216, 216, 216)</li>
<li>$medium-gray</li>
</ul>
</div>
<div class="swatch-wrapper">
<div class="swatch swatch-dark-gray"></div>
<ul>
<li><b>#404040</b></li>
<li>rgb(64, 64, 64)</li>
<li>$dark-gray</li>
</ul>
</div>
<div class="swatch-wrapper">
<div class="swatch swatch-black"></div>
<ul>
<li><b>#0C0C0C</b></li>
<li>rgb(12, 12, 12)</li>
<li>$black</li>
</ul>
</div>
</div>
<h3>Standard palette</h3>
<div class="guide-example">
<div class="swatch-wrapper">
<div class="swatch swatch-red"></div>
<ul>
<li><b>#D0021B</b></li>
<li>rgb(206, 0, 32)</li>
<li>$red</li>
</ul>
</div>
<div class="swatch-wrapper">
<div class="swatch swatch-green"></div>
<ul>
<li><b>#72D505</b></li>
<li>rgb(112, 216, 36)</li>
<li>$green</li>
</ul>
</div>
<div class="swatch-wrapper">
<div class="swatch swatch-blue"></div>
<ul>
<li><b>#4A90E3</b></li>
<li>rgb(84, 141, 225)</li>
<li>$blue</li>
</ul>
</div>
<div class="swatch-wrapper">
<div class="swatch swatch-orange"></div>
<ul>
<li><b>#FF5E3A</b></li>
<li>rgb(252, 93, 63)</li>
<li>$orange</li>
</ul>
</div>
</div>
<h3>Specific & Third Party Colours</h3>
<div class="guide-example">
<div class="swatch-wrapper">
<div class="swatch swatch-google-red"></div>
<ul>
<li><b>#DF4A32</b></li>
<li>rgb(220, 73, 54)</li>
<li>$google-red</li>
</ul>
</div>
<div class="swatch-wrapper">
<div class="swatch swatch-facebook-blue"></div>
<ul>
<li><b>#3B5998</b></li>
<li>rgb(64, 86, 151)</li>
<li>$facebook-blue</li>
</ul>
</div>
</div>
<h3>Web & <a href="http://sass-lang.com">Sass</a> Variables</h3>
<div class="guide-example">
<div class="swatch-wrapper">
<h4>Base Colours</h4>
<div class="swatch swatch-page-color"></div>
<ul>
<li><b>#FFFFFF</b></li>
<li>rgb(255, 255, 255)</li>
<li>$page-color</li>
</ul>
<div class="swatch swatch-base-font-color"></div>
<ul>
<li><b>#0C0C0C</b></li>
<li>rgb(12, 12, 12)</li>
<li>$base-font-color</li>
</ul>
<div class="swatch swatch-base-border-color"></div>
<ul>
<li><b>#D8D8D8</b></li>
<li>rgb(216, 216, 216)</li>
<li>$base-border-color</li>
</ul>
</div>
<div class="swatch-wrapper">
<h4>Link Colours</h4>
<div class="swatch swatch-link-color"></div>
<ul>
<li><b>#3E93E4</b></li>
<li>rgb(74, 144, 226)</li>
<li>$link-color</li>
</ul>
<div class="swatch swatch-link-hover-color"></div>
<ul>
<li><b>#155796</b></li>
<li>rgb(34, 84, 149)</li>
<li>$link-hover-color</li>
</ul>
<div class="swatch swatch-link-active-color"></div>
<ul>
<li><b>#155796</b></li>
<li>rgb(34, 84, 149)</li>
<li>$link-active-color</li>
</ul>
<div class="swatch swatch-link-visited-color"></div>
<ul>
<li><b>#155796</b></li>
<li>rgb(34, 84, 149)</li>
<li>$link-visited-color</li>
</ul>
</div>
<div class="swatch-wrapper">
<h4>Error Colours</h4>
<div class="swatch swatch-alert-color"></div>
<ul>
<li><b>#FFF6BF</b></li>
<li>rgb(254, 247, 193)</li>
<li>$alert-color</li>
</ul>
<div class="swatch swatch-error-color"></div>
<ul>
<li><b>#FBE3E4</b></li>
<li>rgb(250, 227, 228)</li>
<li>$error-color</li>
</ul>
<div class="swatch swatch-notice-color"></div>
<ul>
<li><b>#E5EDF8</b></li>
<li>rgb(230, 237, 248)</li>
<li>$notice-color</li>
</ul>
<div class="swatch swatch-success-color"></div>
<ul>
<li><b>#E6EFC2</b></li>
<li>rgb(229, 240, 195)</li>
<li>$success-color</li>
</ul>
</div>
</div>
</div>
<div id="guide-forms">
<h2>4. Forms</h2>
<p>
Forms are a necessary requirement for any web application. Just the basics
here, but with enough flexibility get going.
</p>
<div class="guide-example">
<fieldset>
<form>
<div class="form-group">
<label for="text_field">Text Field</label>
<p class="form-hint">This gives a bit more explanation.</p>
<input id="text_field" type="text">
</div>
<div class="form-group">
<label for="text_area">Text Area</label>
<textarea id="text_area"></textarea>
</div>
<div class="form-group">
<label for="select_element">Select Element</label>
<select name="select_element">
<optgroup label="Option Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Option Group 2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>
<div>
<div class="form-group">
<label for="radio_buttons">Radio Buttons</label>
<label>
<input type="radio" name="radio_button" value="radio_1">
Radio 1
</label>
<label>
<input type="radio" name="radio_button" value="radio_2">
Radio 2
</label>
<label>
<input type="radio" name="radio_button" value="radio_3">
Radio 3
</label>
</div>
<div class="form-group">
<label for="checkboxes">Checkboxes</label>
<label>
<input type="checkbox" name="checkboxes" value="check_1">
Checkbox 1
</label>
<label>
<input type="checkbox" name="checkboxes" value="check_2">
Checkbox 2
</label>
<label>
<input type="checkbox" name="checkboxes" value="check_3">
Checkbox 3
</label>
</div>
<div class="form-group">
<label for="text_static">Static Text</label>
<p id="text_static" class="form-static">email@example.com</p>
</div>
<div class="form-group">
<input name="commit" type="submit" value="Submit">
</div>
</form>
</fieldset>
</div>
</div>
<div id="guide-buttons">
<h2>5. Buttons</h2>
<p>
Buttons are used for lots of things. Shown here as a way to mark up link
tags, too. Normal buttons should be blue, destructive actions (or those
which would not usually be desired) should be red.
</p>
<div class="guide-example">
<p><button>Standard Button</button></p>
<p><button disabled>Disabled Button</button></p>
<p><a href="#" class="button">Link Button</a></p>
<p><button class="secondary">Secondary Button</button></p>
<p><a href="#" class="secondary">Secondary link</a></p>
<p><button class="destructive">Destructive Button</button></p>
<p><a href="#" class="button destructive">Destructive Link Button</a></p>
<p><a href="#" class="destructive">Destructive Link</a></p>
</div>
</div>
<div id="guide-data">
<h2>6. Data</h2>
<p>
This section is all about tables and presenting data in a readable manner.
</p>
<div class="guide-example">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="guide-errors">
<h2>7. Errors and validation</h2>
<p>
The most common form of error (and also success) handling is the
“flash”. This is usually shown at the top of the page after
carrying out an action.
</p>
<div class="guide-example">
<div class="flash-success">
<span>This is a success message <a href="#">with a link</a></span>
</div>
<div class="flash-error">
<span>This is an error message <a href="#">with a link</a></span>
</div>
<div class="flash-notice">
<span>This is an notice message <a href="#">with a link</a></span>
</div>
<div class="flash-alert">
<span>This is an alert message <a href="#">with a link</a></span>
</div>
</div>
</div>
<div id="guide-misc">
<h2>8. Misc</h2>
<h3>8.1 Pagination</h3>
<div class="guide-example">
<nav class="pagination">
<ul>
<li class="page current">1</li>
<li class="page">
<a rel="next" href="#?page=2&per=25">2</a>
</li>
<li class="page">
<a href="#?page=3&per=25">3</a>
</li>
<li class="next">
<a rel="next" href="#?page=2&per=25">Next ›</a>
</li>
<li class="last">
<a href="#?page=3&per=25">Last »</a>
</li>
</ul>
</nav>
</div>
</div>
</main>
</div>
</body>
</html>