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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bower.json
View file

@ -1,6 +1,6 @@
{ {
"name": "KNACSS", "name": "KNACSS",
"version": "3.0.6", "version": "3.0.7",
"homepage": "http://www.knacss.com/", "homepage": "http://www.knacss.com/",
"authors": [ "authors": [
"Raphaël GOETTER, Alsacreations" "Raphaël GOETTER, Alsacreations"

4
css/knacss.css
View file

File diff suppressed because one or more lines are too long

16
less/_00-config.less
View file

@ -30,12 +30,12 @@
@secondary-background : #fff; // secondary elements background color @secondary-background : #fff; // secondary elements background color
// spacings // spacings
@tiny-value : 0.5em; // tiny value for margins / paddings @tiny-value : 0.5rem; // tiny value for margins / paddings
@small-value : 1em; // small value for margins / paddings @small-value : 1rem; // small value for margins / paddings
@medium-value : 2em; // medium value for margins / paddings @medium-value : 2rem; // medium value for margins / paddings
@large-value : 4em; // large value for margins / paddings @large-value : 4rem; // large value for margins / paddings
@extra-large-value : 6em; // extra large value for margins / paddings @extra-large-value : 6rem; // extra large value for margins / paddings
@ultra-large-value : 10em; // ultra large value for margins / paddings @ultra-large-value : 10rem; // ultra large value for margins / paddings
// breakpoints // breakpoints
@tiny-screen : 320px; // tiny screens media query @tiny-screen : 320px; // tiny screens media query
@ -68,3 +68,7 @@
@em: @size / @bf; @em: @size / @bf;
font-size: unit(round(@em,2), em); 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/ * Licence WTFPL http://www.wtfpl.net/
*/ */
@ -506,26 +506,32 @@ img.end {
} }
.mas { .mas {
margin: @small-value * @base-font-size * 1px; // fallback ie678
margin: @small-value; margin: @small-value;
} }
.mam { .mam {
margin: @medium-value * @base-font-size * 1px; // fallback ie678
margin: @medium-value; margin: @medium-value;
} }
.mal { .mal {
margin: @large-value * @base-font-size * 1px; // fallback ie678
margin: @large-value; margin: @large-value;
} }
.pas { .pas {
padding: @small-value * @base-font-size * 1px; // fallback ie678
padding: @small-value; padding: @small-value;
} }
.pam { .pam {
padding: @medium-value * @base-font-size * 1px; // fallback ie678
padding: @medium-value; padding: @medium-value;
} }
.pal { .pal {
padding: @large-value * @base-font-size * 1px; // fallback ie678
padding: @large-value; padding: @large-value;
} }
@ -534,14 +540,17 @@ img.end {
} }
.mts { .mts {
margin-top: @small-value * @base-font-size * 1px; // fallback ie678
margin-top: @small-value; margin-top: @small-value;
} }
.mtm { .mtm {
margin-top: @medium-value * @base-font-size * 1px; // fallback ie678
margin-top: @medium-value; margin-top: @medium-value;
} }
.mtl { .mtl {
margin-top: @large-value * @base-font-size * 1px; // fallback ie678
margin-top: @large-value; margin-top: @large-value;
} }
@ -550,14 +559,17 @@ img.end {
} }
.mrs { .mrs {
margin-right: @small-value * @base-font-size * 1px; // fallback ie678
margin-right: @small-value; margin-right: @small-value;
} }
.mrm { .mrm {
margin-right: @medium-value * @base-font-size * 1px; // fallback ie678
margin-right: @medium-value; margin-right: @medium-value;
} }
.mrl { .mrl {
margin-right: @large-value * @base-font-size * 1px; // fallback ie678
margin-right: @large-value; margin-right: @large-value;
} }
@ -566,14 +578,17 @@ img.end {
} }
.mbs { .mbs {
margin-bottom: @small-value * @base-font-size * 1px; // fallback ie678
margin-bottom: @small-value; margin-bottom: @small-value;
} }
.mbm { .mbm {
margin-bottom: @medium-value * @base-font-size * 1px; // fallback ie678
margin-bottom: @medium-value; margin-bottom: @medium-value;
} }
.mbl { .mbl {
margin-bottom: @large-value * @base-font-size * 1px; // fallback ie678
margin-bottom: @large-value; margin-bottom: @large-value;
} }
@ -582,14 +597,17 @@ img.end {
} }
.mls { .mls {
margin-left: @small-value * @base-font-size * 1px; // fallback ie678
margin-left: @small-value; margin-left: @small-value;
} }
.mlm { .mlm {
margin-left: @medium-value * @base-font-size * 1px; // fallback ie678
margin-left: @medium-value; margin-left: @medium-value;
} }
.mll { .mll {
margin-left: @large-value * @base-font-size * 1px; // fallback ie678
margin-left: @large-value; margin-left: @large-value;
} }
@ -598,14 +616,17 @@ img.end {
} }
.pts { .pts {
padding-top: @small-value * @base-font-size * 1px; // fallback ie678
padding-top: @small-value; padding-top: @small-value;
} }
.ptm { .ptm {
padding-top: @medium-value * @base-font-size * 1px; // fallback ie678
padding-top: @medium-value; padding-top: @medium-value;
} }
.ptl { .ptl {
padding-top: @large-value * @base-font-size * 1px; // fallback ie678
padding-top: @large-value; padding-top: @large-value;
} }
@ -614,14 +635,17 @@ img.end {
} }
.prs { .prs {
padding-right: @small-value * @base-font-size * 1px; // fallback ie678
padding-right: @small-value; padding-right: @small-value;
} }
.prm { .prm {
padding-right: @medium-value * @base-font-size * 1px; // fallback ie678
padding-right: @medium-value; padding-right: @medium-value;
} }
.prl { .prl {
padding-right: @large-value * @base-font-size * 1px; // fallback ie678
padding-right: @large-value; padding-right: @large-value;
} }
@ -630,14 +654,17 @@ img.end {
} }
.pbs { .pbs {
padding-bottom: @small-value * @base-font-size * 1px; // fallback ie678
padding-bottom: @small-value; padding-bottom: @small-value;
} }
.pbm { .pbm {
padding-bottom: @medium-value * @base-font-size * 1px; // fallback ie678
padding-bottom: @medium-value; padding-bottom: @medium-value;
} }
.pbl { .pbl {
padding-bottom: @large-value * @base-font-size * 1px; // fallback ie678
padding-bottom: @large-value; padding-bottom: @large-value;
} }
@ -646,14 +673,17 @@ img.end {
} }
.pls { .pls {
padding-left: @small-value * @base-font-size * 1px; // fallback ie678
padding-left: @small-value; padding-left: @small-value;
} }
.plm { .plm {
padding-left: @medium-value * @base-font-size * 1px; // fallback ie678
padding-left: @medium-value; padding-left: @medium-value;
} }
.pll { .pll {
padding-left: @large-value * @base-font-size * 1px; // fallback ie678
padding-left: @large-value; padding-left: @large-value;
} }

