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