Principes de base de MAGICK.CSS
magick.css est un framework CSS minimaliste (presque) sans classes, facile à utiliser et à comprendre.- Il se compose d’un seul fichier, avec toutes les options commentées.
- Son objectif est d’obtenir une apparence élégante et ludiquement magique, tout en maximisant la lisibilité et la capacité à transmettre l’information.
Comment utiliser MAGICK.CSS
- Il est recommandé d’utiliser
magick.css avec normalize.css.
- Vous pouvez l’appliquer à votre projet en ajoutant deux lignes dans le
<head> HTML via un CDN.
- Vous pouvez aussi télécharger le fichier
magick.css et l’inclure dans le <head> HTML.
- Pour les projets JS, il peut être installé avec
npm install, puis utilisé via import dans le code.
- Utilisé avec un document HTML5, il ne nécessite aucune classe dans 99 % des cas, tout en permettant quelques fonctionnalités intéressantes.
Mise en page
- Pour structurer la page en une colonne responsive et facile à lire, vous pouvez entourer tout le contenu avec une balise
<main> et utiliser des balises <section> pour découper les contenus longs.
- Vous pouvez ajouter des informations périphériques avec la balise
<aside>, et développer certains points ou fournir du contexte supplémentaire via des notes de côté.
Typographie
- Une démonstration de la typographie fournie par
magick.css est présentée.
- Les titres de niveau inférieur à
<h4> ne sont pas stylisés ; l’utilisateur peut leur appliquer un style lui-même si nécessaire.
Contenu structuré
- Les listes et les tableaux restent simples afin de ne pas détourner l’attention du contenu.
Formulaires et saisie
- Les éléments interactifs peuvent être utilisés seuls ou comme partie d’un formulaire.
- Des exemples incluent des boutons, des champs de texte, des cases à cocher, des boutons radio et des fieldsets.
Médias et figures
- Les éléments multimédias comme les images et les vidéos peuvent être utilisés seuls, ou présentés sous forme de figures pour ajouter de la structure et de l’élégance au contenu, avec des légendes pour apporter du contexte.
Code, citations et texte préformaté
- Le code peut être affiché en ligne ou dans des blocs séparés, et les citations peuvent être ajoutées avec la balise
<blockquote>.
Fonctionnalités supplémentaires
- Des fonctions supplémentaires comme les notes de côté et la numérotation automatique sont disponibles, mais elles nécessitent des classes spécifiques et ne font donc pas partie des fonctionnalités principales de
magick.css.
L’avis de GN⁺
magick.css offre un moyen de réduire la complexité du CSS et de simplifier la conception de pages web.- Ce framework peut être particulièrement adapté aux sites web centrés sur le texte, comme la documentation ou les blogs, en aidant les utilisateurs à se concentrer sur le contenu.
- En revanche, il peut être limité pour les développeurs qui souhaitent construire des fonctionnalités interactives complexes ou des applications web dynamiques.
- Parmi les autres frameworks CSS proposant des fonctionnalités similaires, on peut citer Bootstrap, Foundation et Bulma ; chacun peut être choisi selon des cas d’usage et des préférences spécifiques.
- Lors de l’adoption de
magick.css, il faut prendre en compte les exigences de design du projet et les contraintes du framework, et bien équilibrer simplicité et facilité d’utilisation.
1 commentaires
Commentaires sur Hacker News
Un avis souligne qu’il s’agit d’un bon exemple de police qui s’accorde bien avec le style, au point de presque ne pas se remarquer.
Le système de design et la manière de le présenter sont jugés magnifiques, avec une attention appréciée jusque dans les détails de hauteur de ligne et de graisse. Un lien est fourni pour les personnes intéressées par le code. Une légère déception est exprimée quant à l’absence de cases à cocher et de boutons radio personnalisés, qui casse l’immersion. Le tout a donné envie de créer un blog.
Un petit typo est signalé dans l’exemple simple : il faudrait fermer
mainet nonheader.Un commentaire évoque le charme d’un site personnel avec une ambiance de document LaTeX, et trouve très stylé le style des sites ultra-minimalistes des anciens professeurs d’université. Il exprime aussi le souhait que les blogs personnels soient plus populaires.
Recommandation de Tufte CSS, avec un lien associé.
Selon un avis, une police manuscrite en majuscules nuit fortement à la lisibilité ; il est conseillé d’éviter les majuscules et d’utiliser plutôt la taille, la graisse ou l’italique pour mettre en valeur.
Retour positif indiquant que la police est très lisible, mignonne, mais sans excès, ce qui la rend attrayante.
Un avis note que lorsque les polices distantes sont bloquées, le texte est rendu en Comic Sans, ce qui donne une mauvaise impression.
Souhait de voir davantage de frameworks CSS minimalistes, en particulier parce qu’il est difficile d’en trouver avec une vraie personnalité.
Un commentaire dit aimer le design et, après avoir vu la traduction chinoise, se demande ce qu’en pensent les personnes capables de lire le chinois. Il mentionne aussi que les options de police y sont plus limitées qu’en anglais, et que les photos utilisées sont différentes.