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.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips