architecture globale revisitée (_vendor, _config, _library, components)

changelog.md

@@ -1,3 +1,6 @@
+# changelog v7.0.0beta (31 juillet 2017)
+- architecture globale revisitée (_vendor, _config, _library, components)
+
 # changelog v6.1.2 (21 juin 2017)
 - alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)
 - alignement des breakpoints sur ceux de Bootstrap (576, 768, 992, 1200) et réorganisation des intervalles

css/knacss-unminified.css

@@ -1,28 +1,29 @@
 @charset "UTF-8";
 /*!
-* www.KNACSS.com v6.1.2 (21 juin 2017) @author: Alsacreations, Raphael Goetter
+* www.KNACSS.com v7.0.0 (31 juillet 2017) @author: Alsacreations, Raphael Goetter
 * Licence WTFPL http://www.wtfpl.net/
 */
 /* ----------------------------- */
 /* ==Table Of Content            */
 /* ----------------------------- */
-/* 1- Normalize (basic reset) */
+/*
-/* 2- Base (basic styles) */
+1- Normalize (basic reset)
-/* 3- Print (print quick reset) */
+2- Libraries  :
-/* 4- Stylings (minor stylings) */
+  - Base (basic global styles)
-/* 5- Misc (skip links, hyphens) */
+  - Print (basic print styles)
-/* 6- Tables (data tables consistency) */
+  - Styling (minor stylings)
-/* 7- Forms (forms consistency) */
+  - Misc (skip links, hyphens)
-/* 8- Media object */
+  - Layout (alignment, modules, positionning)
-/* 9- Autogrid object */
+  - Utilities (width and spacers helpers)
-/* 10- Global Layout (alignment, modules, positionning) */
+  - Responsive (Responsive helpers)
-/* 11- Helpers (width and spacers helpers) */
+  - WordPress reset (disabled by default)
-/* (12- WordPress reset (disabled by default)) */
+3- Components :
-/* 13- Responsive (Responsive Web Design helpers) */
+  - Media object
-/* 14- Grid Layout (grillade) */
+  - Autogrid object
-/* ---------------------------------- */
+  - Tables (data tables consistency)
-/* ==Normalize (basic reset)          */
+  - Forms (forms consistency)
-/* ---------------------------------- */
+  - Grillade (Grid System in Flexbox)
+*/
 /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 /**
  * 1. Change the default font family in all browsers (opinionated).
@@ -970,208 +971,6 @@ th {
   }
 }
 
-/* ----------------------------- */
-/* ==Tables                      */
-/* ----------------------------- */
-table,
-.table {
-  width: 100%;
-  max-width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  vertical-align: top;
-  margin-bottom: 2rem;
-}
-
-.table {
-  display: table;
-}
-
-#recaptcha_table,
-.table-auto {
-  table-layout: auto;
-}
-
-td,
-th {
-  vertical-align: top;
-  min-width: 2rem;
-  cursor: default;
-}
-
-/* ----------------------------- */
-/* ==Forms                       */
-/* ----------------------------- */
-/* thanks to HTML5boilerplate,
-* github.com/nathansmith/formalize and www.sitepen.com
-*/
-/* buttons */
-.btn {
-  display: inline-block;
-}
-
-/* forms items */
-form,
-fieldset {
-  border: none;
-}
-
-input,
-button,
-select,
-label,
-.btn {
-  font-family: inherit;
-  font-size: inherit;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: #000;
-}
-
-label {
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-legend {
-  border: 0;
-  white-space: normal;
-}
-
-textarea {
-  min-height: 5em;
-  vertical-align: top;
-  font-family: inherit;
-  font-size: inherit;
-  resize: vertical;
-}
-
-select {
-  -webkit-appearance: menulist-button;
-}
-
-/* if select styling bugs on WebKit */
-/* select { -webkit-appearance: none; } */
-/* 'x' appears on right of search input when text is entered. This removes it */
-input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-::-webkit-input-placeholder {
-  color: #777;
-}
-
-input:-moz-placeholder,
-textarea:-moz-placeholder {
-  color: #777;
-}
-
-.btn:focus,
-input[type="button"]:focus,
-button:focus {
-  -webkit-tap-highlight-color: transparent;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-/* unstyled forms */
-button.unstyled,
-input[type="button"].unstyled,
-input[type="submit"].unstyled,
-input[type="reset"].unstyled {
-  padding: 0;
-  border: none;
-  line-height: 1;
-  text-align: left;
-  background: none;
-  border-radius: 0;
-  box-shadow: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-button.unstyled:focus,
-input[type="button"].unstyled:focus,
-input[type="submit"].unstyled:focus,
-input[type="reset"].unstyled:focus {
-  box-shadow: none;
-  outline: none;
-}
-
-/* Media object */
-/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
-@media (min-width: 576px) {
-  .o-media {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: start;
-        -ms-flex-align: start;
-            align-items: flex-start;
-  }
-  .o-media-content {
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
-    min-width: 0;
-    /* avoid min-width:auto */
-  }
-}
-
-/* Media variants */
-@media (min-width: 576px) {
-  .o-media--reverse {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: reverse;
-        -ms-flex-direction: row-reverse;
-            flex-direction: row-reverse;
-  }
-  .o-media-figure--center {
-    -ms-flex-item-align: center;
-        align-self: center;
-  }
-}
-
-/* Autogrid object */
-/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
-@media (min-width: 576px) {
-  [class^="autogrid"],
-  [class*=" autogrid"] {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
-  [class^="autogrid"] > *,
-  [class*=" autogrid"] > * {
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
-    min-width: 0;
-    /* avoid min-width:auto */
-  }
-}
-
-/* Autogrid variants */
-@media (min-width: 576px) {
-  .has-gutter > *:not(:first-child) {
-    margin-left: 1rem;
-  }
-  [class*="--reverse"] {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: reverse;
-        -ms-flex-direction: row-reverse;
-            flex-direction: row-reverse;
-  }
-}
-
 /* ----------------------------- */
 /* ==Global Layout               */
 /* ----------------------------- */
@@ -1892,6 +1691,208 @@ ul.is-unstyled, ul.unstyled {
   }
 }
 
+/* Media object */
+/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
+@media (min-width: 576px) {
+  .o-media {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+  }
+  .o-media-content {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    min-width: 0;
+    /* avoid min-width:auto */
+  }
+}
+
+/* Media variants */
+@media (min-width: 576px) {
+  .o-media--reverse {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse;
+  }
+  .o-media-figure--center {
+    -ms-flex-item-align: center;
+        align-self: center;
+  }
+}
+
+/* Autogrid object */
+/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
+@media (min-width: 576px) {
+  [class^="autogrid"],
+  [class*=" autogrid"] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  [class^="autogrid"] > *,
+  [class*=" autogrid"] > * {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    min-width: 0;
+    /* avoid min-width:auto */
+  }
+}
+
+/* Autogrid variants */
+@media (min-width: 576px) {
+  .has-gutter > *:not(:first-child) {
+    margin-left: 1rem;
+  }
+  [class*="--reverse"] {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse;
+  }
+}
+
+/* ----------------------------- */
+/* ==Tables                      */
+/* ----------------------------- */
+table,
+.table {
+  width: 100%;
+  max-width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  vertical-align: top;
+  margin-bottom: 2rem;
+}
+
+.table {
+  display: table;
+}
+
+#recaptcha_table,
+.table-auto {
+  table-layout: auto;
+}
+
+td,
+th {
+  vertical-align: top;
+  min-width: 2rem;
+  cursor: default;
+}
+
+/* ----------------------------- */
+/* ==Forms                       */
+/* ----------------------------- */
+/* thanks to HTML5boilerplate,
+* github.com/nathansmith/formalize and www.sitepen.com
+*/
+/* buttons */
+.btn {
+  display: inline-block;
+}
+
+/* forms items */
+form,
+fieldset {
+  border: none;
+}
+
+input,
+button,
+select,
+label,
+.btn {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: #000;
+}
+
+label {
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+legend {
+  border: 0;
+  white-space: normal;
+}
+
+textarea {
+  min-height: 5em;
+  vertical-align: top;
+  font-family: inherit;
+  font-size: inherit;
+  resize: vertical;
+}
+
+select {
+  -webkit-appearance: menulist-button;
+}
+
+/* if select styling bugs on WebKit */
+/* select { -webkit-appearance: none; } */
+/* 'x' appears on right of search input when text is entered. This removes it */
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+::-webkit-input-placeholder {
+  color: #777;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #777;
+}
+
+.btn:focus,
+input[type="button"]:focus,
+button:focus {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* unstyled forms */
+button.unstyled,
+input[type="button"].unstyled,
+input[type="submit"].unstyled,
+input[type="reset"].unstyled {
+  padding: 0;
+  border: none;
+  line-height: 1;
+  text-align: left;
+  background: none;
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+button.unstyled:focus,
+input[type="button"].unstyled:focus,
+input[type="submit"].unstyled:focus,
+input[type="reset"].unstyled:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 /* ---------------------------------- */
 /* ==Grillade : Simple Grid System    */
 /* ---------------------------------- */

gulpfile.js

@@ -27,7 +27,7 @@ gulp.task('css', function () {
 });
 
 gulp.task('grillade', function() {
-  return gulp.src(['./sass/_config/_breakpoints.scss', './sass/grids/_grillade.scss'])
+  return gulp.src(['./sass/_config/_breakpoints.scss', './sass/components/grillade.scss'])
     .pipe(concat('grillade.scss'))
     .pipe(gulp.dest('./css/'))
     .pipe(sass())

sass/knacss.scss

@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com v6.1.2 (21 juin 2017) @author: Alsacreations, Raphael Goetter
+* www.KNACSS.com v7.0.0 (31 juillet 2017) @author: Alsacreations, Raphael Goetter
 * Licence WTFPL http://www.wtfpl.net/
 */
 
@@ -7,24 +7,24 @@
 /* ==Table Of Content            */
 /* ----------------------------- */
 
-/* 1- Normalize (basic reset) */
+/*
-/* 2- Base (basic styles) */
+1- Normalize (basic reset)
-/* 3- Print (print quick reset) */
+2- Libraries  :
-/* 4- Stylings (minor stylings) */
+  - Base (basic global styles)
-/* 5- Misc (skip links, hyphens) */
+  - Print (basic print styles)
-/* 6- Tables (data tables consistency) */
+  - Styling (minor stylings)
-/* 7- Forms (forms consistency) */
+  - Misc (skip links, hyphens)
-/* 8- Media object */
+  - Layout (alignment, modules, positionning)
-/* 9- Autogrid object */
+  - Utilities (width and spacers helpers)
-/* 10- Global Layout (alignment, modules, positionning) */
+  - Responsive (Responsive helpers)
-/* 11- Helpers (width and spacers helpers) */
+  - WordPress reset (disabled by default)
-/* (12- WordPress reset (disabled by default)) */
+3- Components :
-/* 13- Responsive (Responsive Web Design helpers) */
+  - Media object
-/* 14- Grid Layout (grillade) */
+  - Autogrid object
-
+  - Tables (data tables consistency)
-/* ---------------------------------- */
+  - Forms (forms consistency)
-/* ==Normalize (basic reset)          */
+  - Grillade (Grid System in Flexbox)
-/* ---------------------------------- */
+*/
 
 @import "_vendor/_normalize.scss"; // normalize (basic reset)
 
@@ -36,25 +36,22 @@
 @import "_config/_mixins.scss";
 
 // Libraries
-@import "library/_base.scss"; // basic styles
+@import "_library/_base.scss"; // basic styles
-@import "library/_print.scss"; // print quick reset
+@import "_library/_print.scss"; // print quick reset
-@import "library/_styling.scss"; // minor stylings
+@import "_library/_styling.scss"; // minor stylings
-@import "library/_misc.scss"; // skip links, hyphens
+@import "_library/_misc.scss"; // skip links, hyphens
-@import "library/_tables.scss"; // data tables consistency
+@import "_library/_layout.scss"; // alignment, modules, positionning
-@import "library/_forms.scss"; // forms consistency
+@import "_library/_utilities.scss"; // width and spacers helpers
+@import "_library/_responsive.scss"; // Responsive Web Design helpers
+// @import "_library/_wordpress.scss"; // WordPress reset and basic styles
 
-// Objects
+// Components
-@import "objects/_media.scss"; // media object
+@import "components/media.scss"; // media object
-@import "objects/_autogrid.scss"; // media autogrid
+@import "components/autogrid.scss"; // media autogrid
+@import "components/tables.scss"; // data tables consistency
+@import "components/forms.scss"; // forms consistency
+@import "components/grillade.scss"; // grids
 
-// Utilities
-@import "utilities/_layout.scss"; // alignment, modules, positionning
-@import "utilities/_helpers.scss"; // width and spacers helpers
-// @import "utilities/_wordpress.scss"; // WordPress reset and basic styles
-@import "utilities/_responsive.scss"; // Responsive Web Design helpers
-
-// Grids
-@import "grids/_grillade.scss"; // grids
 
 
 /* ----------------------------- */