autogrids added, prefix deleted
This commit is contained in:
Raphael Goetter
parent
8e3c6aa61e
commit
9eb7aa58d6
9 changed files with 322 additions and 102 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "KNACSS",
|
||||
"version": "2.9.3",
|
||||
"version": "2.9.4",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"authors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
|
|
|
|||
113
css/02-grids.css
113
css/02-grids.css
|
|
@ -1,3 +1,11 @@
|
|||
/* ---------------------------------- */
|
||||
|
||||
/* ==classic grids */
|
||||
|
||||
/* .. use it when gutter size matters */
|
||||
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
||||
|
||||
/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
|
||||
|
|
@ -26,6 +34,9 @@
|
|||
|
||||
.grid > * > * {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
/* IE67 hack */
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
/* gutter value */
|
||||
|
|
@ -35,9 +46,6 @@
|
|||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
text-rendering: auto;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
/* IE67 hack */
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -124,3 +132,102 @@
|
|||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* ==autogrids */
|
||||
|
||||
/* .. to automatically justify blocs */
|
||||
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
|
||||
|
||||
[class*="autogrid"] {
|
||||
text-align: justify;
|
||||
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
|
||||
letter-spacing: -0.31em;
|
||||
text-rendering: optimizespeed;
|
||||
}
|
||||
|
||||
/* Opera hack */
|
||||
|
||||
[class*="autogrid"]:-o-prefocus {
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
[class*="autogrid"]:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[class*="autogrid"] > * {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
/* ie6 ie7 hack */
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
vertical-align: top;
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
||||
.autogrid2 > * {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.autogrid3 > * {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.autogrid4 > * {
|
||||
width: 23.6%;
|
||||
}
|
||||
|
||||
.autogrid5 > * {
|
||||
width: 19%;
|
||||
}
|
||||
|
||||
.autogrid6 > * {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.autogrid8 > * {
|
||||
width: 10.8%;
|
||||
}
|
||||
|
||||
.autogrid10 > * {
|
||||
width: 9%;
|
||||
}
|
||||
|
||||
.autogrid12 > * {
|
||||
width: 6.4%;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.autogrid5 > *,
|
||||
.autogrid6 > *,
|
||||
.autogrid8 > *,
|
||||
.autogrid10 > *,
|
||||
.autogrid12 > * {
|
||||
width: 32%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.autogrid5 > *,
|
||||
.autogrid6 > *,
|
||||
.autogrid8 > *,
|
||||
.autogrid10 > *,
|
||||
.autogrid12 > * {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
[class*="autogrid"] > * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -147,7 +147,6 @@
|
|||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-o-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,69 +3,60 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
|
|||
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-h {
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-v {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-fluid {
|
||||
-moz-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-start {
|
||||
-webkit-box-ordinal-group: -1;
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-moz-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
-webkit-order: -1;
|
||||
-moz-order: -1;
|
||||
-webkit-box-ordinal-group: 0;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.flex-mid {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
-moz-order: 1;
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-webkit-order: 1;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.flex-end {
|
||||
-webkit-box-ordinal-group: 42;
|
||||
-moz-box-ordinal-group: 42;
|
||||
-ms-flex-order: 42;
|
||||
-webkit-order: 42;
|
||||
-moz-order: 42;
|
||||
-webkit-box-ordinal-group: 43;
|
||||
-webkit-order: 42;
|
||||
-moz-box-ordinal-group: 43;
|
||||
-ms-flex-order: 42;
|
||||
order: 42;
|
||||
}
|
||||
155
css/knacss.css
155
css/knacss.css
|
|
@ -896,6 +896,14 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
outline: 3px solid maroon;
|
||||
}
|
||||
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* ==classic grids */
|
||||
|
||||
/* .. use it when gutter size matters */
|
||||
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
||||
|
||||
/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
|
||||
|
|
@ -924,6 +932,9 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
|
||||
.grid > * > * {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
/* IE67 hack */
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
/* gutter value */
|
||||
|
|
@ -933,9 +944,6 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
text-rendering: auto;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
/* IE67 hack */
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -1023,6 +1031,105 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* ==autogrids */
|
||||
|
||||
/* .. to automatically justify blocs */
|
||||
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
|
||||
|
||||
[class*="autogrid"] {
|
||||
text-align: justify;
|
||||
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
|
||||
letter-spacing: -0.31em;
|
||||
text-rendering: optimizespeed;
|
||||
}
|
||||
|
||||
/* Opera hack */
|
||||
|
||||
[class*="autogrid"]:-o-prefocus {
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
[class*="autogrid"]:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[class*="autogrid"] > * {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
/* ie6 ie7 hack */
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
vertical-align: top;
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
||||
.autogrid2 > * {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.autogrid3 > * {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.autogrid4 > * {
|
||||
width: 23.6%;
|
||||
}
|
||||
|
||||
.autogrid5 > * {
|
||||
width: 19%;
|
||||
}
|
||||
|
||||
.autogrid6 > * {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.autogrid8 > * {
|
||||
width: 10.8%;
|
||||
}
|
||||
|
||||
.autogrid10 > * {
|
||||
width: 9%;
|
||||
}
|
||||
|
||||
.autogrid12 > * {
|
||||
width: 6.4%;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.autogrid5 > *,
|
||||
.autogrid6 > *,
|
||||
.autogrid8 > *,
|
||||
.autogrid10 > *,
|
||||
.autogrid12 > * {
|
||||
width: 32%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.autogrid5 > *,
|
||||
.autogrid6 > *,
|
||||
.autogrid8 > *,
|
||||
.autogrid10 > *,
|
||||
.autogrid12 > * {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
[class*="autogrid"] > * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ==tables */
|
||||
|
|
@ -1541,7 +1648,6 @@ input[type='submit']::-moz-focus-inner {
|
|||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-o-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
|
|
@ -1699,70 +1805,61 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
|
|||
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-h {
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-v {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-fluid {
|
||||
-moz-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-start {
|
||||
-webkit-box-ordinal-group: -1;
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-moz-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
-webkit-order: -1;
|
||||
-moz-order: -1;
|
||||
-webkit-box-ordinal-group: 0;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.flex-mid {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
-moz-order: 1;
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-webkit-order: 1;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.flex-end {
|
||||
-webkit-box-ordinal-group: 42;
|
||||
-moz-box-ordinal-group: 42;
|
||||
-ms-flex-order: 42;
|
||||
-webkit-order: 42;
|
||||
-moz-order: 42;
|
||||
-webkit-box-ordinal-group: 43;
|
||||
-webkit-order: 42;
|
||||
-moz-box-ordinal-group: 43;
|
||||
-ms-flex-order: 42;
|
||||
order: 42;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@
|
|||
|
||||
/* switching box model for all elements */
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +43,6 @@ figure {
|
|||
}
|
||||
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == typography */
|
||||
/* ----------------------------- */
|
||||
|
|
@ -304,7 +301,6 @@ body > script {display: none !important;}
|
|||
img.left {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
/* right elements */
|
||||
.right {
|
||||
float: right;
|
||||
|
|
@ -312,11 +308,9 @@ img.left {
|
|||
img.right {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
img.left, img.right {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.center { margin-left: auto; margin-right: auto; }
|
||||
.txtleft { text-align: left; }
|
||||
.txtright { text-align: right; }
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
@import "00-config";
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ==classic grids */
|
||||
/* .. use it when gutter size matters */
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
||||
/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
|
||||
|
||||
|
|
@ -21,6 +27,7 @@
|
|||
}
|
||||
.grid > * > * {
|
||||
display: inline-block;
|
||||
*display: inline; *zoom: 1; /* IE67 hack */
|
||||
width: 100%;
|
||||
padding-left: @gutter; /* gutter value */
|
||||
margin-left: 0;
|
||||
|
|
@ -29,7 +36,6 @@
|
|||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
text-rendering: auto;
|
||||
*display: inline; *zoom: 1; /* IE67 hack */
|
||||
font-family: @fontstack1;
|
||||
}
|
||||
.grid2 > * {width: 50%;}
|
||||
|
|
@ -71,3 +77,64 @@
|
|||
@media (max-width: @tinyscreen) {
|
||||
.grid > * > * {width: 100% !important}
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ==autogrids */
|
||||
/* .. to automatically justify blocs */
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
|
||||
|
||||
[class*="autogrid"] {
|
||||
text-align: justify;
|
||||
font-family: @fontstack3;
|
||||
letter-spacing: -0.31em;
|
||||
text-rendering: optimizespeed;
|
||||
}
|
||||
/* Opera hack */
|
||||
[class*="autogrid"]:-o-prefocus {
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
[class*="autogrid"]:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
[class*="autogrid"] > * {
|
||||
display: inline-block;
|
||||
*display: inline; zoom: 1; /* ie6 ie7 hack */
|
||||
font-family: @fontstack1;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
vertical-align: top;
|
||||
text-rendering: auto;
|
||||
}
|
||||
.autogrid2 > * {width: 49%}
|
||||
.autogrid3 > * {width: 32%}
|
||||
.autogrid4 > * {width: 23.6%}
|
||||
.autogrid5 > * {width: 19%}
|
||||
.autogrid6 > * {width: 15%}
|
||||
.autogrid8 > * {width: 10.8%}
|
||||
.autogrid10 > * {width: 9%}
|
||||
.autogrid12 > * {width: 6.4%}
|
||||
|
||||
@media (max-width: @largescreen) {
|
||||
.autogrid5 > *,
|
||||
.autogrid6 > *,
|
||||
.autogrid8 > *,
|
||||
.autogrid10 > *,
|
||||
.autogrid12 > * {width: 32%}
|
||||
}
|
||||
|
||||
@media (max-width: @smallscreen) {
|
||||
.autogrid5 > *,
|
||||
.autogrid6 > *,
|
||||
.autogrid8 > *,
|
||||
.autogrid10 > *,
|
||||
.autogrid12 > * {width: 49%}
|
||||
}
|
||||
|
||||
@media (max-width: @tinyscreen) {
|
||||
[class*="autogrid"] > * {width: 100%}
|
||||
}
|
||||
|
|
@ -90,10 +90,6 @@
|
|||
/* you shall not pass */
|
||||
div, textarea, table, td, th, code, pre, samp {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-o-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,54 +2,23 @@
|
|||
/* flexbox layout
|
||||
Tutorial: http://knacss.com/demos/tutoriel.html#flex */
|
||||
.flex {
|
||||
display : -webkit-box;
|
||||
display : -moz-box;
|
||||
display : -ms-flexbox;
|
||||
display : -webkit-flex;
|
||||
display : flex;
|
||||
}
|
||||
.flex-h {
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
.flex-v {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-fluid {
|
||||
-moz-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.flex-start {
|
||||
-webkit-box-ordinal-group: -1;
|
||||
-moz-box-ordinal-group: 0;
|
||||
-ms-flex-order : -1;
|
||||
-webkit-order : -1;
|
||||
-moz-order : -1;
|
||||
order : -1;
|
||||
}
|
||||
.flex-mid {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order : 1;
|
||||
-webkit-order : 1;
|
||||
-moz-order : 1;
|
||||
order : 1;
|
||||
}
|
||||
.flex-end {
|
||||
-webkit-box-ordinal-group: 42;
|
||||
-moz-box-ordinal-group: 42;
|
||||
-ms-flex-order : 42;
|
||||
-webkit-order : 42;
|
||||
-moz-order : 42;
|
||||
order : 42;
|
||||
}
|
||||
Loading…
Reference in a new issue