Si vous êtes comme beaucoup de développeurs, vous avez fait le plein de frameworks CSS basés sur une grille. Eh bien, vous avez de la chance car, aujourd’hui, nous allons examiner de nouveau le concept de framework CSS.
EZ-CSS cherche à résoudre un grand nombre des problèmes que vous détestez à propos des frameworks basés sur une grille, tout en conservant la fonctionnalité d'aide à la création de présentations multi-colonnes multi-navigateurs.
Qu'est-ce que EZ-CSS?
EZ-CSS est un framework CSS développé par Thierry Koblentz. Son concept est similaire aux autres frameworks que vous avez vus, tels que 960.gs ou Blueprint CSS, et pourtant, il est également complètement différent.
La principale différence entre EZ-CSS et les autres frameworks que vous avez vus est qu'ici, vous ne vous engagez pas dans une grille définie, mais avez plutôt une grande liberté sur la largeur de vos colonnes. En fait, vous pouvez créer autant de colonnes que vous le souhaitez, de toute largeur et de toute taille de gouttière.
EZ-CSS utilise également une disposition de module unique qui permet un prototypage extrêmement rapide. Nous y reviendrons plus tard, mais vous comptez essentiellement copier et coller des éléments prédéfinis d'une mise en page que vous pouvez combiner et imbriquer comme vous le souhaitez pour créer un ensemble complexe.
Les avantages finaux de l'utilisation de ce cadre sont la taille et la simplicité. Le fichier CSS requis ne représente qu'environ 1 Ko et l'ensemble du système est en réalité beaucoup plus facile à apprendre que les autres frameworks que vous avez vus. L'absence de restrictions et de hacks supplémentaires, comme l'insertion de divs pour effacer vos flottants, simplifie le flux de travail avec (en théorie) moins de marge.
EZ.CSS
La première chose à faire est de télécharger le fichier gratuit ez.css. Pour ce faire, allez à la section Téléchargements EZ-CSS et récupérez ez-min.css. Il existe de nombreux autres fichiers facultatifs, mais c’est vraiment le seul dont vous avez besoin pour commencer.
Jetez ceci dans un répertoire avec un fichier HTML de base et associez-le à l'extrait suivant:
Évidemment, vous devrez personnaliser le chemin pour qu'il corresponde à votre propre hiérarchie de dossiers.
Comprendre les modules
Comme je l'ai mentionné ci-dessus, la fonctionnalité principale d'EZ-CSS s'articule autour d'une série de modules prédéfinis qu'il vous suffit de copier et de coller dans votre code pour définir la mise en page.
Vous avez le choix entre sept modules sur la page de présentation du site Web: Plain Box, 2A, 2B, 3A, 3B, 4A et 4B. Comme vous pouvez le voir dans l'image ci-dessous, chaque module contient 1, 2, 3 ou 4 colonnes.
En utilisant ces simples blocs de construction, vous pouvez créer une tonne de mises en page incroyablement complexes. Vous accomplissez ceci en imbriquant. Supposons donc que vous utilisiez le module 2A pour créer une mise en page à deux colonnes et que vous souhaitiez diviser la colonne la plus à gauche en trois sections. Vous collez simplement le code du module 3A à l'intérieur du code du module 2A et vous êtes prêt à partir!
La page de présentation contient également plusieurs présentations pré-construites communes qui combinent déjà les modules et accomplissent donc une grande partie du travail à votre place!
Un exemple
Pour avoir une idée du fonctionnement de tout cela, créons une maquette rapide et simpliste à l'aide du cadre EZ-CSS. Nous allons en principe créer une des structures préfabriquées, mais à partir de rien afin que vous puissiez avoir une idée du processus de création de la vôtre.
Si vous avez suivi les étapes ci-dessus, vous devriez avoir un répertoire avec un fichier HTML et le fichier ez-min.css. Ajoutez à cela un fichier style.css et un lien vers celui-ci dans votre code HTML. Ensuite, récupérez le texte pour la? Plain Box? module et collez-le dans le corps de votre CSS.
Important: Comme ce sera notre conteneur principal, j'ai changé le? Ez-wr? classe à la? ez-mw? classe. Cette étape centre centre la mise en page entière, à gauche le texte dans le conteneur et empêche votre nouvelle mise en page d'effacer les flottants précédents (à gauche).
Ajout de l'en-tête
La première section que nous voulons ajouter est un en-tête. Etant donné que cela s'étendra sur toute la page, nous avons besoin d’une autre? Plain Box? module (cette fois, quittez la classe ez-wr). Pour l'insérer, nous l'insérons dans le fichier? Ez-mw? div, en remplacement de la? ez-box? div qui était là. Cela semble plus complexe qu’il ne l’est réellement et donne les quelques lignes de code ci-dessous.
Notez que j'ai également ajouté quelques balises id / class personnalisées afin que nous puissions styler ces éléments selon nos préférences. Je ne voulais pas dénommer les classes EZ-CSS existantes, car je pourrais les utiliser différemment sur un site.
Styliser l'en-tête
Pour avoir un aperçu de l'évolution de la situation, nous allons avancer et ajouter quelques styles à l'en-tête et au corps.
Il y a quelques points importants à noter ici. Premièrement, les mises en page EZ-CSS par défaut sont fluides. C'est génial pour certaines raisons mais je ne voulais pas d'une disposition fluide, j'ai donc simplement appliqué une largeur au conteneur pour l'abandonner. Tout le reste n'est que quelques styles rapides et désordonnés sur lesquels j'ai jeté pour donner à l'en-tête une apparence. Je vais répéter ces styles pour le pied de page, alors je leur ai donné une classe plutôt qu'un identifiant.
Le résultat est tout sauf remarquable, mais c'est un début!
Création d'une mise en page à 2 colonnes
Pour ajouter du contenu, nous allons prendre le module 2A et le jeter à l'intérieur du wrapper principal après l'en-tête. Nous allons placer des images factices dans la colonne de gauche et du texte dans la colonne de droite.
Les divs ne manquent pas (neuf pour être exact), mais c’est mieux qu’il ne l’était. Apparemment, les conteneurs ez-box sont la plupart du temps là pour un style optionnel. Nous avons choisi un chemin différent pour notre style, nous n'avons donc pas besoin de les inclure. Cela ajoute un peu de travail supplémentaire à l'action copier / coller, mais en réalité pas beaucoup. Méfiez-vous des divs que vous coupez et observez attentivement leur impact sur votre mise en page.
Conclusion
Il y a quelques jours, je n'avais jamais entendu parler d'EZ-CSS. Je suis donc toujours en train de le découvrir et d'essayer de décider si je l'aime ou non. J'aime le fait qu'il s'agisse d'une nouvelle version d'un framework CSS qui n'est pas la même structure basée sur une grille que celle que nous avons vue opérer de cinquante manières différentes qui sont finalement les mêmes sur le plan conceptuel.
Alors que je continue à jouer avec EZ-CSS pour voir ce qui est possible et ce qui ne sera pas possible, j'aimerais connaître votre opinion. Vous avez prouvé à maintes reprises d'être plus perspicace que moi dans l'analyse de l'utilité de ces outils dans le monde réel. Je vous renvoie donc celui-ci. Voici quelques questions pour les débutants de conversation:
1. EZ-CSS résout-il les problèmes que vous avez avec 960 et d’autres frameworks de grille?
2. Y at-il des avantages et des inconvénients que j'ai manqués?
3. Quelles sont les restrictions à ce système?
4. EZ-CSS peut-il être utilisé dans le monde réel ou uniquement pour le prototypage?
Mettez dans vos deux cents sur ces sujets et tout autre sujet qui vous vient à l’esprit!