Merge branch 'v8'

# Conflicts:
#	.sass-lint.yml
#	README.md
#	bower.json
#	changelog.md
#	css/grillade-flex.css
#	css/grillade-grid.css
#	css/knacss-unminified.css
#	css/knacss.css
#	package-lock.json
#	package.json
#	sass/abstracts/_mixins.scss
#	sass/abstracts/_variables.scss
#	sass/base/_responsive.scss
#	sass/base/_utilities.scss
#	sass/base/_wordpress.scss
#	sass/base/grillade-flex.scss
#	sass/base/grillade-grid.scss
#	sass/components/_alerts.scss
#	sass/components/_arrows.scss
#	sass/components/_badges.scss
#	sass/components/_buttons.scss
#	sass/components/_forms.scss
#	sass/components/_media.scss
#	sass/components/_skip-links.scss
#	sass/components/_tables.scss
#	sass/components/_tabs.scss
#	sass/components/_tags.scss
#	sass/knacss.scss
#	yarn.lock
This commit is contained in:
Raphaël Goetter 2021-01-25 12:34:49 +01:00
commit dcf44e2f24
52 changed files with 2292 additions and 14713 deletions

View file

@ -1,2 +1,2 @@
>0.25%
>1.5%
not op_mini all

5
.gitignore vendored
View file

@ -93,6 +93,7 @@ DocProject/Help/*.hhp
DocProject/Help/Html2
DocProject/Help/html
# Click-Once directory
publish
@ -167,8 +168,10 @@ pip-log.txt
# parce qu'on s'en fout
*.log
# parce que trop lourd
# parce que trop lourd, ...
node_modules/
package-lock.json
yarn.lock
# parce que certaines personnes utilisent de vrais IDEs
.idea

View file

@ -1,91 +0,0 @@
options:
formatter: stylish
files:
include: '**/*.s+(a|c)ss'
rules:
# Extends
extends-before-mixins: 1
extends-before-declarations: 1
placeholder-in-extend: 1
# Mixins
mixins-before-declarations: 1
# Line Spacing
one-declaration-per-line: 1
empty-line-between-blocks: 1
single-line-per-selector: 1
# Disallows
no-attribute-selectors: 0
no-color-hex: 0
no-color-keywords: 0 # Modified, was 1
no-color-literals: 0 # Modified, was 1
no-combinators: 0
no-css-comments: 0 # Modified, was 1
no-debug: 1
no-disallowed-properties: 0
no-duplicate-properties: 1
no-empty-rulesets: 1
no-extends: 0
no-ids: 1
no-important: 0 # Modified, was 1
no-invalid-hex: 1
no-mergeable-selectors: 1
no-misspelled-properties: 1
no-qualifying-elements: 1
no-trailing-whitespace: 1
no-trailing-zero: 1
no-transition-all: 1
no-universal-selectors: 0
no-url-protocols: 1
no-vendor-prefixes: 1
no-warn: 1
property-units: 0
# Nesting
force-attribute-nesting: 1
force-element-nesting: 1
force-pseudo-nesting: 1
# Name Formats
class-name-format: 1
function-name-format: 1
id-name-format: 0
mixin-name-format: 1
placeholder-name-format: 1
variable-name-format: 1
# Style Guide
attribute-quotes: 1
bem-depth: 0
border-zero: 0 # Modified, was 1
brace-style: 1
clean-import-paths: 0 # 1 forbids leading underscores and extensions (.scss)
empty-args: 1
hex-length: 1
hex-notation: 1
indentation: 1
leading-zero: 0 # Modified, was 1
nesting-depth: 1
property-sort-order: 0 # Modified, was 1 @TODO Est-ce possible de customiser pour respecter la convention Alsa ?
pseudo-element: 1
quotes: 0 # 1 warns that strings should use single quotes
shorthand-values: 1
url-quotes: 1
variable-for-property: 1
zero-unit: 1
# Inner Spacing
space-after-comma: 1
space-before-colon: 1
space-after-colon: 1
space-before-brace: 1
space-before-bang: 1
space-after-bang: 1
space-between-parens: 1
space-around-operator: 1
# Final Items
trailing-semicolon: 1
final-newline: 1

36
README.md Executable file → Normal file
View file

@ -6,9 +6,7 @@ KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui perme
**Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn.**
**Cette version n'est plus maintenue et n'est pas compatible avec les versions récentes. Ne changez pas de version sans nécessité, vous prendriez le risque de casser la compatibilité avec vos projets en cours.**
## Documentation version actuelle
## Documentation version actuelle (v8 = Reborn)
- Site web de présentation de KNACSS Reborn : <http://knacss.com>
- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
@ -17,3 +15,35 @@ KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui perme
- [**Documentation KNACSS v7**](https://www.knacss.com/doc-old.html)
- [**Pense-bête PDF version 7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
## Modulaire
Principe de briques modulaires :
- KNACSS Reborn est constitué uniquement des fichiers "Core".
- Les fichiers "Utils" seront des briques optionnelles (= les `@import` seront commentés par défaut).
```scss
// CORE
@import "abstracts/variables-sass";
@import "base/reset-base";
@import "base/reset-accessibility";
@import "base/reset-forms";
@import "base/reset-print";
@import "base/layout";
@import "abstracts/mixins-sass";
// UTILITY CLASSES
// @import "utils/utils-global";
// @import "utils/utils-spacers";
// @import "utils/grillade";
// COMPONENTS (add them only if you need)
// @import "components/button";
// @import "components/burger";
// @import "components/checkbox";
// @import "components/radio";
// @import "components/quote";
```

View file

@ -1,31 +0,0 @@
{
"name": "KNACSS",
"version": "7.1.3",
"homepage": "http://www.knacss.com/",
"authors": [
"Raphaël GOETTER, Alsacreations"
],
"description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
"main": "css/knacss.css",
"keywords": [
"css",
"framework",
"reset",
"responsive",
"less",
"sass",
"rwd",
"boilerplate",
"workflow"
],
"license": "WTFPL",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"less/knackLESS.zip",
"tests",
"README.md"
]
}

View file

@ -1,8 +1,16 @@
# Changelog
## Changelog 2020/11
- 26 novembre 2020 : Documentation + V1.0.0
- 22 octobre 2020 : grosse remise à jour. V0.9.0
- 12 octobre 2020 : début de refonte classes utilitaires
- 11 août 2020 : refonte des composants principaux
- 19 mai 2020 : fichier de composant `button.scss` et mixin Sass
- 29 février 2020 : feuille de style accessibilité
- 13 février 2020 : on repart de zéro...
Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn.
## Changelog 2020
Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn, correspondant à la Branche et version 8.
## Changelog v8.0.0 (xxx 2019)

File diff suppressed because one or more lines are too long

View file

@ -1 +0,0 @@
@media (min-width:480px){[class*=" grillade-"],[class^=grillade-]{display:-ms-grid;display:grid}[class*=" grillade-"].has-gutter,[class^=grillade-].has-gutter{grid-gap:1rem}[class*=" grillade-"].has-gutter-l,[class^=grillade-].has-gutter-l{grid-gap:2rem}[class*=" grillade-"].has-gutter-xl,[class^=grillade-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrillade,.grillade{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrillade.has-gutter,.grillade.has-gutter{grid-column-gap:1rem}.autogrillade.has-gutter-l,.grillade.has-gutter-l{grid-column-gap:2rem}.autogrillade.has-gutter-xl,.grillade.has-gutter-xl{grid-column-gap:4rem}}[class*=grillade-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=grillade-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=grillade-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=grillade-5]{-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}[class*=grillade-6]{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}[class*=grillade-7]{-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}[class*=grillade-8]{-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}[class*=grillade-9]{-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}[class*=grillade-10]{-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}[class*=grillade-11]{-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}[class*=grillade-12]{-ms-grid-columns:(1fr)[12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:991px){[class*=grillade-][class*=-medium-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-medium-1]{grid-column:auto/span 1}[class*=grillade-][class*=-medium-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-medium-2]{grid-column:auto/span 2}[class*=grillade-][class*=-medium-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-medium-3]{grid-column:auto/span 3}[class*=grillade-][class*=-medium-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-medium-4]{grid-column:auto/span 4}[class*=-medium-all]{grid-column:1/-1}}@media (min-width:480px) and (max-width:767px){[class*=grillade-][class*=-small-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-small-1]{grid-column:auto/span 1}[class*=grillade-][class*=-small-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-small-2]{grid-column:auto/span 2}[class*=grillade-][class*=-small-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-small-3]{grid-column:auto/span 3}[class*=grillade-][class*=-small-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-small-4]{grid-column:auto/span 4}[class*=-small-all]{grid-column:1/-1}}[class*=-start]{-webkit-box-pack:start;justify-content:start}[class*=-end]{-webkit-box-pack:end;justify-content:end}[class*=-center]{-webkit-box-pack:center;justify-content:center}[class*=-space-between]{-webkit-box-pack:justify;justify-content:space-between}[class*=-space-around]{justify-content:space-around}[class*=-space-evenly]{-webkit-box-pack:space-evenly;justify-content:space-evenly}.item-first{-webkit-box-ordinal-group:0;order:-1}.item-last{-webkit-box-ordinal-group:2;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}

File diff suppressed because one or more lines are too long

669
css/knacss-full/knacss.css Normal file
View file

@ -0,0 +1,669 @@
/*!
* KNACSS Reborn: Just keep it simple!
* @author: Alsacreations
* v1.0.0 2020/11
* Licence WTFPL http://www.wtfpl.net/
*/
/* ----------------------------- */
/* ==Reset (base) */
/* ----------------------------- */
/*
* 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: 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. Breaks words to prevent overflow in all browsers
*/
html {
font-size: 62.5%;
-webkit-tap-highlight-color: transparent;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
overflow-wrap: break-word;
/* 3 */
}
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1.6rem;
line-height: 1.5;
background-color: #ffffff;
color: #212529;
}
/*
* Headings
*/
h1,
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
h4,
.h4-like,
h5,
.h5-like,
h6,
.h6-like {
color: #212529;
}
/*
* Links
*/
a {
color: #454d5d;
text-decoration: underline;
}
a:focus,
a:hover,
a:active {
color: #212529;
text-decoration: underline;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
/*
* Vertical rythm
*/
h1,
.h1-like,
h2,
.h2-like {
margin-top: 0;
margin-bottom: 2rem;
}
p,
address,
ol,
ul,
dl,
blockquote,
pre,
h3,
.h3-like,
h4,
.h4-like,
h5,
.h5-like,
h6,
.h6-like,
dt,
dd {
margin-top: 0;
margin-bottom: 1rem;
}
/*
* Nested elements
*/
ol ol,
ol ul,
ul ol,
ul ul,
li ul,
li ol,
nav ul,
nav ol,
li p,
li .p-like {
margin-top: 0;
margin-bottom: 0;
}
/*
* Lists
*/
ul,
ol {
padding-left: 2rem;
}
nav ul,
nav ol {
list-style: none;
padding: 0;
}
/*
* Embed content
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
img,
table,
td,
blockquote,
pre,
code,
input,
textarea,
select,
video,
svg,
iframe {
max-width: 100%;
}
iframe,
img,
input,
select,
textarea {
height: auto;
}
img {
border-style: none;
}
/**
* Remove the border on iframes in all browsers
*/
iframe {
border-style: none;
}
/*
* Fill color matching to text color
*/
svg:not([fill]) {
fill: currentColor;
}
/*
* Hide the overflow in IE
*/
svg:not(:root) {
overflow: hidden;
}
/*
* Tables
*/
table {
border-collapse: collapse;
}
/*
* Rulers
*/
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
border: 0;
border-top: 1px solid;
margin: 2rem 0;
clear: both;
color: inherit;
}
/*
* table styles
*/
table {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
vertical-align: top;
margin-bottom: 2rem;
}
/*
* Hidden but not for an assistive technology like a screen reader, Yahoo! method
*/
.visually-hidden {
position: absolute !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
}
/*
* Disable animations styles when reduced motion is enabled
*/
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
/*
* Change the cursor on busy elements in all browsers.
*/
[aria-busy="true"] {
cursor: progress;
}
/*
* Change the cursor on control elements in all browsers.
*/
[aria-controls] {
cursor: pointer;
}
/*
* Change the cursor on disabled, not-editable, or otherwise
* inoperable elements in all browsers.
*/
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
/*
* Change the display on visually hidden accessible elements
* in all browsers.
*/
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
/* ----------------------------- */
/* ==Reset (forms) */
/* ----------------------------- */
/*
* Remove the tapping delay on clickable elements in all browsers .
*/
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
touch-action: manipulation;
}
/*
* 1. Change the inconsistent appearance in all browsers.
* 2. Add typography inheritance in all browsers.
*/
button,
input,
select,
textarea {
margin: 0;
background-color: transparent;
/* 1 */
color: inherit;
/* 1 */
font-family: inherit;
/* 2 */
font-size: inherit;
/* 2 */
line-height: inherit;
/* 2 */
letter-spacing: inherit;
/* 2 */
vertical-align: middle;
}
/*
* Basic User Interface reset
*/
button,
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
border: 0;
}
/*
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre,
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
pre {
-moz-tab-size: 2;
tab-size: 2;
white-space: pre-wrap;
line-height: normal;
overflow: auto;
-ms-overflow-style: scrollbar;
}
/*
* Show overflow in IE/Edge
*/
button,
input {
overflow: visible;
}
/*
* Remove the inheritance of text transform in Firefox
*/
button,
select {
text-transform: none;
}
/*
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
form,
fieldset {
border: none;
}
fieldset {
margin: 0;
padding: 2rem;
}
legend {
display: table;
max-width: 100%;
padding: 0 0.5rem;
border: 0;
color: inherit;
white-space: normal;
}
label {
display: inline-block;
cursor: pointer;
}
textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
white-space: pre-wrap;
}
progress {
display: inline-block;
width: 100%;
vertical-align: baseline;
}
output {
display: inline-block;
}
summary {
display: list-item;
}
template {
display: none;
}
/* ----------------------------- */
/* Form oddities */
/* ----------------------------- */
/*
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
* Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/*
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* 1. Correct the inability to style upload buttons in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
* Remove the inner border and padding of focus outlines in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/*
* Restore the focus outline styles unset by the previous rule in Firefox.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/*
* Remove the additional :invalid styles in Firefox.
*/
:-moz-ui-invalid {
box-shadow: none;
}
/* ----------------------------- */
/* ==Print (quick print reset) */
/* ----------------------------- */
@media print {
* {
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
body {
width: auto;
margin: auto;
font-family: serif;
font-size: 12pt;
}
p,
.p-like,
h1,
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
h4,
.h4-like,
h5,
.h5-like,
h6,
.h6-like,
blockquote,
label,
ul,
ol {
color: #000;
margin: auto;
}
.print {
display: block;
}
.no-print {
display: none;
}
/* no orphans, no widows */
p,
.p-like,
blockquote {
orphans: 3;
widows: 3;
}
/* no breaks inside these elements */
blockquote,
ul,
ol {
page-break-inside: avoid;
}
/* page break before main headers
h1,
.h1-like {
page-break-before: always;
}
*/
/* no breaks after these elements */
h1,
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
caption {
page-break-after: avoid;
}
a {
color: #000;
}
/* displaying URLs
a[href]::after {
content: " (" attr(href) ")";
}
*/
a[href^="javascript:"]::after,
a[href^="#"]::after {
content: "";
}
}
/* ---------------------------- */
/* ==Layout classes */
/* ----------------------------- */
/* Global container */
.layout-maxed {
display: grid;
}
@media (min-width: 576px) {
.layout-maxed {
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 576px) minmax(1rem, 1fr);
}
}
@media (min-width: 768px) {
.layout-maxed {
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 768px) minmax(1rem, 1fr);
}
}
@media (min-width: 1024px) {
.layout-maxed {
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1024px) minmax(1rem, 1fr);
}
}
@media (min-width: 1330px) {
.layout-maxed {
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1330px) minmax(1rem, 1fr);
}
}
/* Center all children */
.layout-maxed > * {
grid-column: 2;
}
/* Hero box */
.layout-hero {
grid-column: 1 / -1;
display: grid;
grid-template-columns: inherit;
}
.layout-hero > * {
grid-column: 2;
}
/* Hero image */
.layout-hero-img {
grid-column: 1 / -1;
justify-self: center;
max-width: 100%;
}

