dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Spacing helpers in rem unit

Browse source
This commit is contained in:
raphaelgoettter 2014-08-21 17:26:34 +02:00
parent 37d96bcd78
commit 0688709cea
6 changed files with 60 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

16
less/_00-config.less
View file

@ -30,12 +30,12 @@
@secondary-background : #fff; // secondary elements background color
// spacings
@tiny-value : 0.5em; // tiny value for margins / paddings
@small-value : 1em; // small value for margins / paddings
@medium-value : 2em; // medium value for margins / paddings
@large-value : 4em; // large value for margins / paddings
@extra-large-value : 6em; // extra large value for margins / paddings
@ultra-large-value : 10em; // ultra large value for margins / paddings
@tiny-value : 0.5rem; // tiny value for margins / paddings
@small-value : 1rem; // small value for margins / paddings
@medium-value : 2rem; // medium value for margins / paddings
@large-value : 4rem; // large value for margins / paddings
@extra-large-value : 6rem; // extra large value for margins / paddings
@ultra-large-value : 10rem; // ultra large value for margins / paddings
// breakpoints
@tiny-screen : 320px; // tiny screens media query
@ -68,3 +68,7 @@
@em: @size / @bf;
font-size: unit(round(@em,2), em);
}
.px(@size, @bf: @base-font-size){
@px: @size * @bf;
font-size: unit(round(@px,2), px);
}

32
less/_01-base.less
View file

@ -1,5 +1,5 @@
/*!
* www.KNACSS.com V3.0.6 (2014-08-19) @author: Raphael Goetter, Alsacreations
* www.KNACSS.com V3.0.7 (2014-08-21) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/
*/
@ -506,26 +506,32 @@ img.end {
}
.mas {
margin: @small-value * @base-font-size * 1px; // fallback ie678
margin: @small-value;
}
.mam {
margin: @medium-value * @base-font-size * 1px; // fallback ie678
margin: @medium-value;
}
.mal {
margin: @large-value * @base-font-size * 1px; // fallback ie678
margin: @large-value;
}
.pas {
padding: @small-value * @base-font-size * 1px; // fallback ie678
padding: @small-value;
}
.pam {
padding: @medium-value * @base-font-size * 1px; // fallback ie678
padding: @medium-value;
}
.pal {
padding: @large-value * @base-font-size * 1px; // fallback ie678
padding: @large-value;
}
@ -534,14 +540,17 @@ img.end {
}
.mts {
margin-top: @small-value * @base-font-size * 1px; // fallback ie678
margin-top: @small-value;
}
.mtm {
margin-top: @medium-value * @base-font-size * 1px; // fallback ie678
margin-top: @medium-value;
}
.mtl {
margin-top: @large-value * @base-font-size * 1px; // fallback ie678
margin-top: @large-value;
}
@ -550,14 +559,17 @@ img.end {
}
.mrs {
margin-right: @small-value * @base-font-size * 1px; // fallback ie678
margin-right: @small-value;
}
.mrm {
margin-right: @medium-value * @base-font-size * 1px; // fallback ie678
margin-right: @medium-value;
}
.mrl {
margin-right: @large-value * @base-font-size * 1px; // fallback ie678
margin-right: @large-value;
}
@ -566,14 +578,17 @@ img.end {
}
.mbs {
margin-bottom: @small-value * @base-font-size * 1px; // fallback ie678
margin-bottom: @small-value;
}
.mbm {
margin-bottom: @medium-value * @base-font-size * 1px; // fallback ie678
margin-bottom: @medium-value;
}
.mbl {
margin-bottom: @large-value * @base-font-size * 1px; // fallback ie678
margin-bottom: @large-value;
}
@ -582,14 +597,17 @@ img.end {
}
.mls {
margin-left: @small-value * @base-font-size * 1px; // fallback ie678
margin-left: @small-value;
}
.mlm {
margin-left: @medium-value * @base-font-size * 1px; // fallback ie678
margin-left: @medium-value;
}
.mll {
margin-left: @large-value * @base-font-size * 1px; // fallback ie678
margin-left: @large-value;
}
@ -598,14 +616,17 @@ img.end {
}
.pts {
padding-top: @small-value * @base-font-size * 1px; // fallback ie678
padding-top: @small-value;
}
.ptm {
padding-top: @medium-value * @base-font-size * 1px; // fallback ie678
padding-top: @medium-value;
}
.ptl {
padding-top: @large-value * @base-font-size * 1px; // fallback ie678
padding-top: @large-value;
}
@ -614,14 +635,17 @@ img.end {
}
.prs {
padding-right: @small-value * @base-font-size * 1px; // fallback ie678
padding-right: @small-value;
}
.prm {
padding-right: @medium-value * @base-font-size * 1px; // fallback ie678
padding-right: @medium-value;
}
.prl {
padding-right: @large-value * @base-font-size * 1px; // fallback ie678
padding-right: @large-value;
}
@ -630,14 +654,17 @@ img.end {
}
.pbs {
padding-bottom: @small-value * @base-font-size * 1px; // fallback ie678
padding-bottom: @small-value;
}
.pbm {
padding-bottom: @medium-value * @base-font-size * 1px; // fallback ie678
padding-bottom: @medium-value;
}
.pbl {
padding-bottom: @large-value * @base-font-size * 1px; // fallback ie678
padding-bottom: @large-value;
}
@ -646,14 +673,17 @@ img.end {
}
.pls {
padding-left: @small-value * @base-font-size * 1px; // fallback ie678
padding-left: @small-value;
}
.plm {
padding-left: @medium-value * @base-font-size * 1px; // fallback ie678
padding-left: @medium-value;
}
.pll {
padding-left: @large-value * @base-font-size * 1px; // fallback ie678
padding-left: @large-value;
}