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.
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:
.disabled. These are great for web apps.
Buttons, forms, and other elements lost their rounded corners in favor of more squared off ones.
Download Kraken 3 today on GitHub.