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

better vertical rythm for headings

Browse source
This commit is contained in:
Raphael Goetter 2013-09-16 21:21:06 +02:00
parent d647f8c464
commit 133b38724b
4 changed files with 51 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
css/knacss.css
View file

@ -1,5 +1,5 @@
/*
* www.KNACSS.com V2.8 (2013-09) @author: Raphael Goetter, Alsacreations
* www.KNACSS.com V2.8a (2013-09) @author: Raphael Goetter, Alsacreations
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
*/
@ -34,39 +34,38 @@ textarea,
caption,
details,
figure {
font-size: 1em; /* equiv 14px */
line-height: 1.5;
margin: .75em 0 0;
line-height: 1.5;
}
h1, .h1-like {
font-size: 2.286em; /* equiv 32px */
line-height: 1.6154em;
margin: .8077em 0 0 0;
margin: 0.6563em 0 0 0;
font-size: 2.2857em; /* equiv 32px */
line-height: 1.3126em;
}
h2, .h2-like {
margin: 0.75em 0 0 0;
font-size: 2em; /* equiv 28px */
line-height: 1.75em;
margin: .875em 0 0 0;
line-height: 1.5em;
}
h3, .h3-like {
font-size: 1.714em; /* equiv 24px */
line-height: 1.909em;
margin: .9545em 0 0 0;
margin: 0.875em 0 0 0;
font-size: 1.7143em; /* equiv 24px */
line-height: 1.75em;
}
h4, .h4-like {
margin: 1.05em 0 0 0;
font-size: 1.4286em; /* equiv 20px */
line-height: 1.05em;
margin: 1.05em 0 0 0;
}
h5, .h5-like {
margin: 1.1667em 0 0 0;
font-size: 1.2857em; /* equiv 18px */
line-height: 1.1667em;
margin: 1.1667em 0 0 0;
}
h6, .h6-like {
margin: 1.3125em 0 0 0;
font-size: 1.1429em; /* equiv 16px */
line-height: 1.3125em;
margin: 1.3125em 0 0 0;
}
/* alternate font-sizing */

30
less/01-base.less
View file

@ -11,8 +11,8 @@ body {
background-color: #fff;
color: #000;
font-family: @fontstack1;
font-size: ((@basefont / 10) + 0em);
line-height: @l-h; // adapt to your design
font-size: unit((@basefont / 10), em);
line-height: @lh; // adapt to your design
}
/* font-sizing for content */
@ -31,42 +31,44 @@ caption,
details,
figure,
hgroup {
.flow(@basefont);
margin-top: .75em;
margin-bottom: 0;
line-height: @lh;
}
h1, .h1-like {
.flow(32); // equiv 32px
.flow(32px); // equiv 32px
}
h2, .h2-like {
.flow(28); // equiv 28px
.flow(28px); // equiv 28px
}
h3, .h3-like {
.flow(24); // equiv 24px
.flow(24px); // equiv 24px
}
h4, .h4-like {
.flow(20); // equiv 20px
.flow(20px); // equiv 20px
}
h5, .h5-like {
.flow(18); // equiv 18px
.flow(18px); // equiv 18px
}
h6, .h6-like {
.flow(16); // equiv 16px
.flow(16px); // equiv 16px
}
/* alternate font-sizing */
.smaller {
.pxtoem (10); /* equiv 10px */
.rem (10px); /* equiv 10px */
}
.small {
.pxtoem (12); /* equiv 12px */
.rem (12px); /* equiv 12px */
}
.big {
.pxtoem (16); /* equiv 16px */
.rem (16px); /* equiv 16px */
}
.bigger {
.pxtoem (18); /* equiv 18px */
.rem (18px); /* equiv 18px */
}
.biggest {
.pxtoem (20); /* equiv 20px */
.rem (20px); /* equiv 20px */
}
/* soft reset */

7
less/06-rwd.less
View file

@ -116,13 +116,6 @@
}
/* margins for small (s) screens */
.small-ma0 { margin: 0 !important; }
/* Responsive grids */
.grid4 > * {.grid(2);}
.grid4 > :first-child + * + * {margin-left: 0}
.grid6 > * {.grid(3);}
.grid6 > :first-child + * + * + * {margin-left: 0}
}
@media (max-width: @tinyscreen) {

37
less/knacss.less
View file

@ -1,11 +1,11 @@
/*
* www.KNACSS.com V2.8 (2013-09) @author: Raphael Goetter, Alsacreations
* www.KNACSS.com V2.8a (2013-09) @author: Raphael Goetter, Alsacreations
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
*/
// LESS values : adapt them to your design
@basefont : 14; // if "14" then 1em = 14px
@l-h : 1.5; // equiv line-height 1.5em
@basefont : 14px; // if "14px" then 1em = 14px
@lh : 1.5; // equiv line-height 1.5em
@smallvalue : 10px; // small value for margins / paddings
@mediumvalue : 20px; // medium value for margins / paddings
@largevalue : 30px; // large value for margins / paddings
@ -17,17 +17,25 @@
@fontstack2 : "consolas, 'DejaVu Sans Mono', courier, monospace"; // monospace font
// LESS mixins : don't touch or you'll be banned ;)
.pxtoem (@fontsize) {font-size: ((@fontsize / @basefont) + 0em);}
.line (@fontsize) {line-height: (@l-h *2 / (@fontsize / @basefont) + 0em)}
.mtop (@fontsize) {margin: (@l-h / (@fontsize / @basefont) + 0em) 0 0}
.flow(@font-size, @base-font: @basefont, @base-height: @l-h) {
@coef: ceil((1 / (@base-height * @base-font / @font-size)));
@size: ((@font-size / @base-font) + 0em);
@height: ((@base-font * @base-height / @font-size) + 0em);
font-size: @size;
line-height: (@height * @coef);
margin-top: @height;
margin-bottom: 0;
// px to em/rem
.rem(@size, @bf: @basefont){
@em: round((@size / @bf),4);
font-size: unit(@em, em);
@rem: round((@size / 10),4);
font-size: unit(@rem, rem);
}
// flow for headings
.flow(@size, @bf: @basefont, @bh: @lh) {
@marg: @bh * @bf / @size;
@mt: unit(round(@marg,4),em);
margin-top: @mt;
margin-bottom: 0;
@em: round((@size / @bf),4);
font-size: unit(@em, em);
@rem: round((@size / 10),4);
font-size: unit(@rem, rem);
@coef: ceil(1/@mt);
line-height: (@mt * @coef);
}
// LESS base styles
@ -41,7 +49,6 @@
/* You can link them with a LESS @import */
/* @import "my-styles.less"; */
// LESS files : chose the ones you need
@import "02-grids.less";
@import "03-tables.less";