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 © 2024 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

opinion

To Cloud or Not to Cloud, That Is the Question

Let’s be honest. It just sounds way cooler to say your business is “in the cloud,” right? Buzzwords make everything sound chic and relevant. In fact, someone uninformed might even assume that any hosting that is not in the cloud is inferior. So what’s the truth?

Brad Mitchell ·
opinion

Upcoming Visa Price Changes to Registration, Transaction Fees

Visa is updating its fee structure. Effective April 1, both the card brand’s initial nonrefundable application fee and annual renewal fee will increase from $500 to $950. Visa is also introducing a fee of 10 cents for each transaction, and 10 basis points — 0.1% — on the payment volume of certain merchant accounts.

Jonathan Corona ·
opinion

Unpacking the New Digital Services Act

Do you hear the word “regulation” and get nervous? When it comes to the EU’s Digital Services Act (DSA), you shouldn’t worry. If you’re complying with the most up-to-date card brand regulations, you can breathe a sigh of relief.

Cathy Beardsley ·
opinion

The Perils of Relying on ChatGPT for Legal Advice

It surprised me how many people admitted that they had used ChatGPT or similar services either to draft legal documents or to provide legal advice. “Surprised” is probably an understatement of my reaction to learning about this, as “horrified” more accurately describes my emotional response.

Corey D. Silverstein ·
profile

WIA Profile: Holly Randall

If you’re one of the many regular listeners to Holly Randall’s celebrated podcast, you are already familiar with her charming intro spiel: “Hi, I’m Holly Randall and welcome to my podcast, ‘Holly Randall Unfiltered.’ This is the show about sex, the adult industry and the people in it.

Women In Adult ·
trends

What's Hot Now: Leading Content Players on Trending Genres, Monetization Strategies

The juggernaut creator economy hurtles along, fueled by ever-ascendant demand for personality-based authenticity and intimacy — yet any reports of the demise of the traditional paysite are greatly exaggerated.

Alejandro Freixes ·
opinion

An Ethical Approach to Global Tech Staffing

One thing my 24-year career as a technologist working to support the online adult entertainment industry has taught me about is the power of global staffing. Without a doubt, I have achieved significantly more business success as a direct result of hiring abroad.

Brad Mitchell ·
opinion

Finding the Right Payment Partner

Whenever I am talking with businesses that are just getting started, one particular question comes up a lot: “How do I get a merchant account?” It’s a simple question, but it has a complicated answer.

Jonathan Corona ·
opinion

The Taxman Cometh for Every Business

February may be the month of romance, but it is also a time when we need to think about something that inspires very little love: taxes. April is not far away, and the taxman is always waiting. This year, federal and most state income taxes are due Monday, April 15.

Cathy Beardsley ·
opinion

The Continuous Journey of Legal Compliance in Adult

The adult entertainment industry is teeming with opportunity but is also fraught with challenges, from anticipating consumer behavior to keeping up with technological innovation. The most labyrinthine of all challenges, however, is the world of legal compliance.

Corey D. Silverstein ·
Show More