A primer on the Kraken approach to web development.
Frameworks are awesome, but they often include a lot of stuff - way more than you might use on a typical project. Boilerplates provide a great starting point, but they're often missing things you need.
Kraken is a bit of a hybrid. It's a boilerplate, with a bunch of modular add-ons you can use to expand the functionality as needed.
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. Change the font-stack. Tweak the colors. Add gradients and transitions. Make Kraken your own.
Kraken is a mobile-first boilerplate. The base structure is a fully-fluid, single-column layout. It uses @media (min-width: whatever) to add a grid-based layout on top of that.
The alternative – desktop first – involves starting with a wide, grid-based layout, and using @media (max-width: whatever) to scale down to a single-column layout.
Kraken takes an OOCSS approach to web development.
Throughout the stylesheet, you'll see base styles and modifying styles. For example, .btn sets the default button styles and behavior, while .btn-blue changes the color and .btn-large changes the size. A big, blue button would look like this:
Every .class in Kraken has a corresponding %placeholder that you can @extend anywhere.
This allows you to keep your code DRY and keep your html free of presentational classes if that's what you wish. You can even mix and match presentational classes and @extend although it may become confusing.
Below is a button styled the same way using Scss @extend instead of classes in your html. (look in the web inspector)
Here is the Scss for the above example using @extend instead of .classes
@extend of %placeholder can be used for every .class available in KrakenClasses as well as @extend %placeholder can be mixed and matched throughout a project.