TOASTY CSS

The Grid

The grid is a system designed on CSS3's flexbox framework to make layouts effortless and easy.

Sample Grid

col-1-1
col-1-2
col-1-2
col-1-8
col-1-8
col-3-4

The Grid uses responsive design principles and mathematical proportions to ensure a nice looking layout no matter your screen size. Each Grid is composed of two primary elements: rows and columns. Rows function as containing elements in which columns are inserted.

The Grid can be implemented using dividers such as div's with appropriate class names, as shown below:

    <div class='row'>
      <div class='col-1-2'>
        Content goes here
      </div>
      <div class='col-1-2'>
        More content goes here
      </div>
    </div>

The above code would look a little something like this:

Content goes here
More content goes here

Numbers in the col elements' class names represent the proportion of space they take up. The Grid supports proportions on a 1/8 scale of granularity, meaning you can have 1/8 elements, 1/4 elements, 1/2 elements, and increments of those numbers. A col with 1-1 will take up 100% of the row.

User Input

Text Inputs
Standalone Buttons

Navgation

Default Style

To give your site the Toasty Nav treatment, simply give your <nav> element the class of 'row,' and add columns with your links and buttons! No additional styling required.

Tabbed Style
Links

Links have recieved a bit of an upgrade to a more modern look with Toasty CSS, in both default colors (visited) and with the modifier of the "monochrome" class (visited).

Dropdowns

Toasty CSS has a few dropdown components built in as well, here is the HTML structure to use them:

    <div class='hamburger'>
      <ul>
        <li>Option One</li>
        <li>Option Two</li>
        <li>Option Three</li>
      </ul>
    </div>

Miscellaneous

Boxes

Sometimes, you just want to wrap things in a nice looking box. Toasty CSS's 'box' class does just that.

Tags/Labels

Demarcation for tags or labels is an important part of modern websites, especially those that use or integrate social media services. Toasty CSS provides a consistent look to its tags with the 'tag' class.

  • Cool
  • Stylish
  • Easy
  • Long ones work too

Components

The fun stuff! These prebuilt components are totally modular and built purely in CSS.

Typography

Font choice is important in any website, here is what you have access to when you use Toasty CSS.

Defaults

Out of the box Toasty CSS provides a sans-serif look using Open Sans, designed by Steve Matteson. It's a highly-readable font at every weight for print, web, and mobile. Toasty CSS also makes some typographical decisions for you by replacing the formatting of every text tag you'll need to create a clean, consistent look. Body text defaults to 16 pixels for maximum readability on a variety of screen sizes with a line-height of 24 pixels. This default value is applied to the body and all p tags, which have an additional bottom and left margin of 16 pixels.

Serif

Maybe your site wants to use a serif, or mixed sans/serif look, which is no problem for Toasty CSS. Just add the 'serif' class to any element to change it's font-family to Cormorant Garamond, the serif font of choice for Toasty CSS, designed by Christian Thalmann. Cormorant Garamond is a serif font heavily inspired by Garamond's amazing legacy, and pairs perfectly with Open Sans.

Monospace

Toasty CSS also has a fitting monospace font for your use in Anonymous Pro, designed by Mark Simonson. The <pre> and <code> tags default to this font in Toasty CSS, but it can also be added to any element with the 'monospace' class.

Heirarchy

Toasty CSS' text heirarchy and formatting are as follows, with their respective names and tag names:

h1: Heading

h2: Heading

h3: Heading

h4: Heading

h5: Heading
h6: Heading

p: Body text

span: Body text

Iconography

Toasty CSS supports FontAwesome's great library of icons out of the box. For more info on how it's used, check out fontawesome.io, but here are some examples of what you can do:

Modifier Classes

Toasty CSS offers a few modifier classes you can use in combination with the default classes to customize your experience even more. The most common example of these is the "dark" class, which updates the colors to work better on a dark-colored background like black and is works for most elements.

Dark Navigation
Dark Forms

Buttons have a "lg" or "sm" class you can apply to them depending on your size needs. Additionally, links can be styled to appear as buttons with the "link-button" class:

<a> tag

Headings also have an "sm" class for a slight variant on the bold themes, useful for subheadings:

Customization

No two websites are the same, and with Toasty CSS we believe users should be able to tailor their styling to their site's needs.