Helpful
Hi, this is a basic setup for the Helpful style guide. Please feel free to fork this code pen as seen neccessary. Check out the WIP #97 on Assembly.
Typography
All text is set in Open Sans with font-smoothing: antialised.
The base font-size is 18px, with a line-height of 1.45.
Links don't have a text-decoration: underline, but a border-bottom instead, with a slightly more transparent version of the color of the text (see color section).
Heading One
An example paragraph with strong text, emphasized text and a link, spanning multiple lines so you can see the line-height.
Heading Two
An example paragraph with strong text and emphasized text, spanning multiple lines so you can see the line-height.
Heading Three
An example paragraph with the muted class. It has strong text and emphasized text, spanning multiple lines so you can see the line-height.
Heading Four
An example paragraph with strong text and emphasized text, spanning multiple lines so you can see the line-height.
Heading Five
An example paragraph with strong text and emphasized text, spanning multiple lines so you can see the line-height.
Heading Six
An example paragraph with strong text and emphasized text, spanning multiple lines so you can see the line-height.
Color
Never use full black, instead opt for #333 or maybe even a tinted grey. There are two accent colors: primary for main actions and secondary for other actions.
Basic text links use the secondary color.
If you need a tinted version (like for drop shadows, see buttons section), use SASS darken($color, 15%).
- Black
- Muted
- Primary
- Secondary
Buttons
All buttons have a disabled (opacity: .5) state.
Buttons get a little offset look with a 2px box-shadow on the y-axis in 15% darkened background-color.
Form elements
<form action="#" class="example">
<input type="text" name="name" id="text1" placeholder="Placeholder" />
<input type="text" name="name" id="text2" placeholder="Placeholder" />
<input type="text" name="name" id="text3" placeholder="Placeholder" />
<fieldset> <legend>Radio Label (legend in html)</legend>
<input type="radio" name="radio" id="radio1" />
<input type="radio" name="radio" id="radio2" />
</fieldset> <fieldset> <legend>Checkbox Label (legend in html)</legend>
<input type="checkbox" name="option[]" id="option1" />
<input type="checkbox" name="option[]" id="option2" />
</fieldset>
- <input type="submit" class="btn" value="Multiple buttons?" />
- <input type="submit" class="btn btn-muted" value="Hell yeah!" />
</form>
Alerts
Alerts are used for system messages to the user.
