Features
Hi, this is a basic setup for the Alabanda style guide.
Typography
All text is set in Dosis with font-smoothing: antialised.
The base font-size is 1.25em, 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.
- Black
- Muted
- Primary
- Secondary
- Light
Buttons
All buttons have a disabled (opacity: .5) state.
Form elements
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.
The Grid
Example Grid Usage
Three Column Layout
<div class="row">
<div class="span-4 col"></div>
<div class="span-4 col"></div>
<div class="span-4 col"></div>
</div>