architecture globale revisitée (_vendor, _config, _library, components)
This commit is contained in:
Raphael Goetter
parent
f5f95fe9ac
commit
0ebe24ed0f
18 changed files with 260 additions and 259 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) */
|
||||
/* 3- Print (print quick reset) */
|
||||
/* 4- Stylings (minor stylings) */
|
||||
/* 5- Misc (skip links, hyphens) */
|
||||
/* 6- Tables (data tables consistency) */
|
||||
/* 7- Forms (forms consistency) */
|
||||
/* 8- Media object */
|
||||
/* 9- Autogrid object */
|
||||
/* 10- Global Layout (alignment, modules, positionning) */
|
||||
/* 11- Helpers (width and spacers helpers) */
|
||||
/* (12- WordPress reset (disabled by default)) */
|
||||
/* 13- Responsive (Responsive Web Design helpers) */
|
||||
/* 14- Grid Layout (grillade) */
|
||||
/* ---------------------------------- */
|
||||
/* ==Normalize (basic reset) */
|
||||
/* ---------------------------------- */
|
||||
/*
|
||||
1- Normalize (basic reset)
|
||||
2- Libraries :
|
||||
- Base (basic global styles)
|
||||
- Print (basic print styles)
|
||||
- Styling (minor stylings)
|
||||
- Misc (skip links, hyphens)
|
||||
- Layout (alignment, modules, positionning)
|
||||
- Utilities (width and spacers helpers)
|
||||
- Responsive (Responsive helpers)
|
||||
- WordPress reset (disabled by default)
|
||||
3- Components :
|
||||
- Media object
|
||||
- Autogrid object
|
||||
- Tables (data tables consistency)
|
||||
- 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 */
|
||||
/* ---------------------------------- */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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())
|
||||
|
|
|
|||
|
|
@ -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) */
|
||||
/* 3- Print (print quick reset) */
|
||||
/* 4- Stylings (minor stylings) */
|
||||
/* 5- Misc (skip links, hyphens) */
|
||||
/* 6- Tables (data tables consistency) */
|
||||
/* 7- Forms (forms consistency) */
|
||||
/* 8- Media object */
|
||||
/* 9- Autogrid object */
|
||||
/* 10- Global Layout (alignment, modules, positionning) */
|
||||
/* 11- Helpers (width and spacers helpers) */
|
||||
/* (12- WordPress reset (disabled by default)) */
|
||||
/* 13- Responsive (Responsive Web Design helpers) */
|
||||
/* 14- Grid Layout (grillade) */
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ==Normalize (basic reset) */
|
||||
/* ---------------------------------- */
|
||||
/*
|
||||
1- Normalize (basic reset)
|
||||
2- Libraries :
|
||||
- Base (basic global styles)
|
||||
- Print (basic print styles)
|
||||
- Styling (minor stylings)
|
||||
- Misc (skip links, hyphens)
|
||||
- Layout (alignment, modules, positionning)
|
||||
- Utilities (width and spacers helpers)
|
||||
- Responsive (Responsive helpers)
|
||||
- WordPress reset (disabled by default)
|
||||
3- Components :
|
||||
- Media object
|
||||
- Autogrid object
|
||||
- Tables (data tables consistency)
|
||||
- Forms (forms consistency)
|
||||
- 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/_print.scss"; // print quick reset
|
||||
@import "library/_styling.scss"; // minor stylings
|
||||
@import "library/_misc.scss"; // skip links, hyphens
|
||||
@import "library/_tables.scss"; // data tables consistency
|
||||
@import "library/_forms.scss"; // forms consistency
|
||||
@import "_library/_base.scss"; // basic styles
|
||||
@import "_library/_print.scss"; // print quick reset
|
||||
@import "_library/_styling.scss"; // minor stylings
|
||||
@import "_library/_misc.scss"; // skip links, hyphens
|
||||
@import "_library/_layout.scss"; // alignment, modules, positionning
|
||||
@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
|
||||
@import "objects/_media.scss"; // media object
|
||||
@import "objects/_autogrid.scss"; // media autogrid
|
||||
// Components
|
||||
@import "components/media.scss"; // media object
|
||||
@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
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
|
|
|
|||
Loading…
Reference in a new issue