Kraken | Responsive Web Design

Kraken

Kraken is built on Guip and uses Sass to power it’s awesomeness. It’s a lightweight, mobile-first boilerplate for front-end web developers.

It works in browsers as young as Netscape Navigator 5 (apparently, citation needed) but it is optimised for all current browsers as well as IE9+.

Kraken uses normalize.css for the resets due to a bug in critical inlining CSS.

It’s definitely something to try out on your next project!

Sass Configuration in Kraken

// Colors
$color-primary: #0088cc;
$color-black: #272727;
$color-white: #ffffff;

$color-success: #377f31; // Green
$color-danger: #880e14; // Red
$color-warning: #dba909; // Yellow
$color-code: #dd1144;

$color-gray-dark: #808080;
$color-gray-light: #e5e5e5;


// Font Stacks
$font-primary: "Helvetica Neue", Arial, sans-serif;
$font-secondary: Georgia, Times, serif;
$font-monospace: Menlo, Monaco, "Courier New", monospace;


// Breakpoints
$bp-xsmall: 20em;
$bp-small: 30em;
$bp-medium: 40em;
$bp-large: 60em;
$bp-xlarge: 80em;


// Sizing
$font-size-base: 100%;
$spacing: 1.5625em;
$container-width: 88%;
$container-max-width: 80em;


// Grid
$grid-margins: 1.4%;
$grid-sizes: (
    // Grid width options
    // Add/remove grid's as needed
    // $name: $width
    // $name - {string} class suffix
    // $width - {string} width of the grid
    fourth: 25%,
    third: 33.33333333333%,
    half: 50%,
    two-thirds: 66.666666666667%,
    three-fourths: 75%,
    full: 100%
);
$grid-breakpoints: (
    // Breakpoints at which to activate grid
    // Add/remove breakpoints as needed
    // ($breakpoint, $prefix-class, $include-offsets)
    // $breakpoint - {string|variable} the breakpoint
    // $prefix-class - {string|optional} class to be used with `.row` to activate grid
    // $include-offsets - {boolean} if true, include offset classes at this breakpoint
    ($bp-xsmall, ".row-start-xsmall", false),
    ($bp-small, ".row-start-small", false),
    ($bp-medium, null, true),
);
$grid-dynamic: (
    // Create grid classes that vary in size at different breakpoints
    // Add/remove classes, breakpoints, and sizes as needed
    // ($class, $breakpoint, $width)
    // $class - {string} the grid class
    // $breakpoint - {string|variable} the breakpoint
    // $width - {string|variable} width of the grid at the breakpoint
    (".grid-dynamic", $bp-xsmall, map-get($grid-sizes, half))
    (".grid-dynamic", $bp-small, map-get($grid-sizes, third))
    (".grid-dynamic", $bp-medium, map-get($grid-sizes, fourth))
);

HTML Template in Kraken

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">

        <!-- Force latest available IE rendering engine and Chrome Frame (if installed) -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title></title>
        <meta name="description" content="">

        <!-- Mobile Screen Resizing -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Icons: place in the root directory -->
        <!-- https://github.com/audreyr/favicon-cheat-sheet -->

        <!-- feature detection -->
        <script src="dist/js/detects.js"></script>

        <!-- stylesheets -->
        <link rel="stylesheet" href="dist/css/main.css" type="text/css">
    </head>

    <body>

        <!-- Old Browser Warning -->
        <!--[if lt IE 9]>
            <section class="container">
                Did you know that your web browser is a bit old? Some of the content on this site might not work right as a result. <a href="http://whatbrowser.org">Upgrade your browser</a> for a faster, better, and safer web experience.
            </section>
        <![endif]-->

        <nav>
            <!-- Skip Nav Link -->
            <a class="screen-reader screen-reader-focusable" href="#main">Skip to content</a>
            Navigation content
        </nav>

        <main id="#main">

            <section class="container">

                <h1>Hello World!</h1>

                <p>Add your content here.</p>

            </section>

        </main>

        <!-- Javascript -->
        <!-- In the footer for better performance -->
        <script src="dist/js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <!-- (Via HTML5 Boilerplate: http://html5boilerplate.com/) -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X');ga('send','pageview');
        </script>

    </body>

</html>
  • Resource Name

    Kraken

  • Resource Creator

    Chris Ferdinandi

Description

Kraken is built on Guip and uses Sass to power it's awesomeness. It's a lightweight, mobile-first boilerplate for front-end web developers.

View on Github Download Resource

Sites that use Kraken

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.