Rainier [rey-neer]

noun 1. A big mountain in Washington state. 2. A modular Sass framework for building responsive websites.

Download

Typography based on relative units.

Built with Sass, built to be extended.

At 10kb light it won't clog your data pipes.

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:

  • Small (sm): ≥48em
  • Medium (md): ≥62em
  • Large (lg): ≥75em
  • Extra-Large (xl): ≥87.5em

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.

One

Eleven

Two

Ten

Three

Nine

Four

Eight

Five

Seven

Six

Six

Seven

Five

Eight

Four

Nine

Three

Ten

Two

Eleven

One

<!-- 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

We've got all your favorite type styles, including bold, strong, italic, and emphasized. There's your garden variety underlined and console.log('code');, and even some links. You know, for linking.

If you like lists, list away:

  1. There's
  2. Ordered
  3. Lists
  • And
  • Unordered
  • Lists

Heading 1 <h1>

Heading 2 <h2>

Heading 3 <h3>

Heading 4 <h4>

Heading 5 <h5>
Heading 6 <h6>

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

<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>