Skip to main content Accessibility Feedback

Release the Kraken (again)

Over the long weekend, I released version 3 of Kraken, my mobile-first boilerplate for front-end web developers.

Kraken 3 includes some awesome updates, including a better grid, smarter namespacing, and the power of Sass.

What's new?

Powered by Sass Kraken is now powered by Sass, so customizing it for your project is easier than ever.

Naming Conventions Color-based naming conventions like .btn-blue have been dropped in favor of more abstracted, function driven ones like .btn-secondary. This allows for markup that's reusable even if the color palette changes.

A New Typographic Scale The typographic scale is now based on a 16 pixel base, which allows for much cleaner math than the previous scale.

A Better Grid Kraken 3 drops the number-based grid in favor of fraction-based naming (.grid-third instead of .grid-2). This provides more layout options, including four-column layouts, which previously required nested grids. Two new classes allow you to activate the grid on small screens, giving you more control.

Buttons Buttons picked up two new classes: .active and .disabled. These are great for web apps.

Squared-Off Corners Buttons, forms, and other elements lost their rounded corners in favor of more squared off ones.

Download Kraken 3 today on GitHub.