LESS boilerplate

site.less

/*csslint box-model: false, box-sizing: false, universal-selector: false */
/*



                 All projects
                 should have nice 
                 ASCII ART!
                 
                 http://patorjk.com/software/taag/




*/

@bg: #fff;
@fg: #000;

.transform(@value) {
    -webkit-transform: @value;
       -moz-transform: @value;
         -o-transform: @value;
        -ms-transform: @value;
            transform: @value;
}

/* ==========================================================================
   Base
   ========================================================================== */

/* 
Base

Normalisering av HTML-element, t ex inmatningsfält, knappar och länkar. Detta
avsnitt bör innehålla element- och attributselektorer som är enkla att stila
med hjälp av klasser. Klasser ska undvikas.

Låna så mycket som möjligt från
[normalise.css](https://github.com/necolas/normalize.css/blob/master/normalize.css).

Bastypografin sätts till *large* (ca 24px) med 1.25 radhöjd. Fonten **Open Sans** bäddas in från Google Web Fonts.
Fonten ändras med hjälp av media queries (blir mindre på små viewports).

Markup:
Normaliserad text som fyller ut en hel rad genom att 
fler ord fylls på i det här stycket, även <a href="http://madr.se">länk läggs in</a> för att visa hur den ser ut. 
<br>Detta är ett hårt radbryt.

Styleguide 1
*/

*, :before, :after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    
    background: @bg;
    color: @fg;
    font: normal large/1.25 sans-serif;
}

body, ul, p {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    display: none;
}

a {
    text-decoration: none;
    color: inherit;
}

a[href]:not([class]) {
  color: blue;
  text-decoration: underline;
}

em {
    font-style: normal;
}

button,
input[type=submit] {
    .user-select(text);

    border: 0;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

button::-moz-focus-inner, 
input[type=submit]::-moz-focus-inner {
    padding: 0;
    border: 0;
}

input {
    border: 0;
    background: #fff;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: inherit;
}

/* ==========================================================================
   Template
   ========================================================================== */

/*
Mall

Innehåller kolumner, ett system för grids och containers fö övriga 
designkomponenter. Detta avsnitt ska i strikt mening innehålla endast klasser.

Styleguide 2
*/

/* Float Helpers
   ========================================================================== */

/*
Layouthjälpare (floats)

Klasser som främst hanterar floats. Är i dagsläget ej anpassade till 
följsam layout.

.pull-left - gör ett objekt float: left;
.pull-right - gör ett objekt float: right;
.line - får en behållare att rymma objekt med floats
.clear - får en behållare eller objekt att rensa floats

Markup:
<div class="line">
    <div class="{$modifiers}">Text</div>
</div>

Styleguide 2.1
*/

.pull-left, .unit {
    float: left;
}

.pull-right {
    float: right;
}

.line:after {
    content: "";
    display: block;
    clear: both;
}

.clear {
    clear: both;
}


/* Columns
   ========================================================================== */

.page {
}


/* Grid
   ========================================================================== */

/*
Grid 

Griden är baserad på YUI grids och är i skrivandets stund ej anpassad för 
följsam layout.

Markup:
<div class="line">
    <div class="unit size1of2">1/2</div>
    <div class="unit size1of2">1/2</div>
</div>
<div class="line">
    <div class="unit size1of3">1/3</div>
    <div class="unit size2of2">2/3</div>
</div>
<div class="line">
    <div class="unit size1of4">1/4</div>
    <div class="unit size3of4">3/4</div>
</div>
<div class="line">
    <div class="unit size1of5">1/5</div>
    <div class="unit size4of5">4/5</div>
    <div class="unit size3of5">3/5</div>
    <div class="unit size2of5">2/5</div>
</div>

Styleguide 2.2
*/

.unit {
    list-style: none;
    padding: 0;
    margin: 0;
}

.size1of5 { width: 20% }
.size1of4 { width: 25% }
.size1of3 { width: 33.3333% }
.size2of5 { width: 40% }
.size1of2 { width: 50% }
.size3of5 { width: 60% }
.size2of3 { width: 66.6666% }
.size3of4 { width: 75% }
.size4of5 { width: 80% }
.size1of7 { width: 14.2857% }


/* ==========================================================================
   Core modules
   ========================================================================== */

/*
Kärnmoduler

Moduler som andra moduler är beroende av för att fungera korrekt, vilket gör
att dessa behöver komma först i The Cascade.

Detta avsnitt ska endast innehålla klasser och media queries, med få undantag.

Styleguide 3
*/

/* nav pattern */
.nav { list-style: none; padding: 0;}
.nav a, .nav strong { display: block; }


/* Headings
   ========================================================================== */

/*
Rubriker

Rubriker används för att skapa sektioner och avdelningar i designen.

.big - Överdrivet stor rubrik
.h1 - Dominant one-of-a-kind rubrik
.h2 - typisk sektionsrubrik

Markup:
<div class="{$modifiers}">En rubrik<br>med ett radbryt</div>

Styleguide 3.2
*/

h1, .h1 {
    font-weight: normal;
    text-align: center;
    font-size: 1.66em;
}


/* ==========================================================================
   Modules
   ========================================================================== */

/*
Moduler

Modulerna i detta asvnitt är isolerade och beror ej på andra moduler som ej är
kärnmoduler, detta för att enkelt kunna slå av och på CSS. Normalt sett så
är modulerna utökningar av kärnmoduler och behållare.

Avsnittet ska enbart innehålla klasser och media queries, med få undantag.

Styleguide 4
*/

styleguide.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Design</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>
<link href='design.less' rel='stylesheet'>
<script src="less.js"></script>
</head>
<body>
<h1>Design</h1>
<p>Your elements here</p>
</body>
</html>