Skip to content

Instantly share code, notes, and snippets.

@madr
Last active February 14, 2016 14:54
Show Gist options
  • Save madr/6622974 to your computer and use it in GitHub Desktop.
Save madr/6622974 to your computer and use it in GitHub Desktop.
LESS boilerplate
/*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
*/
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment