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>
