Home > Features > Dev Depot: Kraken, Boilerplate Mobile Magic • Bookmark   • Newsletters   • Register Search Options


Dev Depot: Kraken, Boilerplate Mobile Magic

Dev Depot: Kraken, Boilerplate Mobile Magic

August 29, 2013
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 168 votes. Results based on votes submitted by members of XBIZ.net social network.

" 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 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.

“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.


Dissecting an $11.9M Affiliate Marketing Judgment

The Federal Trade Commission scored another major win in early October when the 2nd U.S. Circuit Court of Appeals upheld a lower court ruling, requiring LeadClick Media LLC to pay an $11.9 million award. The... More »

Legal Protection for Amateur Shoots

Any adult industry professional who creates video content with actual first-time amateurs will come to an early knowledge that later performer regret is commonplace. Recognized performers who regularly... More »

Legal Options to Address Pirated Cam Performances

Many webcam performers have experienced a new trend in online piracy — the illegal recording and publication of live webcam performances. The “business model” is disturbingly simple:... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.


XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA

XBIZ Awards 2017

Jan 12 - Jan 12
Los Angeles, CA

ANME Founders Show

Jan 14 - Jan 15
Los Angeles Marriott Burbank Airport

Everything To Do With Sex Show

Jan 20 - Jan 22
Montréal, Québec
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!