Dev Depot: Kraken, Boilerplate Mobile Magic

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.

Related:  

Copyright © 2025 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

profile

WIA Profile: Reba Rocket

As chief operating officer and chief marketing officer of Takedown Piracy, long at the forefront of intellectual property protection in adult entertainment, Rocket is dedicated to safeguarding the livelihoods of content creators and producers while fostering a more ethical and sustainable industry.

Women In Adult ·
opinion

Protecting Content Ownership Rights When Using AI

In today’s digital age, content producers have more tools at their disposal than ever before. Among these tools, artificial intelligence (AI) content generation has emerged as a game changer, enabling creators to produce high-quality content quickly and efficiently.

Corey D. Silverstein ·
opinion

How Payment Orchestration Can Help Your Business

An emerging payment solution is making waves in the merchant world: the payment orchestration platform (POP). It’s quickly gaining traction as a powerful tool for managing online payments — but questions abound.

Cathy Beardsley ·
opinion

Fine-Tuning Refund and Cancellation Policies

For adult websites, managing refunds and cancellations isn’t just about customer service. It’s a crucial factor in maintaining compliance with the regulations of payment processors and payment networks such as Visa and Mastercard.

Jonathan Corona ·
profile

WIA Profile: Laurel Bencomo

Born in Cambridge, England but raised in Spain, Laurel Bencomo initially chose to study business at the University of Barcelona simply because it felt familiar — both of her parents are entrepreneurs. She went on to earn a master’s degree in sales and marketing management at the EADA Business School, while working in events for a group of restaurants in Barcelona.

Women In Adult ·
profile

Gregory Dorcel on Building Upon His Brand's Signature Legacy

“Whether reflected in the storyline or the cast or even the locations, the entertainment we deliver is based on fantasy,” he elaborates. “Our business is not, and never has been, reality. People who are buying our content aren’t expecting reality, or direct contact with stars like you can have with OnlyFans,” he says.

Jeff Dana ·
opinion

How to Turn Card Brand Compliance Into Effective Marketing

In the adult sector, compliance is often treated as a gauntlet of mandatory checkboxes. While it’s true that those boxes need to be ticked and regulations must be followed, sites that view compliance strictly as a chore risk missing out on a bigger opportunity.

Jonathan Corona ·
opinion

A Look at the Latest AI Tools for Online Safety

One of the defining challenges for adult businesses is helping to combat the proliferation of illegal or nonconsensual content, as well as preventing minors from accessing inappropriate or harmful material — all the more so because companies or sites unable or unwilling to do so may expose themselves to significant penalties and put their users at risk.

Gavin Worrall ·
opinion

Know When to Drop Domains You Don't Need

Do you own too many domains? If so, you’re not alone. Like other things we accumulate, every registered domain means something to us. Sometimes a domain represents a dream project we have always wanted to do but have never quite gotten around to.

Juicy Jay ·
opinion

Understanding 'Indemnification' in Business Contracts

Clients frequently tell me that they didn’t understand — or sometimes, even read — certain portions of a contract because those sections appeared to be just “standard legalese.” They are referring, of course, to the specialized language used in legal documents, including contracts.

Corey D. Silverstein ·
Show More