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
commit
dcf44e2f24
@ -1,2 +1,2 @@
|
||||
>0.25%
|
||||
>1.5%
|
||||
not op_mini all
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
@ -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
|
||||
|
||||
@ -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
36
README.md
Executable file → Normal 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";
|
||||
```
|
||||
|
||||
31
bower.json
31
bower.json
@ -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"
|
||||
]
|
||||
}
|
||||
12
changelog.md
12
changelog.md
@ -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
@ -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}
|
||||
1
css/grillade/grillade.css
Normal file
1
css/grillade/grillade.css
Normal file
File diff suppressed because one or more lines are too long
669
css/knacss-full/knacss.css
Normal file
669
css/knacss-full/knacss.css
Normal 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%;
|
||||
}
|
||||
1
css/knacss-mini/knacss.css
Normal file
1
css/knacss-mini/knacss.css
Normal 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
108
gulpfile.js
108
gulpfile.js
@ -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
5412
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
47
package.json
Executable file → Normal file
47
package.json
Executable file → Normal 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"
|
||||
}
|
||||
}
|
||||
|
||||
32
sass/abstracts/_mixins-sass.scss
Normal file
32
sass/abstracts/_mixins-sass.scss
Normal 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.";
|
||||
}
|
||||
}
|
||||
@ -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.";
|
||||
}
|
||||
}
|
||||
197
sass/abstracts/_variables-sass.scss
Normal file
197
sass/abstracts/_variables-sass.scss
Normal 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;
|
||||
@ -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;
|
||||
| </ | ||||