View file

@ -0,0 +1 @@
/*! KNACSS Reborn: Just keep it simple! @author: Alsacreations v1.0.0 2020/11 Licence WTFPL http://www.wtfpl.net/ */*,:after,:before{box-sizing:border-box;min-width:0;min-height:0}html{font-size:62.5%;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overflow-wrap:break-word}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.5;background-color:#fff}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,body,h1,h2,h3,h4,h5,h6{color:#212529}a{color:#454d5d;text-decoration:underline}a:active,a:focus,a:hover{color:#212529;text-decoration:underline}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.h1-like,.h2-like,h1,h2{margin-top:0;margin-bottom:2rem}.h3-like,.h4-like,.h5-like,.h6-like,address,blockquote,dd,dl,dt,h3,h4,h5,h6,ol,p,pre,ul{margin-top:0;margin-bottom:1rem}li .p-like,li ol,li p,li ul,nav ol,nav ul,ol ol,ol ul,ul ol,ul ul{margin-top:0;margin-bottom:0}ol,ul{padding-left:2rem}nav ol,nav ul{list-style:none;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}blockquote,code,iframe,img,input,pre,select,svg,table,td,textarea,video{max-width:100%}iframe,img,input,select,textarea{height:auto}iframe,img{border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}hr{box-sizing:initial;height:0;overflow:visible;border:0;border-top:1px solid;margin:2rem 0;clear:both;color:inherit}table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;vertical-align:top;margin-bottom:2rem}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{margin:0;background-color:initial;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;vertical-align:middle}button,input:not([type=radio]):not([type=checkbox]),select,textarea{border:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{-moz-tab-size:2;tab-size:2;white-space:pre-wrap;line-height:normal;overflow:auto;-ms-overflow-style:scrollbar}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset,form{border:none}fieldset{margin:0;padding:2rem}legend{display:table;max-width:100%;padding:0 .5rem;border:0;color:inherit;white-space:normal}label{display:inline-block;cursor:pointer}textarea{overflow:auto;vertical-align:top;resize:vertical;white-space:pre-wrap}progress{width:100%;vertical-align:initial}output,progress{display:inline-block}summary{display:list-item}template{display:none}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}.layout-maxed{display:grid}.layout-maxed>*{grid-column:2}.layout-hero{grid-column:1/-1;display:grid;grid-template-columns:inherit}.layout-hero>*{grid-column:2}.layout-hero-img{grid-column:1/-1;justify-self:center;max-width:100%}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media print{*{background:transparent!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,label,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}}@media (min-width:576px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,576px) minmax(1rem,1fr)}}@media (min-width:768px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,768px) minmax(1rem,1fr)}}@media (min-width:1024px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,1024px) minmax(1rem,1fr)}}@media (min-width:1330px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,1330px) minmax(1rem,1fr)}}

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -1,74 +1,56 @@
// Requires
var gulp = require('gulp');
// Include plugins
var postcss = require('gulp-postcss');
const gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var CombineMQ = require('postcss-combine-media-query');
var autoprefixer = require('autoprefixer');
var CSSnano = require('cssnano');
var rename = require('gulp-rename');
var cssnano = require('cssnano'); // minifies CSS
var autoprefixer = require('autoprefixer');
var unprefix = require('postcss-unprefix'); // deletes old prefixes
var flexbugs = require('postcss-flexbugs-fixes'); // flexbox fixes for IE
var gaps = require('postcss-gap-properties'); // gaps polyfill
var plugins = [
unprefix(),
autoprefixer({
grid: true
}),
flexbugs(),
gaps()
];
var pluginsProd = [
unprefix(),
autoprefixer({
grid: true
}),
flexbugs(),
gaps(),
cssnano()
];
// tâche cssDev = compile vers knacss-unminified.css
gulp.task('cssDev', () => {
return gulp.src('./sass/knacss.scss')
.pipe(sass({
outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
}))
.pipe(postcss(plugins))
.pipe(rename('knacss-unminified.css'))
.pipe(gulp.dest('./css/'));
gulp.task('css:full', () => {
return gulp.src('sass/knacss.scss')
.pipe(sass(
{
outputStyle: 'expanded'
}))
.pipe(
postcss([
autoprefixer, // ajoute les préfixes vendeurs
]))
.pipe(gulp.dest('css/knacss-full'));
});
// tâche cssProd = compile vers knacss.css minifié
gulp.task('cssProd', () => {
return gulp.src('./sass/knacss.scss')
.pipe(sass())
.pipe(postcss(pluginsProd))
.pipe(gulp.dest('./css/'));
gulp.task('css:mini', () => {
return gulp.src('sass/knacss.scss')
.pipe(sass(
{
outputStyle: 'compact'
}))
.pipe(
postcss([
CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
autoprefixer, // ajoute les préfixes vendeurs
CSSnano // minification
]))
.pipe(gulp.dest('css/knacss-mini'));
});
gulp.task('grillade', () => {
return gulp.src('./sass/base/grillade-grid.scss')
.pipe(sass())
.pipe(postcss(pluginsProd))
.pipe(gulp.dest('./css/'));
gulp.task('css:grillade', () => {
return gulp.src('sass/utils/grillade.scss')
.pipe(sass(
{
outputStyle: 'compact'
}))
.pipe(
postcss([
CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
autoprefixer, // ajoute les préfixes vendeurs
CSSnano // minification
]))
.pipe(gulp.dest('css/grillade'));
});
gulp.task('grillade-flex', () => {
return gulp.src('./sass/base/grillade-flex.scss')
.pipe(sass())
.pipe(postcss(pluginsProd))
.pipe(gulp.dest('./css/'));
});
// Watcher
gulp.task('watch', () => {
gulp.watch(['./sass/*.scss'], gulp.series('cssDev'));
});
// Tâche BUILD : tapez "gulp" ou "gulp build"
gulp.task('build', gulp.series('css:full', 'css:mini', 'css:grillade'));
// Tâche par défaut
gulp.task('default', gulp.series('cssDev', 'cssProd', 'grillade', 'grillade-flex'));
gulp.task('default', gulp.series('build'));

5412
package-lock.json generated

File diff suppressed because it is too large Load diff

47
package.json Executable file → Normal file
View file

@ -1,40 +1,15 @@
{
"name": "knacss",
"version": "7.1.3",
"homepage": "http://www.knacss.com/",
"bugs": "https://github.com/alsacreations/KNACSS/issues",
"author": "Raphaël GOETTER, Alsacreations",
"contributors": [
"Raphaël GOETTER, Alsacreations"
],
"description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
"main": "https://github.com/alsacreations/KNACSS/tree/master/css",
"keywords": [
"css",
"framework",
"reset",
"responsive",
"sass",
"rwd",
"boilerplate",
"workflow"
],
"repository": {
"type": "git",
"url": "https://github.com/alsacreations/KNACSS"
},
"license": "WTFPL",
"dependencies": {},
"name": "demo",
"version": "0.0.0",
"devDependencies": {
"autoprefixer": "^9.7.4",
"cssnano": "latest",
"gulp": "^3.x",
"gulp-postcss": "latest",
"gulp-rename": "^2.0.0",
"gulp-sass": "latest",
"postcss-flexbugs-fixes": "^4.2.0",
"postcss-gap-properties": "latest",
"postcss-unprefix": "latest"
"gulp": "^4.0.2",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.1.0"
},
"engines": {}
"dependencies": {
"autoprefixer": "^9.7.1",
"postcss-combine-media-query": "^1.0.1",
"cssnano": "^4.1.10",
"gulp-rename": "^2.0.0"
}
}

View file

@ -0,0 +1,32 @@
// Respond-to mixin
// ex. @include respond-to("medium-up") {...}
$bp-aliases: (
'small' : (max-width: #{$small - 1}),
'medium' : (max-width: #{$medium - 1}),
'large' : (max-width: #{$large - 1}),
'extra-large' : (max-width: #{$extra-large - 1}),
'small-up' : (min-width: #{$small}),
'medium-up' : (min-width: #{$medium}),
'large-up' : (min-width: #{$large}),
'extra-large-up' : (min-width: #{$extra-large})
);
// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
@mixin respond-to($name) {
// If the key exists in the map
@if map-has-key($bp-aliases, $name) {
// Prints a media query based on the value
@media #{inspect(map-get($bp-aliases, $name))} {
@content;
}
}
// If the key doesn't exist in the map
@else {
@warn "Unfortunately, no value could be retrieved from `#{$name}`. "
+"Please make sure it is defined in `$bp-aliases` map.";
}
}

View file

@ -1,70 +0,0 @@
// Visually-hidden mixin
@mixin visually-hidden {
position: absolute !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
}
// font-size Mixin
// compiles to font-size mobile + font-size desktop on small-plus devices
// ex. h2 { @include font-size(h2);}
@mixin font-size($elem) {
$q: map-get($font-sizes, $elem);
$mob: map-get($q, "mobile");
$desk: map-get($q, "desktop");
font-size: $mob;
@include respond-to("small-up") {
font-size: $desk;
}
}
// Grid Mixin
// arguments are : columns number, gutter, min-breakpoint
// ex. .ingrid { @include grid(4, 1rem, 640px); }
@mixin grid($number:1, $gutter:0, $breakpoint:0) {
@supports (display: grid) {
@media (min-width: $breakpoint) {
display: grid;
grid-template-columns: repeat($number, 1fr);
grid-gap: $gutter;
}
}
}
// Additionnal "utility" breakpoints aliases
// ex. @include respond-to("medium-up") {...}
$bp-aliases: (
'tiny' : (max-width: #{$tiny - 1}),
'small' : (max-width: #{$small - 1}),
'medium' : (max-width: #{$medium - 1}),
'large' : (max-width: #{$large - 1}),
'extra-large' : (max-width: #{$extra-large - 1}),
'tiny-up' : (min-width: #{$tiny}),
'small-up' : (min-width: #{$small}),
'medium-up' : (min-width: #{$medium}),
'large-up' : (min-width: #{$large}),
'extra-large-up' : (min-width: #{$extra-large}),
'retina' : (min-resolution: 2dppx)
);
// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
@mixin respond-to($name) {
// If the key exists in the map
@if map-has-key($bp-aliases, $name) {
// Prints a media query based on the value
@media #{inspect(map-get($bp-aliases, $name))} {
@content;
}
}
// If the key doesn't exist in the map
@else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Please make sure it is defined in `$breakpoints` map.";
}
}

View file

@ -0,0 +1,197 @@
// ----------------
// Sass Config and variables
// ----------------
// ----------------
// Breakpoints values
// ----------------
$breakpoints: (
sm: 576px,
md: 768px,
lg: 1024px,
xl: 1330px,
) !default;
$small: map-get($breakpoints, sm) !default;
$medium: map-get($breakpoints, md) !default;
$large: map-get($breakpoints, lg) !default;
$extra-large: map-get($breakpoints, xl) !default;
// ----------------
// Spacers values
// ----------------
$spacers: (
"0": 0,
"1": 0.5rem,
// tiny
"2": 0.75rem,
// tiny-plus
"3": 1rem,
// small
"4": 1.5rem,
// small-plus
"5": 2rem,
// medium
"6": 3rem,
// medium-plus
"7": 5rem,
// large
"auto": auto,
) !default;
$spacer-none: map-get($spacers, "0") !default;
$spacer-tiny: map-get($spacers, "1") !default;
$spacer-tiny-plus: map-get($spacers, "2") !default;
$spacer-small: map-get($spacers, "3") !default;
$spacer-small-plus: map-get($spacers, "4") !default;
$spacer-medium: map-get($spacers, "5") !default;
$spacer-medium-plus: map-get($spacers, "6") !default;
$spacer-large: map-get($spacers, "7") !default;
// ----------------
// Grid layout values
// ----------------
$grid-columns: 6 !default;
// ----------------
// Fonts values
// ----------------
// Font families
$font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$font-family-headings: sans-serif;
$font-family-monospace: consolas, courier, monospace;
$line-height-base: 1.5;
// Font sizes
$font-size-html: 62.5%;
$font-size-base: 1.6rem;
// Font weights
$weight-light: 200;
$weight-book: 300;
$weight-regular: 400;
$weight-medium: 500;
$weight-bold: 700;
// ----------------
// Color values
// ----------------
// Color palette (don't use as variables except $white and $black)
$white: #ffffff;
$black: #000000;
$color-gray-1: #f7fafc;
$color-gray-2: #abc3c2;
$color-gray-3: #454d5d;
$color-gray-4: #212529;
$color-blue-1: #0275d8;
$color-blue-2: #04527b;
$color-blue-3: #033651;
// Non agnostic colors (should be used as variables)
$color-alpha: $color-gray-1; // most used colors
$color-beta: $color-gray-3;
$color-gamma: $color-gray-4;
$color-delta: $color-blue-1;
$color-epsilon: $color-blue-2;
$color-gradient-alpha: linear-gradient(
to left bottom,
$color-alpha,
$color-beta
);
$color-alternate-1: #5cb85c; // less used colors
$color-alternate-1b: #4d9c4d;
$color-alternate-2: #5bc0de;
$color-alternate-2b: #4fa8c4;
$color-alternate-3: #f0ad4e;
$color-alternate-3b: #d19644;
$color-alternate-4: #d9534f;
$color-alternate-4b: #be4945;
// Links
$link-decoration: underline;
$link-decoration-hover: underline;
// Border radius
$radius-none: 0;
$radius-small: 0.5rem;
$radius-medium: 1rem;
$radius-large: 2rem;
$radius-circle: 50%;
// ----------------
// Utils properties list (note that display: grid is in Grillade)
// ----------------
$utils: (
(hidden, display, none),
(block, display, block),
(inline, display, inline),
(inline-block, display, inline-block),
(flex, display, flex),
(flex-row, flex-direction, row),
(flex-col, flex-direction, column),
(flex-wrap, flex-wrap, wrap),
(flex-no-wrap, flex-wrap, nowrap),
(flex-shrink, flex-shrink, 1),
(flex-no-shrink, flex-shrink, 0),
(flex-grow, flex-grow, 1),
(flex-no-grow, flex-grow, 0),
(float-left, float, left),
(float-right, float, right),
(float-none, float, none),
(text-bold, font-weight, bold),
(text-italic, font-style, italic),
(text-uppercase, text-transform, uppercase),
(text-lowercase, text-transform, lowercase),
(text-smaller, font-size, smaller),
(text-bigger, font-size, bigger),
(text-left, text-align, left),
(text-center, text-align, center),
(text-right, text-align, right),
(text-justify, text-align, justify),
(text-wrap, overflow-wrap, break-word),
(justify-start, justify-content, flex-start),
(justify-end, justify-content, flex-end),
(justify-center, justify-content, center),
(justify-between, justify-content, space-between),
(justify-around, justify-content, space-around),
(justify-evenly, justify-content, space-evenly),
(justify-items-start, justify-items, start),
(justify-items-end, justify-items, end),
(justify-items-center, justify-items, center),
(align-start, align-content, start),
(align-end, align-content, end),
(align-center, align-content, center),
(align-between, align-content, space-between),
(align-around, align-content, space-around),
(align-evenly, align-content, space-evenly),
(align-items-start, align-items, flex-start),
(align-items-end, align-items, flex-end),
(align-items-center, align-items, center),
(place-center, place-content, center),
(justify-self-auto, justify-self, auto),
(justify-self-start, justify-self, start),
(justify-self-end, justify-self, end),
(justify-self-center, justify-self, center),
(justify-self-stretch, justify-self, stretch),
(align-self-auto, align-self, auto),
(align-self-start, align-self, flex-start),
(align-self-end, align-self, flex-end),
(align-self-center, align-self, center),
(align-self-stretch, align-self, stretch),
(align-top, vertical-align, top),
(align-bottom, vertical-align, bottom),
(align-middle, vertical-align, middle),
(item-first, order, -100),
(item-last, order, 100)
) !default;

View file

@ -1,233 +0,0 @@
// Config file and project variables
// ----------------
// Breakpoints zone
// ----------------
// Warning: you should use your own values, regardless of the devices
// Best practice is Mobile First: (min-width: $breakpoint)
$tiny : 480px !default; // or 'em' if you prefer, of course
$small : 576px !default;
$medium : 768px !default;
$large : 992px !default;
$extra-large : 1200px !default;
// ----------
// Fonts zone
// ----------
// Font families
$font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; // system font stack
$font-family-headings : sans-serif !default; // font for h1, h2.. h6
$font-family-monospace : consolas, courier, monospace !default; // font for code and samples
// Font sizes (1.6rem value is "16px" equivalent)
$font-size-base : 1.6rem !default;
$font-sizes: (
base: (
mobile : 1.4rem,
desktop : $font-size-base
),
h1: (
mobile : 2.8rem,
desktop : 3.2rem
),
h2: (
mobile : 2.4rem,
desktop : 2.8rem
),
h3: (
mobile : 2.0rem,
desktop : 2.4rem
),
h4: (
mobile : 1.8rem,
desktop : 2.0rem
),
h5: (
mobile : 1.6rem,
desktop : 1.8rem
),
h6: (
mobile : 1.4rem,
desktop : 1.6rem
)
) !default;
// Line heights
$line-height-s : 1.3 !default;
$line-height-base : 1.5 !default;
$line-height-l : 1.7 !default;
// Default margin-bottom
$margin-bottom-base : 1rem !default;
$headings-margin-bottom : $margin-bottom-base /2 !default;
$paragraph-margin-bottom: $margin-bottom-base !default;
// Font weights
$weight-light : 200 !default;
$weight-book : 300 !default;
$weight-regular : 400 !default;
$weight-medium : 500 !default;
$weight-bold : 700 !default;
// Activate hyphenation on small screens
$hyphens: true !default;
// Activate Utility classes
$utilities: true !default;
// Activate WordPress reset and styles
$wordpress: false !default;
// Activate IE10-IE11 fixes and old grid system
$ie: true !default;
// ------------
// Spacing zone
// ------------
// Number of grid-columns
$cols: 12 !default;
// Gutter
$gutter: null;
// Grid gutters (for .has-gutter-* classes)
$grid-gutters: (
'': 1rem,
'-l': 2rem,
'-xl': 4rem
) !default;
// Spacings
$spacer-tiny : .5rem !default;
$spacer-tiny-plus : .7rem !default;
$spacer-small : 1rem !default;
$spacer-small-plus : 1.5rem !default;
$spacer-medium : 2rem !default;
$spacer-medium-plus : 3rem !default;
$spacer-large : 4rem !default;
$spacer-large-plus : 6rem !default;
$spacer-extra-large : 8rem !default;
$spacer-extra-large-plus : 12rem !default;
$spacer-ultra-large : 16rem !default;
$spacer-ultra-large-plus : 20rem !default;
// z-indexes
$zindex-navigation : 1000 !default;
$zindex-dropdown : 2000 !default;
$zindex-popover : 3000 !default;
$zindex-tooltip : 4000 !default;
$zindex-modal : 5000 !default;
$zindex-notification : 6000 !default;
$zindex-debug : 7000 !default;
// ----------
// Color zone
// ----------
// Color names
$white : #fff !default;
$gray-100 : #f8f9fa !default;
$gray-200 : #e7e9ed !default;
$gray-300 : #dee2e6 !default;
$gray-400 : #ced4da !default;
$gray-500 : #acb3c2 !default;
$gray-600 : #727e96 !default;
$gray-700 : #454d5d !default;
$gray-800 : #333 !default;
$gray-900 : #212529 !default;
$black : #000 !default;
$blue-300 : #5BC0DE !default;
$blue-500 : #0275D8 !default;
$green-500 : #5CB85C !default;
$orange-500 : #F0AD4E !default;
$red-500 : #D9534F !default;
// Semantic colors
$color-brand : $green-500 !default;
$color-primary : $blue-500 !default;
$color-success : $green-500 !default;
$color-info : $blue-300 !default;
$color-warning : $orange-500 !default;
$color-danger : $red-500 !default;
$color-inverse : $gray-800 !default;
$color-ghost : transparent !default;
$color-muted : $gray-200 !default;
$color-base : $gray-900 !default;
$background-base : $white !default;
$forms-color : $gray-800 !default;
// ---------------
// Components zone
// ---------------
// Component: links
$link-color : $gray-800 !default;
$link-color-hover : darken($link-color, 15%) !default;
$link-decoration : underline !default;
$link-decoration-hover : underline !default;
// Global border-radius
$border-radius: 0 !default;
// Component: quotes
$quote-color : $gray-200 !default;
// Component: arrows
$arrow-color : $black !default;
// Components: checkboxes, radios, switches
$checkbox-color: $white !default;
$checkbox-background: $gray-800 !default;
$checkbox-size: 2rem !default;
$checkbox-border-radius: 4px !default;
$radio-color: $gray-800 !default;
$radio-background: $white !default;
$switch-color: $white !default;
$switch-background: $gray-800 !default;
$switch-size: 2rem !default;
$switch-border-radius: 3em !default;
// Component: tables
$table-border : $gray-500 !default;
$table-caption-color : $gray-800 !default;
$table-background : transparent !default;
$table-head-color : $color-base !default;
$table-head-background : transparent !default;
$table-footer-color : $color-base !default;
$table-footer-background : transparent !default;
// Components: buttons, badges, alerts color variants list
// Convention is: name - background-color - color - border
$variants-list: (
(primary, $color-primary, $white, none),
(success, $color-success, $white, none),
(info, $color-info, $black, none),
(warning, $color-warning, $black, none),
(danger, $color-danger, $white, none),
(inverse, $color-inverse, $white, none),
(ghost, $color-ghost, $white, 0 0 0 1px $white inset)
) !default;
// Component: tabs
$tabs-border : $gray-200 !default;
$tabs-active-border : $gray-800 !default;
$tabs-color : $color-base !default;
$tabs-active-color : $gray-800 !default;
$tabs-background : transparent !default;
$tabs-active-background : transparent !default;
$tabs-border-radius : 0 !default;
// Component: nav burger button
$burger-color : $gray-800 !default;
$burger-background : transparent !default;
$burger-hover-background : transparent !default;
$burger-size : 2.6rem !default;
$burger-weight : 5px !default; // size of stripes
$burger-padding : 0 !default;

View file

@ -1,65 +1,41 @@
/* ----------------------------- */
/* ==Global Micro Layout */
/* ---------------------------- */
/* ==Layout classes */
/* ----------------------------- */
/* Flexbox layout is KNACSS choice
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/
/* Global container */
.layout-maxed {
display: grid;
.flex-container,
.d-flex {
display: flex;
flex-wrap: wrap;
@each $key,
$value in $breakpoints {
@media (min-width: #{$value}) {
grid-template-columns:
minmax($spacer-small, 1fr)
minmax(auto, $value)
minmax($spacer-small, 1fr);
}
}
}
.flex-container--row,
.flex-row {
@extend .flex-container;
flex-direction: row;
/* Center all children */
.layout-maxed > * {
grid-column: 2;
}
.flex-container--column,
.flex-column {
@extend .flex-container;
flex-direction: column;
/* Hero box */
.layout-hero {
grid-column: 1 / -1;
display: grid;
grid-template-columns: inherit;
}
.flex-container--row-reverse,
.flex-row-reverse {
@extend .flex-container;
flex-direction: row-reverse;
justify-content: flex-end;
.layout-hero > * {
grid-column: 2;
}
.flex-container--column-reverse,
.flex-column-reverse {
@extend .flex-container;
flex-direction: column-reverse;
justify-content: flex-end;
}
.flex-item-fluid,
.item-fluid {
flex: 1 1 0%;
}
.flex-item-first,
.item-first {
order: -1;
}
.flex-item-medium,
.item-medium {
order: 0;
}
.flex-item-last,
.item-last {
order: 1;
}
.flex-item-center,
.item-center,
.mr-auto {
margin: auto;
}
/* Hero image */
.layout-hero-img {
grid-column: 1 / -1;
justify-self: center;
max-width: 100%;
}

View file

@ -0,0 +1,65 @@
/*
* Hidden but not for an assistive technology like a screen reader, Yahoo! method
*/
.visually-hidden,
.sr-only {
position: absolute !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
}
/*
* Disable animations styles when reduced motion is enabled
*/
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
/*
* Change the cursor on busy elements in all browsers.
*/
[aria-busy="true"] {
cursor: progress;
}
/*
* Change the cursor on control elements in all browsers.
*/
[aria-controls] {
cursor: pointer;
}
/*
* Change the cursor on disabled, not-editable, or otherwise
* inoperable elements in all browsers.
*/
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
/*
* Change the display on visually hidden accessible elements
* in all browsers.
*/
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}

250
sass/base/_reset-base.scss Normal file
View file

@ -0,0 +1,250 @@
/* ----------------------------- */
/* ==Reset (base) */
/* ----------------------------- */
/*
* 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: 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. Breaks words to prevent overflow in all browsers
*/
html {
font-size: $font-size-html;
-webkit-tap-highlight-color: transparent; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
overflow-wrap: break-word; /* 3 */
}
body {
margin: 0;
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
background-color: $white;
color: $color-gamma;
}
/*
* Headings
*/
h1,
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
h4,
.h4-like,
h5,
.h5-like,
h6,
.h6-like {
color: $color-gamma;
}
/*
* Links
*/
a {
color: $color-beta;
text-decoration: $link-decoration;
}
a:focus,
a:hover,
a:active {
color: $color-gamma;
text-decoration: $link-decoration-hover;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/*
* Vertical rythm
*/
h1,
.h1-like,
h2,
.h2-like {
margin-top: 0;
margin-bottom: $spacer-medium;
}
p,
address,
ol,
ul,
dl,
blockquote,
pre,
h3,
.h3-like,
h4,
.h4-like,
h5,
.h5-like,
h6,
.h6-like,
dt,
dd {
margin-top: 0;
margin-bottom: $spacer-small;
}
/*
* Nested elements
*/
ol ol,
ol ul,
ul ol,
ul ul,
li ul,
li ol,
nav ul,
nav ol,
li p,
li .p-like {
margin-top: 0;
margin-bottom: 0;
}
/*
* Lists
*/
ul,
ol {
padding-left: $spacer-medium;
}
nav ul,
nav ol {
list-style: none;
padding: 0;
}
/*
* Embed content
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
img,
table,
td,
blockquote,
pre,
code,
input,
textarea,
select,
video,
svg,
iframe {
max-width: 100%;
}
iframe,
img,
input,
select,
textarea {
height: auto;
}
img {
border-style: none;
}
/**
* Remove the border on iframes in all browsers
*/
iframe {
border-style: none;
}
/*
* Fill color matching to text color
*/
svg:not([fill]) {
fill: currentColor;
}
/*
* Hide the overflow in IE
*/
svg:not(:root) {
overflow: hidden;
}
/*
* Tables
*/
table {
border-collapse: collapse;
}
/*
* Rulers
*/
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
border: 0;
border-top: 1px solid;
margin: $spacer-medium 0;
clear: both;
color: inherit;
}
/*
* table styles
*/
table {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
vertical-align: top;
margin-bottom: $spacer-medium;
}

224
sass/base/_reset-forms.scss Normal file
View file

@ -0,0 +1,224 @@
/* ----------------------------- */
/* ==Reset (forms) */
/* ----------------------------- */
/*
* Remove the tapping delay on clickable elements in all browsers .
*/
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
/*
* 1. Change the inconsistent appearance in all browsers.
* 2. Add typography inheritance in all browsers.
*/
button,
input,
select,
textarea {
margin: 0;
background-color: transparent; /* 1 */
color: inherit; /* 1 */
font-family: inherit; /* 2 */
font-size: inherit; /* 2 */
line-height: inherit; /* 2 */
letter-spacing: inherit; /* 2 */
vertical-align: middle;
}
/*
* Basic User Interface reset
*/
button,
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
border: 0;
}
/*
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre,
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
pre {
tab-size: 2;
white-space: pre-wrap;
line-height: normal;
overflow: auto;
-ms-overflow-style: scrollbar;
}
/*
* Show overflow in IE/Edge
*/
button,
input {
overflow: visible;
}
/*
* Remove the inheritance of text transform in Firefox
*/
button,
select {
text-transform: none;
}
/*
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
form,
fieldset {
border: none;
}
fieldset {
margin: 0;
padding: $spacer-medium;
}
legend {
display: table;
max-width: 100%;
padding: 0 $spacer-tiny;
border: 0;
color: inherit;
white-space: normal;
}
label {
display: inline-block;
cursor: pointer;
}
textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
white-space: pre-wrap;
}
progress {
display: inline-block;
width: 100%;
vertical-align: baseline;
}
output {
display: inline-block;
}
summary {
display: list-item;
}
template {
display: none;
}
/* ----------------------------- */
/* Form oddities */
/* ----------------------------- */
/*
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
* Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/*
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* 1. Correct the inability to style upload buttons in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
* Remove the inner border and padding of focus outlines in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/*
* Restore the focus outline styles unset by the previous rule in Firefox.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/*
* Remove the additional :invalid styles in Firefox.
*/
:-moz-ui-invalid {
box-shadow: none;
}

View file

@ -89,10 +89,8 @@
}
*/
a[href^="javascript:"],
a[href^="#"] {
&::after {
content: "";
}
a[href^="javascript:"]::after,
a[href^="#"]::after {
content: "";
}
}

View file

@ -1,518 +0,0 @@
/* ----------------------------- */
/* ==Reset (global) */
/* ----------------------------- */
/**
* disable animations styles when reduced motion is enabled
*/
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
/**
* 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: 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 {
-webkit-tap-highlight-color: transparent; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
font-size: calc(1em * 0.625); /* 3 */
}
body {
margin: 0;
@include font-size(base);
background-color: $background-base;
color: $color-base;
font-family: $font-family-base;
line-height: $line-height-base;
}
/**
* links
*/
a {
color: $link-color;
text-decoration: $link-decoration;
&:focus,
&:hover,
&:active {
color: $link-color-hover;
text-decoration: $link-decoration-hover;
}
}
/**
* headings
*/
h1, .h1-like {
@include font-size(h1);
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
font-family: $font-family-headings;
}
font-weight: $weight-medium;
}
h2, .h2-like {
@include font-size(h2);
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
font-family: $font-family-headings;
}
font-weight: $weight-medium;
}
h3, .h3-like {
@include font-size(h3);
font-weight: $weight-medium;
}
h4, .h4-like {
@include font-size(h4);
font-weight: $weight-medium;
}
h5, .h5-like {
@include font-size(h5);
font-weight: $weight-medium;
}
h6, .h6-like {
@include font-size(h6);
font-weight: $weight-medium;
}
/**
* vertical rythm
*/
h1,
h2,
h3,
h4,
h5,
h6,
dd {
margin-top: 0;
margin-bottom: $headings-margin-bottom;
}
p,
address,
ol,
ul,
dl,
blockquote,
pre {
margin-top: 0;
margin-bottom: $paragraph-margin-bottom;
}
/**
* avoid margin on nested elements
*/
li p,
li .p-like,
li ul,
li ol,
ol ol,
ul ul {
margin-top: 0;
margin-bottom: 0;
}
/* ----------------------------- */
/* ==Reset (common styling) */
/* ----------------------------- */
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,
blockquote,
code,
pre,
textarea,
input,
video,
svg {
max-width: 100%;
}
img {
height: auto;
vertical-align: middle;
border-style: none;
}
/**
* fill color matching to text color
*/
svg:not([fill]) {
fill: currentColor;
}
ul,
ol {
padding-left: 2em;
}
b,
strong {
font-weight: bolder;
}
em,
.italic,
address,
cite,
i,
var {
font-style: italic;
}
/* ----------------------------- */
/* ==Reset (buttons) */
/* ----------------------------- */
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/**
* 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,
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 {
border-radius: 2px;
}
kbd {
padding: 0 2px;
border: 1px solid #999;
}
code {
padding: 2px 4px;
background: rgba(0, 0, 0, 0.04);
color: #b11;
}
pre code {
padding: 0;
background: none;
color: inherit;
border-radius: 0;
}
mark {
padding: 2px 4px;
}
sup,
sub {
vertical-align: 0;
}
sup {
bottom: 1ex;
}
sub {
top: 0.5ex;
}
/**
* quotes, blockquote and hr styling
*/
blockquote {
position: relative;
padding-left: 3em;
min-height: 2em;
}
blockquote::before {
content: "\201C";
position: absolute;
left: 0;
top: 0;
font-family: georgia, serif;
font-size: 5em;
height: .4em;
line-height: .9;
color: $quote-color;
}
blockquote > footer {
margin-top: .75em;
font-size: 0.9em;
color: rgba(0, 0, 0, .7);
&::before {
content: "\2014 \0020";
}
}
q {
font-style: normal;
}
q,
.q {
quotes: "" "" "" "";
&:lang(fr) {
quotes: "«\00a0" "\00a0»" "" "";
}
}
hr {
display: block;
clear: both;
height: 1px;
margin: 1em 0 2em;
padding: 0;
border: 0;
color: #ccc;
background-color: #ccc;
}
blockquote,
figure {
margin-left: 0;
margin-right: 0;
}
@if variable-exists(hyphens) and $hyphens==true {
@media (max-width: ($small - 1)) {
body,
div,
p,
textarea,
table,
td,
th,
code,
pre,
samp {
word-wrap: break-word;
overflow-wrap: break-word;
}
}
}
@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;
}
}

View file

@ -1,284 +0,0 @@
/* -------------------------- */
/* ==Responsive helpers */
/* -------------------------- */
/* large screens */
/* ------------- */
@media (min-width: $large) {
/* layouts for large screens */
.large-hidden {
display: none !important;
}
.large-visible {
display: block !important;
}
.large-no-float {
float: none;
}
.large-inbl {
display: inline-block;
float: none;
vertical-align: top;
}
/* widths for large screens */
.large-w25 {
width: 25% !important;
}
.large-w33 {
width: 33.333333% !important;
}
.large-w50 {
width: 50% !important;
}
.large-w66 {
width: 66.666666% !important;
}
.large-w75 {
width: 75% !important;
}
.large-w100,
.large-wauto {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0;
}
/* margins for large screens */
.large-man,
.large-ma0 {
margin: 0 !important;
}
}
/* medium screens */
/* -------------- */
@media (min-width: $medium) and (max-width: ($large - 1)) {
/* layouts for medium screens */
.medium-hidden {
display: none !important;
}
.medium-visible {
display: block !important;
}
.medium-no-float {
float: none;
}
.medium-inbl {
display: inline-block;
float: none;
vertical-align: top;
}
/* widths for medium screens */
.medium-w25 {
width: 25% !important;
}
.medium-w33 {
width: 33.333333% !important;
}
.medium-w50 {
width: 50% !important;
}
.medium-w66 {
width: 66.666666% !important;
}
.medium-w75 {
width: 75% !important;
}
.medium-w100,
.medium-wauto {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0;
}
/* margins for medium screens */
.medium-man,
.medium-ma0 {
margin: 0 !important;
}
}
/* small screens */
/* ------------- */
@media (min-width: $small) and (max-width: ($medium - 1)) {
/* layouts for small screens */
.small-hidden {
display: none !important;
}
.small-visible {
display: block !important;
}
.small-no-float {
float: none;
}
.small-inbl {
display: inline-block;
float: none;
vertical-align: top;
}
/* widths for small screens */
.small-w25 {
width: 25% !important;
}
.small-w33 {
width: 33.333333% !important;
}
.small-w50 {
width: 50% !important;
}
.small-w66 {
width: 66.666666% !important;
}
.small-w75 {
width: 75% !important;
}
.small-w100,
.small-wauto {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0;
}
/* margins for small screens */
.small-man,
.small-ma0 {
margin: 0 !important;
}
.small-pan,
.small-pa0 {
padding: 0 !important;
}
}
/* tiny screens */
/* ------------ */
@media (max-width: $small - 1) {
/* quick small resolution reset */
.mod,
.col,
fieldset {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0;
}
.flex-container {
flex-direction: column;
}
/* layouts for tiny screens */
.tiny-hidden {
display: none !important;
}
.tiny-visible {
display: block !important;
}
.tiny-no-float {
float: none;
}
.tiny-inbl {
display: inline-block;
float: none;
vertical-align: top;
}
/* widths for tiny screens */
.tiny-w25 {
width: 25% !important;
}
.tiny-w33 {
width: 33.333333% !important;
}
.tiny-w50 {
width: 50% !important;
}
.tiny-w66 {
width: 66.666666% !important;
}
.tiny-w75 {
width: 75% !important;
}
.tiny-w100,
.tiny-wauto {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0;
}
/* margins for tiny screens */
.tiny-man,
.tiny-ma0 {
margin: 0 !important;
}
.tiny-pan,
.tiny-pa0 {
padding: 0 !important;
}
}

View file

@ -1,440 +0,0 @@
/* ---------------------------------- */
/* ==Helpers */
/* ---------------------------------- */
/* Typo Helpers */
/* ------------- */
.u-bold {
font-weight: $weight-bold;
}
.u-italic {
font-style: italic;
}
.u-normal {
font-weight: normal;
font-style: normal;
}
.u-uppercase {
text-transform: uppercase;
}
.u-lowercase {
text-transform: lowercase;
}
.u-smaller {
font-size: 0.6em;
}
.u-small {
font-size: 0.8em;
}
.u-big {
font-size: 1.2em;
}
.u-bigger {
font-size: 1.5em;
}
.u-biggest {
font-size: 2em;
}
.u-txt-wrap {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.u-txt-ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
}
/* text and contents alignment */
.txtleft,
.u-txt-left {
text-align: left;
}
.txtright,
.u-txt-right {
text-align: right;
}
.txtcenter,
.u-txt-center {
text-align: center;
}
/* blocks that need to be placed under floats */
.clear,
.u-clear {
clear: both;
}
/* blocks that must contain floats */
.clearfix,
.u-clearfix {
&::after {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
}
/* simple blocks alignment */
.left,
.u-left {
margin-right: auto;
}
.right,
.u-right {
margin-left: auto;
}
.center,
.u-center {
margin-left: auto;
margin-right: auto;
}
/* Global Micro Layout */
/* ------------------- */
/* "BFC" Block Formating Context */
.bfc,
.u-bfc {
overflow: hidden;
}
/* floating elements */
.fl,
.u-fl {
float: left;
}
img.fl,
img.u-fl {
margin-right: $spacer-small;
}
.fr,
.u-fr {
float: right;
}
img.fr,
img.u-fr {
margin-left: $spacer-small;
}
img.fl,
img.fr,
img.u-fl,
img.u-fr {
margin-bottom: $spacer-tiny;
}
/* inline-block */
.inbl,
.u-inbl {
display: inline-block;
vertical-align: top;
}
/* State Helpers */
/* ------------- */
/* invisible for all */
.is-hidden,
.js-hidden,
[hidden] {
display: none;
}
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
// mixin in `abstracts/_mixins.scss`
.visually-hidden {
@include visually-hidden;
}
@include respond-to("small") {
.small-visually-hidden {
@include visually-hidden;
}
}
.is-disabled,
.js-disabled,
[disabled],
.is-disabled ~ label,
[disabled] ~ label {
opacity: 0.5;
cursor: not-allowed !important;
filter: grayscale(1);
}
ul {
&.is-unstyled,
&.unstyled {
list-style: none;
padding-left: 0;
}
}
/* Width Helpers */
/* ------------- */
/* blocks widths (percentage and pixels) */
$i: 100;
@while $i > 0 {
.w#{$i} {
width: $i * 1%;
}
$i: $i - 5;
}
.w66 {
width: calc(100% / 3 * 2);
}
.w33 {
width: calc(100% / 3);
}
$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 */
/* --------------- */
.man,
.ma0 {
margin: 0;
}
.pan,
.pa0 {
padding: 0;
}
.mas {
margin: $spacer-small;
}
.mam {
margin: $spacer-medium;
}
.mal {
margin: $spacer-large;
}
.pas {
padding: $spacer-small;
}
.pam {
padding: $spacer-medium;
}
.pal {
padding: $spacer-large;
}
.mtn,
.mt0 {
margin-top: 0;
}
.mts {
margin-top: $spacer-small;
}
.mtm {
margin-top: $spacer-medium;
}
.mtl {
margin-top: $spacer-large;
}
.mrn,
.mr0 {
margin-right: 0;
}
.mrs {
margin-right: $spacer-small;
}
.mrm {
margin-right: $spacer-medium;
}
.mrl {
margin-right: $spacer-large;
}
.mbn,
.mb0 {
margin-bottom: 0;
}
.mbs {
margin-bottom: $spacer-small;
}
.mbm {
margin-bottom: $spacer-medium;
}
.mbl {
margin-bottom: $spacer-large;
}
.mln,
.ml0 {
margin-left: 0;
}
.mls {
margin-left: $spacer-small;
}
.mlm {
margin-left: $spacer-medium;
}
.mll {
margin-left: $spacer-large;
}
.mauto {
margin: auto;
}
.mtauto {
margin-top: auto;
}
.mrauto {
margin-right: auto;
}
.mbauto {
margin-bottom: auto;
}
.mlauto {
margin-left: auto;
}
.ptn,
.pt0 {
padding-top: 0;
}
.pts {
padding-top: $spacer-small;
}
.ptm {
padding-top: $spacer-medium;
}
.ptl {
padding-top: $spacer-large;
}
.prn,
.pr0 {
padding-right: 0;
}
.prs {
padding-right: $spacer-small;
}
.prm {
padding-right: $spacer-medium;
}
.prl {
padding-right: $spacer-large;
}
.pbn,
.pb0 {
padding-bottom: 0;
}
.pbs {
padding-bottom: $spacer-small;
}
.pbm {
padding-bottom: $spacer-medium;
}
.pbl {
padding-bottom: $spacer-large;
}
.pln,
.pl0 {
padding-left: 0;
}
.pls {
padding-left: $spacer-small;
}
.plm {
padding-left: $spacer-medium;
}
.pll {
padding-left: $spacer-large;
}

View file

@ -1,248 +0,0 @@
/* ----------------------------- */
/* ==WordPress reset */
/* ----------------------------- */
/*
Author: Geoffrey Crofte, Alsacréations
Contributors: Automattic, Geoffrey Crofte
Description: Reset styles for WordPress usage of KNACSS
*/
// current menu elements
.current_page_item > a {
}
.current-menu-item > a {
}
.current_page_ancestor > a {
}
// blocks of content navigation
.comment-navigation,
.paging-navigation,
.post-navigation {
overflow: hidden;
margin: 0 0 1.5em;
& .nav-previous {
float: left;
width: 50%;
}
& .nav-next {
float: right;
width: 50%;
text-align: right;
}
}
// class in img elements
.alignnone {
margin: .25em 1.5em 1.5em 0;
}
.aligncenter {
clear: both;
display: block;
margin: 1.5em auto;
}
.alignleft {
float: left;
margin: 0 1.5em .25em 0;
}
.alignright {
float: right;
margin: 0 0 .25em 1.5em;
}
.entry-content,
.comment-content {
clear: both;
&::after,
&::before {
content: "";
display: table;
}
}
.widget + .widget {
margin: 1.5em 0 0;
}
// usage example:
.widget select {
max-width: 100%;
}
/* === 5.1 Posts - post_class === */
// featured content
.sticky {
}
// attachment post
.attachment {
}
// format of post
.format- {
&aside {
}
&gallery {
}
&link {
}
&image {
}
&quote {
}
&status {
}
&video {
}
&chat {
}
}
// class for a tag
.tag- {
&name-of-tag {
}
}
// class for category
.category- {
&name-of-category {
}
}
/* === 5.2 Pages - body_class === */
// front page
.home {
// if display posts
&.blog {
}
// if static page
&.page {
}
}
// page displays posts
.blog {
// if is frontpage
&.home {
}
// if static page
&.page {
}
}
// simple page
.page {
}
// page of single post
.single {
}
// page of archives
.archive {
}
// page of search
.search {
// if has results
.search-results {
}
// if has no results
.search-no-results {
}
}
// page 404
.error404 {
}
// user logged in
.logged-in {
}
// text direction if right-to-left
// prefer rtl.css: http://codex.wordpress.org/Right-to-Left_Language_Support
.rtl {
}
/* === 5.3 Posts and Pages - Contents === */
.hentry {
margin: 0 0 1.5em;
}
.page-content,
.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
}
.comment-content a {
word-wrap: break-word;
}
.bypostauthor {
// some make-the-logo-bigger styles
}
img.wp-smiley {
margin-bottom: 0;
margin-top: 0;
padding: 0;
border: none;
}
.wp-caption {
max-width: 100%;
margin-bottom: 1.5em;
}
.wp-caption img {
display: block;
margin: 0 auto;
}
.wp-caption-text {
margin: 1em 0;
text-align: center;
}
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
width: 100%;
text-align: center;
vertical-align: top;
@for $i from 2 through 9 {
.gallery-columns-#{$i} & {
$w: floor(10000 / $i) / 100;
max-width: unquote($w + '%');
}
}
}
.gallery-caption {
display: block;
}

View file

@ -1,146 +0,0 @@
/* ---------------------------------- */
/* ==Grillade v6 */
/* ---------------------------------- */
/* IMPORTANT : this is the KNACSS v6 old Grid System based on Flexbox */
/* You only need it for projects on older browsers (IE11-) */
// Responsive breakpoints variables
// Warning : you should use your own values, regardless of the devices
// Best practice : (max-width: ($BP - 1)) and (min-width: $BP)
$tiny: 480px !default; // or 'em' if you prefer, of course
$small: 576px !default;
$medium: 768px !default;
$large: 992px !default;
$extra-large: 1200px !default;
$cols: 12 !default;
// gutter values for grid layouts. Unit can be: %, px, em, rem
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
// IEfixing, see
// https://github.com/alsacreations/KNACSS/issues/133;
$iefix: 0.01px;
@media (min-width: $small) {
[class*=" grillade-"],
[class^="grillade-"] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
& > * {
box-sizing: border-box;
min-width: 0;
min-height: 0;
}
}
}
// Multi-line grid constructor
// example : .grid-perso { @include grid(12, 3rem); }
@mixin grid($grid-number: 1, $own-gutter: 0) {
& > * {
width: calc(100% / #{$grid-number} - #{$iefix});
}
@each $affix, $size in $grid-gutters {
&.has-gutter#{$affix} {
margin-right: -$size / 2;
margin-left: -$size / 2;
& > * {
width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
margin-right: $size / 2;
margin-left: $size / 2;
}
}
}
@if ($own-gutter != 0) {
margin-right: -$own-gutter / 2;
margin-left: -$own-gutter / 2;
& > * {
width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
margin-right: $own-gutter / 2;
margin-left: $own-gutter / 2;
}
}
}
// Mono-line grid constructor (.grid)
@media (min-width: $small) {
.grillade,
.grillade--reverse {
display: flex;
& > * {
flex: 1 1 0%;
box-sizing: border-box;
min-width: 0;
min-height: 0;
}
@each $affix, $size in $grid-gutters {
&.has-gutter#{$affix} > * + * {
margin-left: calc(#{$size} - #{$iefix});
}
}
}
}
// Constructing grids : will be compiled in CSS
@media (min-width: $small) {
@for $i from 2 through $cols {
[class*="grillade-#{$i}"] {
@include grid(#{$i}, 0);
}
}
}
// Grid offsets
.push {
margin-left: auto !important;
}
.pull {
margin-right: auto !important;
}
// Grid order
.item-first {
order: -1;
}
.item-last {
order: 1;
}
[class*="grillade-"][class*="--reverse"] {
flex-direction: row-reverse;
}
// sizing individual children
@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") {
.#{$flow} {
flex: 0 0 auto;
width: calc(100% / #{$divider} - #{$iefix});
}
@each $affix, $size in $grid-gutters {
.has-gutter#{$affix} > .#{$flow} {
width: calc(100% / #{$divider} - #{$size} - #{$iefix});
}
}
}
}
/* Responsive Small Breakpoint */
// -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
@media (min-width: $small) and (max-width: ($medium - 1)) {
@for $i from 1 through 4 {
[class*="-small-#{$i}"] {
& > * {
width: calc(100% / #{$i} - #{$iefix});
}
@each $affix, $size in $grid-gutters {
&.has-gutter#{$affix} > * {
width: calc(100% / #{$i} - #{$size} - #{$iefix});
}
}
}
}
}

View file

@ -1,162 +0,0 @@
/* --------------------------------------- */
/* ==Grillade : ultra light Grid System */
/* --------------------------------------- */
// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
// if you need complex Grid :
// 1- use vanilla CSS Grid Layout spec (perfect for you)
// 2- use Bootstrap (good luck)
// use these variables only for a standalone Grillade
// in KNACSS, you shall modify variables file instead
$tiny : 480px !default;
$medium : 768px !default;
$large : 992px !default;
$cols : 12 !default;
// classic Grid
[class*=" grillade-"],
[class^="grillade-"] {
@media (min-width: $tiny) {
display: grid;
// gutters
@if variable_exists(grid-gutters) {
$gutter: $grid-gutters !global;
}
@else {
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
}
@each $affix, $size in $gutter {
&.has-gutter#{$affix} {
grid-gap: $size;
}
}
}
}
// autogrid
.autogrillade,
.grillade {
@media (min-width: $tiny) {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
// gutters
@if variable_exists(grid-gutters) {
$gutter: $grid-gutters !global;
} @else {
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
}
@each $affix, $size in $gutter {
&.has-gutter#{$affix} {
grid-column-gap: $size;
}
}
}
}
// grid constructor (.grillade-2 to .grillade-$cols)
@for $i from 2 through $cols {
[class*="grillade-#{$i}"] {
grid-template-columns: repeat(#{$i}, 1fr);
}
}
// grid items constructor (.col-1 to .col-$cols, .row-1 to .row-$cols)
@for $i from 1 through $cols {
[class*="col-#{$i}"] {
grid-column: auto / span #{$i};
}
[class*="row-#{$i}"] {
grid-row: auto / span #{$i};
}
}
/* medium intermediate breakpoints */
// -medium-X suffix means "X columns when < large screen"
// example : .grillade-4-medium-2 will be 1 column (< tiny) then 2 columns (< large) then 4 columns
@media (min-width: $tiny) and (max-width: ($large - 1)) {
@for $i from 1 through 4 {
[class*="grillade-"][class*="-medium-#{$i}"] {
grid-template-columns: repeat(#{$i}, 1fr);
}
[class*="col-"][class*="-medium-#{$i}"] {
grid-column: auto / span #{$i};
}
}
[class*="-medium-all"] {
grid-column: 1 / -1;
}
}
/* small intermediate breakpoints */
// -small-X suffix means "X columns when < medium screen"
// example : .grillade-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
@media (min-width: $tiny) and (max-width: ($medium - 1)) {
@for $i from 1 through 4 {
[class*="grillade-"][class*="-small-#{$i}"] {
grid-template-columns: repeat(#{$i}, 1fr);
}
[class*="col-"][class*="-small-#{$i}"] {
grid-column: auto / span #{$i};
}
}
[class*="-small-all"] {
grid-column: 1 / -1;
}
}
// grid overall alignment
[class*="-start"] {
justify-content: start;
}
[class*="-end"] {
justify-content: end;
}
[class*="-center"] {
justify-content: center;
}
[class*="-space-between"] {
justify-content: space-between;
}
[class*="-space-around"] {
justify-content: space-around;
}
[class*="-space-evenly"] {
justify-content: space-evenly;
}
// grid order
.item-first {
order: -1;
}
.item-last {
order: 1;
}
// grid offset
.grid-offset {
visibility: hidden;
}
// spanning all columns or rows
.col-all {
grid-column: 1 / -1;
}
.row-all {
grid-row: 1 / -1;
}

View file

@ -1,55 +0,0 @@
/* ----------------------------- */
/* ==Alerts */
/* ----------------------------- */
/* use .alert-- classes for variants */
.alert {
padding: $spacer-small $spacer-small;
margin-top: 0.75em;
margin-bottom: 0;
color: $color-base;
border-radius: $border-radius;
background-color: $color-muted;
& a {
color: inherit;
text-decoration: underline;
}
}
.alert {
@each $name, $background-color, $color, $border in $variants-list {
&--#{$name} {
@extend .alert;
background-color: $background-color;
color: $color;
box-shadow: $border;
}
}
}
// alert state variants
.alert {
&--small {
font-size: $font-size-base - 0.4rem;
}
&--big {
font-size: $font-size-base + 0.4rem;
}
&--block {
width: 100% !important;
display: block;
}
&.disabled,
&--disabled {
opacity: 0.5;
cursor: not-allowed;
}
&:empty {
display: none;
}
}

View file

@ -1,34 +0,0 @@
/* ----------------------------- */
/* ==Arrows */
/* ----------------------------- */
/* see https://knacss.com/styleguide.html#arrows */
[class*="icon-arrow--"] {
vertical-align: middle;
&::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
mask-size: cover;
background-color: $arrow-color;
line-height: 1;
}
}
.icon-arrow--down::after {
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
}
.icon-arrow--up::after {
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
}
.icon-arrow--right::after {
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
}
.icon-arrow--left::after {
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
}

View file

@ -1,51 +0,0 @@
/* ----------------------------- */
/* ==Badges */
/* ----------------------------- */
/* use .badge-- classes for variants */
.badge {
display: inline-block;
padding: $spacer-tiny;
border-radius: 50%;
color: $color-base;
background-color: $color-muted;
line-height: 1;
&::before {
content: "";
display: inline-block;
vertical-align: middle;
padding-top: 100%;
}
}
.badge {
@each $name, $background-color, $color, $border in $variants-list {
&--#{$name} {
@extend .badge;
background-color: $background-color;
color: $color;
}
}
}
// badge state variants
.badge {
&--small {
font-size: $font-size-base - 0.4rem;
}
&--big {
font-size: $font-size-base + 0.4rem;
}
&.disabled,
&--disabled {
opacity: 0.5;
cursor: not-allowed;
}
&:empty {
display: none;
}
}

85
sass/components/_burger.scss Executable file
View file

@ -0,0 +1,85 @@
/*
* component nav "burger" button
*/
/*
* HTML template example:
* <button class="burger-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
* activate it with a JS toggle-class to .is-active
* see doc : https: //www.knacss.com/doc.html#buttons
*/
/*
* burger variables (you can change them)
*/
$burger-color : #333;
$burger-background : transparent;
$burger-hover-background : transparent;
$burger-size : 2.6rem;
$burger-weight : 5px; // size of stripes
$burger-padding : 0;
/*
* burger button styles
*/
.burger-button {
padding: 0;
background-color: transparent;
box-shadow: none;
outline: 0;
border: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.burger-button > * {
display: inline-flex;
vertical-align: top;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
height: $burger-size;
width: $burger-size;
padding: $burger-padding;
background-color: $burger-background;
background-image: linear-gradient($burger-color, $burger-color);
background-position: center;
background-repeat: no-repeat;
background-origin: content-box;
background-size: 100% $burger-weight;
transition: .25s;
transition-property: transform, background;
will-change: transform, background;
}
.burger-button > *::before,
.burger-button > *::after {
content: "";
height: $burger-weight;
background: $burger-color;
transition: .25s;
transition-property: transform, top;
will-change: transform, top;
}
.burger-button:hover > * {
background-color: $burger-hover-background;
}
.burger-button:focus {
outline: 0;
}
.burger-button.is-active > * {
background-image: none;
justify-content: center;
}
.burger-button.is-active>*::before {
transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
}
.burger-button.is-active>*::after {
transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
}

71
sass/components/_button.scss Executable file
View file

@ -0,0 +1,71 @@
/*
* basic button component
*/
/*
* HTML template example:
* preferably use <button> for buttons !
* use .button or .btn (for structure) and .btn-- (for variants) (see appearance mixin)
*/
/*
* button reset
*/
%btn {
display: inline-flex;
justify-content: center;
align-items: center;
padding: $spacer-small $spacer-small-plus;
cursor: pointer;
user-select: none;
transition: 0.25s;
transition-property: box-shadow, background-color, color, border;
text-decoration: none;
border: none;
box-shadow: none;
}
.btn,
.button {
@extend %btn;
&:focus {
-webkit-tap-highlight-color: transparent;
}
}
// button state variants
.btn,
.button {
&--small {
padding: $spacer-tiny-plus $spacer-small;
font-size: .8em;
}
&--big {
padding: $spacer-small-plus $spacer-medium;
font-size: 1.4em;
}
&--block {
width: 100% !important;
display: block;
}
&--unstyled {
padding: 0;
border: none;
text-align: left;
background: none;
border-radius: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus {
box-shadow: none;
outline: none;
}
}
}

View file

@ -1,156 +0,0 @@
/* ----------------------------- */
/* ==Buttons styling */
/* ----------------------------- */
/* preferably use <button> for buttons !*/
/* use .btn-- or .button-- classes for variants */
%btn {
display: inline-block;
padding: $spacer-small $spacer-small-plus;
cursor: pointer;
user-select: none;
transition: 0.25s;
transition-property: box-shadow, background-color, color, border;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-decoration: none;
color: $color-base;
border: none;
border-radius: $border-radius;
background-color: $color-muted;
}
.btn,
.button,
[type="button"],
button {
@extend %btn;
&:focus {
-webkit-tap-highlight-color: transparent;
}
}
.btn,
.button {
@each $name, $background-color, $color, $border in $variants-list {
&--#{$name} {
@extend %btn;
background-color: $background-color;
color: $color;
box-shadow: $border;
&:active,
&:focus,
&:hover {
background-color: darken( $background-color, 10% );
}
}
}
}
// button state variants
.btn,
.button {
&--small {
padding: $spacer-tiny-plus $spacer-small;
font-size: .8em;
}
&--big {
padding: $spacer-small-plus $spacer-medium;
font-size: 1.4em;
}
&--block {
width: 100% !important;
display: block;
}
&--unstyled {
padding: 0;
border: none;
text-align: left;
background: none;
border-radius: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus {
box-shadow: none;
outline: none;
}
}
}
// nav "burger" button
// activate it with a JS toggle-class to .is-active
// recommended HTML : <button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
// see doc : https://knacss.com/styleguide.html#buttons
.nav-button {
padding: 0;
background-color: transparent;
outline: 0;
border: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
& > * {
display: inline-flex;
vertical-align: top;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
height: $burger-size;
width: $burger-size;
padding: $burger-padding;
background-color: $burger-background;
background-image: linear-gradient($burger-color, $burger-color);
background-position: center;
background-repeat: no-repeat;
background-origin: content-box;
background-size: 100% $burger-weight;
transition: .25s;
transition-property: transform, background;
will-change: transform, background;
&::before,
&::after {
content: "";
height: $burger-weight;
background: $burger-color;
transition: .25s;
transition-property: transform, top;
will-change: transform, top;
}
}
&:hover {
& > * {
background-color: $burger-hover-background;
}
}
&:focus {
outline: 0;
}
&.is-active {
& > * {
background-image: none;
justify-content: center;
&::before {
transform: translateY(50%) rotate3d(0,0,1,45deg);
}
&::after {
transform: translateY(-50%) rotate3d(0,0,1,-45deg);
}
}
}
}

View file

@ -1,119 +1,59 @@
/* ----------------------------- */
/* ==Checkbox, radio, switch */
/* ----------------------------- */
/* use .checkbox class on input type=checkbox */
/* recommended HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
/* use .radio class on input type=radio */
/* recommended HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
/* use .switch class on input type=checkbox */
// <input type="checkbox" class="switch" id="switch"><label for="switch" class="label">slide to unlock</label>
/*
* component checkbox
*/
/*
* HTML template example:
* <input type="checkbox" class="checkbox" id="c1">
* <label for="c1">click here</label>
*/
/*
* checkbox variables (you can change them)
*/
$checkbox-color: $white;
$checkbox-background: $color-alpha;
$checkbox-size: 2rem;
$checkbox-border-radius: 4px;
/*
* checkbox styles
*/
// common styles
.checkbox {
border-radius: $checkbox-border-radius;
}
.switch {
border-radius: $switch-border-radius;
}
.radio {
border-radius: 50%;
}
.switch,
.checkbox,
.radio {
.checkbox {
-webkit-appearance: none;
appearance: none;
width: $checkbox-size;
height: $checkbox-size;
vertical-align: text-bottom;
outline: 0;
cursor: pointer;
& ~ label {
cursor: pointer;
}
&::-ms-check {
display: none; // unstyle IE checkboxes
}
}
// switch styling
.switch {
width: $switch-size *2;
height: $switch-size;
line-height: $switch-size;
font-size: 70%;
box-shadow: inset -#{$switch-size} 0 0 $switch-background,
inset 0 0 0 1px $switch-background;
transition: box-shadow .15s;
background-color: $switch-color;
&::before,
&::after {
font-weight: bold;
color: $switch-color;
}
&::before {
content: "";
float: right;
margin-right: $switch-size /3;
}
&:checked {
box-shadow: inset #{$switch-size} 0 0 $color-success,
inset 0 0 0 1px $color-success;
&::before {
content: "";
float: left;
margin-left: $switch-size /3;
}
}
}
// checkbox styling
.checkbox {
width: $checkbox-size;
height: $checkbox-size;
box-shadow: inset 0 0 0 1px $checkbox-background;
box-shadow: inset 0 0 0 1px $color-alpha;
background-color: $checkbox-color;
transition: background-color .15s;
&:checked {
$red: red($checkbox-color);
$green: green($checkbox-color);
$blue: blue($checkbox-color);
$rgb: rgb($red, $green, $blue);
$slice: str-slice(ie-hex-str($rgb), 4);
$first: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%208%208%22%20enable-background%3D%22new%200%200%208%208%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23";
$last: "%22%20d%3D%22M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z%22%20%2F%3E%0A%3C%2Fsvg%3E";
$combo: "#{$first}#{$slice}#{$last}";
background-image: url($combo);
background-size: 60% 60%;
background-position: center;
background-repeat: no-repeat;
background-color: $checkbox-background;
}
transition: background-color 0.15s;
cursor: pointer;
}
// radio styling
.radio {
width: $checkbox-size;
height: $checkbox-size;
background-size: 0% 0%;
transition: background-size .15s;
box-shadow: inset 0 0 0 1px $radio-color;
background-color: $radio-background;
&:checked {
$red: red($radio-color);
$green: green($radio-color);
$blue: blue($radio-color);
$rgb: rgb($red, $green, $blue);
$slice: str-slice(ie-hex-str($rgb), 4);
$first: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23";
$last: "%22/%3E%3C/svg%3E";
$combo: "#{$first}#{$slice}#{$last}";
background-image: url($combo);
background-size: 90% 90%;
background-position: center;
background-repeat: no-repeat;
background-color: $radio-background;
}
}
.checkbox + label {
cursor: pointer;
}
.checkbox:disabled {
opacity: 0.6;
}
.checkbox:disabled + label {
opacity: 0.6;
cursor: not-allowed;
}
.checkbox:checked {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
background-size: 60% 60%;
background-position: center;
background-repeat: no-repeat;
background-color: $checkbox-background;
}

View file

@ -1,87 +0,0 @@
/* ----------------------------- */
/* ==Forms styling */
/* ----------------------------- */
[type="color"],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
font-family: inherit;
font-size: inherit;
border: 0;
box-shadow: 0 0 0 1px $forms-color inset;
color: $color-base;
vertical-align: middle;
padding: $spacer-tiny $spacer-small;
margin: 0;
transition: 0.25s;
transition-property: box-shadow, background-color, color, border;
appearance: none;
}
[type="submit"] {
background-color: $forms-color;
color: $white;
cursor: pointer;
}
input[readonly] {
background-color: $color-muted;
}
select {
padding-right: 2rem;
border-radius: $border-radius;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
background-position: right .6rem center;
background-repeat: no-repeat;
background-size: 1.2rem;
}
/* hiding IE11 arrow */
select::-ms-expand {
display: none;
}
textarea {
min-height: 5em;
vertical-align: top;
resize: vertical;
white-space: pre-wrap;
}
/* 'x' appears on right of search input when text is entered. This removes it */
[type="search"] {
&::-webkit-search-decoration,
&::-webkit-search-cancel-button,
&::-webkit-search-results-button,
&::-webkit-search-results-decoration {
display: none;
}
}
::-webkit-input-placeholder {
color: #777;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #777;
}
input::placeholder,
textarea::placeholder {
color: #777;
}

View file

@ -1,26 +0,0 @@
/* ----------------------------- */
/* ==Media object */
/* ----------------------------- */
/* recommended HTML : <div class="media"><img class="media-figure"><div class="media-content"></div></div> */
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
@media (min-width: $tiny) {
.media {
display: flex;
align-items: flex-start;
&-content {
flex: 1 1 0%;
}
// vertical align image
&-figure--center {
align-self: center;
}
// reverse variant
&--reverse {
flex-direction: row-reverse;
}
}
}

60
sass/components/_quote.scss Executable file
View file

@ -0,0 +1,60 @@
/*
* component quote
*/
/*
* HTML template example:
* <blockquote>
* <p>Lorem Elsass Ipsum mitt picon bière</p>
* </blockquote>
*/
/*
* quotes variables (you can change them)
*/
$blockquote-color: #454d5d;
/*
* quotes styles
*/
blockquote {
position: relative;
padding-left: 3em;
min-height: 2em;
}
blockquote::before {
content: "\201C";
position: absolute;
left: 0;
top: 0;
font-family: georgia, serif;
font-size: 5em;
height: .4em;
line-height: .9;
color: $blockquote-color;
}
blockquote > footer {
margin-top: .75em;
font-size: 0.9em;
color: rgba(0, 0, 0, .7);
&::before {
content: "\2014 \0020";
}
}
q {
font-style: normal;
}
q,
.q {
quotes: "" "" "" "";
&:lang(fr) {
quotes: "«\00a0" "\00a0»" "" "";
}
}

59
sass/components/_radio.scss Executable file
View file

@ -0,0 +1,59 @@
/*
* component radio
*/
/*
* HTML template example:
* <input type="radio" class="radio" name="radio" id="r1">
* <label for="r1">Click here</label>
*/
/*
* radio variables (you can change them)
*/
$radio-color: $color-alpha;
$radio-background: $white;
$radio-size: 2rem;
$radio-border-radius: 50%;
/*
* radio styles
*/
.radio {
border-radius: $radio-border-radius;
}
.radio {
-webkit-appearance: none;
appearance: none;
width: $radio-size;
height: $radio-size;
vertical-align: text-bottom;
outline: 0;
box-shadow: inset 0 0 0 1px $color-alpha;
background-color: $radio-background;
transition: background-size 0.15s;
cursor: pointer;
}
.radio + label {
cursor: pointer;
}
.radio:disabled {
opacity: 0.6;
}
.radio:disabled + label {
opacity: 0.6;
cursor: not-allowed;
}
.radio:checked {
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E");
background-size: 70% 70%;
background-position: center;
background-repeat: no-repeat;
background-color: $color-alpha;
}

19
sass/components/_select.scss Executable file
View file

@ -0,0 +1,19 @@
/*
* basic select component
*/
/*
HTML template example:
<select>
<option value="salade">salade</option>
<option value="tomate">tomate</option>
<option value="oignons">oignons</option>
</select>
*/
select {
appearance: none;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
background-position: right 0.8rem center;
background-repeat: no-repeat;
background-size: 1.2rem;
}

View file

@ -1,25 +0,0 @@
/* ----------------------------- */
/* ==skip links */
/* ----------------------------- */
/* see https://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html */
/* styling skip links */
.skip-links {
position: absolute;
& a {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
padding: 0.5em;
background: black;
color: white;
text-decoration: none;
&:focus {
position: static;
overflow: visible;
clip: auto;
}
}
}

View file

@ -1,52 +0,0 @@
/* ----------------------------- */
/* ==Tables */
/* ----------------------------- */
table,
.table {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
vertical-align: top;
margin-bottom: $spacer-medium;
}
.table {
display: table;
border: 1px solid $table-border;
background: $table-background;
&--zebra {
& tbody tr:nth-child(odd) {
background: $gray-200;
}
}
& caption {
caption-side: bottom;
padding: $spacer-small;
color: $table-caption-color;
font-style: italic;
text-align: right;
}
& td,
& th {
padding: 0.3rem 0.6rem;
min-width: $spacer-medium;
vertical-align: top;
border: 1px $table-border dotted;
text-align: left;
cursor: default;
}
& thead {
color: $table-head-color;
background: $table-head-background;
}
}
.table--auto {
table-layout: auto;
}

View file

@ -1,52 +0,0 @@
/* ----------------------------- */
/* ==Tabs */
/* ----------------------------- */
/* see example on https://knacss.com/styleguide.html#tabs */
/* NOTE : tabs need JavaScript to be activated */
.tabs-menu {
border-bottom: 2px solid $tabs-border;
&-link {
display: block;
margin-bottom: -2px;
padding: $spacer-tiny $spacer-medium-plus;
border-bottom: 4px solid transparent;
color: $tabs-color;
background: $tabs-background;
text-decoration: none;
border-radius: $tabs-border-radius $tabs-border-radius 0 0;
transition: .25s;
transition-property: color, border, background-color;
&.is-active {
border-bottom-color: $tabs-active-border;
color: $tabs-active-color;
background: $tabs-active-background;
outline: 0;
}
&:focus {
border-bottom-color: $tabs-active-border;
color: $tabs-active-color;
outline: 0;
}
@media (min-width: $small) {
display: inline-block;
}
}
}
.tabs-content-item {
padding-top: $spacer-small;
&[aria-hidden="true"] {
visibility: hidden;
@extend .visually-hidden;
}
&[aria-hidden="false"] {
visibility: visible;
}
}

View file

@ -1,52 +0,0 @@
/* ----------------------------- */
/* ==Tags */
/* ----------------------------- */
/* use .tag-- classes for variants */
.tag {
display: inline-block;
padding: 3px $spacer-tiny;
vertical-align: baseline;
white-space: nowrap;
color: $color-base;
border-radius: $border-radius;
background-color: $color-muted;
line-height: 1;
}
.tag {
@each $name, $background-color, $color, $border in $variants-list {
&--#{$name} {
@extend .tag;
background-color: $background-color;
color: $color;
box-shadow: $border;
}
}
}
// tag state variants
.tag {
&--small {
font-size: $font-size-base - 0.4rem;
}
&--big {
font-size: $font-size-base + 0.4rem;
}
&--block {
width: 100% !important;
display: block;
}
&.disabled,
&--disabled {
opacity: 0.5;
cursor: not-allowed;
}
&:empty {
display: none;
}
}

80
sass/knacss.scss Executable file → Normal file
View file

@ -1,65 +1,31 @@
/*!
* www.KNACSS.com v7.1.3 (february, 12 2020) @author: Alsacreations, Raphael Goetter
* KNACSS Reborn: Just keep it simple!
* @author: Alsacreations
* v1.0.0 2020/11
* Licence WTFPL http://www.wtfpl.net/
*/
/* ----------------------------- */
/* ==Table Of Content */
/* ----------------------------- */
// WARNING : Only Core and Utilities are imported by default. Just add other files if you need them.
/*
1- Reboot (basic reset)
2- Base :
- Reset
- Print
- Layout (alignment, modules, positionning)
- Utilities (width and spacers helpers)
- Responsive helpers
- WordPress reset (disabled by default)
- Grillade (Grid System)
3- Components :
- Media object
- Skip Links for accessibility
- Tables
- Forms
- Buttons
- Checkbox
- Tabs
- Tags
- Badges
- Alerts
*/
// CORE
@import "abstracts/variables-sass";
@import "abstracts/mixins-sass";
// WARNING : you should comment the following @import (variables)
// and move variables file from KNACSS folder to your own project folder!
@import "abstracts/variables";
@import "base/reset-base";
@import "base/reset-accessibility";
@import "base/reset-forms";
@import "base/reset-print";
@import "base/layout";
@import "abstracts/mixins";
// UTILITY CLASSES
// @import "utils/utils-global";
// @import "utils/utils-spacers";
// @import "utils/grillade";
// Core Libraries
@import "base/reset"; // basic styles
@import "base/print"; // print quick reset
@import "base/layout"; // alignment, modules, positionning
// 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 "base/grillade-grid"; // grid system with Grid Layout
// Components
@import "components/alerts"; // alerts styles
@import "components/arrows"; // arrows styles
@import "components/badges"; // badges styles
@import "components/buttons"; // buttons styles
@import "components/checkbox"; // checkbox, radio, switch styles
@import "components/forms"; // forms consistency and styles
@import "components/media"; // media object
@import "components/skip-links"; // skip links
@import "components/tables"; // data tables consistency
@import "components/tabs"; // tabs styles
@import "components/tags"; // tags styles
// Utilities
@import "base/utilities"; // width and spacer helpers
@import "base/responsive"; // Responsive Web Design helpers
// @import "base/wordpress"; // WordPress reset and basic styles
// COMPONENTS (add them only if you need)
// @import "components/button";
// @import "components/burger";
// @import "components/checkbox";
// @import "components/radio";
// @import "components/select";
// @import "components/quote";

View file

@ -0,0 +1,65 @@
/*
* Global utility classes
*/
@each $class, $prop, $value in $utils {
.#{$class} {
#{$prop}: #{$value};
}
// loop for each breakpoint
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:#{$class} {
#{$prop}: #{$value};
}
}
}
}
// multi-properties utils
.is-unstyled {
list-style: none;
padding-left: 0;
}
.is-disabled,
[disabled] {
opacity: 0.6;
cursor: not-allowed !important;
filter: grayscale(1);
}
.text-normal {
font-weight: normal;
font-style: normal;
text-transform: none;
}
// loop for each breakpoint
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:visually-hidden {
position: absolute !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
}
.#{$bp}\:is-unstyled {
list-style: none;
padding-left: 0;
}
.#{$bp}\:is-disabled {
opacity: 0.6;
cursor: not-allowed !important;
filter: grayscale(1);
}
.#{$bp}\:text-normal {
font-weight: normal;
font-style: normal;
text-transform: none;
}
}
}

View file

@ -0,0 +1,134 @@
/* Spacers utility classes */
// loop for each spacer
@each $key,
$value in $spacers {
.p-#{$key} {
padding: $value;
}
.pt-#{$key} {
padding-top: $value;
}
.pr-#{$key} {
padding-right: $value;
}
.pb-#{$key} {
padding-bottom: $value;
}
.pl-#{$key} {
padding-left: $value;
}
.px-#{$key} {
padding-left: $value;
padding-right: $value;
}
.py-#{$key} {
padding-top: $value;
padding-bottom: $value;
}
.m-#{$key} {
margin: $value;
}
.mt-#{$key} {
margin-top: $value;
}
.mr-#{$key} {
margin-right: $value;
}
.mb-#{$key} {
margin-bottom: $value;
}
.ml-#{$key} {
margin-left: $value;
}
.mx-#{$key} {
margin-left: $value;
margin-right: $value;
}
.my-#{$key} {
margin-top: $value;
margin-bottom: $value;
}
// loop for each breakpoint
@each $bp,
$bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:p-#{$key} {
padding: $value;
}
.#{$bp}\:pt-#{$key} {
padding-top: $value;
}
.#{$bp}\:pr-#{$key} {
padding-right: $value;
}
.#{$bp}\:pb-#{$key} {
padding-bottom: $value;
}
.#{$bp}\:pl-#{$key} {
padding-left: $value;
}
.#{$bp}\:px-#{$key} {
padding-left: $value;
padding-right: $value;
}
.#{$bp}\:py-#{$key} {
padding-top: $value;
padding-bottom: $value;
}
.#{$bp}\:m-#{$key} {
margin: $value;
}
.#{$bp}\:mt-#{$key} {
margin-top: $value;
}
.#{$bp}\:mr-#{$key} {
margin-right: $value;
}
.#{$bp}\:mb-#{$key} {
margin-bottom: $value;
}
.#{$bp}\:ml-#{$key} {
margin-left: $value;
}
.#{$bp}\:mx-#{$key} {
margin-left: $value;
margin-right: $value;
}
.#{$bp}\:my-#{$key} {
margin-top: $value;
margin-bottom: $value;
}
}
}
}

