diff --git a/changelog.md b/changelog.md index fc786cc..8c15ecc 100644 --- a/changelog.md +++ b/changelog.md @@ -10,6 +10,7 @@ - autogrid object en Grid Layout - regroupement des styles des tableaux - suppression du namespace "kna-", ne devrait pas être problématique dès lors que Grillade sera devenu inutile dans KNACSS +- refonte des classes utilitaires (automatisation des classes via Sass) # changelog v6.1.2 (21 juin 2017) - alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`) diff --git a/sass/_config/_breakpoints.scss b/sass/_config/_breakpoints.scss index ce2e750..2e1ce33 100644 --- a/sass/_config/_breakpoints.scss +++ b/sass/_config/_breakpoints.scss @@ -1,7 +1,7 @@ // Responsive breakpoints variables // Warning : you should use your own values, regardless of the devices -// Best practise : (max-width: ($BP - 1)) and (min-width: $BP) +// Best practise is Mobile First: (max-width: ($BP - 1)) and (min-width: $BP) $tiny: 480px !default; // or 'em' if you prefer, of course $small: 576px !default; diff --git a/sass/_library/_layout.scss b/sass/_library/_layout.scss index 3cf8fa9..ecc6d42 100644 --- a/sass/_library/_layout.scss +++ b/sass/_library/_layout.scss @@ -1,5 +1,5 @@ /* ----------------------------- */ -/* ==Global Layout */ +/* ==Global Micro Layout */ /* ----------------------------- */ /* module, gains superpower "BFC" Block Formating Context */ diff --git a/sass/_library/_print.scss b/sass/_library/_print.scss index 566d3fa..5d45647 100644 --- a/sass/_library/_print.scss +++ b/sass/_library/_print.scss @@ -31,6 +31,7 @@ h6, .h6-like, blockquote, + label, ul, ol { color: #000; diff --git a/sass/_library/_utilities.scss b/sass/_library/_utilities.scss index 65b4ec5..e8339a7 100644 --- a/sass/_library/_utilities.scss +++ b/sass/_library/_utilities.scss @@ -43,129 +43,50 @@ ul { /* ------------- */ /* blocks widths (percentage and pixels) */ -.w10 { - width: 10%; -} +$i: 100; -.w20 { - width: 20%; +@while $i > 0 { + .w#{$i} { + width: $i * 1%; + } + $i: $i - 5; } - -.w25 { - width: 25%; -} - -.w30 { - width: 30%; -} - -.w33 { - width: 33.3333%; -} - -.w40 { - width: 40%; -} - -.w50 { - width: 50%; -} - -.w60 { - width: 60%; -} - .w66 { - width: 66.6666%; + width: calc(100% / 3 * 2); +} +.w33 { + width: calc(100% / 3); } -.w70 { - width: 70%; -} - -.w75 { - width: 75%; -} - -.w80 { - width: 80%; -} - -.w90 { - width: 90%; -} - -.w100 { - width: 100%; -} - -.w50p { - width: 50px; -} - -.w100p { - width: 100px; -} - -.w150p { - width: 150px; -} - -.w200p { - width: 200px; -} - -.w300p { - width: 300px; -} - -@media (min-width: 401px) { - .w400p { - width: 400px; - } - - .w500p { - width: 500px; - } - - .w600p { - width: 600px; - } -} - -@media (min-width: 701px) { - - .w700p { - width: 700px; - } - - .w800p { - width: 800px; - } -} - -@media (min-width: 961px) { - .w960p { - width: 960px; - } - - .mw960p { - max-width: 960px; - } - - .w1140p { - width: 1140px; - } - - .mw1140p { - max-width: 1140px; - } -} +$i: 1000; .wauto { width: auto; } +.w960p { + width: 960px; +} + +.mw960p { + max-width: 960px; +} + +.w1140p { + width: 1140px; +} + +.mw1140p { + max-width: 1140px; +} + +@while $i > 0 { + .w#{$i}p { + width: $i * 1px; + } + $i: $i - 50; +} + /* Spacing Helpers */ /* --------------- */ diff --git a/sass/knacss.scss b/sass/knacss.scss index 37dc607..2949a60 100644 --- a/sass/knacss.scss +++ b/sass/knacss.scss @@ -1,5 +1,5 @@ /*! -* www.KNACSS.com v7.0.0 (31 juillet 2017) @author: Alsacreations, Raphael Goetter +* www.KNACSS.com v7.0.0 (??? 2017) @author: Alsacreations, Raphael Goetter * Licence WTFPL http://www.wtfpl.net/ */