It also includes a style guide generator to help you quickly bring your team or clients up-to-speed.

Add-Ons

While the base boilerplate is deliberately lightweight, a growing collection of add-ons lets you make Kraken as robust—or simple—as you want it to be. Create custom-built sites and applications faster.

The Kraken Approach

Kraken is a lightweight boilerplate for front-end web developers. It's built to be flexible and modular, with performance and accessibility in mind.

Ugly on purpose

Out-of-the-box, Kraken is a bit ugly. That's intentional.

Kraken isn't supposed to be a finished product. It's a starting point that you can adapt to any project you're working on. Add components. Remove components. Tweak the colors and font stack. Make Kraken your own.

Mobile-First

Kraken is built mobile-first. The base structure is a fully-fluid, single-column layout. It uses @media (min-width: whatever) to add a grid-based layout to bigger screens.

Think of it as progressive enhancement for the layout.

Kraken also includes feature detection for things like SVG support. Just like the layout, those are served to browsers that support them, while fallback text is supplied to older and less capable browsers.

Object Oriented CSS

Throughout the stylesheet, you'll see base styles and modifying styles. For example, .btn sets the default button styles and behavior, while .btn-secondary changes the color and .btn-large changes the size. A big button with secondary colors would look like this:

<button class="btn btn-secondary btn-large">A Big Button</button>

Classes can be mixed, matched and reused throughout a project.

What's new in Kraken 8?

Switched to Flexbox

The old float-based CSS grid is gone in favor of Flexbox. This makes setting up grids easier than ever and gives you more layout flexibility and control than previous versions.

Browser Compatibility

Rather than trying to provide the same level of functionality for older browsers, Kraken uses progressive enhancement to serve a basic experience to all browsers (even Netscape and IE 5). Newer browsers that support modern APIs and techniques get a better layout, more visually attractive elements, and an enhanced experience.

Kraken works in all browsers, but it's optimized for modern browsers and IE 11 and above.

Vendor Prefixing

Kraken uses Autoprefixer, and is configured to only add prefixes if required by the last two versions of a browser.

If a feature isn't working (for example, the grid does not work in Firefox 28 and lower), it may simply need a vendor prefix. You can add these manually, or adjust the Autoprefixer settings in gulpfile.js if you're working with the source code.

For more details on when support for specific features were added to different browsers, consult Can I Use.