Transfert des fichiers Reborn vers branche v8

This commit is contained in:
Raphaël Goetter 2021-01-25 12:28:12 +01:00
parent f14b1294cf
commit e3e57665a0
50 changed files with 2248 additions and 14990 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

View File

@ -1,23 +0,0 @@
{
"name": "KNACSS",
"version": "7.1.2",
"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"
]
}

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'));

5846
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,40 +1,15 @@
{
"name": "knacss",
"version": "8.0.0-alpha.0",
"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.6.1",
"cssnano": "^4.1.10",
"gulp": "^4.0.0",
"gulp": "^4.0.2",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"postcss-flexbugs-fixes": "latest",
"postcss-gap-properties": "latest",
"postcss-unprefix": "^2.1.4"
"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,230 +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;
// Grid gutters (for .has-gutter-*