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

ajout des fichiers compilés

Browse source
This commit is contained in:
Raphael Goetter 2017-06-21 10:52:32 +02:00
parent 689c3d32f7
commit f5f95fe9ac
4 changed files with 56 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/grillade.css
View file

File diff suppressed because one or more lines are too long

23
css/grillade.scss
View file

@ -1,12 +1,13 @@
// Responsive breakpoints variables // Responsive breakpoints variables
// Warning : you should use your own values, regardless of the devices // Warning : you should use your own values, regardless of the devices
// Best practise : (max-width: $BP) and (min-width: ($BP + 1)) // Best practise : (max-width: ($BP - 1)) and (min-width: $BP)
$tiny: 543px !default; // or 'em' if you prefer, of course
$small: 767px !default; $tiny: 480px !default; // or 'em' if you prefer, of course
$medium: 991px !default; $small: 576px !default;
$large: 1199px !default; $medium: 768px !default;
$extra-large: 1439px !default; $large: 992px !default;
$extra-large: 1200px !default;
/* ---------------------------------- */ /* ---------------------------------- */
/* ==Grillade : Simple Grid System */ /* ==Grillade : Simple Grid System */
@ -17,7 +18,7 @@ $grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
// IEfixing, see // IEfixing, see
// https://github.com/alsacreations/KNACSS/issues/133; // https://github.com/alsacreations/KNACSS/issues/133;
$iefix: 0.01px; $iefix: 0.01px;
@media (min-width: ($tiny + 1)) { @media (min-width: $small) {
[class*=" grid-"], [class*=" grid-"],
[class^="grid-"] { [class^="grid-"] {
display: flex; display: flex;
@ -61,7 +62,7 @@ $iefix: 0.01px;
} }
} }
// Mono-line grid constructor (.grid) // Mono-line grid constructor (.grid)
@media (min-width: ($tiny + 1)) { @media (min-width: $small) {
.grid, .grid,
.grid--reverse { .grid--reverse {
display: flex; display: flex;
@ -80,7 +81,7 @@ $iefix: 0.01px;
} }
} }
// Constructing grids : will be compiled in CSS // Constructing grids : will be compiled in CSS
@media (min-width: ($tiny + 1)) { @media (min-width: $small) {
@for $i from 2 through 12 { @for $i from 2 through 12 {
[class*="grid-#{$i}"] { [class*="grid-#{$i}"] {
@include grid(#{$i}, 0); @include grid(#{$i}, 0);
@ -110,7 +111,7 @@ $iefix: 0.01px;
flex-direction: row-reverse; flex-direction: row-reverse;
} }
// sizing individual children // sizing individual children
@media (min-width: ($tiny + 1)) { @media (min-width: $small) {
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") { @each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
.#{$flow} { .#{$flow} {
flex: 0 0 auto; flex: 0 0 auto;
@ -126,7 +127,7 @@ $iefix: 0.01px;
/* Responsive Small Breakpoint */ /* Responsive Small Breakpoint */
// -small-X suffix means "X columns on small-medium screen" // -small-X suffix means "X columns on small-medium screen"
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns // example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
@media (min-width: ($tiny + 1)) and (max-width: $medium) { @media (min-width: $small) and (max-width: ($medium - 1)) {
@for $i from 1 through 4 { @for $i from 1 through 4 {
[class*="-small-#{$i}"] { [class*="-small-#{$i}"] {
& > * { & > * {

70
css/knacss-unminified.css
View file

@ -1,6 +1,6 @@
@charset "UTF-8"; @charset "UTF-8";
/*! /*!
* www.KNACSS.com V6.0.5 (1er décembre 2016) @author: Alsacreations, Raphael Goetter * www.KNACSS.com v6.1.2 (21 juin 2017) @author: Alsacreations, Raphael Goetter
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */
/* ----------------------------- */ /* ----------------------------- */
@ -495,17 +495,17 @@ body {
font-size: 1.4rem; font-size: 1.4rem;
background-color: #fff; background-color: #fff;
color: #000; color: #000;
font-family: sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.4; line-height: 1.4;
} }
@media screen and (min-width: 544px) { @media (min-width: 480px) {
body { body {
font-size: 1.6rem; font-size: 1.6rem;
} }
} }
@media screen and (min-width: 544px) { @media (min-width: 480px) {
body { body {
line-height: 1.5; line-height: 1.5;
} }
@ -556,9 +556,10 @@ figure {
h1, .h1-like { h1, .h1-like {
font-size: 2.8rem; font-size: 2.8rem;
font-family: sans-serif;
} }
@media screen and (min-width: 544px) { @media (min-width: 480px) {
h1, .h1-like { h1, .h1-like {
font-size: 3.2rem; font-size: 3.2rem;
} }
@ -566,9 +567,10 @@ h1, .h1-like {
h2, .h2-like { h2, .h2-like {
font-size: 2.4rem; font-size: 2.4rem;
font-family: sans-serif;
} }
@media screen and (min-width: 544px) { @media (min-width: 480px) {
h2, .h2-like { h2, .h2-like {
font-size: 2.8rem; font-size: 2.8rem;
} }
@ -578,7 +580,7 @@ h3, .h3-like {
font-size: 2rem; font-size: 2rem;
} }
@media screen and (min-width: 544px) { @media (min-width: 480px) {
h3, .h3-like { h3, .h3-like {
font-size: 2.4rem; font-size: 2.4rem;
} }
@ -588,7 +590,7 @@ h4, .h4-like {
font-size: 1.8rem; font-size: 1.8rem;
} }
@media screen and (min-width: 544px) { @media (min-width: 480px) {
h4, .h4-like { h4, .h4-like {
font-size: 2rem; font-size: 2rem;
} }
@ -598,7 +600,7 @@ h5, .h5-like {
font-size: 1.6rem; font-size: 1.6rem;
} }
@media screen and (min-width: 544px) { @media (min-width: 480px) {
h5, .h5-like { h5, .h5-like {
font-size: 1.8rem; font-size: 1.8rem;
} }
@ -608,9 +610,9 @@ h6, .h6-like {
font-size: 1.4rem; font-size: 1.4rem;
} }
@media screen and (min-width: 544px) { @media (min-width: 480px) {
h6, .h6-like { h6, .h6-like {
font-size: 3.2rem; font-size: 1.6rem;
} }
} }
@ -804,6 +806,12 @@ kbd {
border: 1px solid #999; border: 1px solid #999;
} }
pre {
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
}
code { code {
padding: 2px 4px; padding: 2px 4px;
background: rgba(0, 0, 0, 0.04); background: rgba(0, 0, 0, 0.04);
@ -930,7 +938,7 @@ th {
clip: auto; clip: auto;
} }
@media (max-width: 543px) { @media (max-width: 575px) {
/* you shall not pass */ /* you shall not pass */
div, div,
textarea, textarea,
@ -947,7 +955,7 @@ th {
} }
} }
@media (max-width: 543px) { @media (max-width: 575px) {
.no-wrapping { .no-wrapping {
word-wrap: normal; word-wrap: normal;
-webkit-hyphens: manual; -webkit-hyphens: manual;
@ -1100,7 +1108,7 @@ input[type="reset"].unstyled:focus {
/* Media object */ /* Media object */
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */ /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
@media (min-width: 544px) { @media (min-width: 576px) {
.o-media { .o-media {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -1119,7 +1127,7 @@ input[type="reset"].unstyled:focus {
} }
/* Media variants */ /* Media variants */
@media (min-width: 544px) { @media (min-width: 576px) {
.o-media--reverse { .o-media--reverse {
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-webkit-box-direction: reverse; -webkit-box-direction: reverse;
@ -1134,7 +1142,7 @@ input[type="reset"].unstyled:focus {
/* Autogrid object */ /* Autogrid object */
/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */ /* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
@media (min-width: 544px) { @media (min-width: 576px) {
[class^="autogrid"], [class^="autogrid"],
[class*=" autogrid"] { [class*=" autogrid"] {
display: -webkit-box; display: -webkit-box;
@ -1152,7 +1160,7 @@ input[type="reset"].unstyled:focus {
} }
/* Autogrid variants */ /* Autogrid variants */
@media (min-width: 544px) { @media (min-width: 576px) {
.has-gutter > *:not(:first-child) { .has-gutter > *:not(:first-child) {
margin-left: 1rem; margin-left: 1rem;
} }
@ -1245,7 +1253,8 @@ img.fr {
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/ */
[class*="flex-container"], [class*="flex-container"],
.flex-container { .flex-container,
.d-flex {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -1253,14 +1262,16 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex-container-h { .flex-container-h,
.flex-row {
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
} }
.flex-container-v { .flex-container-v,
.flex-column {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
@ -1296,7 +1307,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
} }
.flex-item-center, .flex-item-center,
.item-center { .item-center,
.mr-auto {
margin: auto; margin: auto;
} }
@ -1703,7 +1715,7 @@ ul.is-unstyled, ul.unstyled {
/* medium screens */ /* medium screens */
/* -------------- */ /* -------------- */
@media (min-width: 768px) and (max-width: 1199px) { @media (min-width: 768px) and (max-width: 991px) {
/* layouts for medium screens */ /* layouts for medium screens */
.medium-hidden { .medium-hidden {
display: none !important; display: none !important;
@ -1754,7 +1766,7 @@ ul.is-unstyled, ul.unstyled {
/* small screens */ /* small screens */
/* ------------- */ /* ------------- */
@media (min-width: 544px) and (max-width: 767px) { @media (min-width: 576px) and (max-width: 767px) {
/* layouts for small screens */ /* layouts for small screens */
.small-hidden { .small-hidden {
display: none !important; display: none !important;
@ -1809,7 +1821,7 @@ ul.is-unstyled, ul.unstyled {
/* tiny screens */ /* tiny screens */
/* ------------ */ /* ------------ */
@media (max-width: 543px) { @media (max-width: 575px) {
/* quick small resolution reset */ /* quick small resolution reset */
.mod, .mod,
.col, .col,
@ -1884,7 +1896,7 @@ ul.is-unstyled, ul.unstyled {
/* ==Grillade : Simple Grid System */ /* ==Grillade : Simple Grid System */
/* ---------------------------------- */ /* ---------------------------------- */
/* Doc : http://grillade.knacss.com */ /* Doc : http://grillade.knacss.com */
@media (min-width: 544px) { @media (min-width: 576px) {
[class*=" grid-"], [class*=" grid-"],
[class^="grid-"] { [class^="grid-"] {
display: -webkit-box; display: -webkit-box;
@ -1905,7 +1917,7 @@ ul.is-unstyled, ul.unstyled {
} }
} }
@media (min-width: 544px) { @media (min-width: 576px) {
.grid, .grid,
.grid--reverse { .grid--reverse {
display: -webkit-box; display: -webkit-box;
@ -1935,7 +1947,7 @@ ul.is-unstyled, ul.unstyled {
} }
} }
@media (min-width: 544px) { @media (min-width: 576px) {
[class*="grid-2"] > * { [class*="grid-2"] > * {
width: calc(100% / 2 - 0.01px); width: calc(100% / 2 - 0.01px);
} }
@ -2295,7 +2307,7 @@ ul.is-unstyled, ul.unstyled {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@media (min-width: 544px) { @media (min-width: 576px) {
.full { .full {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 auto; -ms-flex: 0 0 auto;
@ -2434,7 +2446,7 @@ ul.is-unstyled, ul.unstyled {
} }
/* Responsive Small Breakpoint */ /* Responsive Small Breakpoint */
@media (min-width: 544px) and (max-width: 991px) { @media (min-width: 576px) and (max-width: 767px) {
[class*="-small-1"] > * { [class*="-small-1"] > * {
width: calc(100% / 1 - 0.01px); width: calc(100% / 1 - 0.01px);
} }

4
css/knacss.css
View file

File diff suppressed because one or more lines are too long