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

Supp .mod:after (already BFC)

Browse Source
This commit is contained in:
Raphael Goetter 2014-04-20 19:35:39 +02:00
parent 9eb7aa58d6
commit 050428478b
3 changed files with 15 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
css/01-base.css
View File

@ -2,71 +2,50 @@
* www.KNACSS.com V2.9.3 (2014-02) @author: Raphael Goetter, Alsacreations * www.KNACSS.com V2.9.3 (2014-02) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */
/* ----------------------------- */ /* ----------------------------- */
/* == soft reset */ /* == soft reset */
/* ----------------------------- */ /* ----------------------------- */
/* switching box model for all elements */ /* switching box model for all elements */
* { * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
/* soft reset */ /* soft reset */
html, html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
ul, ul,
ol { ol {
padding-left: 2em; padding-left: 2em;
} }
ul.unstyled { ul.unstyled {
list-style: none; list-style: none;
} }
img { img {
vertical-align: middle; vertical-align: middle;
border: 0; border: 0;
} }
audio, audio,
canvas, canvas,
video { video {
display: inline-block; display: inline-block;
} }
svg:not(:root) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }
figure { figure {
margin: 0; margin: 0;
} }
/* ----------------------------- */ /* ----------------------------- */
/* == typography */ /* == typography */
/* ----------------------------- */ /* ----------------------------- */
/* base font-size corresponds to 10px and is adapted to rem unit */ /* base font-size corresponds to 10px and is adapted to rem unit */
html { html {
font-size: 62.5%; font-size: 62.5%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} }
body { body {
background-color: #ffffff; background-color: #ffffff;
color: #000000; color: #000000;
@ -74,11 +53,8 @@ body {
font-size: 1.4em; font-size: 1.4em;
line-height: 1.5; line-height: 1.5;
} }
/* font-sizing for content */ /* font-sizing for content */
/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ /* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
p, p,
ul, ul,
ol, ol,
@ -97,7 +73,6 @@ hgroup {
margin-bottom: 0; margin-bottom: 0;
line-height: 1.5; line-height: 1.5;
} }
h1, h1,
.h1-like { .h1-like {
margin-top: 0.65625em; margin-top: 0.65625em;
@ -105,7 +80,6 @@ h1,
font-size: 3.2rem; font-size: 3.2rem;
line-height: 1.3125; line-height: 1.3125;
} }
h2, h2,
.h2-like { .h2-like {
margin-top: 0.75em; margin-top: 0.75em;
@ -113,7 +87,6 @@ h2,
font-size: 2.8rem; font-size: 2.8rem;
line-height: 1.5; line-height: 1.5;
} }
h3, h3,
.h3-like { .h3-like {
margin-top: 0.875em; margin-top: 0.875em;
@ -121,7 +94,6 @@ h3,
font-size: 2.4rem; font-size: 2.4rem;
line-height: 1.75; line-height: 1.75;
} }
h4, h4,
.h4-like { .h4-like {
margin-top: 1.05em; margin-top: 1.05em;
@ -129,15 +101,13 @@ h4,
font-size: 2rem; font-size: 2rem;
line-height: 1.05; line-height: 1.05;
} }
h5, h5,
.h5-like { .h5-like {
margin-top: 1.1666666666666667em; margin-top: 1.16666667em;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.8rem; font-size: 1.8rem;
line-height: 1.1666666666666667; line-height: 1.16666667;
} }
h6, h6,
.h6-like { .h6-like {
margin-top: 1.3125em; margin-top: 1.3125em;
@ -145,29 +115,22 @@ h6,
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.3125; line-height: 1.3125;
} }
/* alternate font-sizing */ /* alternate font-sizing */
.smaller { .smaller {
font-size: 0.7142857142857143em; font-size: 0.71428571em;
} }
.small { .small {
font-size: 0.8571428571428571em; font-size: 0.85714286em;
} }
.big { .big {
font-size: 1.1428571428571428em; font-size: 1.14285714em;
} }
.bigger { .bigger {
font-size: 1.2857142857142858em; font-size: 1.28571429em;
} }
.biggest { .biggest {
font-size: 1.4285714285714286em; font-size: 1.42857143em;
} }
code, code,
pre, pre,
samp, samp,
@ -178,86 +141,64 @@ kbd {
font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace; font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace;
line-height: 1; line-height: 1;
} }
code, code,
kbd, kbd,
mark { mark {
border-radius: 2px; border-radius: 2px;
} }
em { em {
font-style: italic; font-style: italic;
} }
strong { strong {
font-weight: bold; font-weight: bold;
} }
kbd { kbd {
padding: 0 2px; padding: 0 2px;
border: 1px solid #999; border: 1px solid #999;
} }
code { code {
padding: 2px 4px; padding: 2px 4px;
background: rgba(0, 0, 0, 0.04); background: rgba(0, 0, 0, 0.04);
color: #b11; color: #b11;
} }
mark { mark {
padding: 2px 4px; padding: 2px 4px;
background: #ff0; background: #ff0;
} }
sup, sup,
sub { sub {
vertical-align: 0; vertical-align: 0;
position: relative; position: relative;
} }
sup { sup {
bottom: 1ex; bottom: 1ex;
} }
sub { sub {
top: .5ex; top: .5ex;
} }
/* ----------------------------- */ /* ----------------------------- */
/* == hiding content */ /* == hiding content */
/* ----------------------------- */ /* ----------------------------- */
/* hiding content */ /* hiding content */
.visually-hidden { .visually-hidden {
position: absolute; position: absolute;
left: -7000px; left: -7000px;
overflow: hidden; overflow: hidden;
} }
[dir=rtl] .visually-hidden { [dir=rtl] .visually-hidden {
left: auto; left: auto;
right: -7000px; right: -7000px;
} }
.desktop-hidden { .desktop-hidden {
display: none; display: none;
} }
/* hidden on desktop */ /* hidden on desktop */
/* ----------------------------- */ /* ----------------------------- */
/* == skip links styling */ /* == skip links styling */
/* ----------------------------- */ /* ----------------------------- */
.skip-links { .skip-links {
position: absolute; position: absolute;
} }
.skip-links a { .skip-links a {
position: absolute; position: absolute;
left: -7000px; left: -7000px;
@ -266,19 +207,13 @@ sub {
color: white; color: white;
text-decoration: none; text-decoration: none;
} }
.skip-links a:focus { .skip-links a:focus {
position: static; position: static;
} }
/* ----------------------------- */ /* ----------------------------- */
/* == browsers consistency */ /* == browsers consistency */
/* ----------------------------- */ /* ----------------------------- */
/* avoid top margins on first content element */ /* avoid top margins on first content element */
p:first-child, p:first-child,
ul:first-child, ul:first-child,
ol:first-child, ol:first-child,
@ -293,18 +228,14 @@ h5:first-child,
h6:first-child { h6:first-child {
margin-top: 0; margin-top: 0;
} }
/* avoid margins on nested elements */ /* avoid margins on nested elements */
li p, li p,
li ul, li ul,
li ol { li ol {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
/* max values */ /* max values */
img, img,
table, table,
td, td,
@ -316,518 +247,389 @@ input,
video { video {
max-width: 100%; max-width: 100%;
} }
/* margin-bottom on tables */ /* margin-bottom on tables */
table { table {
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
/* Google Gmap3 bug fix on images */ /* Google Gmap3 bug fix on images */
:not(.gm-style) img { :not(.gm-style) img {
height: auto !important; height: auto !important;
} }
.ie678 .gm-style img { .ie678 .gm-style img {
height: 100%; height: 100%;
/* IE678 hack */ /* IE678 hack */
} }
.gm-style img, .gm-style img,
.gmnoscreen img, .gmnoscreen img,
.gmnoprint img { .gmnoprint img {
max-width: none !important; max-width: none !important;
} }
/* scripts */ /* scripts */
body > script { body > script {
display: none !important; display: none !important;
} }
/* ----------------------------- */ /* ----------------------------- */
/* ==layout and modules */ /* ==layout and modules */
/* ----------------------------- */ /* ----------------------------- */
/* float layout */ /* float layout */
/* module, gains superpower "BFC" Block Formating Context */ /* module, gains superpower "BFC" Block Formating Context */
.mod { .mod {
overflow: hidden; overflow: hidden;
} }
/* blocks that needs to be placed under floats */ /* blocks that needs to be placed under floats */
.clear, .clear,
.line, .line,
.row { .row {
clear: both; clear: both;
} }
/* blocks that must contain floats */ /* blocks that must contain floats */
.clearfix:after, .clearfix:after,
.line:after, .line:after {
.mod:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
/* table layout */ /* table layout */
.row { .row {
display: table; display: table;
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
} }
.row > *, .row > *,
.col { .col {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;
} }
/* inline-block */ /* inline-block */
.inbl { .inbl {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
/* alignments (blocks and inline) */ /* alignments (blocks and inline) */
/* ------------------------------ */ /* ------------------------------ */
/* left elements */ /* left elements */
.left { .left {
float: left; float: left;
} }
img.left { img.left {
margin-right: 1em; margin-right: 1em;
} }
/* right elements */ /* right elements */
.right { .right {
float: right; float: right;
} }
img.right { img.right {
margin-left: 1em; margin-left: 1em;
} }
img.left, img.left,
img.right { img.right {
margin-bottom: 5px; margin-bottom: 5px;
} }
.center { .center {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.txtleft { .txtleft {
text-align: left; text-align: left;
} }
.txtright { .txtright {
text-align: right; text-align: right;
} }
.txtcenter { .txtcenter {
text-align: center; text-align: center;
} }
/* ----------------------------- */ /* ----------------------------- */
/* == width helpers */ /* == width helpers */
/* .. use only when needed */ /* .. use only when needed */
/* ----------------------------- */ /* ----------------------------- */
/* blocks widths (percentage and pixels) */ /* blocks widths (percentage and pixels) */
.w10 { .w10 {
width: 10%; width: 10%;
} }
.w20 { .w20 {
width: 20%; width: 20%;
} }
.w25 { .w25 {
width: 25%; width: 25%;
} }
.w30 { .w30 {
width: 30%; width: 30%;
} }
.w33 { .w33 {
width: 33.3333%; width: 33.3333%;
} }
.w40 { .w40 {
width: 40%; width: 40%;
} }
.w50 { .w50 {
width: 50%; width: 50%;
} }
.w60 { .w60 {
width: 60%; width: 60%;
} }
.w66 { .w66 {
width: 66.6666%; width: 66.6666%;
} }
.w70 { .w70 {
width: 70%; width: 70%;
} }
.w75 { .w75 {
width: 75%; width: 75%;
} }
.w80 { .w80 {
width: 80%; width: 80%;
} }
.w90 { .w90 {
width: 90%; width: 90%;
} }
.w100 { .w100 {
width: 100%; width: 100%;
} }
.w50p { .w50p {
width: 50px; width: 50px;
} }
.w100p { .w100p {
width: 100px; width: 100px;
} }
.w150p { .w150p {
width: 150px; width: 150px;
} }
.w200p { .w200p {
width: 200px; width: 200px;
} }
.w300p { .w300p {
width: 300px; width: 300px;
} }
.w400p { .w400p {
width: 400px; width: 400px;
} }
.w500p { .w500p {
width: 500px; width: 500px;
} }
.w600p { .w600p {
width: 600px; width: 600px;
} }
.w700p { .w700p {
width: 700px; width: 700px;
} }
.w800p { .w800p {
width: 800px; width: 800px;
} }
.w960p { .w960p {
width: 960px; width: 960px;
} }
.mw960p { .mw960p {
max-width: 960px; max-width: 960px;
} }
.w1140p { .w1140p {
width: 1140px; width: 1140px;
} }
.mw1140p { .mw1140p {
max-width: 1140px; max-width: 1140px;
} }
.wauto { .wauto {
width: auto; width: auto;
} }
/* ----------------------------- */ /* ----------------------------- */
/* == spacing helpers */ /* == spacing helpers */
/* .. use only when needed */ /* .. use only when needed */
/* ----------------------------- */ /* ----------------------------- */
/* spacing helpers /* spacing helpers
p,m = padding,margin p,m = padding,margin
a,t,r,b,l = all,top,right,bottom,left a,t,r,b,l = all,top,right,bottom,left
s,m,l,n = small(10px),medium(20px),large(30px),none(0) s,m,l,n = small(10px),medium(20px),large(30px),none(0)
source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
*/ */
.m-reset, .m-reset,
.ma0 { .ma0 {
margin: 0; margin: 0;
} }
.p-reset, .p-reset,
.pa0 { .pa0 {
padding: 0; padding: 0;
} }
.ma1, .ma1,
.mas { .mas {
margin: 10px; margin: 10px;
} }
.ma2, .ma2,
.mam { .mam {
margin: 20px; margin: 20px;
} }
.ma3, .ma3,
.mal { .mal {
margin: 30px; margin: 30px;
} }
.pa1, .pa1,
.pas { .pas {
padding: 10px; padding: 10px;
} }
.pa2, .pa2,
.pam { .pam {
padding: 20px; padding: 20px;
} }
.pa3, .pa3,
.pal { .pal {
padding: 30px; padding: 30px;
} }
.mt0, .mt0,
.mtn { .mtn {
margin-top: 0; margin-top: 0;
} }
.mt1, .mt1,
.mts { .mts {
margin-top: 10px; margin-top: 10px;
} }
.mt2, .mt2,
.mtm { .mtm {
margin-top: 20px; margin-top: 20px;
} }
.mt3, .mt3,
.mtl { .mtl {
margin-top: 30px; margin-top: 30px;
} }
.mr0, .mr0,
.mrn { .mrn {
margin-right: 0; margin-right: 0;
} }
.mr1, .mr1,
.mrs { .mrs {
margin-right: 10px; margin-right: 10px;
} }
.mr2, .mr2,
.mrm { .mrm {
margin-right: 20px; margin-right: 20px;
} }
.mr3, .mr3,
.mrl { .mrl {
margin-right: 30px; margin-right: 30px;
} }
.mb0, .mb0,
.mbn { .mbn {
margin-bottom: 0; margin-bottom: 0;
} }
.mb1, .mb1,
.mbs { .mbs {
margin-bottom: 10px; margin-bottom: 10px;
} }
.mb2, .mb2,
.mbm { .mbm {
margin-bottom: 20px; margin-bottom: 20px;
} }
.mb3, .mb3,
.mbl { .mbl {
margin-bottom: 30px; margin-bottom: 30px;
} }
.ml0, .ml0,
.mln { .mln {
margin-left: 0; margin-left: 0;
} }
.ml1, .ml1,
.mls { .mls {
margin-left: 10px; margin-left: 10px;
} }
.ml2, .ml2,
.mlm { .mlm {
margin-left: 20px; margin-left: 20px;
} }
.ml3, .ml3,
.mll { .mll {
margin-left: 30px; margin-left: 30px;
} }
.pt0, .pt0,
.ptn { .ptn {
padding-top: 0; padding-top: 0;
} }
.pt1, .pt1,
.pts { .pts {
padding-top: 10px; padding-top: 10px;
} }
.pt2, .pt2,
.ptm { .ptm {
padding-top: 20px; padding-top: 20px;
} }
.pt3, .pt3,
.ptl { .ptl {
padding-top: 30px; padding-top: 30px;
} }
.pr0, .pr0,
.prn { .prn {
padding-right: 0; padding-right: 0;
} }
.pr1, .pr1,
.prs { .prs {
padding-right: 10px; padding-right: 10px;
} }
.pr2, .pr2,
.prm { .prm {
padding-right: 20px; padding-right: 20px;
} }
.pr3, .pr3,
.prl { .prl {
padding-right: 30px; padding-right: 30px;
} }
.pb0, .pb0,
.pbn { .pbn {
padding-bottom: 0; padding-bottom: 0;
} }
.pb1, .pb1,
.pbs { .pbs {
padding-bottom: 10px; padding-bottom: 10px;
} }
.pb2, .pb2,
.pbm { .pbm {
padding-bottom: 20px; padding-bottom: 20px;
} }
.pb3, .pb3,
.pbl { .pbl {
padding-bottom: 30px; padding-bottom: 30px;
} }
.pl0, .pl0,
.pln { .pln {
padding-left: 0; padding-left: 0;
} }
.pl1, .pl1,
.pls { .pls {
padding-left: 10px; padding-left: 10px;
} }
.pl2, .pl2,
.plm { .plm {
padding-left: 20px; padding-left: 20px;
} }
.pl3, .pl3,
.pll { .pll {
padding-left: 30px; padding-left: 30px;
} }
/* ----------------------------- */ /* ----------------------------- */
/* == iefix */ /* == iefix */
/* ----------------------------- */ /* ----------------------------- */
/* Make sure you are using Conditional Classes in your HTML */ /* Make sure you are using Conditional Classes in your HTML */
/* see : http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html */ /* see : http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html */
.ie678 h1, .ie678 h1,
.ie678 .h1-like { .ie678 .h1-like {
font-size: 2.2857142857142856em; font-size: 2.28571429em;
} }
.ie678 h2, .ie678 h2,
.ie678 .h2-like { .ie678 .h2-like {
font-size: 2em; font-size: 2em;
} }
.ie678 h3, .ie678 h3,
.ie678 .h3-like { .ie678 .h3-like {
font-size: 1.7142857142857142em; font-size: 1.71428571em;
} }
.ie678 h4, .ie678 h4,
.ie678 .h4-like { .ie678 .h4-like {
font-size: 1.4285714285714286em; font-size: 1.42857143em;
} }
.ie678 h5, .ie678 h5,
.ie678 .h5-like { .ie678 .h5-like {
font-size: 1.2857142857142858em; font-size: 1.28571429em;
} }
.ie678 h6, .ie678 h6,
.ie678 .h6-like { .ie678 .h6-like {
font-size: 1.1428571428571428em; font-size: 1.14285714em;
} }
/* hasLayout for IE6/IE7 */ /* hasLayout for IE6/IE7 */
.ie67 .clearfix, .ie67 .clearfix,
.ie67 .line, .ie67 .line,
.ie67 .mod, .ie67 .mod,
@ -835,52 +637,39 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
.ie67 .col { .ie67 .col {
zoom: 1; zoom: 1;
} }
/* inline-block and table-cell for IE6/IE7 */ /* inline-block and table-cell for IE6/IE7 */
/* warning: .col needs width on IE6/IE7 */ /* warning: .col needs width on IE6/IE7 */
.ie67 .btn, .ie67 .btn,
.ie67 .col, .ie67 .col,
.ie67 .inbl { .ie67 .inbl {
display: inline; display: inline;
zoom: 1; zoom: 1;
} }
.ie8 img { .ie8 img {
width: auto; width: auto;
/* @bugfix for IE8 */ /* @bugfix for IE8 */
} }
/* Active box-sizing for IE6/IE7 */ /* Active box-sizing for IE6/IE7 */
/* @source https://github.com/Schepp/box-sizing-polyfill */ /* @source https://github.com/Schepp/box-sizing-polyfill */
/* /*
.ie67 * { .ie67 * {
behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); behavior: url(/lib/box-sizing-polyfill/boxsizing.htc);
} }
*/ */
/* ----------------------------- */ /* ----------------------------- */
/* == quick print reset */ /* == quick print reset */
/* ----------------------------- */ /* ----------------------------- */
@media print { @media print {
p, p,
blockquote { blockquote {
orphans: 2; orphans: 2;
widows: 2; widows: 2;
} }
blockquote, blockquote,
ul, ul,
ol { ol {
page-break-inside: avoid; page-break-inside: avoid;
} }
h1, h1,
h2, h2,
h3, h3,
@ -888,10 +677,8 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
page-break-after: avoid; page-break-after: avoid;
} }
} }
/* debug helper */ /* debug helper */
.knacss-debug { .knacss-debug {
background: pink; background: pink;
outline: 3px solid maroon; outline: 3px solid maroon;
} }

3
less/01-base.less
View File

@ -265,8 +265,7 @@ body > script {display: none !important;}
/* blocks that must contain floats */ /* blocks that must contain floats */
.clearfix:after, .clearfix:after,
.line:after, .line:after {
.mod:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;

BIN
less/knackLESS.zip
View File

Binary file not shown.