21
sass/_00-config.scss
View file

@ -30,12 +30,12 @@ $primary-background : #fff; // primary elements background color
$secondary-background : #fff; // secondary elements background color $secondary-background : #fff; // secondary elements background color
// spacings // spacings
$tiny-value : 0.5em; // tiny value for margins / paddings $tiny-value : 0.5rem; // tiny value for margins / paddings
$small-value : 1em; // small value for margins / paddings $small-value : 1rem; // small value for margins / paddings
$medium-value : 2em; // medium value for margins / paddings $medium-value : 2rem; // medium value for margins / paddings
$large-value : 4em; // large value for margins / paddings $large-value : 4rem; // large value for margins / paddings
$extra-large-value : 6em; // extra large value for margins / paddings $extra-large-value : 6rem; // extra large value for margins / paddings
$ultra-large-value : 10em; // ultra large value for margins / paddings $ultra-large-value : 10rem; // ultra large value for margins / paddings
// breakpoints // breakpoints
$tiny-screen : 320px; // tiny screens media query $tiny-screen : 320px; // tiny screens media query
@ -78,4 +78,13 @@ $enable-helpers-spacing : true; // decide whether or not you need spacing helper
@else { @else {
@warn "Please make sure `$size` is unitless." @warn "Please make sure `$size` is unitless."
} }
}
@mixin px($size) {
@if unitless($size) {
$bf: $base-font-size / 1px;
font-size: $size * $bf * 1px;
}
@else {
@warn "Please make sure `$size` is unitless."
}
} }

2
sass/_01-base.scss
View file

@ -1,5 +1,5 @@
/*! /*!
* www.KNACSS.com V3.0.6 (2014-08-19) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel) * www.KNACSS.com V3.0.7 (2014-08-21) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel)
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */