Minor addons, better commented code
This commit is contained in:
Raphael Goetter
parent
e74cced4e2
commit
f817dbfd7d
5 changed files with 227 additions and 153 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "KNACSS",
|
||||
"version": "2.9.1",
|
||||
"version": "2.9.2",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"authors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
|
|
|
|||
184
css/knacss.css
184
css/knacss.css
|
|
@ -1,15 +1,58 @@
|
|||
/*!
|
||||
* www.KNACSS.com V2.9 (2013-10) @author: Raphael Goetter, Alsacreations
|
||||
* www.KNACSS.com V2.9.2 (2014-01) @author: Raphael Goetter, Alsacreations
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==reset */
|
||||
/* == soft reset */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* switching box model for all elements */
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* soft reset */
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
}
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == typography */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* base font-size corresponds to 10px and is adapted to rem unit */
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #fff;
|
||||
|
|
@ -85,23 +128,11 @@ h6, .h6-like {
|
|||
font-size: 1.4286em; /* equiv 20px */
|
||||
}
|
||||
|
||||
/* soft reset */
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
}
|
||||
code,
|
||||
pre,
|
||||
samp,
|
||||
kbd {
|
||||
white-space: pre-line; /* IE fix */
|
||||
white-space: pre-wrap;
|
||||
font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
|
||||
line-height: 1em;
|
||||
|
|
@ -139,7 +170,47 @@ sup {
|
|||
sub {
|
||||
top: .5ex;
|
||||
}
|
||||
table { margin-bottom: 1.5em; }
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == hiding content */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* hiding content */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
overflow: hidden;
|
||||
}
|
||||
[dir=rtl] .visually-hidden {
|
||||
left: auto;
|
||||
right: -7000px;
|
||||
}
|
||||
.desktop-hidden { display: none; } /* hidden on desktop */
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == skip links styling */
|
||||
/* ----------------------------- */
|
||||
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
}
|
||||
.skip-links a {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
padding: 0.5em;
|
||||
background: #000;
|
||||
color:#fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.skip-links a:focus {
|
||||
position: static;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == browsers consistency */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* avoid top margins on first content element */
|
||||
p:first-child,
|
||||
|
|
@ -169,10 +240,10 @@ li ol {
|
|||
img, table, td, blockquote, code, pre, textarea, input, video {
|
||||
max-width: 100%;
|
||||
}
|
||||
/* pictures */
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* margin-bottom on tables */
|
||||
table { margin-bottom: 1.5em; }
|
||||
|
||||
/* Google Gmap3 bug fix on images */
|
||||
:not(.gm-style) img {
|
||||
height: auto !important;
|
||||
|
|
@ -186,38 +257,14 @@ img {
|
|||
max-width: none !important;
|
||||
}
|
||||
|
||||
a img { border: 0; }
|
||||
|
||||
/* scripts */
|
||||
body > script {display: none !important;}
|
||||
|
||||
/* skip-links */
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
}
|
||||
.skip-links a {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
padding: 0.5em;
|
||||
background: #000;
|
||||
color:#fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.skip-links a:focus {
|
||||
position: static;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==layout and modules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* switching box model for all elements */
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* float layout */
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
|
|
@ -286,6 +333,11 @@ img.left, img.right {
|
|||
.txtright { text-align: right; }
|
||||
.txtcenter { text-align: center; }
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == width helpers */
|
||||
/* .. use only when needed */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* blocks widths (percentages and pixels) */
|
||||
.w10 { width: 10%; }
|
||||
.w20 { width: 20%; }
|
||||
|
|
@ -317,6 +369,12 @@ img.left, img.right {
|
|||
.w1140p { width: 1140px; }
|
||||
.mw1140p { max-width: 1140px; }
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == spacing helpers */
|
||||
/* .. use only when needed */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* spacing helpers
|
||||
p,m = padding,margin
|
||||
a,t,r,b,l = all,top,right,bottom,left
|
||||
|
|
@ -366,21 +424,9 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
.pl2, .plm { padding-left: 20px; }
|
||||
.pl3, .pll { padding-left: 30px; }
|
||||
|
||||
/* hiding content */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
overflow: hidden;
|
||||
}
|
||||
[dir=rtl] .visually-hidden {
|
||||
left: auto;
|
||||
right: -7000px;
|
||||
}
|
||||
|
||||
.desktop-hidden { display: none; } /* hidden on desktop */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==iefix */
|
||||
/* == iefix */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* hasLayout for IE6/IE7 */
|
||||
|
|
@ -408,15 +454,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
/* @source https://github.com/Schepp/box-sizing-polyfill */
|
||||
/*
|
||||
.ie67 * {
|
||||
behavior: url(/js/boxsizing.htc);
|
||||
behavior: url(/lib/box-sizing-polyfill/boxsizing.htc);
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==print */
|
||||
/* == quick print reset */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* quick print reset */
|
||||
@media print {
|
||||
p,
|
||||
blockquote {
|
||||
|
|
@ -441,21 +487,3 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
background: pink;
|
||||
outline: 3px solid maroon;
|
||||
}
|
||||
|
||||
/* orientation iOS font-size fix */
|
||||
@media (orientation: landscape) and (max-device-width: 768px) {
|
||||
html,
|
||||
body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==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); */
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,55 @@
|
|||
|
||||
/* ----------------------------- */
|
||||
/* ==reset */
|
||||
/* == soft reset */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* switching box model for all elements */
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* soft reset */
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
}
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == typography */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* base font-size corresponds to 10px and is adapted to rem unit */
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: @basebg;
|
||||
|
|
@ -71,23 +115,11 @@ h6, .h6-like {
|
|||
.em(@basefont + 6);
|
||||
}
|
||||
|
||||
/* soft reset */
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
}
|
||||
code,
|
||||
pre,
|
||||
samp,
|
||||
kbd {
|
||||
white-space: pre-line; /* IE fix */
|
||||
white-space: pre-wrap;
|
||||
font-family: @fontstack2;
|
||||
line-height: 1;
|
||||
|
|
@ -114,7 +146,61 @@ mark {
|
|||
padding:2px 4px;
|
||||
background: #ff0;
|
||||
}
|
||||
table { margin-bottom: 1.5em; }
|
||||
sup,
|
||||
sub {
|
||||
vertical-align: 0;
|
||||
position: relative;
|
||||
}
|
||||
sup {
|
||||
bottom: 1ex;
|
||||
}
|
||||
sub {
|
||||
top: .5ex;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == hiding content */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* hiding content */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
overflow: hidden;
|
||||
}
|
||||
[dir=rtl] .visually-hidden {
|
||||
left: auto;
|
||||
right: -7000px;
|
||||
}
|
||||
.desktop-hidden { display: none; } /* hidden on desktop */
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == skip links styling */
|
||||
/* ----------------------------- */
|
||||
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
padding: 0.5em;
|
||||
background: black;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == browsers consistency */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* avoid top margins on first content element */
|
||||
p, ul, ol, dl,
|
||||
|
|
@ -138,10 +224,9 @@ img, table, td, blockquote, code, pre, textarea, input, video {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* pictures */
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* margin-bottom on tables */
|
||||
table { margin-bottom: 1.5em; }
|
||||
|
||||
/* Google Gmap3 bug fix on images */
|
||||
:not(.gm-style) img {
|
||||
height: auto !important;
|
||||
|
|
@ -155,40 +240,14 @@ img {
|
|||
max-width: none !important;
|
||||
}
|
||||
|
||||
a img { border: 0; }
|
||||
|
||||
/* scripts */
|
||||
body > script {display: none !important;}
|
||||
|
||||
/* skip-links */
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
padding: 0.5em;
|
||||
background: black;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==layout and modules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* switching box model for all elements */
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* float layout */
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
|
|
@ -259,6 +318,11 @@ img.left, img.right {
|
|||
.txtcenter { text-align: center; }
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == width helpers */
|
||||
/* .. use only when needed */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* blocks widths (percentage and pixels) */
|
||||
.w10 { width: 10%; }
|
||||
.w20 { width: 20%; }
|
||||
|
|
@ -290,6 +354,12 @@ img.left, img.right {
|
|||
.w1140p { width: 1140px; }
|
||||
.mw1140p { max-width: 1140px; }
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == spacing helpers */
|
||||
/* .. use only when needed */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* spacing helpers
|
||||
p,m = padding,margin
|
||||
a,t,r,b,l = all,top,right,bottom,left
|
||||
|
|
@ -339,25 +409,9 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
.pl2, .plm { padding-left: @mediumvalue; }
|
||||
.pl3, .pll { padding-left: @largevalue; }
|
||||
|
||||
/* hiding content */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
overflow: hidden;
|
||||
}
|
||||
[dir=rtl] .visually-hidden {
|
||||
left: auto;
|
||||
right: -7000px;
|
||||
}
|
||||
|
||||
/* hidden on desktop */
|
||||
.desktop-hidden { display: none; }
|
||||
/* hidden on mobile */
|
||||
.mobile-hidden { display: block; }
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==iefix */
|
||||
/* == iefix */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* Make sure you are using Conditional Classes in your HTML */
|
||||
|
|
@ -407,15 +461,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
/* @source https://github.com/Schepp/box-sizing-polyfill */
|
||||
/*
|
||||
.ie67 * {
|
||||
behavior: url(/inc/box-sizing-polyfill/boxsizing.htc);
|
||||
behavior: url(/lib/box-sizing-polyfill/boxsizing.htc);
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==print */
|
||||
/* == quick print reset */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* quick print reset */
|
||||
@media print {
|
||||
p,
|
||||
blockquote {
|
||||
|
|
@ -440,11 +494,3 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
background: pink;
|
||||
outline: 3px solid maroon;
|
||||
}
|
||||
|
||||
/* orientation iOS font-size fix */
|
||||
@media (orientation: landscape) and (max-device-width: @smallscreen) {
|
||||
html,
|
||||
body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* www.KNACSS.com V2.9 (2013-11) @author: Raphael Goetter, Alsacreations
|
||||
* www.KNACSS.com V2.9.2 (2014-01) @author: Raphael Goetter, Alsacreations
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue