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.Default buttonDefault disabled buttonSecondary buttonSecondary button disabledMuted buttonMuted button disabled
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!" />
Alerts
Alerts are used for system messages to the user.
Partager