What Is This?

Rainier is a lightweight Sass framework for building the responsive web. It's modular and comes with basic features (grid, typography, buttons, etc.) but is built to be extended and modified. It has typography based on relative units and it isn't bloated with clunky JavaScript components you'll never use.

View on GitHub

Breakpoints

Rainier's media queries are mobile-first, meaning that the default styles are written for the smallest viewports. Media queries are then used to enhance the layout and presentation on larger viewports. Rainier comes standard with four breakpoints:

Viewports skinnier than 48em are considered 'Extra Small (xs)'. Breakpoints are sized with relative units to facilitate layout adaptation when a user increases their root font size by manually zooming the page.

Container

Slapping the container class on a <div> gets you a fixed width container that adjusts for every breakpoint. If you're looking for a full-width wrapper then the container-full class will get the job done.

<!-- Fixed width at each breakpoint -->
<div class="container">
   ...
</div>

<!-- Fluid container at all widths -->
<div class="container-full  ">
   ...
</div>

Grid

It's a twelve-column grid. You know this. Make rows with the row class and columns with the clm class. You can add classes like xs-8 and xl-4 to adapt columns at each of the five breakpoints. Gutters are 15px by default.

<!-- Organize columns inside rows -->
<div class="row">
   <!-- Colmns can have different widths at each breakpoint -->
   <div class="clm xs-12 sm-11 md-6 lg-4 xl-2"></div>
   <div class="clm xs-12 sm-1 md-6 lg-8 xl-10"></div>
</div>

Typography

Type is based on relative units, with the html font-size property set at 16px. Out of the box, Rainier bumps the font-size of the html element to 17px and 18px at the large and extra-large breakpoints, respectively.

Thanks to those responsive units, this scales the type of the entire page on those large displays. If that's not your flavor, you can change the font-size at those breakpoints or delete those rules entirely.

Styles

Utility Classes

The text-left, text-right, and text-center classes will allow you to align text as necessary.

Heading Subtitles

When a <p> tag follows a heading inside a <header> tag it is converted into a subheading:

This Heading Has a Subtitle

And what an amazing subtitle it is

<header>
   <h5>This Heading Has a Subtitle</h5>
   <p>And what an amazing subtitle it is</p>
</header>

Images

Throw an img-r class on your images to make them responsive to whatever container they're in. If you want cute rounded images like the middle one then the img-rounded class will do that for you. Use the img-circle class for (drumroll....) circular images.

<img src="img1.png" class="img-r">
<img src="img2.png" class="img-r img-rounded">
<img src="img3.png" class="img-r img-circle">

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam gravida et mi vel dapibus. Etiam sit amet nisi maximus, dictum mauris pharetra, lacinia mauris. Vivamus et enim at massa facilisis consequat sit amet non enim. Nunc tincidunt libero nibh, sit amet fermentum tortor dignissim ut.

<blockquote>
   Lorem ipsum dolor sit amet...
</blockquote>

Buttons

<button class="btn btn-default">Default</button>
<button class="btn btn-alt">Alt</button>
<button class="btn btn-action">Action</button>
<button class="btn btn-plain">Plain</button>

Note: Icon buttons in this style require FontAwesome, a library of cool icons avaliable over CDN. It'll run you about 27kb but let's you make cool vector icons, so there's that.

<button class="btn btn-default btn-lg">Large</button>
<button class="btn btn-action btn-icon fa-cloud">Icon</button>
<button class="btn btn-alt btn-disabled">Disabled</button>

Tables

Default

Use standard table markup with <table>, <thead>, <tr>, <th>, <tbody>, and <td> to get some swanky tables going.

Beer	Served In	ABV	Price
Full Sail IPA	American Pint	6.0	$5.50
Southern Tier 2X Stout Nitro	Snifter	7.5	$6.50
Deschutes Black Butte Porter	American Pint	5.2	$5.00
Belhaven Scottish Ale	English Pint	5.2	$7.00

<!-- Example Table Format  -->
<table>
  <thead>
    <tr>
      <th>Header Cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body Cell</td>
    </tr>
  </tbody>
</table>

Striped

Add the table-striped class to your <table> element to highlight every other row.

Beer	Served In	ABV	Price
Full Sail IPA	American Pint	6.0	$5.50
Southern Tier 2X Stout Nitro	Snifter	7.5	$6.50
Deschutes Black Butte Porter	American Pint	5.2	$5.00
Belhaven Scottish Ale	English Pint	5.2	$7.00

<!-- Striped Table Format  -->
<table class="table-striped">
  <thead>
    <tr>
      <th>Header Cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body Cell</td>
    </tr>
  </tbody>
</table>

Forms

Question Bug Report Compliment Cake Recipe

<form method="post" action="#">
  <div class="row">
    <div class="clm xs-12 sm-6">
      <input type="text" placeholder="Name">
    </div>
    <div class="clm xs-12 sm-6">
      <input type="text" placeholder="Email">
    </div>
    <div class="clm xs-12">
      <select>
        <option>Question</option>
        <option>Bug Report</option>
        <option>Compliment</option>
        <option>Cake Recipe</option>
      </select>
    </div>
    <div class="clm xs-12">
      <textarea placeholder="Your message..."></textarea>
    </div>
    <div class="clm xs-12 ">
      <input type="submit" value="Send" class="btn btn-action">
    </div>
  </div>
</form>

Navbar

The navbar on this page is an example of Rainier's built-in navbar. Remember to include rainier.js in your page for this to work. Example HTML code is shown below.

<nav class="navbar">
  <div class="container-full">
    <a class="nav-logo" href="#">Logo</a>
    <button id="menu-trigger" class="nav-menu">Menu
      <i class="fa fa-bars nav-icon"></i>
    </button>
  </div>
  <div id="menu-slide">
    <div class="nav-close-wrapper">
      <button class="nav-btn-close">
        <i id="menu-close" class="fa fa-times"></i>
      </button>
    </div>
    <ul class="nav-list">
      <li class="nav-item"><a class="nav-link" href="#">Section A</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Section B</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Section C</a></li>
    </ul>
  </div>
  <div id="menu-overlay"></div>
</nav>