Typography The basic styles
Each of the h*
are controlled by two vaiables that control your font-size and your line-height, and as a result, it defines the appearance of your text. In addition, the rest of the text is controled by the styles applied to the body
tag.
Heading <h1>
Heading <h2>
Heading <h3>
Heading <h4>
Heading <h5>
Heading <h6>
This is a paragraph with some bold text and with italicized text too.
Things you can control with your body tag
Property |
Variable |
font-family |
@textFontFamily |
font-size |
@textFontSize |
line-height |
@textLineHeight |
color |
@textColor |
background-color |
@bodyBackground |
Blockquote
My whole life, my whole soul, my whole spirit is to blow that horn.
Louis Armstrong
To float your blockquote to the right, add class="pull-right"
My whole life, my whole soul, my whole spirit is to blow that horn.
Louis Armstrong
Lists Unordered, ordered and defined
The lists have a basic format that depends on whether the list is ordered or unordered, there is also a class called .unstyled
to eliminate these attributes.
Classes for unordered lists include <ul.disc>
, <ul.circle>
and <ul.square>
.
Ordered lists include the classes. <ol.decimal>
, <ol.latin>
AND <ol.roman>
.
Unordered
- Lorem ipsum dolor sit amet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
Ordered
- Lorem ipsum dolor sit amet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
Description
- Description Lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl class="dl-horizontal">
- Description LIsts
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Print Styles
Sazerac, like Foundation, includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query and include:
- Clearing out backgrounds, box shadows, and text shadows
- Appending link URLs after the anchor text
- Bordering blockquotes and pre-elements
- Page cleanup and widow minimization
Again, like Foundation, Sazerac includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach .print-only
on an element to only show when printing, and .hide-on-print
to hide something when printing.