Share
Êtes-vous satisfait des bibliothèques de grille CSS disponibles? Non? Je ne vous en veux pas. Entrez Susy, un plugin pour le framework CSS Compass qui vous permet de créer votre propre framework de grille personnalisé, en minimisant les frais généraux, tout en le rendant plus facile à utiliser. Ça sonne bien, non? Faisons un saut dans.
Je ne vais pas trop approfondir Compass ou SCSS (la langue dans laquelle vous écrivez le CSS), mais n'hésitez pas à consulter notre cours CSS maintenable avec Sass et Compass Premium, si vous souhaitez en apprendre davantage à leur sujet..
Vous pouvez créer trois types de grilles différents: statique, fluide et magique..
Les bibliothèques de grille les plus populaires d’aujourd’hui semblent manquer d’une manière ou d’une autre. Les grilles telles que 960 et Blueprint sont toutes les deux des grilles statiques avec des valeurs de pixels très spécifiques. L'affichage de ces grilles sur des écrans d'une largeur inférieure à 950 pixels donne des barres de défilement horizontales - le fléau du Web.
Les grilles fluides sont difficiles à résoudre, mais il en existe quelques-unes. La plupart des grilles fluides fonctionnent avec des pourcentages au lieu de pixels, mais elles ont tendance à avoir une taille maximale et rendent impossible la mise à l'échelle d'une largeur maximale respectable. En soi, une mise en page fluide est presque aussi mauvaise qu'une mise en page fixe, car si vous disposez d'une meilleure couverture des ordinateurs de bureau, les appareils mobiles ont tendance à souffrir d'une pire mise en page. Dans cette situation particulière, une grille statique vous donne une meilleure expérience. Oui, vous devez faire défiler horizontalement sur les appareils avec une résolution inférieure, mais les systèmes basés sur un pourcentage se retrouvent généralement avec une colonne représentant par exemple 10% de 480px. Cela provoque une scission verticale dans votre texte.
CSS est une solution à ce problème questions des médias. Certaines des bibliothèques les plus populaires, telles que "Grille 1140" et "Grille d'échafaudage Bootstrap", sont livrées avec des requêtes de média prédéfinies. La grille 1140 a une disposition fluide, mais les petites tailles d'écran font en sorte que les colonnes s'empilent les unes sur les autres..
Les grilles fluides sont difficiles à obtenir…
La grille d'échafaudage de Bootstrap, quant à elle, intègre plusieurs dispositions statiques. Au fur et à mesure que la taille de l'écran change, Bootstrap modifie la présentation pour qu'elle corresponde mieux à la taille actuelle de l'écran. Une fois que vous avez atteint une taille d'écran mobile, Bootstrap charge la même configuration que la grille 1140, une présentation fluide avec toutes les colonnes empilées les unes sur les autres..
Quel est le problème avec choisir l'un de ceux-ci? Eh bien, techniquement rien, mais ils ne sont pas faits sur mesure pour votre application spécifique. Cela vous oblige à intégrer votre application dans leur grille et à contourner les limites du cadre. Vous pouvez toujours modifier leur cadre, mais vous pouvez également créer le vôtre et éliminer les fonctions inutiles et superflues..
Comme je l'ai déjà mentionné, Susy est un plug-in pour le framework Compass qui propose un large éventail de mixages pour la création de vos propres grilles CSS. Vous spécifiez simplement le nombre de colonnes par défaut et quelques options de taille (largeur de colonne, remplissage de grille, etc.) et Susy calcule les pourcentages corrects pour vos éléments. Cela vous donne le pouvoir de changer le nombre de colonnes et leur taille..
Vous pouvez créer trois types de grilles différents: statique, fluide et magique..
Vous savez déjà ce que sont les grilles statiques et fluides; jetons un coup d'œil à ce que vous donnent les grilles "magiques". Les grilles magiques ont un extérieur élastique et un fluide intérieur. En d'autres termes, l'extérieur de la grille (largeur maximale) s'ajuste en fonction de la taille de police par défaut du navigateur (les navigateurs de bureau ont généralement une résolution par défaut d'environ 16 pixels). L'intérieur de la grille est redimensionné en fonction de la largeur réelle du navigateur. Cette combinaison donne à votre site une apparence plus cohérente sur les navigateurs tout en prenant en charge des écrans plus petits..
Susy fournit une combinaison appelée "at-breakpoint", qui vous permet de définir des CSS personnalisées en fonction de la taille de l'écran. Ce mix-in accomplit cet exploit avec les requêtes de médias CSS. Ainsi, par exemple, vous pouvez réorganiser les colonnes pour les empiler les unes sur les autres, comme dans les cadres décrits précédemment, et même supprimer le contenu qui ne correspond pas à un appareil mobile..
Je suppose que Compass est déjà installé, mais si ce n’est pas le cas, vous pouvez vous reporter à la série de vidéos de Jeffrey. Pour installer Susy, ouvrez une ligne de commande Ruby et tapez ce qui suit:
sudo gem installer susy
Créez ensuite un projet Compass. Tapez ce qui suit:
compas créer nom_projet -r susy -u susy
Vous devriez voir une page d’information, expliquant comment commencer..
Dans le nouveau répertoire créé, vous devriez voir deux dossiers avec un fichier de configuration. Vous allez éditer les fichiers résidant dans le toupet annuaire; Compass compile ces fichiers pour exporter le code CSS final dans le dossier des feuilles de style..
Pour gagner du temps lors de la compilation des fichiers CSS après chaque mise à jour, vous pouvez utiliser Compass '. regarder commande pour que Compass recompile automatiquement vos fichiers chaque fois que vous enregistrez une mise à jour. Donc, dans la fenêtre du terminal, tapez la commande suivante:
montre boussole
Compass va maintenant commencer à surveiller et à recompiler les fichiers de la toupet dossier. N'oubliez pas que vous devez garder la fenêtre du terminal ouverte pour pouvoir surveiller le dossier. si vous utilisez le terminal pour l'édition de fichiers (c'est-à-dire vim), vous devez ouvrir une autre fenêtre.
Maintenant que vous avez tout configuré, jetons un coup d'œil à ma démo rapide. Je vais garder le HTML court car c'est le CSS pour lequel nous sommes vraiment ici. La démo est un gestionnaire d’invité à un événement qui répertorie les invités et enregistre les personnes qui ont répondu. C'est une idée simple qui met en valeur plusieurs des concepts que nous avons discutés.
Au niveau HTML, il y aura une zone d’en-tête suivie d’une ligne avec le nom de l’événement, des contrôles et enfin la liste des invités. Vous pouvez regarder l'image ci-dessous pour mieux comprendre la mise en page.
Voici la page HTML complète pour la démo:
Planifiez! Gestionnaire d'invité d'événement
Liste d'invités pour - John's Wedding
Ajouter des contacts Ajouter un nouvel invité
prénom Téléphone Cellule Statut de RSVP Dave K. Samten [email protected] 708-6777 360-234-1192 Confirmé Bob Renper [email protected] 537-4267 621-124-4294 Confirmé Kevin D. Turner [email protected] 942-2674 930-654-4144 RSVP
Susy utilise largeur min pour les requêtes de médias par défaut; vous commencez donc par définir le CSS pour la plus petite mise en page, puis vous développez progressivement la mise en page avec la taille croissante de l'écran. La version 'mobile' sépare le slogan et les boutons en leurs propres lignes, et nous faisons en sorte que tout remplisse la largeur de la page..
J'utilise un autre plugin Compass, appelé Sassy Buttons, pour générer le CSS des boutons. Cela ne fait pas partie intégrante de cette démo, mais vous pouvez l'installer en tapant ce qui suit dans un terminal:
bijou installer des boutons sassy
Ajoutez ensuite la ligne suivante à votre config.rb fichier:
besoin de 'boutons impertinents'
Définissons la mise en page. Ouvrir _base.scss dans le toupet dossier. Ce fichier contient tous les importation déclarations et variables dont nous avons besoin plus tard. Remplacez tout ce qui se trouve dans ce fichier par ce qui suit:
@import "susy"; // si vous voulez utiliser les boutons plugin @import "sassy-buttons"; // c'est le nombre de colonnes par défaut $ total-columns: 5; // largeur de chaque colonne $ column-width: 4em; // espace entre les colonnes $ gutter-width: 1em; // espace à droite et à gauche de la grille $ grid-padding: $ gutter-width; // points d'arrêt de mise en page alternatifs $ tablet: 8; $ ordinateur: 55em 12;
En soi, une mise en page fluide est presque aussi mauvaise qu'une mise en page fixe…
le total-colonnes contient le nombre de colonnes par défaut pour le plus petit affichage de votre mise en page.
Je suis allé avec trois configurations totales: mobile, tablette et ordinateur. Les points d'arrêt de Susy vous permettent, entre autres, de définir les tailles minimale et maximale des requêtes multimédia et vous pouvez même ajouter une prise en charge spéciale pour Internet Explorer. Je vais garder cet exemple simple et ne couvrir que deux types.
Le point d'arrêt de la tablette s'active lorsque l'écran peut contenir huit colonnes. Le point d'arrêt de l'ordinateur s'active lorsque la largeur de l'écran est égale ou supérieure à 55 em. 12 dans $ ordinateur: 55em 12; dit à Susy de passer à douze colonnes.
Maintenant, enregistrez ce fichier et ouvrez screen.scss. Effacer tout le fichier et importer le fichier de base. Définissons également le conteneur principal:
@import "base"; body background: # F7F3E8; une text-decoration: none; .container @include conteneur ($ total-colonnes, $ tablette, $ ordinateur);
Notez que vous n’avez pas besoin du trait de soulignement ni de l’extension de fichier pour importer le fichier. base fichier. Dans la classe conteneur, nous utilisons le premier mix-in Susy qui définit les différentes dispositions de la grille. Ensuite, il s’agit simplement de SCSS standard pour la mise en page mobile:
Accentsconagua
#header font-weight: 700; taille de police: 72px; span poids de la police: 300; taille de police: 18px; bloc de visualisation; #controls #buttons margin-bottom: 5px; #phonebook @include sassy-button ("simple", 6px, 14px, # 337EC4); #newguest margin-top: 5px; @include sassy-button ("simple", 6px, 14px, # D93131); table width: 100%; thead color: #FEFEFE; arrière-plan: # 000; th text-align: left; poids de la police: 500; rembourrage: 10px; tbody border: 3px solid # 000; tr background: # E5E5E5; tr.alt background: #EEEEEE; .buttoncell .confirm @include sassy-button ("simple", 6px, 14px, # F39B06); .unconfirm @include sassy-button ("flat", 6px, 14px, # 3BA06F); .email display: none; .phone display: none; Comme vous pouvez le voir dans les deux dernières lignes, je masque les colonnes email et téléphone dans le tableau afin que la page s'adapte normalement sur un appareil mobile. Comme meilleure pratique, donnez à l'utilisateur un moyen différent d'afficher l'intégralité des informations (modal, autre page), mais je le laisse de côté pour des raisons de simplicité, par exemple..
Nous avons maintenant terminé le CSS de base pour le site Web mobile et nous pouvons commencer à modifier la présentation avec des points d'arrêt. Voici une capture d'écran rapide que j'ai prise sur mon iPhone de la version mobile:
Le premier point d'arrêt que nous devons implémenter est la version de la tablette. Rappelez-vous, nous devons commencer par la plus petite mise en page. La taille de la tablette est suffisamment grande pour placer le slogan sur sa propre ligne. Nous pouvons également afficher la colonne e-mail. Malheureusement, il n'est toujours pas assez grand pour mettre le nom de l'événement et les boutons sur la même ligne. Voici le SCSS pour ce point d'arrêt:
@include au point d'arrêt ($ tablette) body .container #header span display: inline; table .email display: table-cellule;
Aucune commande «magique» ici, juste un SCSS standard dans un mix Susy. Voici une capture d'écran d'un iPad de la disposition de la tablette:
Enfin, implémentons la version de bureau. Nous avons certainement plus de place que nécessaire pour toutes les colonnes; par conséquent, nous indentons la table des deux côtés afin qu’elle n’ait pas trop d’espace. Nous déplaçons également les boutons sur la même ligne que le nom de l'événement, en l'alignant sur le côté droit, afin de centrer la table (au moins visuellement). Voici ce code:
@include au point d'arrêt ($ computer) body .container #controls #menutitle @include span-columns (5); marge supérieure: 5px; #buttons text-align: right; @include span-columns (5 oméga); table @include prefix (1); @include suffixe (1); .cell display: table-cell;
C’est la première fois que nous utilisons le colonnes span mélanger. Susy utilise la valeur que vous transmettez pour calculer le pourcentage de largeur du conteneur. le oméga mot-clé indique à Susy qu'il s'agit de la dernière colonne de la ligne. Cela fait Compass faire flotter la colonne à droite et supprime la marge de droite.
le
préfixeetsuffixeMix-ins pousser le conteneur x quantité de colonnes à partir de la gauche et à droite, respectivement.
Vous pouvez maintenant enregistrer ce fichier et laisser Compass le compiler en CSS. Si vous avez ajouté le plugin sassy-buttons après le lancement de la montre boussole commande, vous devez arrêter la commande de surveillance (raccourci: CTLR-C) et la redémarrer afin de compiler le SCSS.
Ceci est une très brève introduction à Susy. Pour une liste plus complète des fonctionnalités, vous pouvez visiter la documentation de Susy.
J'espère que cet article vous a plu et merci de l'avoir lu. Comme toujours, n'hésitez pas à laisser des commentaires ou des questions dans la section des commentaires. Vous pouvez également me contacter sur Twitter - @GabrielManricks et j'essaierai de vous contacter dès que possible..
