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;
</