Skip to content
Browse files

Initial commit

  • Loading branch information...
1 parent 31ca72b commit 9d5908aad490ead44ccd17da40a67dff21b7d608 @jonikorpi committed Sep 28, 2011
View
25 frameless.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<!--[if lt IE 9]><html class="ie"><![endif]-->
+<!--[if gte IE 9]><!--><html><!--<![endif]-->
+
+ <head>
+ <meta charset="utf-8"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
+ <title></title>
+
+ <link rel="stylesheet" href=""/>
+
+ <!--[if lt IE 9]>
+ <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+ </head>
+
+ <body lang="en">
+
+
+
+ </body>
+
+</html>
View
217 frameless.js
@@ -1,4 +1,7 @@
/*
+
+ UNDER DEVELOPMENT
+
* Frameless Gridlet !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
* by Joni Korpi http://jonikorpi.com/
* licensed under MIT http://opensource.org/licenses/mit-license.php
@@ -10,19 +13,23 @@
*/
var Grid = {
- columnWidth: '48px',
- gutterWidth: '24px',
+ columnWidth: 48,
+ gutterWidth: 24,
+ unit: 'px',
columnColor: 'rgba(0,0,0, 0.382)'
};
var Baseline = {
color: 'rgba(0,0,0, 0.236)',
- baseFontSize: 16;
- gridHeight: (24 / baseFontSize)+'em'
+ gridHeight: '1.5em'
};
var Resolutions = {
- sizes: [240, 320, 480, 600, 768, 1024, 1280, 1440, 1680, 1920, 2560]
+ enabled: true,
+ sizes: [240, 320, 480, 600, 768, 1024, 1280, 1440, 1680, 1920, 2560],
+ color: 'rgba(0,0,0, 0.618)',
+ labelBackground: '#000',
+ labelColor: '#fff'
};
var Buttons = {
@@ -33,7 +40,7 @@ var Buttons = {
right: 0,
bottom: 'auto',
left: 'auto',
- position: 'fixed'
+ position: 'absolute'
}
};
@@ -42,61 +49,175 @@ var Buttons = {
* Creation
*/
-Grid.create = function() {
-
+Grid.create = function (target) {
+ var container = $('<div class="framelessGrid"></div>')
+ .css('height', $(target).height())
+ .appendTo($(target));
+ var gridWidth = -(Grid.gutterWidth);
+ while (gridWidth < $(target).width()) {
+ $('<div class="framelessColumn"></div>')
+ .css('height', $(target).height())
+ .css('left', gridWidth)
+ .appendTo(container);
+ gridWidth += Grid.columnWidth + Grid.gutterWidth;
+ }
+ $(target + ' .framelessGrid').toggle();
};
-Baseline.create = function() {
-
+Baseline.create = function (target) {
+ var container = $('<div class="framelessBaseline"></div>').appendTo($(target));
+ var neededLines = Math.floor($(target).height()/24);
+ var i = 0;
+ while (i < neededLines) {
+ $('<div class="framelessLine"></div>').appendTo(container);
+ i++;
+ }
+ $(target + ' .framelessBaseline').toggle();
};
-Resolutions.create = function() {
-
+Resolutions.create = function (target) {
+ if (Resolutions.enabled) {
+ var container = $('<div class="framelessResolutions"></div>')
+ .css('height', $(target).height())
+ .appendTo($(target));
+ $.each(this.sizes,
+ function (key, resolution) {
+ $('<div class="framelessResolution"> <div class="framelessLabel">' + resolution + ' px</div> </div>').css({
+ 'width': resolution,
+ 'margin-left': -1*(resolution/2)
+ }).appendTo(container);
+ }
+ );
+ $(target + ' .framelessResolutions').toggle();
+ }
};
-Buttons.create = function() {
- var gridButton = $('<div id="flGridButton" class="flButton"> <div></div> <div></div> <div></div> </div>');
- var baselineButton = $('<div id="flBaselineButton" class="flButton"> <div></div> <div></div> <div></div> <div></div> </div>');
- var commonSizesButton = $('<div id="flCommonSizesButton" class="flButton"> <div></div> </div>');
- var container = $('<div id="flButtons"></div>').append(gridButton + baselineButton + devicesButton);
- $('body').append(container);
- $('.flButton').toggle(
- function(){
- $(this).addClass('flActive');
+
+Buttons.create = function (target) {
+ var gridButton = $('<div class="framelessGridButton framelessButton"> <div></div> <div></div> <div></div> </div>');
+ var baselineButton = $('<div class="framelessBaselineButton framelessButton"> <div></div> <div></div> <div></div> <div></div> </div>');
+ if (Resolutions.enabled) {
+ var resolutionsButton = $('<div class="framelessResolutionsButton framelessButton"> <div></div> </div>');
+ }
+ else {
+ var resolutionsButton;
+ }
+ var container = $('<div class="framelessButtons"></div>');
+ container.append(gridButton).append(baselineButton).append(resolutionsButton);
+ $(target).append(container);
+ $('.framelessButton').toggle(
+ function (){
+ $(this).addClass('framelessButtonActive');
},
- function(){
- $(this).removeClass('flActive')
+ function (){
+ $(this).removeClass('framelessButtonActive')
}
);
- $('#flGridButton').toggle(
- function() {
- Grid.show();
- },
- function() {
- Grid.hide();
+ $('.framelessGridButton').click(
+ function () {
+ $('.framelessGrid').toggle();
}
);
- $('#flBaselineButton').toggle(
- function() {
- Baseline.show();
- },
- function() {
- Baseline.hide();
+ $('.framelessBaselineButton').click(
+ function () {
+ $('.framelessBaseline').toggle();
}
);
- $('#flCommonSizesButton').toggle(
- function() {
-
- },
- function() {
-
+ $('.framelessResolutionsButton').click(
+ function () {
+ $('.framelessResolutions').toggle();
}
);
};
// Define CSS
var styles = '\
-
+ .framelessResolutions, .framelessBaseline, .framelessGrid {\
+ overflow: hidden;\
+ position: absolute;\
+ left: 0; top: 0;\
+ height: 100%;\
+ width: 100%;\
+ }\
+ .framelessResolution, .framelessLine {\
+ -webkit-box-sizing: border-box;\
+ -moz-box-sizing: border-box;\
+ -ms-box-sizing: border-box;\
+ -o-box-sizing: border-box;\
+ box-sizing: border-box;\
+ }\
+ .framelessResolution {\
+ height: 100%;\
+ position: absolute;\
+ left: 50%;\
+ border: dashed ' + Resolutions.color + ';\
+ border-width: 0 1px;\
+ }\
+ .framelessLabel {\
+ background: ' + Resolutions.labelBackground + ';\
+ color: ' + Resolutions.labelColor + ';\
+ padding: 6px 9px;\
+ font-size: 16px;\
+ line-height: 1;\
+ position: absolute;\
+ right: 14px; top: 120px;\
+ -webkit-transform-origin: top right;\
+ -webkit-transform: rotate(-90deg);\
+ -moz-transform: rotate(-90deg);\
+ -ms-transform: rotate(-90deg);\
+ -o-transform: rotate(-90deg);\
+ transform: rotate(-90deg);\
+ }\
+ .framelessLine {\
+ height: ' + Baseline.gridHeight + ';\
+ border-bottom: 1px dotted ' + Baseline.color + ';\
+ }\
+ .framelessColumn {\
+ background: ' + Grid.columnColor + ';\
+ width: ' + Grid.columnWidth + Grid.unit + ';\
+ position: absolute;\
+ top: 0; left: 0;\
+ }\
+ .framelessButtons {\
+ position: ' + Buttons.position.position + ';\
+ top: ' + Buttons.position.top + ';\
+ right: ' + Buttons.position.right + ';\
+ bottom: ' + Buttons.position.bottom + ';\
+ left: ' + Buttons.position.left + ';\
+ width: 144px;\
+ z-index: 999999;\
+ }\
+ .framelessButton {\
+ height: 48px;\
+ padding: 7px;\
+ width: 34px;\
+ float: right;\
+ position: relative;\
+ cursor: pointer;\
+ }\
+ .framelessGridButton div {\
+ border: solid ' + Buttons.color + ';\
+ border-width: 0 5px 0 0;\
+ height: 34px;\
+ float: left;\
+ margin-left: 6px;\
+ }\
+ .framelessGridButton div:first-child {\
+ margin-left: 0;\
+ }\
+ .framelessBaselineButton div {\
+ border-top: 1px dotted ' + Buttons.color + ';\
+ height: 9px;\
+ }\
+ .framelessResolutionsButton div {\
+ border: 3px solid ' + Buttons.color + ';\
+ height: 28px;\
+ }\
+ .framelessButtonActive.framelessGridButton div,\
+ .framelessButtonActive.framelessBaselineButton div,\
+ .framelessButtonActive.framelessResolutionsButton div {\
+ border-color: ' + Buttons.activeColor + ';\
+ }\
';
// Append CSS
@@ -109,9 +230,19 @@ function appendCSS(css) {
}
};
+function frameless(target, alignment) {
+ if ($(target).css('position') == 'static') {
+ $(target).css('position', 'relative');
+ }
+ Buttons.create(target);
+ Grid.create(target);
+ Baseline.create(target);
+ Resolutions.create(target);
+}
-$(document).ready(function() {
+$(document).ready(function () {
+ frameless('body');
appendCSS(styles);
});
View
193 frameless.less
@@ -0,0 +1,193 @@
+/*
+ Frameless <http://framelessgrid.com/>
+ by Joni Korpi <http://jonikorpi.com/>
+ licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
+*/
+
+
+//
+// Configuration
+//
+
+@font-size: 16; // Your base font-size in pixels
+@em: @font-size*1em; // Shorthand for outputting ems, e.g. "12/@em"
+
+@column: 48; // The column-width of your grid in pixels
+@gutter: 24; // The gutter-width of your grid in pixels
+
+
+//
+// Column-widths in variables, in ems
+//
+
+ @1cols: ( 1 * (@column + @gutter) - @gutter) / @em; @1col: @1cols;
+ @2cols: ( 2 * (@column + @gutter) - @gutter) / @em;
+ @3cols: ( 3 * (@column + @gutter) - @gutter) / @em;
+ @4cols: ( 4 * (@column + @gutter) - @gutter) / @em;
+ @5cols: ( 5 * (@column + @gutter) - @gutter) / @em;
+ @6cols: ( 6 * (@column + @gutter) - @gutter) / @em;
+ @7cols: ( 7 * (@column + @gutter) - @gutter) / @em;
+ @8cols: ( 8 * (@column + @gutter) - @gutter) / @em;
+ @9cols: ( 9 * (@column + @gutter) - @gutter) / @em;
+@10cols: (10 * (@column + @gutter) - @gutter) / @em;
+@11cols: (11 * (@column + @gutter) - @gutter) / @em;
+@12cols: (12 * (@column + @gutter) - @gutter) / @em;
+@13cols: (13 * (@column + @gutter) - @gutter) / @em;
+@14cols: (14 * (@column + @gutter) - @gutter) / @em;
+@15cols: (15 * (@column + @gutter) - @gutter) / @em;
+@16cols: (16 * (@column + @gutter) - @gutter) / @em;
+
+
+//
+// Column-widths in a function, in ems
+//
+
+.width (@cols:1) {
+ width: (@cols * (@column + @gutter) - @gutter) / @em;
+}
+
+
+/*
+ Margin, padding, and border resets
+ except for form elements
+*/
+
+body, div,
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, th, td,
+article, aside, figure, footer, header, hgroup, menu, nav, section {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+
+
+/*
+ Consistency fixes
+ adopted from http://necolas.github.com/normalize.css/
+*/
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, nav, section, audio, canvas, video {
+ display: block;
+}
+
+html {
+ height: 100%;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+ body {min-height: 100%; font-size: 100%;}
+
+sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+ sup {top: -0.5em;}
+ sub {bottom: -0.25em;}
+
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+b, strong {font-weight: bold;}
+abbr[title] {border-bottom: 1px dotted;}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+a img, img {
+ -ms-interpolation-mode: bicubic;
+ border: 0;
+}
+
+input, textarea, button, select {
+ margin: 0;
+ font-size: 100%;
+ line-height: normal;
+ vertical-align: baseline;
+}
+
+ button,
+ html input[type="button"],
+ input[type="reset"],
+ input[type="submit"] {
+ cursor: pointer;
+ -webkit-appearance: button;
+ }
+
+ input[type="checkbox"],
+ input[type="radio"] {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+
+ textarea {overflow: auto;}
+
+
+/*
+ These are easy to forget
+*/
+
+::selection {
+ background: red;
+ color: white;
+}
+::-moz-selection {
+ background: red;
+ color: white;
+}
+
+img::selection {
+ background: transparent;
+}
+img::-moz-selection {
+ background: transparent;
+}
+
+body {
+ -webkit-tap-highlight-color: rgba(255,0,0, 0.62);
+}
+
+
+/*
+ Style overrides for IE6-8
+ http://jonikorpi.com/leaving-old-IE-behind/
+*/
+
+.ie {
+
+}
+
+
+/*
+ An easy way to zoom your entire layout in or out (as long as it's set in ems).
+ Just change the media queries to activate them.
+ Assuming your base font-size is 16:
+ - the first one zooms out by a factor of (16-2)/16 = 0.875
+ - the second one zooms in by a factor of (16+2)/16 = 1.125
+*/
+
+@media screen and (max-width: 1px) {
+ body {
+ font-size: (@font-size - 2)/16*1em;
+ }
+}
+
+@media screen and (max-width: 1px) {
+ body {
+ font-size: (@font-size + 2)/16*1em;
+ }
+}
View
BIN frameless.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
194 frameless.scss
@@ -0,0 +1,194 @@
+/*
+ Frameless <http://framelessgrid.com/>
+ by Joni Korpi <http://jonikorpi.com/>
+ licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
+*/
+
+
+//
+// Configuration
+//
+
+$font-size: 16; // Your base font-size in pixels
+$em: $font-size*1em; // Shorthand for outputting ems
+
+$column: 48; // The column-width of your grid in pixels
+$gutter: 24; // The gutter-width of your grid in pixels
+
+
+//
+// Column-widths in variables, in ems
+//
+
+ $1col: #{( 1 * ($column + $gutter) - $gutter) / $em}em;
+ $1cols: #{( 1 * ($column + $gutter) - $gutter) / $em}em;
+ $2cols: #{( 2 * ($column + $gutter) - $gutter) / $em}em;
+ $3cols: #{( 3 * ($column + $gutter) - $gutter) / $em}em;
+ $4cols: #{( 4 * ($column + $gutter) - $gutter) / $em}em;
+ $5cols: #{( 5 * ($column + $gutter) - $gutter) / $em}em;
+ $6cols: #{( 6 * ($column + $gutter) - $gutter) / $em}em;
+ $7cols: #{( 7 * ($column + $gutter) - $gutter) / $em}em;
+ $8cols: #{( 8 * ($column + $gutter) - $gutter) / $em}em;
+ $9cols: #{( 9 * ($column + $gutter) - $gutter) / $em}em;
+$10cols: #{(10 * ($column + $gutter) - $gutter) / $em}em;
+$11cols: #{(11 * ($column + $gutter) - $gutter) / $em}em;
+$12cols: #{(12 * ($column + $gutter) - $gutter) / $em}em;
+$13cols: #{(13 * ($column + $gutter) - $gutter) / $em}em;
+$14cols: #{(14 * ($column + $gutter) - $gutter) / $em}em;
+$15cols: #{(15 * ($column + $gutter) - $gutter) / $em}em;
+$16cols: #{(16 * ($column + $gutter) - $gutter) / $em}em;
+
+
+//
+// Column-widths in a function, in ems
+//
+
+@mixin width ($cols:1) {
+ width: #{($cols * ($column + $gutter) - $gutter) / $em}em;
+}
+
+
+/*
+ Margin, padding, and border resets
+ except for form elements
+*/
+
+body, div,
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, th, td,
+article, aside, figure, footer, header, hgroup, menu, nav, section {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+
+
+/*
+ Consistency fixes
+ adopted from http://necolas.github.com/normalize.css/
+*/
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, nav, section, audio, canvas, video {
+ display: block;
+}
+
+html {
+ height: 100%;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+ body {min-height: 100%; font-size: 100%;}
+
+sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+ sup {top: -0.5em;}
+ sub {bottom: -0.25em;}
+
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+b, strong {font-weight: bold;}
+abbr[title] {border-bottom: 1px dotted;}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+a img, img {
+ -ms-interpolation-mode: bicubic;
+ border: 0;
+}
+
+input, textarea, button, select {
+ margin: 0;
+ font-size: 100%;
+ line-height: normal;
+ vertical-align: baseline;
+}
+
+ button,
+ html input[type="button"],
+ input[type="reset"],
+ input[type="submit"] {
+ cursor: pointer;
+ -webkit-appearance: button;
+ }
+
+ input[type="checkbox"],
+ input[type="radio"] {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+
+ textarea {overflow: auto;}
+
+
+/*
+ These are easy to forget
+*/
+
+::selection {
+ background: red;
+ color: white;
+}
+::-moz-selection {
+ background: red;
+ color: white;
+}
+
+img::selection {
+ background: transparent;
+}
+img::-moz-selection {
+ background: transparent;
+}
+
+body {
+ -webkit-tap-highlight-color: rgba(255,0,0, 0.62);
+}
+
+
+/*
+ Style overrides for IE6-8
+ http://jonikorpi.com/leaving-old-IE-behind/
+*/
+
+.ie {
+
+}
+
+
+/*
+ An easy way to zoom your entire layout in or out (as long as it's set in ems).
+ Just change the media queries to activate them.
+ Assuming your base font-size is 16:
+ - the first one zooms out by a factor of (16-2)/16 = 0.875
+ - the second one zooms in by a factor of (16+2)/16 = 1.125
+*/
+
+$media screen and (max-width: 1px) {
+ body {
+ font-size: #{($font-size - 2)/16*1em}em;
+ }
+}
+
+$media screen and (max-width: 1px) {
+ body {
+ font-size: #{($font-size + 2)/16*1em}em;
+ }
+}
View
BIN framelessgrid.com/assets/favicon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
145 framelessgrid.com/assets/helpful-LESS-functions.less
@@ -0,0 +1,145 @@
+/**/
+//
+//
+// A collection of helpful LESS functions
+// by Joni Korpi <http://jonikorpi.com/>
+// No rights reserved.
+//
+//
+
+
+.box-shadow (@string) {
+ -webkit-box-shadow: @string;
+ -moz-box-shadow: @string;
+ box-shadow: @string;
+}
+
+.border-radius (@radius: 2px) {
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+ border-radius: @radius;
+}
+
+.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
+ -webkit-border-top-right-radius: @topright;
+ -webkit-border-bottom-right-radius: @bottomright;
+ -webkit-border-bottom-left-radius: @bottomleft;
+ -webkit-border-top-left-radius: @topleft;
+ -moz-border-radius-topright: @topright;
+ -moz-border-radius-bottomright: @bottomright;
+ -moz-border-radius-bottomleft: @bottomleft;
+ -moz-border-radius-topleft: @topleft;
+ border-top-right-radius: @topright;
+ border-bottom-right-radius: @bottomright;
+ border-bottom-left-radius: @bottomleft;
+ border-top-left-radius: @topleft;
+}
+
+.rotate (@deg){
+ -webkit-transform: rotate(@deg);
+ -moz-transform: rotate(@deg);
+ -ms-transform: rotate(@deg);
+ transform: rotate(@deg);
+}
+
+.skew (@deg, @deg2){
+ -webkit-transform: skew(@deg, @deg2);
+ -moz-transform: skew(@deg, @deg2);
+ -ms-transform: skew(@deg, @deg2);
+ transform: skew(@deg, @deg2);
+}
+
+.translate (@x, @y:0) {
+ -webkit-transform: translate(@x, @y);
+ -moz-transform: translate(@x, @y);
+ -ms-transform: translate(@x, @y);
+ transform: translate(@x, @y);
+}
+
+.translate3d (@x, @y:0, @z:0) {
+ -webkit-transform: translate3d(@x, @y, @z);
+ -moz-transform: translate3d(@x, @y, @z);
+ -ms-transform: translate3d(@x, @y, @z);
+ transform: translate3d(@x, @y, @z);
+}
+
+.scale (@factor) {
+ -webkit-transform: scale(@factor);
+ -moz-transform: scale(@factor);
+ -ms-transform: scale(@factor);
+ transform: scale(@factor);
+}
+
+.perspective (@value:1000) {
+ -webkit-perspective: @value;
+ -moz-perspective: @value;
+ -ms-perspective: @value;
+ perspective: @value;
+}
+
+.transition (@transition) {
+ -webkit-transition: @transition;
+ -moz-transition: @transition;
+ -ms-transition: @transition;
+ transition: @transition;
+}
+
+.transform-origin (@x:center, @y:center) {
+ -webkit-transform-origin: @x @y;
+ -moz-transform-origin: @x @y;
+ -ms-transform-origin: @x @y;
+ transform-origin: @x @y;
+}
+
+.horizontal-gradient (@startColor: #555, @endColor: #333) {
+ background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
+ background-image: -webkit-linear-gradient(right center, @startColor, @endColor);
+ background-image: -moz-linear-gradient(right center, @startColor, @endColor);
+}
+
+.horizontal-three-color-gradient (@firstStop: 0, @startColor: #00b3ee, @midStop: 0.5, @midColor: #7a43b6, @lastStop: 1, @endColor: #c3325f) {
+ background-repeat: no-repeat;
+ background-image: -webkit-gradient(linear, left top, right top,
+ color-stop(@firstStop, @startColor),
+ color-stop(@midStop, @midColor),
+ color-stop(@lastStop, @endColor));
+ background-image: -webkit-linear-gradient(
+ @startColor @firstStop,
+ @midColor @midStop,
+ @endColor @lastStop);
+ background-image: -moz-linear-gradient(
+ @startColor @firstStop,
+ @midColor @midStop,
+ @endColor @lastStop);
+}
+
+.horizontal-four-color-gradient (@firstStop: 0, @startColor: #00b3ee, @secondStop: 0, @secondColor: #00b3ee, @midStop: 0.5, @midColor: #7a43b6, @lastStop: 1, @endColor: #c3325f) {
+ background-repeat: no-repeat;
+ background-image: -webkit-gradient(linear, left top, right top,
+ color-stop(@firstStop, @startColor),
+ color-stop(@secondStop, @secondColor),
+ color-stop(@midStop, @midColor),
+ color-stop(@lastStop, @endColor));
+ background-image: -webkit-linear-gradient(
+ @startColor @firstStop,
+ @secondColor @secondStop,
+ @midColor @midStop,
+ @endColor @lastStop);
+ background-image: -moz-linear-gradient(
+ @startColor @firstStop,
+ @secondColor @secondStop,
+ @midColor @midStop,
+ @endColor @lastStop);
+}
+
+.vertical-gradient (@startColor: #555, @endColor: #333) {
+ background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
+ background-image: -webkit-linear-gradient(@startColor, @endColor);
+ background-image: -moz-linear-gradient(@startColor, @endColor);
+}
+
+.vertical-three-color-gradient (@startColor: #00b3ee, @colorStop: 0.5, @midColor: #7a43b6, @endColor: #c3325f) {
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
+ background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
+ background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
+}
View
BIN framelessgrid.com/assets/icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
848 framelessgrid.com/assets/main.css
@@ -0,0 +1,848 @@
+/**/
+/*
+ Frameless <http://framelessgrid.com/>
+ by Joni Korpi <http://jonikorpi.com/>
+ licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
+*/
+/*
+ Margin, padding, and border resets
+ except for form elements
+*/
+body,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+th,
+td,
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+/*
+ Consistency fixes
+ adopted from http://necolas.github.com/normalize.css/
+*/
+html {
+ height: 100%;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+body {
+ min-height: 100%;
+ font-size: 100%;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+audio,
+canvas,
+video {
+ display: block;
+}
+sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+b, strong {
+ font-weight: bold;
+}
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+input,
+textarea,
+button,
+select {
+ margin: 0;
+ font-size: 100%;
+ line-height: normal;
+ vertical-align: baseline;
+}
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ cursor: pointer;
+ -webkit-appearance: button;
+}
+input[type="checkbox"], input[type="radio"] {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+}
+textarea {
+ overflow: auto;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+a img, img {
+ -ms-interpolation-mode: bicubic;
+ border: 0;
+}
+/*
+ Type presets
+*/
+body {
+ font-size: 1.0625em;
+ line-height: 1.411764705882353em;
+ font-family: futura-pt, Futura, "Trebuchet MS", sans-serif;
+}
+.small, #nav span, #downloads strong {
+ font-size: 0.7647058823529411em;
+ line-height: 1.8461538461538463em;
+}
+.normal,
+h1,
+h2,
+h3,
+h4 {
+ font-size: 1em;
+}
+.big {
+ font-size: 1.3529411764705883em;
+ line-height: 1.0434782608695652em;
+}
+.large {
+ font-size: 1.588235294117647em;
+ line-height: 1.3333333333333333em;
+}
+.huge {
+ font-size: 2.588235294117647em;
+ line-height: 1.0909090909090908em;
+}
+.enormous {
+ font-size: 4.235294117647059em;
+ line-height: 1em;
+}
+.gigantic {
+ font-size: 6.823529411764706em;
+ line-height: 1.0344827586206897em;
+}
+/*
+ Typography
+*/
+article p, #colophon p {
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ hyphens: auto;
+}
+#build figure {
+ margin: 0.7058823529411765em 0;
+}
+h2 {
+ padding-top: 2.823529411764706em;
+}
+h3 {
+ margin-top: 1.411764705882353em;
+}
+h1,
+#nav span,
+h2,
+h3,
+#nav a,
+#downloads strong,
+#promo a,
+#author a {
+ font-weight: 500;
+}
+#masthead h1, h2 {
+ text-transform: uppercase;
+ letter-spacing: 0.06470588235294118em;
+}
+#introduction h1, #follow h1 {
+ text-align: center;
+ font-style: italic;
+}
+#downloads strong {
+ display: block;
+ float: left;
+ text-align: center;
+ padding: 0.23076923076923078em;
+ margin-top: 0.15384615384615385em;
+ line-height: 1.0769230769230769em;
+ margin-right: 0.46153846153846156em;
+ min-width: 3.230769230769231em;
+ background: #171717;
+ color: #ffffff;
+}
+/*
+ Colours & links
+*/
+body {
+ background: #ffffff;
+ color: #252525;
+}
+h1,
+h2,
+h3,
+h4 {
+ color: #171717;
+}
+header p, #copyright p {
+ color: #616161;
+}
+a {
+ color: #171717;
+ text-decoration: none;
+ border-bottom: 0.06470588235294118em solid #171717;
+}
+#nav a {
+ border: 0;
+}
+#copyright a {
+ color: #616161;
+ border-bottom-color: #616161;
+}
+a:hover, #copyright a:hover {
+ color: #e84c38;
+ border-bottom-color: #e84c38;
+}
+#nav a:hover, #nav a:hover .icon, #downloads a:hover strong {
+ background: #e84c38;
+ color: #ffffff;
+}
+a:active, #copyright a:active {
+ color: #171717;
+ border-bottom-color: #171717;
+}
+#nav a:active, #nav a:active .icon, #downloads a:active strong {
+ background: #171717;
+}
+::selection {
+ background: #e84c38;
+ color: #ffffff;
+}
+::-moz-selection {
+ background: #e84c38;
+ color: #ffffff;
+}
+img::selection {
+ background: transparent;
+}
+img::-moz-selection {
+ background: transparent;
+}
+body {
+ -webkit-tap-highlight-color: rgba(232, 76, 56, 0.38);
+}
+/*
+ Common styles
+*/
+#masthead,
+#introduction,
+article section,
+#colophon {
+ padding: 0 1.0588235294117647em;
+ margin: 0 auto;
+ max-width: 32.470588235294116em;
+}
+#masthead {
+ padding-top: 1.411764705882353em;
+ text-align: center;
+}
+#masthead h1, #masthead p {
+ display: inline;
+}
+#nav {
+ padding: 1.411764705882353em 0 0;
+ height: 2.823529411764706em;
+}
+#nav li {
+ list-style: none;
+ display: block;
+ float: left;
+ width: 2.823529411764706em;
+ margin-left: 1.411764705882353em;
+}
+#nav li:first-child {
+ margin-left: 0;
+}
+#nav a {
+ display: block;
+ text-align: center;
+}
+#nav .icon {
+ font-size: 1.6470588235294117em;
+ line-height: 1.7142857142857142em;
+ background: #171717;
+ color: #ffffff;
+ vertical-align: middle;
+}
+#introduction {
+ clear: both;
+ padding: 4.235294117647059em 0 1.411764705882353em;
+}
+#grid {
+ height: 15.529411764705882em;
+ position: relative;
+ overflow: hidden;
+ -webkit-perspective: 1000;
+ -moz-perspective: 1000;
+ -ms-perspective: 1000;
+ perspective: 1000;
+}
+.col {
+ background: #e8e8e8;
+ height: 100%;
+ width: 2.823529411764706em;
+ position: absolute;
+ left: 50%;
+ top: 0;
+ margin-left: 0.7058823529411765em;
+ -webkit-transition: all 0.382s ease-out;
+ -moz-transition: all 0.382s ease-out;
+ -ms-transition: all 0.382s ease-out;
+ transition: all 0.382s ease-out;
+}
+.col2 {
+ margin-left: 4.9411764705882355em;
+}
+.col3 {
+ margin-left: 9.176470588235293em;
+}
+.col4 {
+ margin-left: 13.411764705882353em;
+}
+.col5 {
+ margin-left: 17.647058823529413em;
+}
+.col6 {
+ margin-left: 21.88235294117647em;
+}
+.col7 {
+ margin-left: 26.11764705882353em;
+}
+.col8 {
+ margin-left: 30.352941176470587em;
+}
+.col9 {
+ margin-left: 34.588235294117645em;
+}
+.col10 {
+ margin-left: 38.8235294117647em;
+}
+.col11 {
+ margin-left: 43.05882352941177em;
+}
+.col12 {
+ margin-left: 47.294117647058826em;
+}
+.col13 {
+ margin-left: 51.529411764705884em;
+}
+.col14 {
+ margin-left: 55.76470588235294em;
+}
+.col15 {
+ margin-left: 60em;
+}
+.col16 {
+ margin-left: 64.23529411764706em;
+}
+.col17 {
+ margin-left: 68.47058823529412em;
+}
+.col18 {
+ margin-left: 72.70588235294117em;
+}
+.col19 {
+ margin-left: -3.5294117647058822em;
+}
+.col20 {
+ margin-left: -7.764705882352941em;
+}
+.col21 {
+ margin-left: -12em;
+}
+.col22 {
+ margin-left: -16.235294117647058em;
+}
+.col23 {
+ margin-left: -20.470588235294116em;
+}
+.col24 {
+ margin-left: -24.705882352941178em;
+}
+.col25 {
+ margin-left: -28.941176470588236em;
+}
+.col26 {
+ margin-left: -33.1764705882353em;
+}
+.col27 {
+ margin-left: -37.411764705882355em;
+}
+.col28 {
+ margin-left: -41.64705882352941em;
+}
+.col29 {
+ margin-left: -45.88235294117647em;
+}
+.col30 {
+ margin-left: -50.11764705882353em;
+}
+.col31 {
+ margin-left: -54.35294117647059em;
+}
+.col32 {
+ margin-left: -58.588235294117645em;
+}
+.col33 {
+ margin-left: -62.8235294117647em;
+}
+.col34 {
+ margin-left: -67.05882352941177em;
+}
+.col35 {
+ margin-left: -71.29411764705883em;
+}
+.col36 {
+ margin-left: -75.52941176470588em;
+}
+.col1,
+.col2,
+.col3,
+.col4,
+.col19,
+.col20,
+.col21,
+.col22 {
+ background: #171717;
+}
+#build figure {
+ height: 15.529411764705882em;
+ background: #e8e8e8;
+}
+#colophon {
+ padding-top: 4.235294117647059em;
+}
+#follow {
+ padding-bottom: 1.3529411764705883em;
+ border-bottom: 0.11764705882352941em dotted #e8e8e8;
+ margin-bottom: 1.3529411764705883em;
+}
+#colophon h2 {
+ padding: 0 0 0.7058823529411765em;
+}
+#colophon img {
+ width: 2.823529411764706em;
+ float: left;
+}
+#author {
+ padding-bottom: 1.411764705882353em;
+}
+#promo p, #author p {
+ padding-left: 3.5294117647058822em;
+}
+#copyright {
+ padding: 1.411764705882353em 0 2.823529411764706em;
+}
+/*
+ Old IE fixes
+ http://jonikorpi.com/leaving-old-IE-behind/
+*/
+.ie #masthead,
+.ie #introduction,
+.ie article section,
+.ie #colophon {
+ width: 32.470588235294116em;
+}
+.ie #masthead h1,
+.ie #masthead p,
+.ie #introduction span,
+.ie #follow a {
+ display: block;
+}
+.ie #nav {
+ padding-left: 7.0588235294117645em;
+}
+.ie #nav li {
+ display: inline;
+}
+ie. #nav li:first-child {
+ margin-left: 1.411764705882353em;
+}
+/*
+ Full page zooms
+ 0.882352941 0.941176471 1.058823529 1.117647059
+*/
+@media screen and (max-width: 270px) {
+ body {
+ font-size: 0.9375em;
+ }
+ #masthead,
+ #introduction,
+ article section,
+ #colophon {
+ padding-left: 0.5882352941176471em;
+ padding-right: 0.5882352941176471em;
+ }
+}
+@media screen and (max-width: 319px) {
+ body {
+ font-size: 1em;
+ }
+}
+@media screen and (min-width: 520px) and (max-width: 599px),
+ screen and (min-width: 720px) and (max-width: 911px),
+ screen and (min-width: 1240px) and (max-width: 1639px),
+ screen and (min-width: 2160px) {
+ body {
+ font-size: 1.125em;
+ }
+}
+@media screen and (min-width: 1640px) and (max-width: 1887px),
+ screen and (min-width: 2400px) {
+ body {
+ font-size: 1.1875em;
+ }
+}
+/*
+ Mobile layout
+ 240–479 px
+ Zoomed out below 320 px
+*/
+@media screen and (min-width: 240px) {
+ #masthead,
+ #introduction,
+ article section,
+ #colophon {
+ width: 15.529411764705882em;
+ max-width: none;
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .col3,
+ .col4,
+ .col21,
+ .col22 {
+ background: #e8e8e8;
+ }
+}
+/*
+ Wide mobile layout
+ 480-767 px
+ Zoomed in above 480 px
+*/
+@media screen and (min-width: 480px) {
+ #masthead,
+ #introduction,
+ article section,
+ #colophon {
+ width: 24em;
+ }
+ #masthead h1,
+ #masthead p,
+ #introduction span,
+ #follow span {
+ display: block;
+ }
+ #nav {
+ margin-left: 4.235294117647059em;
+ }
+ #grid {
+ height: 11.294117647058824em;
+ }
+ .col3, .col21 {
+ background: #171717;
+ }
+ #build figure {
+ height: 11.294117647058824em;
+ }
+}
+/*
+ Tablet layout
+ 600-911 px
+ Zoomed in above 600 px
+*/
+@media screen and (min-width: 600px) {
+ #masthead,
+ #introduction,
+ article section,
+ #colophon {
+ width: 32.470588235294116em;
+ }
+ #masthead {
+ text-align: left;
+ position: relative;
+ padding-top: 2.1176470588235294em;
+ }
+ #masthead h1 {
+ float: left;
+ margin-right: 0.23529411764705882em;
+ }
+ #masthead p {
+ width: 15.529411764705882em;
+ }
+ #nav {
+ position: absolute;
+ right: 0;
+ top: 0.7058823529411765em;
+ }
+ #introduction h1, #follow h1 {
+ font-size: 1.588235294117647em;
+ line-height: 1.3333333333333333em;
+ }
+ #grid {
+ height: 19.764705882352942em;
+ }
+ .col4, .col22 {
+ background: #171717;
+ }
+ article h2 {
+ font-size: 1.588235294117647em;
+ line-height: 1.3333333333333333em;
+ letter-spacing: 0.040740740740740744em;
+ padding-top: 2.6666666666666665em;
+ }
+ #build figure {
+ height: 15.529411764705882em;
+ }
+ #author, #promo {
+ width: 15.529411764705882em;
+ float: left;
+ }
+ #author {
+ padding: 0 1.411764705882353em 0 0;
+ }
+ #copyright {
+ clear: both;
+ }
+}
+/*
+ Widescreen layout
+ 912-1887 px
+ Zoomed in above 912 px
+*/
+@media screen and (min-width: 912px) {
+ #masthead,
+ #introduction,
+ article section,
+ #colophon {
+ width: 49.411764705882355em;
+ }
+ #masthead {
+ padding-top: 2.823529411764706em;
+ }
+ #masthead h1 {
+ font-size: 2.588235294117647em;
+ line-height: 1.0909090909090908em;
+ width: auto;
+ letter-spacing: 0.045454545454545456em;
+ }
+ #masthead p {
+ position: absolute;
+ left: 16.941176470588236em;
+ top: 2.823529411764706em;
+ width: 11.294117647058824em;
+ }
+ #nav {
+ top: 1.411764705882353em;
+ }
+ #introduction h1 {
+ font-size: 2.588235294117647em;
+ line-height: 1.0909090909090908em;
+ }
+ #grid {
+ height: 24em;
+ }
+ .col5,
+ .col6,
+ .col23,
+ .col24 {
+ background: #171717;
+ }
+ #build div {
+ position: relative;
+ padding-left: 16.941176470588236em;
+ min-height: 11.294117647058824em;
+ }
+ #build figure {
+ width: 15.529411764705882em;
+ height: 11.294117647058824em;
+ margin: 0;
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+ #colophon {
+ margin-top: 4.235294117647059em;
+ border-top: 0.06470588235294118em solid #171717;
+ padding-top: 1.3529411764705883em;
+ }
+ #follow {
+ float: left;
+ width: 15.529411764705882em;
+ padding: 2.1176470588235294em 1.411764705882353em 0 0;
+ border: 0;
+ }
+ #follow h1 {
+ font-size: 1em;
+ text-align: left;
+ }
+ #follow span {
+ display: inline;
+ }
+ #copyright {
+ padding-left: 16.941176470588236em;
+ }
+}
+@media screen and (min-width: 912px) and (max-width: 1887px) {
+ #downloads h3, #faq h3 {
+ float: left;
+ clear: left;
+ width: 15.529411764705882em;
+ padding-top: 1.3529411764705883em;
+ }
+ #downloads p, #faq p {
+ padding-left: 16.941176470588236em;
+ margin-top: 1.411764705882353em;
+ border-top: 0.06470588235294118em solid #e8e8e8;
+ padding-top: 1.3529411764705883em;
+ }
+}
+/*
+ Huge-screen layout
+ 1888-2520 px
+ Zoomed in above 1920 px
+*/
+@media screen and (min-width: 1888px) {
+ #masthead,
+ article .wrapper,
+ #introduction,
+ #colophon {
+ width: 108.70588235294117em;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ article section {
+ width: 24em;
+ margin-left: 5.647058823529412em;
+ float: left;
+ }
+ #build {
+ width: 49.411764705882355em;
+ padding-bottom: 5.647058823529412em;
+ margin-left: 0;
+ }
+ #masthead h1 {
+ font-size: 4.235294117647059em;
+ line-height: 1em;
+ letter-spacing: 0.027777777777777776em;
+ }
+ #masthead p {
+ font-size: 1.588235294117647em;
+ line-height: 1.3333333333333333em;
+ top: 1.7777777777777777em;
+ left: 16em;
+ }
+ #introduction {
+ position: relative;
+ padding-top: 2.823529411764706em;
+ padding-bottom: 0;
+ }
+ #introduction h1 {
+ font-size: 1.588235294117647em;
+ line-height: 1.3333333333333333em;
+ position: absolute;
+ left: 34.666666666666664em;
+ top: -2.6666666666666665em;
+ text-align: left;
+ }
+ article h2 {
+ padding-top: 1.7777777777777777em;
+ }
+ #grid {
+ height: 40.94117647058823em;
+ }
+ .col7,
+ .col8,
+ .col9,
+ .col10,
+ .col11,
+ .col12,
+ .col13,
+ .col25,
+ .col26,
+ .col27,
+ .col28,
+ .col29,
+ .col30,
+ .col31 {
+ background: #171717;
+ }
+ #colophon {
+ clear: both;
+ }
+ #colophon section {
+ padding-bottom: 4.235294117647059em;
+ }
+ #follow {
+ width: 24em;
+ padding-top: 0;
+ }
+ #follow h1 {
+ font-size: 1.588235294117647em;
+ line-height: 1.3333333333333333em;
+ }
+ #promo, #author {
+ width: 24em;
+ padding-right: 5.647058823529412em;
+ }
+ #copyright {
+ float: left;
+ width: 24em;
+ clear: none;
+ padding: 0;
+ }
+}
View
849 framelessgrid.com/assets/main.less
@@ -0,0 +1,849 @@
+@import 'helpful-LESS-functions.less';/*
+ Frameless <http://framelessgrid.com/>
+ by Joni Korpi <http://jonikorpi.com/>
+ licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
+*/
+
+
+@font-size: 17;
+@line: 24;
+@em: @font-size*1em;
+
+@column: 48;
+@gutter: 24;
+
+ @1col:( 1 * (@column + @gutter) - @gutter) / @em;
+ @1cols: @1col;
+ @2cols:( 2 * (@column + @gutter) - @gutter) / @em;
+ @3cols:( 3 * (@column + @gutter) - @gutter) / @em;
+ @4cols:( 4 * (@column + @gutter) - @gutter) / @em;
+ @5cols:( 5 * (@column + @gutter) - @gutter) / @em;
+ @6cols:( 6 * (@column + @gutter) - @gutter) / @em;
+ @7cols:( 7 * (@column + @gutter) - @gutter) / @em;
+ @8cols:( 8 * (@column + @gutter) - @gutter) / @em;
+ @9cols:( 9 * (@column + @gutter) - @gutter) / @em;
+@10cols: (10 * (@column + @gutter) - @gutter) / @em;
+@11cols: (11 * (@column + @gutter) - @gutter) / @em;
+@12cols: (12 * (@column + @gutter) - @gutter) / @em;
+@13cols: (13 * (@column + @gutter) - @gutter) / @em;
+@14cols: (14 * (@column + @gutter) - @gutter) / @em;
+@15cols: (15 * (@column + @gutter) - @gutter) / @em;
+@16cols: (16 * (@column + @gutter) - @gutter) / @em;
+
+.width (@cols:1) {
+ width: (@cols * (@column + @gutter) - @gutter) / @em;
+}
+
+
+/*
+ Margin, padding, and border resets
+ except for form elements
+*/
+
+body, div,
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, th, td,
+article, aside, figure, footer, header, hgroup, menu, nav, section {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+
+
+/*
+ Consistency fixes
+ adopted from http://necolas.github.com/normalize.css/
+*/
+
+html {
+ height: 100%;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+body {
+ min-height: 100%;
+ font-size: 100%;
+}
+article, aside, details, figcaption, figure,
+footer, header, hgroup, nav, section, audio, canvas, video {
+ display: block;
+}
+sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+b, strong {
+ font-weight: bold;
+}
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+input, textarea, button, select {
+ margin: 0;
+ font-size: 100%;
+ line-height: normal;
+ vertical-align: baseline;
+}
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ cursor: pointer;
+ -webkit-appearance: button;
+}
+input[type="checkbox"],
+input[type="radio"] {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+}
+textarea {
+ overflow: auto;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+a img, img {
+ -ms-interpolation-mode: bicubic;
+ border: 0;
+}
+
+
+/*
+ Type presets
+*/
+
+body {
+ font-size: @font-size / 16*1em;
+ line-height: @line / @em;
+ font-family: futura-pt, Futura, "Trebuchet MS", sans-serif;
+}
+
+.small, #nav span, #downloads strong {
+ font-size: 13/@em;
+ line-height: @line/13*1em;
+}
+
+.normal, h1, h2, h3, h4 {
+ font-size: 1em;
+}
+
+.big {
+ font-size: 23/@em;
+ line-height: 24/23*1em;
+}
+
+.large {
+ font-size: 27/@em;
+ line-height: 36/27*1em;
+}
+
+.huge {
+ font-size: 44/@em;
+ line-height: 48/44*1em;
+}
+
+.enormous {
+ font-size: 72/@em;
+ line-height: 72/72*1em;
+}
+
+.gigantic {
+ font-size: 116/@em;
+ line-height: 120/116*1em;
+}
+
+
+/*
+ Typography
+*/
+
+article p, #colophon p {
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ hyphens: auto;
+}
+
+#build figure {
+ margin: 12/@em 0;
+}
+
+h2 {
+ padding-top: 48/@em;
+}
+
+h3 {
+ margin-top: 24/@em;
+}
+
+h1, #nav span, h2, h3, #nav a, #downloads strong, #promo a, #author a {
+ font-weight: 500;
+}
+
+#masthead h1, h2 {
+ text-transform: uppercase;
+ letter-spacing: 1.1/@em;
+}
+
+#introduction h1, #follow h1 {
+ text-align: center;
+ font-style: italic;
+}
+
+#downloads strong {
+ display: block;
+ float: left;
+ text-align: center;
+ padding: 3/13*1em;
+ margin-top: 2/13*1em;
+ line-height: (24-2-2-3-3)/13*1em;
+ margin-right: 6/13*1em;
+ min-width: (48-3-3)/13*1em;
+ background: @emphasis;
+ color: @background;
+}
+
+
+/*
+ Colours & links
+*/
+
+@body: rgb(37,37,37);
+@emphasis: rgb(23,23,23);
+@aside: rgb(97,97,97);
+@background: rgb(255,255,255);
+@highlight: rgb(232,232,232);
+@link: rgb(232,76,56);
+
+body {
+ background: @background;
+ color: @body;
+}
+
+h1, h2, h3, h4 {
+ color: @emphasis;
+}
+
+header p, #copyright p {
+ color: @aside;
+}
+
+a {
+ color: @emphasis;
+ text-decoration: none;
+ border-bottom: 1.1/@em solid @emphasis;
+}
+
+ #nav a {
+ border: 0;
+ }
+
+ #copyright a {
+ color: @aside;
+ border-bottom-color: @aside;
+ }
+
+a:hover, #copyright a:hover {
+ color: @link;
+ border-bottom-color: @link;
+}
+
+ #nav a:hover, #nav a:hover .icon, #downloads a:hover strong {
+ background: @link;
+ color: @background;
+ }
+
+a:active, #copyright a:active {
+ color: @emphasis;
+ border-bottom-color: @emphasis;
+}
+
+ #nav a:active, #nav a:active .icon, #downloads a:active strong {
+ background: @emphasis;
+ }
+
+::selection {
+ background: @link;
+ color: @background;
+}
+::-moz-selection {
+ background: @link;
+ color: @background;
+}
+img::selection {
+ background: transparent;
+}
+img::-moz-selection {
+ background: transparent;
+}
+body {
+ -webkit-tap-highlight-color: fadeout(@link, 62%);
+}
+
+
+/*
+ Common styles
+*/
+
+#masthead, #introduction, article section, #colophon {
+ padding: 0 18/@em;
+ margin: 0 auto;
+ max-width: @8cols;
+}
+
+#masthead {
+ padding-top: 24/@em;
+ text-align: center;
+}
+
+ #masthead h1, #masthead p {
+ display: inline;
+ }
+
+#nav {
+ padding: 24/@em 0 0;
+ height: 48/@em;
+}
+
+ #nav li {
+ list-style: none;
+ display: block;
+ float: left;
+ width: 48/@em;
+ margin-left: 24/@em;
+ }
+
+ #nav li:first-child {
+ margin-left: 0;
+ }
+
+ #nav a {
+ display: block;
+ text-align: center;
+ }
+
+ #nav .icon {
+ font-size: 28/@em;
+ line-height: (48)/28*1em;
+ background: @emphasis;
+ color: @background;
+ vertical-align: middle;
+ }
+
+#introduction {
+ clear: both;
+ padding: 72/@em 0 24/@em;
+}
+
+#grid {
+ height: @4cols;
+ position: relative;
+ overflow: hidden;
+ -webkit-perspective: 1000;
+ -moz-perspective: 1000;
+ -ms-perspective: 1000;
+ perspective: 1000;
+}
+
+ .col {
+ background: @highlight;
+ height: 100%;
+ width: @1col;
+ position: absolute;
+ left: 50%; top: 0;
+ margin-left: 12/@em;
+ .transition(all 0.382s ease-out);
+ }
+
+ .col2 {margin-left: (1*72+12)/@em;}
+ .col3 {margin-left: (2*72+12)/@em;}
+ .col4 {margin-left: (3*72+12)/@em;}
+ .col5 {margin-left: (4*72+12)/@em;}
+ .col6 {margin-left: (5*72+12)/@em;}
+ .col7 {margin-left: (6*72+12)/@em;}
+ .col8 {margin-left: (7*72+12)/@em;}
+ .col9 {margin-left: (8*72+12)/@em;}
+ .col10 {margin-left: (9*72+12)/@em;}
+ .col11 {margin-left: (10*72+12)/@em;}
+ .col12 {margin-left: (11*72+12)/@em;}
+ .col13 {margin-left: (12*72+12)/@em;}
+ .col14 {margin-left: (13*72+12)/@em;}
+ .col15 {margin-left: (14*72+12)/@em;}
+ .col16 {margin-left: (15*72+12)/@em;}
+ .col17 {margin-left: (16*72+12)/@em;}
+ .col18 {margin-left: (17*72+12)/@em;}
+ .col19 {margin-left: -(1*72-12)/@em;}
+ .col20 {margin-left: -(2*72-12)/@em;}
+ .col21 {margin-left: -(3*72-12)/@em;}
+ .col22 {margin-left: -(4*72-12)/@em;}
+ .col23 {margin-left: -(5*72-12)/@em;}
+ .col24 {margin-left: -(6*72-12)/@em;}
+ .col25 {margin-left: -(7*72-12)/@em;}
+ .col26 {margin-left: -(8*72-12)/@em;}
+ .col27 {margin-left: -(9*72-12)/@em;}
+ .col28 {margin-left: -(10*72-12)/@em;}
+ .col29 {margin-left: -(11*72-12)/@em;}
+ .col30 {margin-left: -(12*72-12)/@em;}
+ .col31 {margin-left: -(13*72-12)/@em;}
+ .col32 {margin-left: -(14*72-12)/@em;}
+ .col33 {margin-left: -(15*72-12)/@em;}
+ .col34 {margin-left: -(16*72-12)/@em;}
+ .col35 {margin-left: -(17*72-12)/@em;}
+ .col36 {margin-left: -(18*72-12)/@em;}
+
+ .col1, .col2, .col3, .col4, .col19, .col20, .col21, .col22 {
+ background: @emphasis;
+ }
+
+#build figure {
+ height: @4cols;
+ background: @highlight;
+}
+
+#colophon {
+ padding-top: 72/@em;
+}
+
+ #follow {
+ padding-bottom: 23/@em;
+ border-bottom: 2/@em dotted @highlight;
+ margin-bottom: 23/@em;
+ }
+
+ #colophon h2 {
+ padding: 0 0 12/@em;
+ }
+
+ #colophon img {
+ width: 48/@em;
+ float: left;
+ }
+
+ #author {
+ padding-bottom: 24/@em;
+ }
+
+ #promo p, #author p {
+ padding-left: 60/@em;
+ }
+
+ #copyright {
+ padding: 24/@em 0 48/@em;
+ }
+
+
+/*
+ Old IE fixes
+ http://jonikorpi.com/leaving-old-IE-behind/
+*/
+
+.ie #masthead,
+.ie #introduction,
+.ie article section,
+.ie #colophon {
+ width: @8cols;
+}
+
+.ie #masthead h1, .ie #masthead p, .ie #introduction span, .ie #follow a {
+ display: block;
+}
+
+.ie #nav {
+ padding-left: (72+72-24)/@em;
+}
+
+ .ie #nav li {
+ display: inline;
+ }
+
+ ie. #nav li:first-child {
+ margin-left: 24/@em;
+ }
+
+
+/*
+ Full page zooms
+ 0.882352941 0.941176471 1.058823529 1.117647059
+*/
+
+@media screen and (max-width: 270px) {
+ body {
+ font-size: (@font-size - 2)/16*1em;
+ }
+ #masthead, #introduction, article section, #colophon {
+ padding-left: 10/@em;
+ padding-right: 10/@em;
+ }
+}
+
+@media screen and (max-width: 319px) {
+ body {
+ font-size: (@font-size - 1)/16*1em;
+ }
+}
+
+@media
+ screen and (min-width: 520px) and (max-width: 599px),
+ screen and (min-width: 720px) and (max-width: 911px),
+ screen and (min-width: 1240px) and (max-width: 1639px),
+ screen and (min-width: 2160px) {
+ body {
+ font-size: (@font-size + 1)/16*1em;
+ }
+}
+
+@media
+ screen and (min-width: 1640px) and (max-width: 1887px),
+ screen and (min-width: 2400px) {
+ body {
+ font-size: (@font-size + 2)/16*1em;
+ }
+}
+
+
+/*
+ Mobile layout
+ 240–479 px
+ Zoomed out below 320 px
+*/
+
+@media screen and (min-width: 240px) {
+
+ #masthead, #introduction, article section, #colophon {
+ width: @4cols;
+ max-width: none;
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .col3, .col4, .col21, .col22 {
+ background: @highlight;
+ }
+
+}
+
+
+/*
+ Wide mobile layout
+ 480-767 px
+ Zoomed in above 480 px
+*/
+
+@media screen and (min-width: 480px) {
+
+ #masthead, #introduction, article section, #colophon {
+ width: @6cols;
+ }
+
+ #masthead h1, #masthead p, #introduction span, #follow span {
+ display: block;
+ }
+
+ #nav {
+ margin-left: 72/@em;
+ }
+
+ #grid {
+ height: @3cols;
+ }
+
+ .col3, .col21 {
+ background: @emphasis;
+ }
+
+ #build figure {
+ height: @3cols;
+ }
+
+}
+
+
+/*
+ Tablet layout
+ 600-911 px
+ Zoomed in above 600 px
+*/
+
+@media screen and (min-width: 600px) {
+
+ #masthead, #introduction, article section, #colophon {
+ width: @8cols;
+ }
+
+ #masthead {
+ text-align: left;
+ position: relative;
+ padding-top: 36/@em;
+ }
+
+ #masthead h1 {
+ float: left;
+ margin-right: 4/@em;
+ }
+
+ #masthead p {
+ width: @4cols;
+ }
+
+ #nav {
+ position: absolute;
+ right: 0; top: 12/@em;
+ }
+
+ #introduction h1, #follow h1 {
+ .large();
+ }
+
+ #grid {
+ height: @5cols;
+ }
+
+ .col4, .col22 {
+ background: @emphasis;
+ }
+
+ article h2 {
+ .large();
+ letter-spacing: 1.1/27*1em;
+ padding-top: 72/27*1em;
+ }
+
+ #build figure {
+ height: @4cols;
+ }
+
+ #author, #promo {
+ width: @4cols;
+ float: left;
+ }
+
+ #author {
+ padding: 0 24/@em 0 0;
+ }
+
+ #copyright {
+ clear: both;
+ }
+
+}
+
+
+/*
+ Widescreen layout
+ 912-1887 px
+ Zoomed in above 912 px
+*/
+
+@media screen and (min-width: 912px) {
+
+ #masthead, #introduction, article section, #colophon {
+ width: @12cols;
+ }
+
+ #masthead {
+ padding-top: 48/@em;
+ }
+
+ #masthead h1 {
+ .huge();
+ width: auto;
+ letter-spacing: 2/44*1em;
+ }
+
+ #masthead p {
+ position: absolute;
+ left: (24/@em)+@4cols; top: 48/@em;
+ width: @3cols;
+ }
+
+ #nav {
+ top: 24/@em;
+ }
+
+ #introduction {
+
+ }
+
+ #introduction h1 {
+ .huge();
+ }
+
+ #grid {
+ height: @6cols;
+ }
+
+ .col5, .col6,
+ .col23, .col24 {
+ background: @emphasis;
+ }
+
+ #build div {
+ position: relative;
+ padding-left: (@gutter/@em)+@4cols;
+ min-height: @3cols;
+ }
+
+ #build figure {
+ width: @4cols;
+ height: @3cols;
+ margin: 0;
+ position: absolute;
+ left: 0; top: 0;
+ }
+
+ #colophon {
+ margin-top: 72/@em;
+ border-top: 1.1/@em solid @emphasis;
+ padding-top: 23/@em;
+ }
+
+ #follow {
+ float: left;
+ width: @4cols;
+ padding: 36/@em 24/@em 0 0;
+ border: 0;
+ }
+
+ #follow h1 {
+ .normal();
+ text-align: left;
+ }
+
+ #follow span {display: inline;}
+
+ #copyright {
+ padding-left: @gutter/@em + @4cols;
+ }
+