152
sass/utils/grillade.scss Normal file
View file

@ -0,0 +1,152 @@
/* --------------------------------------- */
/* ==Grillade : ultra light Grid Layout */
/* --------------------------------------- */
// Grillade is heavily inspired by tailwindcss.com Grid utility classes
// use these variables only for a standalone Grillade
// in KNACSS, you shall modify variables file instead
$grid-columns: 6 !default;
@if variable_exists(spacers) {
$spacers: $spacers !global;
}
@else {
$spacers : (
'0' : 0,
'1' : .5rem,
'2' : .75rem,
'3' : 1rem,
'4' : 1.5rem,
'5' : 2rem,
'6' : 3rem,
'7' : 5rem,
'auto' : auto
) !global;
}
@if variable_exists(breakpoints) {
$breakpoints: $breakpoints !global;
}
@else {
$breakpoints : (
sm: 576px,
md: 768px,
lg: 1024px,
xl: 1330px
) !global;
}
.grid {
display: grid;
}
// grid class for each breakpoint
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:grid {
display: grid;
}
}
}
/* grid-template-columns classes */
@for $i from 1 through $grid-columns {
.grid-cols-#{$i} {
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
}
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:grid-cols-#{$i} {
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
}
}
}
}
/* gap classes */
@each $key, $value in $spacers {
.gap-#{$key} {
gap: $value;
}
.gap-x-#{$key} {
column-gap: $value;
}
.gap-y-#{$key} {
row-gap: $value;
}
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:gap-#{$key} {
gap: $value;
}
.#{$bp}\:gap-x-#{$key} {
column-gap: $value;
}
.#{$bp}\:gap-y-#{$key} {
row-gap: $value;
}
}
}
}
/* grid-items classes */
@for $i from 1 through $grid-columns {
.col-start-#{$i} {
grid-column-start: #{$i};
}
.col-end-#{$i} {
grid-column-end: #{$i};
}
.col-span-#{$i} {
grid-column: span #{$i} / span #{$i};
}
.col-span-full {
grid-column: 1 / -1;
}
.row-start-#{$i} {
grid-row-start: #{$i};
}
.row-end-#{$i} {
grid-row-end: #{$i};
}
.row-span-#{$i} {
grid-row: span #{$i} / span #{$i};
}
// loop for each breakpoint
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:col-start-#{$i} {
grid-column-start: #{$i};
}
.#{$bp}\:col-end-#{$i} {
grid-column-end: #{$i};
}
.#{$bp}\:col-span-#{$i} {
grid-column: span #{$i} / span #{$i};
}
.#{$bp}\:col-span-full {
grid-column: 1 / -1;
}
.#{$bp}\:row-start-#{$i} {
grid-row-start: #{$i};
}
.#{$bp}\:row-end-#{$i} {
grid-row-end: #{$i};
}
.#{$bp}\:row-span-#{$i} {
grid-row: span #{$i} / span #{$i};
}
}
}
}

3225
yarn.lock

File diff suppressed because it is too large Load diff