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

Spacing helpers in rem unit

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",
"version": "3.0.6",
"version": "3.0.7",
"homepage": "http://www.knacss.com/",
"authors": [
"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
// 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;
}

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
// 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
@ -78,4 +78,13 @@ $enable-helpers-spacing : true; // decide whether or not you need spacing helper
@else {
@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/
*/