noun 1. A big mountain in Washington state. 2. A modular Sass framework for building responsive websites.
DownloadTypography based on relative units.
Built with Sass, built to be extended.
At 10kb light it won't clog your data pipes.
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 GitHubRainier'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.
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>
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>
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.
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:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
The text-left
, text-right
, and text-center
classes will allow you to align text as necessary.
When a <p>
tag follows a heading inside a <header>
tag it is converted into a subheading:
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>
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">
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>
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>
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>
<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>