According to its developer, Chris Ferdinandi, Kraken (cferdinandi.github.io/kraken/) is a lightweight, mobile-first boilerplate for front-end website developers seeking to satisfy today’s audiences on the go. “Frameworks are awesome, but they often include a lot of stuff — way more than you might use on a typical project,” Ferdinandi explains. “Boilerplates provide a great starting point, but they’re often missing things you need.”
Ferdinandi says that Kraken is a bit of a hybrid, consisting of a coding boilerplate with a collection of modular add-ons that allow developers to expand its functionality as needed. He added that since Kraken is style-agnostic, it is intentionally a bit ugly out-of-the-box, when using its default style settings.
This coding is a straightforward rendition that will be instantly familiar to many webmasters who are versed in CSS, and one that underscores Kraken’s simplicity and ease of use.
“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,” Ferdinandi notes. “Change the fontstack. Tweak the colors. Add gradients and transitions. Make Kraken your own.”
Kraken takes an Object Oriented CSS (OOCSS) approach to web development that allows CSS classes to be mixed, matched and reused throughout a project. A CSS reset ensures cross-browser compatibility, while the responsive mobile-first 6-column grid and well-designed fluid typography combine with basic styling for common elements and optional add-ons for added functionality to deliver a comprehensive coding solution.
Kraken uses a fully fluid, single-column layout as the base structure, using the CSS media query @media (min-width: whatever) to add a grid-based layout on top of the base structure. Alternatively, Kraken also offers a desktop-first approach that starts with a wide screen compatible grid based layout, which uses a different CSS media query, @media (max-width: whatever), to scale the design down to a mobile-friendly single-column layout.
“Throughout the style sheet, you will see base styles and modifying styles,” Ferdinandi stated. “For example, .btn sets the default button styles and behavior, while .btn-blue changes the color and .btn-large changes the size.” In this example, the HTML and CSS coding for a big, blue button would look like this:
<button class=?btn btn-blue btn-large?>Big Blue Button</button>
This coding is a straightforward rendition that will be instantly familiar to many webmasters who are versed in CSS, and one that underscores Kraken’s simplicity and ease of use.
According to the publisher, Kraken’s default template set uses the language attribute to help screen-readers and translation software read your site, along with Chrome Frame support and an IE force mode that requires the browser to use the latest available version of its rendering engine, or Chrome Frame if it is installed. Support for mobile screen resizing and the HTML5 Shim is included as well.
“Modern mobile browsers often ‘fake’ a desktop sized viewport so that websites that aren’t mobile-optimized aren’t weirdly zoomed in when you load them,” Ferdinandi explains. “The viewport tag tells browsers that the viewport should be the size of the screen (because our site is mobile-optimized).”
These techniques boost Kraken’s cross browser compatibility.
“Internet Explorer 8 and lower do not recognize the new HTML5 semantic elements (like <header>, <section>, and so on),” Ferdinandi added. “The HTML5 Shim is a little JavaScript snippet that we load conditionally on older IE browsers to ensure those elements render correctly.”
Kraken also displays a warning for website visitors using older browsers, urging them to upgrade; and offers support for favicons and touch icons on the home screen of mobile devices.
Kraken includes necessary JavaScript files in a web page’s footer, rather than the header, for faster loading and better performance. Also included is an optimized version of Google Analytics code, based on the HTML5 Boilerplate, requiring the simple addition of the site’s ID in order to obtain superior stats.
This code may be replaced altogether if using a different analytics platform. WordPress fans will be pleased to learn that Kraken has them covered with a compatible version, and there is a version for Rails installations as well.
Given its quality documentation and ease of deployment, Kraken may be a good candidate for your next adult website. Try it and see for yourself.
