From 0d68702deae9ad76d7cb6600a814ce80c2ed6781 Mon Sep 17 00:00:00 2001 From: Raphael Date: Wed, 17 Jul 2019 10:32:01 +0200 Subject: [PATCH 01/23] typos --- changelog.md | 4 ++++ sass/_library/_base.scss | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/changelog.md b/changelog.md index c8c2567..b5840b5 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,9 @@ # Changelog +## Changelog v8.0.0 (xxx 2019) + +- corrections typo + ## Changelog v7.1.2 (30 janvier 2019) - ajout de la règle `@media (prefers-reduced-motion: reduce)` diff --git a/sass/_library/_base.scss b/sass/_library/_base.scss index 31b800d..3c9152e 100644 --- a/sass/_library/_base.scss +++ b/sass/_library/_base.scss @@ -2,7 +2,7 @@ /* ==Base (basic styles) */ /* ----------------------------- */ -/* disable animations styles when reduced rotion is enabled */ +/* disable animations styles when reduced motion is enabled */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; From 365d221431becc5a41219ab6e06b8a1f6b89dea6 Mon Sep 17 00:00:00 2001 From: Raphael Date: Wed, 17 Jul 2019 10:59:19 +0200 Subject: [PATCH 02/23] =?UTF-8?q?mise=20=C3=A0=20jour=20browserslist=20(IE?= =?UTF-8?q?11=20mini)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog.md | 1 + gulpfile.js | 36 ++++++++++++++++++------------------ 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/changelog.md b/changelog.md index b5840b5..4c8454d 100644 --- a/changelog.md +++ b/changelog.md @@ -3,6 +3,7 @@ ## Changelog v8.0.0 (xxx 2019) - corrections typo +- support passé de IE10 à IE11 (browserlist) ## Changelog v7.1.2 (30 janvier 2019) diff --git a/gulpfile.js b/gulpfile.js index 0e49956..6809930 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -16,33 +16,33 @@ var gaps = require('postcss-gap-properties'); // gaps polyfill var browsersList = [ '> 1%', 'last 2 versions', - 'IE >= 10', 'Edge >= 16', + 'IE >= 11', 'Edge >= 16', 'Chrome >= 60', 'Firefox >= 50', 'Firefox ESR', 'Safari >= 10', 'ios_saf >= 10', - 'Android >= 5' + 'Android >= 6' ]; var plugins = [ unprefix(), - autoprefixer({ - grid: true, - browsers: browsersList - }), - flexbugs(), - gaps() + autoprefixer({ + grid: true, + browsers: browsersList + }), + flexbugs(), + gaps() ]; var pluginsProd = [ unprefix(), - autoprefixer({ - grid: true, - browsers: browsersList - }), - flexbugs(), - gaps(), - cssnano() + autoprefixer({ + grid: true, + browsers: browsersList + }), + flexbugs(), + gaps(), + cssnano() ]; // tâche cssDev = compile vers knacss-unminified.css @@ -64,14 +64,14 @@ gulp.task('cssProd', function () { .pipe(gulp.dest('./css/')); }); -gulp.task('grillade', function() { +gulp.task('grillade', function () { return gulp.src('./sass/_library/grillade-grid.scss') .pipe(sass()) .pipe(postcss(pluginsProd)) .pipe(gulp.dest('./css/')); }); -gulp.task('grillade-flex', function() { +gulp.task('grillade-flex', function () { return gulp.src('./sass/_library/grillade-flex.scss') .pipe(sass()) .pipe(postcss(pluginsProd)) @@ -79,7 +79,7 @@ gulp.task('grillade-flex', function() { }); // Watcher -gulp.task('watch', function() { +gulp.task('watch', function () { gulp.watch(['./sass/*.scss'], ['cssDev']); }); From 8292b542f29b5e1d17f2debf64fb34562cfa9a8d Mon Sep 17 00:00:00 2001 From: Raphael Date: Wed, 17 Jul 2019 11:15:55 +0200 Subject: [PATCH 03/23] renommage dossiers --- changelog.md | 1 + sass/{_config => abstracts}/_mixins.scss | 0 sass/{_config => abstracts}/_variables.scss | 0 sass/{_library => base}/_layout.scss | 0 sass/{_library => base}/_print.scss | 0 .../{_library/_base.scss => base/_reset.scss} | 3 +-- sass/{_library => base}/_responsive.scss | 0 sass/{_library => base}/_utilities.scss | 0 sass/{_library => base}/_wordpress.scss | 0 sass/{_library => base}/grillade-flex.scss | 0 sass/{_library => base}/grillade-grid.scss | 0 sass/knacss.scss | 26 +++++++++---------- sass/{_vendor => vendor}/_reboot.scss | 0 13 files changed, 15 insertions(+), 15 deletions(-) rename sass/{_config => abstracts}/_mixins.scss (100%) rename sass/{_config => abstracts}/_variables.scss (100%) rename sass/{_library => base}/_layout.scss (100%) rename sass/{_library => base}/_print.scss (100%) rename sass/{_library/_base.scss => base/_reset.scss} (97%) rename sass/{_library => base}/_responsive.scss (100%) rename sass/{_library => base}/_utilities.scss (100%) rename sass/{_library => base}/_wordpress.scss (100%) rename sass/{_library => base}/grillade-flex.scss (100%) rename sass/{_library => base}/grillade-grid.scss (100%) rename sass/{_vendor => vendor}/_reboot.scss (100%) diff --git a/changelog.md b/changelog.md index 4c8454d..457ee3e 100644 --- a/changelog.md +++ b/changelog.md @@ -4,6 +4,7 @@ - corrections typo - support passé de IE10 à IE11 (browserlist) +- renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss` ## Changelog v7.1.2 (30 janvier 2019) diff --git a/sass/_config/_mixins.scss b/sass/abstracts/_mixins.scss similarity index 100% rename from sass/_config/_mixins.scss rename to sass/abstracts/_mixins.scss diff --git a/sass/_config/_variables.scss b/sass/abstracts/_variables.scss similarity index 100% rename from sass/_config/_variables.scss rename to sass/abstracts/_variables.scss diff --git a/sass/_library/_layout.scss b/sass/base/_layout.scss similarity index 100% rename from sass/_library/_layout.scss rename to sass/base/_layout.scss diff --git a/sass/_library/_print.scss b/sass/base/_print.scss similarity index 100% rename from sass/_library/_print.scss rename to sass/base/_print.scss diff --git a/sass/_library/_base.scss b/sass/base/_reset.scss similarity index 97% rename from sass/_library/_base.scss rename to sass/base/_reset.scss index 3c9152e..3259431 100644 --- a/sass/_library/_base.scss +++ b/sass/base/_reset.scss @@ -26,13 +26,12 @@ html { html { /* set base font-size to equiv "10px", which is adapted to rem unit */ - font-size: 62.5%; - /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ font-size: calc(1em * 0.625); } body { margin: 0; + padding: 0; @include font-size(base); background-color: $background-base; color: $color-base; diff --git a/sass/_library/_responsive.scss b/sass/base/_responsive.scss similarity index 100% rename from sass/_library/_responsive.scss rename to sass/base/_responsive.scss diff --git a/sass/_library/_utilities.scss b/sass/base/_utilities.scss similarity index 100% rename from sass/_library/_utilities.scss rename to sass/base/_utilities.scss diff --git a/sass/_library/_wordpress.scss b/sass/base/_wordpress.scss similarity index 100% rename from sass/_library/_wordpress.scss rename to sass/base/_wordpress.scss diff --git a/sass/_library/grillade-flex.scss b/sass/base/grillade-flex.scss similarity index 100% rename from sass/_library/grillade-flex.scss rename to sass/base/grillade-flex.scss diff --git a/sass/_library/grillade-grid.scss b/sass/base/grillade-grid.scss similarity index 100% rename from sass/_library/grillade-grid.scss rename to sass/base/grillade-grid.scss diff --git a/sass/knacss.scss b/sass/knacss.scss index e103caf..f94f1b5 100644 --- a/sass/knacss.scss +++ b/sass/knacss.scss @@ -9,8 +9,8 @@ /* 1- Reboot (basic reset) -2- Libraries : - - Base +2- Base : + - Reset - Print - Layout (alignment, modules, positionning) - Utilities (width and spacers helpers) @@ -30,25 +30,25 @@ - Alerts */ -@import "_vendor/reboot"; // Bootstrap reboot (basic reset) (CSS file renamed and imported as if it was a partial because of libsass) +@import "vendor/reboot"; // Bootstrap reboot (basic reset) (CSS file renamed and imported as if it was a partial because of libsass) // WARNING : you should comment the following @import (variables) // and move variables file from knacss folder to your own project folder! -@import "_config/variables"; +@import "abstracts/variables"; -@import "_config/mixins"; +@import "abstracts/mixins"; // Core Libraries -@import "_library/base"; // basic styles -@import "_library/print"; // print quick reset -@import "_library/layout"; // alignment, modules, positionning -@import "_library/utilities"; // width and spacer helpers -@import "_library/responsive"; // Responsive Web Design helpers -// @import "_library/wordpress"; // WordPress reset and basic styles +@import "base/reset"; // basic styles +@import "base/print"; // print quick reset +@import "base/layout"; // alignment, modules, positionning +@import "base/utilities"; // width and spacer helpers +@import "base/responsive"; // Responsive Web Design helpers +// @import "base/wordpress"; // WordPress reset and basic styles -// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "_library/grillade-flex" +// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "base/grillade-flex" // Note that none of these files are prefixed by an underscore, in order to compile them. -@import "_library/grillade-grid"; // grid system with Grid Layout +@import "base/grillade-grid"; // grid system with Grid Layout // Components @import "components/media"; // media object diff --git a/sass/_vendor/_reboot.scss b/sass/vendor/_reboot.scss similarity index 100% rename from sass/_vendor/_reboot.scss rename to sass/vendor/_reboot.scss From f4c8ef9c37d710a2d8396da21a3dd94d2706dc4b Mon Sep 17 00:00:00 2001 From: Raphael Date: Wed, 17 Jul 2019 11:57:00 +0200 Subject: [PATCH 04/23] =?UTF-8?q?mise=20=C3=A0=20jour=20du=20reset=20(part?= =?UTF-8?q?ie=201)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog.md | 1 + sass/base/_reset.scss | 95 +++++++++++++++++++++++++++++-------------- 2 files changed, 66 insertions(+), 30 deletions(-) diff --git a/changelog.md b/changelog.md index 457ee3e..63cad0c 100644 --- a/changelog.md +++ b/changelog.md @@ -2,6 +2,7 @@ ## Changelog v8.0.0 (xxx 2019) +- mise à jour du reset - corrections typo - support passé de IE10 à IE11 (browserlist) - renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss` diff --git a/sass/base/_reset.scss b/sass/base/_reset.scss index 3259431..c971838 100644 --- a/sass/base/_reset.scss +++ b/sass/base/_reset.scss @@ -1,8 +1,12 @@ /* ----------------------------- */ -/* ==Base (basic styles) */ +/* ==Reset */ /* ----------------------------- */ -/* disable animations styles when reduced motion is enabled */ + +/** + * disable animations styles when reduced motion is enabled + */ + @media (prefers-reduced-motion: reduce) { * { animation: none !important; @@ -10,28 +14,34 @@ } } -/* switching to border-box model for all elements */ -html { - box-sizing: border-box; -} +/** + * 1. switch to border-box model for all elements + * 2. avoid min-width: auto and min-height: auto on flex and grid children + */ *, *::before, *::after { - box-sizing: inherit; - /* avoid min-width: auto on flex and grid children */ - min-width: 0; - min-height: 0; + box-sizing: border-box; /* 1 */ + min-width: 0; /* 2 */ + min-height: 0; /* 2 */ } +/** + * 1. remove the grey highlight on links in iOS + * 2. prevent orientation font changes in iOS + * 3. set base font-size to equiv "10px", which is adapted to rem unit + */ + html { - /* set base font-size to equiv "10px", which is adapted to rem unit */ - font-size: calc(1em * 0.625); + -webkit-tap-highlight-color: transparent; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + font-size: calc(1em * 0.625); /* 3 */ } +/* Body */ body { margin: 0; - padding: 0; @include font-size(base); background-color: $background-base; color: $color-base; @@ -123,7 +133,23 @@ ul ul { margin-bottom: 0; } -/* Max values */ +/* Styling elements */ +a, +area, +button, +[role="button"], +.btn, +.button, +[type="button"] +input:not([type="range"]), +label, +select, +summary, +textarea { + -ms-touch-action: manipulation; + touch-action: manipulation; +} + img, table, td, @@ -139,16 +165,22 @@ svg { img { height: auto; + vertical-align: middle; + border-style: none; +} + +svg:not(:root) { + overflow: hidden; } -/* Styling elements */ ul, ol { padding-left: 2em; } -img { - vertical-align: middle; +b, +strong { + font-weight: bolder; } em, @@ -160,6 +192,22 @@ var { font-style: italic; } +pre, +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; + white-space: pre-wrap; + line-height: normal; +} + +pre { + overflow: auto; + -ms-overflow-style: scrollbar; + tab-size: 2; +} + code, kbd, mark { @@ -171,10 +219,6 @@ kbd { border: 1px solid #999; } -pre { - tab-size: 2; -} - code { padding: 2px 4px; background: rgba(0, 0, 0, 0.04); @@ -262,12 +306,3 @@ figure { margin-left: 0; margin-right: 0; } - -code, -pre, -samp, -kbd { - white-space: pre-wrap; - font-family: $font-family-monospace; - line-height: normal; -} From ab7adc8a14baeb93d3c2214a4d2bdc856884d509 Mon Sep 17 00:00:00 2001 From: Raphael Date: Wed, 17 Jul 2019 12:24:47 +0200 Subject: [PATCH 05/23] =?UTF-8?q?mise=20=C3=A0=20jour=20du=20reset=20(part?= =?UTF-8?q?ie=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sass/base/_reset.scss | 48 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 42 insertions(+), 6 deletions(-) diff --git a/sass/base/_reset.scss b/sass/base/_reset.scss index c971838..47d88c8 100644 --- a/sass/base/_reset.scss +++ b/sass/base/_reset.scss @@ -39,7 +39,6 @@ html { font-size: calc(1em * 0.625); /* 3 */ } -/* Body */ body { margin: 0; @include font-size(base); @@ -49,7 +48,10 @@ body { line-height: $line-height-base; } -/* Links */ +/** + * links + */ + a { color: $link-color; text-decoration: $link-decoration; @@ -62,7 +64,10 @@ a { } } -/* Headings */ +/** + * headings + */ + h1, .h1-like { @include font-size(h1); @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{ @@ -99,7 +104,10 @@ h6, .h6-like { font-weight: $weight-medium; } -/* Vertical rythm */ +/** + * vertical rythm + */ + h1, h2, h3, @@ -122,7 +130,10 @@ pre { margin-bottom: $paragraph-margin-bottom; } -/* Avoid margins on nested elements */ +/** + * avoid margin on nested elements + */ + li p, li .p-like, li ul, @@ -133,7 +144,10 @@ ul ul { margin-bottom: 0; } -/* Styling elements */ +/** + * common elements styling + */ + a, area, button, @@ -169,6 +183,19 @@ img { border-style: none; } +/** + * fill color matching to text color + */ + +svg:not([fill]) { + fill: currentColor; +} + + +/** + * hide overflow in IE + */ + svg:not(:root) { overflow: hidden; } @@ -192,6 +219,11 @@ var { font-style: italic; } + +/** + * monospace tags and mark tag styling + */ + pre, code, kbd, @@ -249,6 +281,10 @@ sub { top: 0.5ex; } +/** + * quotes, blockquote and hr styling + */ + blockquote { position: relative; padding-left: 3em; From 57b13b909bfea170cc9aad0c38f3a3c207bf2ac6 Mon Sep 17 00:00:00 2001 From: Raphael Date: Wed, 17 Jul 2019 15:58:20 +0200 Subject: [PATCH 06/23] =?UTF-8?q?mise=20=C3=A0=20jour=20du=20reset=20(supp?= =?UTF-8?q?ression=20reset=20vendor)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog.md | 2 +- sass/abstracts/_variables.scss | 3 + sass/base/_reset.scss | 186 ++++++++++++++++-- sass/components/_buttons.scss | 6 +- sass/components/_forms.scss | 31 +-- sass/knacss.scss | 18 +- sass/vendor/_reboot.scss | 334 --------------------------------- 7 files changed, 187 insertions(+), 393 deletions(-) delete mode 100644 sass/vendor/_reboot.scss diff --git a/changelog.md b/changelog.md index 63cad0c..fd5f926 100644 --- a/changelog.md +++ b/changelog.md @@ -2,7 +2,7 @@ ## Changelog v8.0.0 (xxx 2019) -- mise à jour du reset +- mise à jour du reset, suppression des reset vendors (reboot) - corrections typo - support passé de IE10 à IE11 (browserlist) - renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss` diff --git a/sass/abstracts/_variables.scss b/sass/abstracts/_variables.scss index e98fc39..e9ba18e 100644 --- a/sass/abstracts/_variables.scss +++ b/sass/abstracts/_variables.scss @@ -75,6 +75,9 @@ $weight-bold : 700 !default; // Activate hyphenation on small screens $hyphens: false !default; +// Activate IE10-IE11 fixes +$ie: true !default; + // ------------ // Spacing zone // ------------ diff --git a/sass/base/_reset.scss b/sass/base/_reset.scss index 47d88c8..2234e02 100644 --- a/sass/base/_reset.scss +++ b/sass/base/_reset.scss @@ -1,8 +1,7 @@ /* ----------------------------- */ -/* ==Reset */ +/* ==Reset (global) */ /* ----------------------------- */ - /** * disable animations styles when reduced motion is enabled */ @@ -144,9 +143,9 @@ ul ul { margin-bottom: 0; } -/** - * common elements styling - */ +/* ----------------------------- */ +/* ==Reset (common styling) */ +/* ----------------------------- */ a, area, @@ -191,15 +190,6 @@ svg:not([fill]) { fill: currentColor; } - -/** - * hide overflow in IE - */ - -svg:not(:root) { - overflow: hidden; -} - ul, ol { padding-left: 2em; @@ -219,11 +209,151 @@ var { font-style: italic; } +/* ----------------------------- */ +/* ==Reset (buttons) */ +/* ----------------------------- */ + +input, +button, +select, +optgroup, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} /** - * monospace tags and mark tag styling +* 1. show overflow in IE/Edge +*/ + +button, +input { + overflow: visible; /* 1 */ +} + +/** +* 1. remove the inheritance of text transform in Firefox +*/ + +button, +select { + text-transform: none; /* 1 */ +} + +/** + * 1. correct the inability to style clickable types in iOS and Safari. */ +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 1 */ +} + +/** + * 1. remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; /* 1 */ + padding: 0; +} + +/** + * 1. restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; /* 1 */ +} + +/* ----------------------------- */ +/* ==Reset (forms) */ +/* ----------------------------- */ + +form, +fieldset { + border: none; +} + +fieldset { + padding: $spacer-medium; +} + +legend { + padding: 0 $spacer-tiny; + border: 0; + white-space: normal; +} + +label { + display: inline-block; + cursor: pointer; +} + +textarea { + overflow: auto; + min-height: 5em; + vertical-align: top; + resize: vertical; + white-space: pre-wrap; +} + +progress { + display: inline-block; + width: 100%; + vertical-align: baseline; +} + +/* ----------------------------- */ +/* ==Reset (inputs) */ +/* ----------------------------- */ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + outline-offset: -2px; + -webkit-appearance: none; +} + +::-webkit-search-cancel-button, +::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; +} + +output { + display: inline-block; +} + +summary { + display: list-item; +} + +template { + display: none; +} + +/* ----------------------------- */ +/* ==Reset (misc styling) */ +/* ----------------------------- */ + pre, code, kbd, @@ -342,3 +472,29 @@ figure { margin-left: 0; margin-right: 0; } + + +@if variable-exists(ie) and $ie==true { + + /* ----------------------------- */ + /* ==Reset (IE rules) */ + /* ----------------------------- */ + + @-ms-viewport { + width: device-width; + } + + article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { + display: block; + } + + /** + * hide overflow in IE + */ + + svg:not(:root) { + overflow: hidden; + } + +} + diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss index cd1f6c6..a337ce0 100644 --- a/sass/components/_buttons.scss +++ b/sass/components/_buttons.scss @@ -1,6 +1,7 @@ /* ----------------------------- */ -/* ==Buttons */ +/* ==Buttons styling */ /* ----------------------------- */ + /* preferably use