This commit is contained in:
Raphael Goetter 2014-05-07 10:53:15 +02:00
parent aa685cf52a
commit 78831c4ed6
6 changed files with 111 additions and 78 deletions

View File

@ -1,5 +1,5 @@
/*! /*!
* www.KNACSS.com V3.0.0 (2014-05) @author: Raphael Goetter, Alsacreations * www.KNACSS.com V3.0.2 (2014-05-07) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */
@ -88,8 +88,7 @@ label,
textarea, textarea,
caption, caption,
details, details,
figure, figure {
hgroup {
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0; margin-bottom: 0;
line-height: 1.5; line-height: 1.5;
@ -193,24 +192,22 @@ sup {
/* ----------------------------- */ /* ----------------------------- */
/* hidden but not for assistance tools, Yahoo! method */
.visually-hidden { .visually-hidden {
position: absolute !important; position: absolute !important;
clip: rect(1px, 1px, 1px, 1px); border: 0 !important;
overflow: hidden; height: 1px !important;
height: 1px; width: 1px !important;
width: 1px; padding: 0 !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important;
} }
body > script { body > script {
display: none !important; display: none !important;
} }
@media print {
.no-print {
display: none;
}
}
@media (max-width: 480px) { @media (max-width: 480px) {
.no-small-screen { .no-small-screen {
display: none; display: none;

View File

@ -8,38 +8,47 @@
/* grids inspired from SUIT https://github.com/suitcss/suit */ /* grids inspired from SUIT https://github.com/suitcss/suit */
/* overall container of grids */
.grid { .grid {
/* overall container of grids */
overflow: hidden; overflow: hidden;
} }
/* global styles for direct child ex. .grid3 */
/* 1- gutter value */
.grid > * { .grid > * {
/* global styles for direct child ex. .grid3 */
display: block; display: block;
padding: 0; padding: 0;
margin-left: -20px; margin-left: -20px;
/* gutter value */ /* 1 */
text-align: left; text-align: left;
} }
/* global styles for each "cell" */
/* 1- gutter value */
.grid > * > * { .grid > * > * {
/* global styles for each "cell" */
display: inline-block; display: inline-block;
padding-left: 20px; padding-left: 20px;
/* gutter value */ /* 1 */
margin-left: 0; margin-left: 0;
vertical-align: top; vertical-align: top;
} }
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for Opera Mini */
:root .grid { :root .grid {
font-size: 0; font-size: 0;
} }
:root .grid > * > * { :root .grid > * > * {
font-size: 14px; font-size: 14px;
/* fallback for Opera Mini */ /* 1 */
font-size: 1.4rem; font-size: 1.4rem;
} }
@ -144,8 +153,9 @@
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ /* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
/* container of autogrids */
[class*="autogrid"] { [class*="autogrid"] {
/* container of autogrids */
text-align: justify; text-align: justify;
} }
@ -163,13 +173,15 @@
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for Opera Mini */
:root [class*="autogrid"] { :root [class*="autogrid"] {
font-size: 0; font-size: 0;
} }
:root [class*="autogrid"] > * { :root [class*="autogrid"] > * {
font-size: 14px; font-size: 14px;
/* fallback for Opera Mini */ /* 1 */
font-size: 1.4rem; font-size: 1.4rem;
} }

View File

@ -51,13 +51,14 @@ textarea {
resize: vertical; resize: vertical;
} }
/* clickable input types in iOS */
button, button,
input[type="button"], input[type="button"],
input[type="reset"], input[type="reset"],
input[type="submit"] { input[type="submit"] {
cursor: pointer; cursor: pointer;
-webkit-appearance: button; -webkit-appearance: button;
/* clickable input types in iOS */
} }
input[type="search"] { input[type="search"] {

View File

@ -33,43 +33,46 @@
.print { .print {
display: block; display: block;
/* displaying .print elements */ }
.no-print {
display: none;
} }
img { img {
-webkit-filter: grayscale(100%); -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); filter: grayscale(100%);
} }
/* no orphans, no widows */
p, p,
blockquote { blockquote {
orphans: 3; orphans: 3;
/* no orphans */
widows: 3; widows: 3;
/* no widows */
} }
/* no breaks inside these elements */
blockquote, blockquote,
ul, ul,
ol { ol {
page-break-inside: avoid; page-break-inside: avoid;
/* no breaks inside these elements */
} }
/* page break before main headers */
h1 { h1 {
page-break-before: always; page-break-before: always;
/* page break before main headers */
} }
/* no breaks after these elements */
h1, h1,
h2, h2,
h3, h3,
caption { caption {
page-break-after: avoid; page-break-after: avoid;
/* no breaks after these elements */
} }
a { a {
@ -77,9 +80,10 @@
text-decoration: underline !important; text-decoration: underline !important;
} }
/* displaying URLs */
a[href]:after { a[href]:after {
content: " (" attr(href) ")"; content: " (" attr(href) ")";
/* displaying URLs */
} }
a[href^="javascript:"]:after, a[href^="javascript:"]:after,

View File

@ -84,10 +84,8 @@
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
padding: 0; padding: 0;
/* Corrects excess space around these inputs in IE8/9 */
} }
textarea { textarea {
overflow: auto; overflow: auto;
/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
} }

View File

@ -1,5 +1,5 @@
/*! /*!
* www.KNACSS.com V3.0.0 (2014-05) @author: Raphael Goetter, Alsacreations * www.KNACSS.com V3.0.2 (2014-05-07) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */
@ -88,8 +88,7 @@ label,
textarea, textarea,
caption, caption,
details, details,
figure, figure {
hgroup {
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0; margin-bottom: 0;
line-height: 1.5; line-height: 1.5;
@ -193,24 +192,22 @@ sup {
/* ----------------------------- */ /* ----------------------------- */
/* hidden but not for assistance tools, Yahoo! method */
.visually-hidden { .visually-hidden {
position: absolute !important; position: absolute !important;
clip: rect(1px, 1px, 1px, 1px); border: 0 !important;
overflow: hidden; height: 1px !important;
height: 1px; width: 1px !important;
width: 1px; padding: 0 !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important;
} }
body > script { body > script {
display: none !important; display: none !important;
} }
@media print {
.no-print {
display: none;
}
}
@media (max-width: 480px) { @media (max-width: 480px) {
.no-small-screen { .no-small-screen {
display: none; display: none;
@ -667,38 +664,47 @@ img.end {
/* grids inspired from SUIT https://github.com/suitcss/suit */ /* grids inspired from SUIT https://github.com/suitcss/suit */
/* overall container of grids */
.grid { .grid {
/* overall container of grids */
overflow: hidden; overflow: hidden;
} }
/* global styles for direct child ex. .grid3 */
/* 1- gutter value */
.grid > * { .grid > * {
/* global styles for direct child ex. .grid3 */
display: block; display: block;
padding: 0; padding: 0;
margin-left: -20px; margin-left: -20px;
/* gutter value */ /* 1 */
text-align: left; text-align: left;
} }
/* global styles for each "cell" */
/* 1- gutter value */
.grid > * > * { .grid > * > * {
/* global styles for each "cell" */
display: inline-block; display: inline-block;
padding-left: 20px; padding-left: 20px;
/* gutter value */ /* 1 */
margin-left: 0; margin-left: 0;
vertical-align: top; vertical-align: top;
} }
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for Opera Mini */
:root .grid { :root .grid {
font-size: 0; font-size: 0;
} }
:root .grid > * > * { :root .grid > * > * {
font-size: 14px; font-size: 14px;
/* fallback for Opera Mini */ /* 1 */
font-size: 1.4rem; font-size: 1.4rem;
} }
@ -803,8 +809,9 @@ img.end {
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ /* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
/* container of autogrids */
[class*="autogrid"] { [class*="autogrid"] {
/* container of autogrids */
text-align: justify; text-align: justify;
} }
@ -822,13 +829,15 @@ img.end {
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for Opera Mini */
:root [class*="autogrid"] { :root [class*="autogrid"] {
font-size: 0; font-size: 0;
} }
:root [class*="autogrid"] > * { :root [class*="autogrid"] > * {
font-size: 14px; font-size: 14px;
/* fallback for Opera Mini */ /* 1 */
font-size: 1.4rem; font-size: 1.4rem;
} }
@ -990,13 +999,14 @@ textarea {
resize: vertical; resize: vertical;
} }
/* clickable input types in iOS */
button, button,
input[type="button"], input[type="button"],
input[type="reset"], input[type="reset"],
input[type="submit"] { input[type="submit"] {
cursor: pointer; cursor: pointer;
-webkit-appearance: button; -webkit-appearance: button;
/* clickable input types in iOS */
} }
input[type="search"] { input[type="search"] {
@ -1497,6 +1507,7 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
.flex { .flex {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
@ -1505,6 +1516,8 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-webkit-flex-direction: row; -webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
} }
@ -1513,6 +1526,8 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-webkit-flex-direction: column; -webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
} }
@ -1520,6 +1535,7 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
.flex-fluid { .flex-fluid {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1; -webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
} }
@ -1527,6 +1543,7 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
.flex-start { .flex-start {
-webkit-box-ordinal-group: 0; -webkit-box-ordinal-group: 0;
-webkit-order: -1; -webkit-order: -1;
-moz-box-ordinal-group: 0;
-ms-flex-order: -1; -ms-flex-order: -1;
order: -1; order: -1;
} }
@ -1534,6 +1551,7 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
.flex-mid { .flex-mid {
-webkit-box-ordinal-group: 2; -webkit-box-ordinal-group: 2;
-webkit-order: 1; -webkit-order: 1;
-moz-box-ordinal-group: 2;
-ms-flex-order: 1; -ms-flex-order: 1;
order: 1; order: 1;
} }
@ -1541,6 +1559,7 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
.flex-end { .flex-end {
-webkit-box-ordinal-group: 43; -webkit-box-ordinal-group: 43;
-webkit-order: 42; -webkit-order: 42;
-moz-box-ordinal-group: 43;
-ms-flex-order: 42; -ms-flex-order: 42;
order: 42; order: 42;
} }
@ -1580,43 +1599,46 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
.print { .print {
display: block; display: block;
/* displaying .print elements */ }
.no-print {
display: none;
} }
img { img {
-webkit-filter: grayscale(100%); -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); filter: grayscale(100%);
} }
/* no orphans, no widows */
p, p,
blockquote { blockquote {
orphans: 3; orphans: 3;
/* no orphans */
widows: 3; widows: 3;
/* no widows */
} }
/* no breaks inside these elements */
blockquote, blockquote,
ul, ul,
ol { ol {
page-break-inside: avoid; page-break-inside: avoid;
/* no breaks inside these elements */
} }
/* page break before main headers */
h1 { h1 {
page-break-before: always; page-break-before: always;
/* page break before main headers */
} }
/* no breaks after these elements */
h1, h1,
h2, h2,
h3, h3,
caption { caption {
page-break-after: avoid; page-break-after: avoid;
/* no breaks after these elements */
} }
a { a {
@ -1624,9 +1646,10 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
text-decoration: underline !important; text-decoration: underline !important;
} }
/* displaying URLs */
a[href]:after { a[href]:after {
content: " (" attr(href) ")"; content: " (" attr(href) ")";
/* displaying URLs */
} }
a[href^="javascript:"]:after, a[href^="javascript:"]:after,
@ -1783,12 +1806,10 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
padding: 0; padding: 0;
/* Corrects excess space around these inputs in IE8/9 */
} }
textarea { textarea {
overflow: auto; overflow: auto;
/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
} }
/* ----------------------------- */ /* ----------------------------- */