The Grid

The grid class acts as a centered canvas which contains the rows. It's default width is 1000px in desktop view [Screen Sizes: section 3.2.2 in calyx.css], and is ignored in mobile view. If you'd like for the columns to span the full page width, you can exclude it entirely in your markup.

The row class is a full width container for the the columns. It is required in the markup to make the columns behave properly. Like most popular responsive grids, each row can contain any arrangement of col col-# which add up to 12.

The classes col col-1 through col col-12 are the basic building blocks of the mobile responsive grid which contain the individual sections of your website. By default these columns float left, so when they scale down to mobile view they will appear in the same order as the flow of your markup.

12
1
11
2
10
3
9
4
8
5
7
6
6

<div class="grid">
   <div class="row">
      <div class="col col-12">
      <h1>The Grid</h1>
   </div>
   </div>
   <div class="row">
      <div class="col col-12 example-column">12</div>
   </div>
   <div class="row">
      <div class="col col-1 example-column">1</div>
      <div class="col col-11 example-column">11</div>
   </div>
</div>

Typography

Calyx uses the em unit for all typography, with a base font-size of 1em defined as 15px in desktop view and 12px in mobile view.

Heading tags all display as block type with clear type of both and have no left/right margins. This allows you to do some interesting things with formating within a header tag using other elements such as <span>. You know, just in case.

Heading 12.50em

Heading 22.25em

Heading 32.00em

Heading 41.75em

Heading 51.50em
Heading 61.25em

Paragraph Text
Ugh cold-pressed yr paleo meggings fixie. Try-hard ethical thundercats small batch narwhal. 8-bit twee yuccie, craft beer pinterest swag you probably haven't heard of them health goth raw denim.

Bold Text
Ugh cold-pressed yr paleo meggings fixie. Try-hard ethical thundercats small batch narwhal. 8-bit twee yuccie, craft beer pinterest swag you probably haven't heard of them health goth raw denim.

Italicized Text
Ugh cold-pressed yr paleo meggings fixie. Try-hard ethical thundercats small batch narwhal. 8-bit twee yuccie, craft beer pinterest swag you probably haven't heard of them health goth raw denim.

Navigation


<nav class="nav example-nav">
   <div class="grid">
      <div class="row"> 
         <div class="col col-12">
            <div class="site-header">
               <a href="#">Calyx</a>
            </div>
           <ul class="nav-menu">
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a>
                 <ul>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                 </ul>
              </li>
           </ul>
         </div>
      </div>
   </div>
</nav>

Tables

First Name Last Name Age Email Birth Date
Jill Smith 50 jill_smith@email.com July 21 1966
Eve Jackson 39 EveJackson@email.com March 3 1977

Forms