From 6d1bd3f82539fa57fc463b4a059a5de3a79d65e7 Mon Sep 17 00:00:00 2001 From: raphaelgoetter Date: Thu, 1 Aug 2013 08:56:52 +0200 Subject: [PATCH] summer refreshing --- css/knacss.css | 45 ++++++++++----------- less/knacss.less | 103 +++++++++++++++++++++++++++++++++++------------ 2 files changed, 99 insertions(+), 49 deletions(-) diff --git a/css/knacss.css b/css/knacss.css index 09e5938..96014d4 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,10 +1,10 @@ /* -* www.KNACSS.com V2.6k @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V2.6l @author: Raphael Goetter, Alsacreations * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ */ /* ----------------------------- */ -/* ==reset */ +/* ==reset */ /* ----------------------------- */ /* base font-size corresponds to 10px and is adapted to rem unit */ @@ -125,6 +125,11 @@ em { strong { font-weight: bold; } +i, +b { + font-style: normal; + font-weight: normal; +} kbd { padding: 0 2px; border: 1px solid #999; @@ -211,7 +216,7 @@ body > script {display: none !important;} } /* ----------------------------- */ -/* ==layout and modules */ +/* ==layout and modules */ /* ----------------------------- */ /* switching box model for all elements */ @@ -222,8 +227,8 @@ body > script {display: none !important;} } /* float layout */ -/* module, contains floats (.item is the same) */ -.mod, .item { +/* module, gains superpower "BFC" Block Formating Context */ +.mod { overflow: hidden; } @@ -294,11 +299,11 @@ img.left, img.right { .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } -.w33 { width: 33.333%; } +.w33 { width: 33.3333%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } -.w66 { width: 66.666%; } +.w66 { width: 66.6666%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } @@ -383,19 +388,7 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css .desktop-hidden { display: none; } /* hidden on desktop */ /* ----------------------------- */ -/* ==header */ -/* ----------------------------- */ - -/* ----------------------------- */ -/* ==sidebar */ -/* ----------------------------- */ - -/* ----------------------------- */ -/* ==footer */ -/* ----------------------------- */ - -/* ----------------------------- */ -/* ==forms */ +/* ==forms */ /* ----------------------------- */ form, fieldset { @@ -415,11 +408,17 @@ textarea { } /* ----------------------------- */ -/* ==main */ +/* ==own stylesheet */ /* ----------------------------- */ +/* Here should go your own CSS styles */ +/* You can link them with an @import or, better for webperf, just paste them here */ + +/* @import url(my-styles.css); */ + + /* ----------------------------- */ -/* ==iefix */ +/* ==iefix */ /* ----------------------------- */ /* hasLayout for IE6/IE7 */ @@ -452,7 +451,7 @@ textarea { */ /* ----------------------------- */ -/* ==print */ +/* ==print */ /* ----------------------------- */ /* quick print reset */ diff --git a/less/knacss.less b/less/knacss.less index 56db5a4..8dce558 100644 --- a/less/knacss.less +++ b/less/knacss.less @@ -1,5 +1,5 @@ /* -* www.KNACSS.com V2.6i @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V2.6l @author: Raphael Goetter, Alsacreations * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ */ @@ -30,9 +30,8 @@ margin-bottom: 0; } - /* ----------------------------- */ -/* ==reset */ +/* ==reset */ /* ----------------------------- */ /* base font-size corresponds to 10px and is adapted to rem unit */ @@ -140,6 +139,11 @@ em { strong { font-weight: bold; } +i, +b { + font-style: normal; + font-weight: normal; +} kbd { padding: 0 2px; border: 1px solid #999; @@ -210,7 +214,7 @@ body > script {display: none !important;} } /* ----------------------------- */ -/* ==layout and modules */ +/* ==layout and modules */ /* ----------------------------- */ /* switching box model for all elements */ @@ -221,8 +225,8 @@ body > script {display: none !important;} } /* float layout */ -/* module, contains floats (.item is the same) */ -.mod, .item { +/* module, gains superpower "BFC" Block Formating Context */ +.mod { overflow: hidden; } @@ -342,10 +346,10 @@ img.left, img.right { .txtright { text-align: right; } .txtcenter { text-align: center; } -/* grids */ +/* grids */ /* ------------------------------ */ -[class*=grid] > * {float: left; } /* direct childrens are floating */ +[class^=grid] > * {float: left; } /* direct childrens are floating */ .grid2 > * {.grid(2);} .grid3 > * {.grid(3);} @@ -381,16 +385,69 @@ img.left, img.right { width: (100%-@gutter) * 3 / 4; } +/* ----------------------------- */ +/* ==autogrids */ +/* ----------------------------- */ + +/* auto-justified equal grids */ + +[class^="autogrid"] { + text-align: justify; + font-size: 1px; letter-spacing: -1px; /* whitespace fi xpart 1 */ +} +[class^="autogrid"]:after { + content: ""; + display: inline-block; + width: 100%; +} +[class^="autogrid"] > * { + display: inline-block; + vertical-align: top; + text-align: left; + font-size: 14em; font-size: 1.4rem; letter-spacing: normal; /* whitespace fix part 2 */ + *display: inline; *zoom: 1; /* ie6 / ie7 hack */ +} +.autogrid2 > * {width: 49.55%} +.autogrid3 > * {width: 32.8%} +.autogrid4 > * {width: 24.4%} +.autogrid5 > * {width: 19.4%} +.autogrid6 > * {width: 16%} +.autogrid8 > * {width: 11.75%} +.autogrid10 > * {width: 9.3%} +.autogrid12 > * {width: 7.6%} + +/* Responsiv-o-matic */ + +@media (max-width: @largescreen) { + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * {width: 32.8%} +} +@media (max-width: @mediumscreen) { + .autogrid3 > *, + .autogrid4 > *, + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * {width: 49.55%} +} +@media (max-width: @tinyscreen) { + [class^="autogrid"] > * {width: 100%} +} + /* blocks widths (percentage and pixels) */ .w10 { width: 10%; } .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } -.w33 { width: 33.333%; } +.w33 { width: 33.3333%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } -.w66 { width: 66.666%; } +.w66 { width: 66.6666%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } @@ -476,19 +533,7 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css .mobile-hidden { display: block; } /* ----------------------------- */ -/* ==header */ -/* ----------------------------- */ - -/* ----------------------------- */ -/* ==sidebar */ -/* ----------------------------- */ - -/* ----------------------------- */ -/* ==footer */ -/* ----------------------------- */ - -/* ----------------------------- */ -/* ==forms */ +/* ==forms */ /* ----------------------------- */ form, fieldset { @@ -508,11 +553,17 @@ textarea { } /* ----------------------------- */ -/* ==main */ +/* ==own stylesheet */ /* ----------------------------- */ +/* Here should go your own CSS styles */ +/* You can link them with an @import or, better for webperf, just paste them here */ + +/* @import url(my-styles.css); */ + + /* ----------------------------- */ -/* ==iefix */ +/* ==iefix */ /* ----------------------------- */ /* haslayout for IE6/IE7 */ @@ -545,7 +596,7 @@ textarea { */ /* ----------------------------- */ -/* ==print */ +/* ==print */ /* ----------------------------- */ /* quick print reset */