- 24 janvier 2022 (8.2.1) : corrections des radio / checkbox
- 19 janvier 2022 (8.2) : refonte des variables d'espacement
- 5 janvier 2022 (8.1) : refonte des variables de couleur
- 9 juillet 2021 (8.0.5) : suppression min-height: 0 par défaut
- 26 avril 2021 : taille de base 100% (et non plus 62.5%) et corrections Grillade
- 5 mars 2021 : les classes utilitaires font à présent partie du Core
- 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, correspondant à la Branche et version 8.
- Architecture : mise à jour du reset, suppression des reset vendors (Reboot de Boostrap)
- Architecture : renommage de dossiers à la "7-1 pattern":
_config
>abstracts
,_library
>base
, et du fichier_base.scss
en_reset.scss
- Architecture : modification de l'ordre d'import des fichiers : les utilitaires sont importées à la fin à présent
- Compatibilité : support passé de IE10 à IE11 (browserlist)
- Compatibilité : Browserslist devenu
.browserslistrc
et mise à jour du support à>0.25% not op_mini all
- Compatibilité : fichier gulpfile.js dorénavant compatible Gulp 4
- Compatibilité : versions exactes des dépendances dans package.json (pour éviter "latest")
- Grillade :renommage des classes
grid-
engrillade-
pour éviter tout conflit - Grillade : ajout du constructeur
medium-X
en plus desmall-X
- Grillade : ajout des constructeus
-start
,-end
,-center
,-space-between
,-space-around
,-space-evenly
pour l'alignement général de la grille - Divers : ajout d'une variable pour supporter ou non IE11 :
$ie: true !default;
. - Divers :ajout d'une variable pour supporter ou non WordPress :
$wordpress: false !default;
. - Divers :
visually-hidden
devient un mixin - Divers :corrections typo
- ajout de la règle
@media (prefers-reduced-motion: reduce)
- ajout de
@supports (display: grid)
dans le mixin de grille
- patch correctif de gulpfile
- mise à jour et meilleure intégration de gulp / postCSS :
- autoprefixer version postCSS (avec browserslist officielle),
- unprefix : pour supprimer les vieux préfixes inutiles
- flexbox-fixes : pour corriger les erreurs connues sur IE
- gap-properties : polyfill de gap -> grid-gap
- minification CSS avec CSSnano
- application de
white-space: pre-rap
sur les textarea
- correction d'alignement vertical de
.nav-button
- suppression de
white-space: nowrap
sur les éléments de formulaire
- cohérence de renommage pour les classes utilitaires (ajout du préfixe
.u-
uniformément)
- mise à jour des styles, SVG, et variables des checkbox, radio et switches
- ajout de
::placeholder
cf. issue #276
- suppression de commentaires inutiles
- intégration de (auto)grid dans Grillade
- meilleure gestion des hyphens
- mise en commentaire du fix SVG our IE11
- modifications, mises à jour :
- architecture globale revisitée (vendor, config, library, components)
- remplacement de normalize.css par Bootstrap reboot.css
- déplacement des variables de gouttières de grillade.scss vers variables.scss
- déplacement des variables de breakpoints de breakpoints.scss vers variables.scss
- regroupement des styles des tableaux
- renommage des variables couleur de projets
- renommage des variables de composants
- renommage des variables d'espacement (
$tiny-value
->$spacer-micro
) - automatisation des classes utilitaires via Sass
- suppression du namespace "kna-"
- refonte :
- système de grille (dorénavant basé sur Grid Layout)
- boutons, avec possibilités de variantes (primary, success, warning, etc.)
- styles de formulaires
- styles des tableaux
- l'objet autogrid passe en Grid Layout
- ajouts :
- des badges (tags), avec possibilités de variantes (primary, success, warning, etc.)
- des alertes, avec possibilités de variantes (primary, success, warning, etc.)
- d'un bouton de navigation
.nav-button
- des checkbox, radio et bouton "switch" stylés
- des onglets (tabs)
- des flèches courantes (haut, droit, bas, gauche) en SVG data-URI
- création d'un mixin de grille
- création d'un mixin de tailles de polices (responsive)
* {min-width: 0}
pour éviter la valeurauto
sur les flex-items et grid-items
- alignement des helpers flexbox sur ceux de Bootstrap (
.d-flex
,.flex-row
,.flex-column
,.mr-auto
) - alignement des breakpoints sur ceux de Bootstrap (576, 768, 992, 1200) et réorganisation des intervalles
tab-size: 2;
sur les<pre>
- passage en System Font Stack. cf. https://css-tricks.com/snippets/css/system-font-stack/
- amélioration du mixin "respond-to()"
- passage à Normalize 5.0.0
- ajout de variables pour tailles de polices différentes sur petits et sur grands écrans (
$h1-size
et$h1-size-l
par exemple). Par défaut, les tailles "mobile" sont appliquées, et les tailles "desktop" s'appliquent en min-width$tiny +1
- convention de nommage des variables pour faciliter les recherches :
$base-color
devient$color-base
,$link-color
devient$link-color
, etc. - typo fix
- application de
$link-color-hover
uniquement si différent de$link-color
- application de
$font-family-headings
uniquement si différent de$font-stack-base
- Grillade : redéfinition du périmètre de
-small
: passe de(min-width: ($tiny + 1)) and (max-width: $small)
à(min-width: ($tiny + 1)) and (max-width: $medium)
(de 544px à 991px par défaut)
- redéfinition des variables de breakpoints, à présent calées sur celles de Bootstrap
- renommage des variables
- renommage
grid-item-*
enitem-*
pour éviter les conflits
- optimisation de la grille (de 8ko à 3ko pour la version Sass)
- refonte intégrale de la grille de mise en forme (adoption de grillade.css)
- suppression de include-media (cause de bugs d'encodage : cf. #203 / #197 , nécessite un temps d'apprentissage, et n'apporte pas grand chose au final).
- refonte des valeurs des Breakpoints et des classes responsive. voir issue #210
- modularisation des fichiers et dossiers, classés par fonctions (config, vendor, library, objects, utility)
- ajout des objects courants : media et autogrid
- suppression des positionnements tabulaires.
.row
,.col
et.line
n'ont plus lieu d'être depuis Flexbox, pouvaient entrer en conflit avec d'autres frameworks et ne font que parasiter KNACSS - amélioration du fichier Gulpfile.js
- corrections de bugs divers
- mise à jour de la doc
- les helpers de largeurs deviennent mobile-first et ne s'activent que sur écran d'une certaine taille. Ex.
.w700p {width: 700px;}
devient@include media('>640px') {.w700p {width: 700px;}}
. Ainsi il n'est plus nécessaire de les écraser dans la feuille de style responsive.
- suppression du support IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
- suppression du support LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge pour des raisons de maintenabilité)
- mise à jour vers Normalize 4.1.1 : https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md
- restructuration / renommage des fichiers avec préfixes
_config-
,_layout-
,_library-
,_object-
,_override-
- ajout de la library include-media (http://include-media.com/) pour faciliter la gestion des media queries
- adaptation des variables de breakpoint pour les rendre compatibles avec include-media
- grille "grillade" à présent en mobile first (par défaut 1 colonne sur "tiny", 2 colonnes sur "small", valeurs modifiables)
- nommage de variables préfixé pour plus de maintenabilité :
$gutter
->$grid-gutter
,$number
->$grid-number
,$left
->$grid-left
et$right
->$grid-right
- renommage des éléments de grilles :
.flex-item-double
-->.grid-item-double
(plus cohérent) - ajout des éléments de layout :
.grid-item-first
,.grid-item-medium
et.grid-item-last
- ajout de Table des Matières dans la feuille de style non minifiée
- adaptation des fichiers gulpfile, package.json et bower.json
- mise à jour de la documentation
- mise à jour vers Normalize 4 : https://github.com/necolas/normalize.css/blob/4.0.0/CHANGELOG.md
- application de min-width: 0 sur les flex-item-fluid pour éviter les minimum automatiques des flex-items
- suppression des styles spécifiques à Gmap (sélecteurs trop lourds pour un cas très particuliers)
- mise à jour vers Normalize 3.0.3 : https://github.com/necolas/normalize.css/
- réalignement vertical des input et des label
- ajout du patch
min-width: 0
sur les flex-items de grilles
- correction d'un bug responsive des classes
.flex-item-double
- création de la feuille de style dédiée aux grilles : grillade.css pour ceux qui souhaitent se contenter des grilles de KNACSS
- ajout de classes d'état dans les helpers (
is-disabled
,is-hidden
,is-visually-hidden
,is-unstyled
) - import de la feuille de style dédiée WordPress mise en commentaire par défaut et activable au besoin
- la taille de police de base est à présent de "1.4rem" et non un calcul en
em
à partir d'une valeur en pixels - suppression de
@font-stack-universal
devenue inutile (servait dans les grilles inline-block) - suppression de "helvetica, arial" dans les font-stacks par défaut (seul reste "sans-serif")
- ajout d'une classe
.bfc
(actuellement alias de l'existante.mod
) - ajout d'une classe
.no-wrapping
pour les éléments qui ne doivent pas adopter de césures sur petit écran - ajout de classes helpers pour les marges automatiques (
.mtauto
,mrauto
,.mauto
, etc.)
- modification de la valeur par défaut de gouttière (
1em
->2rem
) - correction d'un
padding: none
enpadding: 0
dans styling.less|sass
- correction de doublons
- ajout de
word-break: break-all
sur les liens en responsive - suppression du
outline: 0
sur les boutons au focus - correction de visuels dans la documentation
- ajout des classes
.pull
et.push
pour les offsets des grilles - corrections de la doc Print et Commencer
- corrections de nommages reliquats :
.flexitem-double
->.flex-item-double
- suppression des styles graphiques pour tableaux alternate et striped
- modifications sur la classe
.visually-hidden
- ajout de helpers (breakpoints responsive)
- modification du seuil de breakpoint pour les grilles inégales
@tiny-screen
->@small-screen
- corrections feuille de style print (modifications plus faciles pour l'utilisateur)
- Amélioration des grilles responsive. Par exemple la classe
grid-4-small-2-tiny-1
définira une grille de 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran. La notationgrid-4
fonctionne toujours, mais ne sera pas automatiquement responsive.
- Les grilles de KNACSS sont à présent rétrocompatibles jusqu'à IE8 et Android2 grâce à un fallback en
display: inline-block
pour ces anciens navigateurs. Cependant les fonctionnalités resteront limitées chez ces dinosaures (pas deflex-item-double
, deflex-item-first
, etc.)
- Passage à l'indentation via 2 espaces et non plus tabulations (+
.editorconfig
à jour) - Répartition des styles tabulaires entre les fichiers
tables
etstyling
- pas de namespace sur les classes
.clear
,.clearfix
et.visually-hidden
- ajout d'une classe
.bfc
(identique à.mod
) et qui crée un contexte de formatage block
- Ajout de !default aux variables SASS dans le fichier
_00-config.scss
- Flex-container enhancement
- select element enhancement on webkit
- correction largeurs des grilles pour IE
- correction de divers doublons
- pour les grilles, suppression de l'alignement justifié par défaut (justify-content: space-between)
- possibilité d'ajouter un namespace à l'ensemble des classes (configurable dans le fichier config de Less et Sass)
- mise en commentaire des sauts de page print avant un h1
- correction d'anomalie sur les input (user-select: none)
- correction d'erreur de compilation Sass
- ajout de node_modules dans le .gitignore
- ajout d'un gulpfile.js et des dépendances dans package.json
- ajout de la classe .unstyled destinée aux éléments de formulaires
Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes).
Anciens noms :
.flexbox, .flexbox-h
.flexbox-v
.flexitem-fluid
.flexitem-center
.flexitem-first, .flexitem-medium, .flexitem-last
Nouveaux noms :
.flex-container, .flex-container-h
.flex-container-v
.flex-item-fluid
.flex-item-center
.flex-item-first, .flex-item-medium, .flex-item-last
- grosse remise à jour, orientée vers les technos modernes (flexbox, rem, calc, ...) et moins de "bidouille"
- fin du support d'IE6-IE8 Si vous souhaitez utiliser KNACSS sur d'anciens navigateurs, préférez la Version 3
- ajout du reset normalize.css
- un grand merci à @7studio pour ses conseils et observations sur la version beta de KNACSS 4.0
- attention : rétrocompatibilité non préservée pour certaines classes ( .left, .start, .txtleft, .fl, .table-, .flex-start, .flex-end)
- attention : rétrocompatibilité non préservée pour les grilles de mise en page (passage à flexbox et simplification de la structure)
- documentation en français
- PDF pense-bête mis à jour : http://knacss.com/KNACSS-cheatsheet.pdf
- gros ménage de printemps (gros nettoyage de tous les espaces et tabulations disgrâcieux)
- dans la section "quick print reset", ajout des classes .p-like, h1-like, h2-like etc.
- mise en commun globale de tous les styles p avec .p-like (h1 et h1-like, etc.).
- déplacement et commentaire sur la règle body > script
- correction du bug des height: auto sur les images au format SVG
- meilleure intégration de box-sizing
- suppression du fichier dédié aux réglages des bugs des anciennes versions d'IE6-IE8
- fin du support d'IE9 pour les grilles : KNACSS v4 compatible IE10+ pour ce qui concerne les mises en page en grilles (flexbox FTW!)
- réorganisation des fichiers (le fichier dédié "IE.css" disparait, le fichier "booleans" devient "misc" (plus cohérent), le fichier "gmaps" est désormais inclus dans "misc")
- ajout des préfixes ".table-" devant les styles de décoration des tableaux
- suppression du fichier icons.css, statistiquement inutile en pratique
- meilleure cohérence de nommage entre .left, .start, .txtleft, .fl
- ajout d'un fichier de reset dédié à WordPress
- refonte intégrale des grilles en Flexbox (et en plus ça marche sur IE10 !)
- ajout d'un fichier .editorconfig (http://editorconfig.org/)
- passage des :before/:after en ::before/::after
- ajout de sourcemaps CSS
- suppression des images noir et blanc forcées en media print
- correction de la formule LESS
{calc(1em * .625);
- ajout du reset normalize.css
- mise à jour du générateur de gabarits Schnaps.it