- magick.css est un framework CSS fourni sous forme de fichier unique, presque sans classes, qui vise un style de documents web façon « notes de magicien », lisible et efficace pour transmettre l’information
- Il fonctionne sur toutes les tailles d’écran et peut être utilisé sans JavaScript, ce qui le rend facile à appliquer directement à des documents statiques ou à des pages HTML légères
- Il peut être installé via CDN, inclusion directe du fichier ou import npm, et la configuration avec
normalize.css est expliquée
- La structure de base repose sur des colonnes lisibles centrées autour de
et, et permet d’ajouter des explications complémentaires à côté du texte avec `` et les sidenotes
- Il stylise la plupart des éléments HTML de base, tout en fournissant des classes séparées pour les fonctionnalités nécessitant une structure, comme les sidenotes et les numéros de ligne dans le code
Objectifs et nature de magick.css
- magick.css est un framework CSS minimaliste et majoritairement sans classes
- Il tient dans un seul fichier, avec des commentaires dans le CSS permettant de comprendre les raisons des choix effectués
- Visuellement, il crée une ambiance magique à la fois élégante et ludique, tout en donnant la priorité à la lisibilité et à la transmission de l’information
- Il conserve son apparence et ses fonctionnalités sur tous les appareils et toutes les tailles d’écran, et fonctionne sans JavaScript
- Il s’inspire de LaTeX, d’anciens livres de règles de TTRPG, de concrete.css, de Tufte CSS et de l’éthique brutaliste du « usability as design »
Installation et modes d’utilisation
- Pour l’essayer le plus rapidement possible, ajoutez deux feuilles de style CDN dans le HTML ``
- Vous pouvez aussi télécharger le fichier
magick.css depuis le dépôt et l’inclure comme un CSS classique
- Dans un projet JavaScript, installez-le avec npm puis importez-le
npm install normalize.css magick.css
import 'normalize.css'
import 'magick.css'
- Sa configuration 99 % sans classes le rend facile à appliquer à des documents HTML5 existants
Mise en page centrée sur la lecture
- Pour créer des colonnes responsives, il est recommandé d’envelopper tout le contenu dans
et de découper les longs textes avec
- Une structure de document typique consiste à placer
, plusieurs et à l’intérieur de
- Même sans suivre cette structure, magick.css peut être utilisé uniquement pour la typographie et les composants stylisés
- Les informations complémentaires sont représentées avec la balise ``
- Pour ajouter du contexte au milieu du texte, utilisez des sidenotes ; leur numérotation est automatique
Style des éléments HTML de base
- La typographie couvre les titres, paragraphes, liens, emphases, soulignements, petits textes et code inline
- magick.css ne stylise pas les headings inférieurs à ``
- L’idée est que les headings de niveau inférieur servent souvent à des usages spécifiques plutôt qu’à une hiérarchie structurelle
- L’utilisateur peut les styliser lui-même si nécessaire
- Les listes restent simples afin de ne pas gêner le contenu
- Listes non ordonnées
- Listes ordonnées
- Listes de définitions
- Les tableaux utilisent un style clair et concis pour garder l’attention sur les données
- Les formulaires et éléments de saisie peuvent être utilisés seuls ou dans un form
- Les champs de saisie texte ayant des usages variés, le framework n’impose pas fortement leur taille ou leur disposition
- Les labels des cases à cocher et boutons radio sont censés venir après l’input
- Les forms sont stylisés pour attirer l’attention de l’utilisateur avec un aspect de note manuscrite sur papier
Médias, code et citations
- Les images et vidéos peuvent être placées seules ou dans `` avec une légende
- Un `` autonome s’affiche à sa taille naturelle lorsqu’il y a assez d’espace, sans être étiré ni déformé
- Avec
et, les médias peuvent être mis davantage en évidence et enrichis de contexte
- Pour le code inline, utilisez
; pour les grands blocs de code, utilisez une structure où enveloppe ``
- Les extraits de code peuvent aussi être affichés sous forme de figure
- Les citations utilisent ``
- La source peut être ajoutée avec `` à l’intérieur du blockquote
- Les textes dont la mise en forme est importante, comme les poèmes, peuvent être enveloppés dans ``
Fonctionnalités utilisant des classes séparées
- Certaines fonctionnalités nécessitent une class spéciale et sont donc séparées du fonctionnement essentiellement classless de magick.css
- Pour insérer une sidenote dans le texte, ajoutez à la fois l’emplacement de référence et le corps de la sidenote
Sidenote Content.
- Sur mobile, la sidenote est déplacée dans la colonne principale
- Pour afficher des numéros de ligne dans un bloc code ou pre, il faut insérer un `` contenant chaque numéro de ligne
- L’insertion des numéros de ligne peut se faire manuellement, via JavaScript ou côté serveur, selon la méthode souhaitée
Liens du projet
- Si le projet vous plaît, vous pouvez lui donner une star sur GitHub
- Si d’autres travaux vous intéressent, vous pouvez rejoindre le Discord
1 commentaires
Avis sur Hacker News
J’aime la manière dont l’écriture manuscrite des champs de saisie se marie avec les sérifs organiques, ainsi que le soin apporté à l’interligne et à la graisse, très équilibrés
Le code pour ceux que ça intéresse : https://github.com/wintermute-cell/magick.css/blob/master/ma...
J’aimerais aussi voir des cases à cocher et des boutons radio personnalisés. Pour l’instant, ce sont les deux seuls éléments qui cassent l’immersion ; tout le reste est vraiment excellent. Ça pourrait bien me décider à créer enfin le blog auquel je pense depuis longtemps
Elle s’intègre tellement bien qu’on en vient presque à ne plus la remarquer
Il faut voir que la balise fermante est
header, pasmainJe voulais voir rapidement à quoi il ressemblait, mais il fallait passer par plusieurs étapes pour accéder à la source. Au minimum, un lien cliquable direct vers la version non traitée serait appréciable
mainsert au contenu principal de la page, tandis que les contenus liés mais secondaires, comme une section de commentaires ou des tags, utilisent des balises distinctesBizarrement, ce genre de rendu m’attire vraiment
Et l’aspect ultra minimaliste, presque uniquement en HTML, comme les anciens sites de professeurs d’université, a aussi beaucoup de charme
J’aimerais que les blogs personnels soient plus populaires
Du moins dans mes textes, techniques ou non, les images et le texte forment un récit continu. Réorganiser les images et les déplacer ailleurs n’a pas plus de sens que de le faire avec les paragraphes
En fait, il vaut mieux éviter d’écrire quoi que ce soit entièrement en majuscules. Comme le soulignement, c’est une forme d’emphase héritée de l’époque de la machine à écrire, quand on ne disposait que d’une seule police
Les lettres majuscules se ressemblent trop. Comme il n’y a pas de variation de hauteur, l’œil a plus de mal à lire. Avec un mélange de minuscules et de majuscules, il y a des lettres descendantes comme y, p, j, et des lettres montantes comme b, d, t, ce qui crée des variations et facilite la reconnaissance
Pour mettre en valeur, mieux vaut utiliser la taille, la graisse ou l’italique
Mais c’est aussi ce qui lui donne un style distinctif
Malgré tout, je crois que j’aime bien
On trouve facilement de très bons frameworks généralistes, mais si l’on veut quelque chose avec une vraie personnalité, c’est beaucoup plus difficile
https://www.mcsweeneys.net/articles/im-comic-sans-asshole
Surtout avec une graisse faible combinée à un thème sombre, le texte devient assez inconfortable à lire
/etc/hostsAu lieu de faire preuve de bon sens, Google a fini par mener une étude utilisateur auprès de 800 personnes pour conclure que « les champs de saisie texte doivent ressembler à des champs de saisie texte » : https://medium.com/google-design/the-evolution-of-material-d...
J’en avais créé un il y a quelque temps, même s’il n’est probablement pas aussi bon que celui-ci : https://elementcss.neocities.org