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 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.

🔥 Hot off the press! I just launched a new pocket guide. Learn how to build interactive web apps with vanilla JavaScript.

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

Get Daily Developer Tips