PLLRS: Responsive CSS Column Structure
What is it?
PLLRS is a library for responsive uniform column structure. Built considering mobile first, It handles 4 breakpoints with media queries. By default, they are:
- Base: mobile first
- 600px: small tablet ($break1)
- 768px: large tablet ($break2)
- 1000px: desktop ($break3)
How Do I use it?
It's simple.
<div class="pllrs4 _332"> <div class="column"></div> <div class="column"></div> ... </div>
You start with pllrs plus the number of columns you want for a desktop site, in this case 4 (pllrs4). without a secondary class (_332), this will default to 4 Columns, until it hits mobile, which will then be a single column (4441).
What do the underscores mean?
pllrs uses a secondary class to inform the columns where to "fold". If a second class (beginning with underscores) is not found, it will default to XXX1. If you wish to hold the same column structure all the way from desktop, do the following: pllrs3 _333.
A Cookbook Example: 6 Column Grid
6 Columns at Desktop, 3 Columns at Large Tablet, 3 Columns at Small Tablet, and 2 Columns at Mobile.
<div class="pllrs6 _332"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> <div class="column">5</div> <div class="column">6</div> <div class="column">7</div> <div class="column">8</div> ... </div>
How big is it?
8.45kb minified and gzipped.
Does it support nesting?
You betcha.
Do I need to use divs?
Nope, feel free to use whatever HTML element you want.
What browsers does it support?
pllrs works with all browsers that support CSS3 selectors and media queries. If you need support for browsers below Internet Explorer 9, you'll want to add respond.js and selectivizr. These have not been tested, but will be in the future.
Can I change the breakpoints or gutter size?
You sure can. pllrs was built with percentages to allow for fluid scaling. These can be changed in the pllrs/pllrs.scss file.