Skip Navigation
# A starting point for front-end projects Designed to be lightweight and style agnostic, Kraken includes just the essentials. - Normalize.css - A responsive, mobile-first grid built on flexbox - A well-designed, fluid typographic scale - CSS buttons - Simple table styling - Common form components - A set of utility classes for nudging and tweaking the layout ## The Kraken Approach Kraken is 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.

- **Object-Oriented CSS.** Kraken takes an [OOCSS approach](http://www.slideshare.net/stubbornella/object-oriented-css) to web development. Throughout the stylesheet, you'll see base styles and modifying styles. Classes can be mixed, matched and reused throughout a project.

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: ```html ``` ## What's new in Kraken 9? Kraken 9 is about removing a lot of the kruft from older versions. - The build tool was removed to focus on Kraken's core strength: the CSS boilerplate. - Sass mixins weren't really used, and have been removed. - `calc-em()` was replaced in the Sass files with native `em`-based sizing. - SVG sprite styles were removed in favor of inline SVGs. - CSS-only responsive tables had accessibility issues and were removed. - The `.disabled` class for buttons was removed in favor of the `[disabled]` attribute. - The `.screen-reader` class was renamed `.visually-hidden` to be consistent with industry norms. - An accessibility bugfix was added for unstyled and inline lists. ## Browser Support The web is for everyone, but [support is not the same as optimization](http://bradfrostweb.com/blog/mobile/support-vs-optimization/). Kraken works in all browsers, but it's optimized for browsers that support Flexbox. That includes all modern browsers, and IE 11 and above. Older browsers will receive a more basic experience, including a single-column layout instead of a grid.