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.
This is a neutral alert, wow! × This is a success alert. × This is a error alert. ×
Vers le haut
Partager