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

30
less/00-config.less
View file

@ -2,16 +2,16 @@
// booleans // booleans
@enable-ie678 : true; // "true" to activate IE6/IE7/IE8 support @enable-ie678 : true; // "true" to activate IE6/IE7/IE8 support
@enable-styling : true; // "true" to design basic elements like code, mark, blockquotes, etc. @enable-styling : true; // "true" to design basic elements like code, mark, blockquotes, etc.
@enable-gmaps : true; // if google maps is used @enable-gmaps : true; // if google maps is used
@enable-skip-links : true; // "true" to design skip links for accessibility concerns @enable-skip-links : true; // "true" to design skip links for accessibility concerns
@enable-hyphens : true; // activate automatic hyphens on small screens @enable-hyphens : true; // activate automatic hyphens on small screens
@enable-helpers-width : true; // decide whether or not you need width helpers @enable-helpers-width : true; // decide whether or not you need width helpers
@enable-helpers-spacing : true; // decide whether or not you need spacing helpers @enable-helpers-spacing : true; // decide whether or not you need spacing helpers
// font sizes // 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 @line-height : 1.5; // equiv line-height 1.5
@h1-size : 3.2rem; // equiv "32px" @h1-size : 3.2rem; // equiv "32px"
@h2-size : 2.8rem; // equiv "28px" @h2-size : 2.8rem; // equiv "28px"
@ -21,17 +21,17 @@
@h6-size : 1.6rem; // equiv "16px" @h6-size : 1.6rem; // equiv "16px"
// font stacks // font stacks
@fontstack1 : Helvetica, Arial, sans-serif; // common font @font-stack-common : Helvetica, Arial, sans-serif; // common font
@fontstack2 : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font @font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
@fontstack3 : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack @font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
// font colors // font colors
@basecolor : #000; // text color on body @base-color : #000; // text color on body
@basecolor-link : #333; // primary links color; @base-color-link : #333; // primary links color;
@basecolor-link-hover : #000; // primary hovered/focused links color; @base-color-link-hover : #000; // primary hovered/focused links color;
// backgrounds // backgrounds
@basebg : #fff; // body background color @base-background : #fff; // body background color
// spacings // spacings
@tiny-value : 0.5em; // tiny value for margins / paddings @tiny-value : 0.5em; // tiny value for margins / paddings
@ -55,12 +55,12 @@
// LESS mixins : don't touch or you'll be banned ;) // LESS mixins : don't touch or you'll be banned ;)
// px to em/rem // px to em/rem
.rem(@size, @bf: @basefont){ .rem(@size, @bf: @base-font-size){
@rem: @size; @rem: @size;
font-size: unit(round(@basefont * @size), px); font-size: unit(round(@base-font-size * @size), px);
font-size: unit(@rem, rem); font-size: unit(@rem, rem);
} }
.em(@size, @bf: @basefont){ .em(@size, @bf: @base-font-size){
@em: @size / @bf; @em: @size / @bf;
font-size: unit(round(@em,2), em); font-size: unit(round(@em,2), em);
} }

20
less/01-base.less
View file

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

8
less/02-grids.less
View file

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

12
less/11-ie.less
View file

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