Hi. I'm Pinkles.

I'm a small boilerplate for modern web projects. Or, to put it another way, I'm a curated set of front-end development tools. I'm what you copy into your root directory for a fresh project.

I require SASS and Compass.

I support E8+, Firefox, Chrome, Safari.

Here's what I provide (and why):

A set of common CSS utility classes

HTML5 Boilerplate provides some wonderful CSS utility classes. I've gone through and removed the ones that are 1) too aesthetically opinionated 2) rely on IE6&7 browser hacks (example: *text-indent: -9999px;), or 3) are duplicated by Compass (example: Both HTML5BP and Compass have classes for "image replacement" and "clearfix").

A grid framework

I surveyed a lot of CSS3 grid frameworks with a specific list of requirements:

• The framework must must flexible, zoomable, responsive, and support nested grids.
• The framework must be easily modifiable and intuitive to learn.
• The framework can't be heavy handed about the number of columns, widths of gutters, etc.
• The framework must not inject its own framework for media queries and must play nicely with the ones I'm using (below).
• The framework shouldn't litter the markup with oddities like .alpha and .omega
• The framework should allow me to create columns left-to-right or right-to-left regardless of which order they appear in the markup.
• The framework should preferably be written in SASS. (bonus points)

I looked at Zurb's Foundation 4, Twitter's Bootstrap, Skeleton's Grid System, Less Framework 4, and even more powerful grid-creation tools like the venerable Susy.

In the end, I learned it comes down to this: can you use box-sizing: border-box; or not? IE8+, webkit, and gecko support it. If those are the browsers you're targeting, then for the love of god USE IT. Here's a simple explanation why. Here's how I'm using it:

* { @include box-sizing(border-box);}

Crazy, right? If you're able to use this one simple line, your life will change. Your percentage-based grid framework gets really simple.

In the end I found that when I'm able to use the border-box box model, all I need to create a responsive grid framework that fulfills all the requirements listed above is a four line mixin.

Here it is:

// grid( number-of-columns, columns-to-span, go-right-to-left? )
@mixin grid($gr-cols, $gr-span, $gr-reverse: false) {
	width: (100%/$gr-cols*$gr-span);
	@if $gr-reverse { float:right; } @else { float:left;}
}

The added bonus here is that you can target all your grid directives from the SASS side of things.

Here's some sample markup for a 3 column left-to-right grid:

<div class="whatever-classname">
	<div>
		<p>First 33% column</p>
	</div>
	<div>
		<p>Second 33% column</p>
	</div>
	<div>
		<p>Last 33% column</p>
	</div>
</div>

The SCSS for this would be:

.whatever-classname {
	@include clearfix;
	> div {
		@include grid(3,1); // 3 column grid, this div spans 1 column.
		padding:2em; // Want to add gutters? No problem thanks to border-box!
	}
}

Cross-browser normalized styles

Nicolas Gallagher's Normalize.css needs no introduction. It makes sense and it's not aesthetically opinionated, save for one area: headings. I've changed these so that all h1 type elements are simply font-size:1em. I've also gone through and removed all the IE star hacks. Since we're not targeting IE<8, I'd rather not take the risk of tripping up minifiers or SASS compilers you might be using (I've seen it happen).

Responsive breakpoints

Anthony Short's comprehensive collection media-query breakpoints is stellar. Why? A few reasons.

1. Unlike Bootstrap's breakpoints they don't dictate a way of designing. There is no "default" screen width and then a set of overrides for smaller and larger screen sizes. I found Boostrap and Less Framework 4 particularly heavy handed in this regard.

2. Spanning across multiple breakpoints. Cascades like this are useful: tablet-landscape-and-down. It means you're not having to constantly restate your styles for different media queries, as with frameworks like Less Framework 4.

I've made 2 modifications: I've added 37 Signal's image-2x mixin and I've changed the word "below" to "down" (which matches the opposite word "up" that Anthony is using) for the mixin names.

CSS3 animation framework

Dan Eden's Animate.css is brilliant.

"Font Awesome" iconic font library

Having quick access to basic shapes is a good thing. I think of these as an extension to HTML5's collection of entities.

I try to not be too opinionated on things aesthetically. In fact, some of HTML5's boilerplate has been removed because it was too aesthetically opinionated. However, I'll make an exception for Dave Gandy's Font Awesome iconic font library. It was originally made for Bootstrap and it's well maintained.