Sazerac

a UX cocktail with a southern twist

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

  1. Lorem ipsum dolor sit amet
  2. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
  3. 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.