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

new names for variables

Browse source
This commit is contained in:
Raphael Goetter 2014-05-04 15:30:21 +02:00
parent d283e11395
commit d0add0508c
4 changed files with 35 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
less/00-config.less
View file

@ -11,7 +11,7 @@
@enable-helpers-spacing : true; // decide whether or not you need spacing helpers
// font sizes
@basefont : 14px; // if "14px" then 1em = 14px
@base-font-size : 14px; // if "14px" then 1em = 14px
@line-height : 1.5; // equiv line-height 1.5
@h1-size : 3.2rem; // equiv "32px"
@h2-size : 2.8rem; // equiv "28px"
@ -21,17 +21,17 @@
@h6-size : 1.6rem; // equiv "16px"
// font stacks
@fontstack1 : Helvetica, Arial, sans-serif; // common font
@fontstack2 : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
@fontstack3 : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
@font-stack-common : Helvetica, Arial, sans-serif; // common font
@font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
@font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
// font colors
@basecolor : #000; // text color on body
@basecolor-link : #333; // primary links color;
@basecolor-link-hover : #000; // primary hovered/focused links color;
@base-color : #000; // text color on body
@base-color-link : #333; // primary links color;
@base-color-link-hover : #000; // primary hovered/focused links color;
// backgrounds
@basebg : #fff; // body background color
@base-background : #fff; // body background color
// spacings
@tiny-value : 0.5em; // tiny value for margins / paddings
@ -55,12 +55,12 @@
// LESS mixins : don't touch or you'll be banned ;)
// px to em/rem
.rem(@size, @bf: @basefont){
.rem(@size, @bf: @base-font-size){
@rem: @size;
font-size: unit(round(@basefont * @size), px);
font-size: unit(round(@base-font-size * @size), px);
font-size: unit(@rem, rem);
}
.em(@size, @bf: @basefont){
.em(@size, @bf: @base-font-size){
@em: @size / @bf;
font-size: unit(round(@em,2), em);
}

20
less/01-base.less
View file

@ -52,10 +52,10 @@ html {
text-size-adjust: 100%;
}
body {
background-color: @basebg;
color: @basecolor;
font-family: @fontstack1;
font-size: unit((@basefont / 10), em);
background-color: @base-background;
color: @base-color;
font-family: @font-stack-common;
font-size: unit((@base-font-size / 10), em);
line-height: @line-height;
}
@ -100,19 +100,19 @@ h6, .h6-like {
/* alternate font-sizing */
.smaller {
.em(@basefont - 4);
.em(@base-font-size - 4);
}
.small {
.em(@basefont - 2);
.em(@base-font-sizefont-stack-common - 2);
}
.big {
.em(@basefont + 2);
.em(@base-font-sizefont-stack-common + 2);
}
.bigger {
.em(@basefont + 4);
.em(@base-font-sizefont-stack-common + 4);
}
.biggest {
.em(@basefont + 6);
.em(@base-font-sizefont-stack-common + 6);
}
code,
@ -121,7 +121,7 @@ samp,
kbd {
white-space: pre-line; /* IE fix */
white-space: pre-wrap;
font-family: @fontstack2;
font-family: @font-stack-monospace;
line-height: normal;
}
em,

8
less/02-grids.less
View file

@ -27,8 +27,8 @@
font-size: 0;
}
:root .grid > * > * {
font-size: @basefont; /* fallback for Opera Mini */
font-size: unit((@basefont / 10), rem);
font-size: @base-font-size; /* fallback for Opera Mini */
font-size: unit((@base-font-size / 10), rem);
}
/* Opera hack */
.opera:-o-prefocus,
@ -100,8 +100,8 @@
font-size: 0;
}
:root [class*="autogrid"] > * {
font-size: @basefont; /* fallback for Opera Mini */
font-size: unit((@basefont / 10), rem);
font-size: @base-font-size; /* fallback for Opera Mini */
font-size: unit((@base-font-size / 10), rem);
}
/* Opera hack */
[class*="autogrid"]:-o-prefocus {

12
less/11-ie.less
View file

@ -6,27 +6,27 @@
& when (@enable-ie678 = true) {
/* IE678 support */
.ie678 h1, .ie678 .h1-like {
@em: @h1-size * 10 / @basefont;
@em: @h1-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em);
}
.ie678 h2, .ie678 .h2-like {
@em: @h2-size * 10 / @basefont;
@em: @h2-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em);
}
.ie678 h3, .ie678 .h3-like {
@em: @h3-size * 10 / @basefont;
@em: @h3-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em);
}
.ie678 h4, .ie678 .h4-like {
@em: @h4-size * 10 / @basefont;
@em: @h4-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em);
}
.ie678 h5, .ie678 .h5-like {
@em: @h5-size * 10 / @basefont;
@em: @h5-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em);
}
.ie678 h6, .ie678 .h6-like {
@em: @h6-size * 10 / @basefont;
@em: @h6-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em);
}
.ie678 img {