Ce tutoriel vous présentera Pure, une bibliothèque CSS composée de petits modules, qui peut vous aider à écrire des mises en page complètement réactives, de manière très simple et rapide. En chemin, je vous guiderai à travers la création d'une page simple afin de mettre en évidence comment vous pouvez utiliser certains des composants de la bibliothèque..
Pourquoi créer des mises en page réactives?
Au cours des dernières années en développement web, Trois Les mots qui rebondissent encore et encore sont: Responsive Web Design (RWD). À ce stade, vous devriez déjà savoir ce que c'est, mais, au cas où vous l'auriez manqué, voici quelques ressources pour combler les lacunes:
Articles sur WebDesign Tuts+
Cours sur Tuts + Premium
Conception Web sensible par Ethan Marcotte
Mais la question est: pourquoi aller réactif? La réponse est que nous n'avons aucun contrôle sur la résolution utilisée par le prochain appareil lors de la visite de notre site Web. Nous ne pouvons plus afficher des phrases telles que "Meilleur affichage à une résolution de 1024x768" (même si vous pouvez les trouver sur le Web). L'une des principales raisons de ce phénomène tient à la croissance de la largeur des écrans de PC ainsi qu'à la propagation des appareils mobiles connectés à Internet. En outre, selon StatCounter, environ 16% des utilisateurs sont connectés via un appareil mobile. Maintenant je ne dis pas ça RWD C’est juste une question d’optimisation d’un site Web pour une taille d’écran donnée. Ce que je veux dire, c’est que nous créons une expérience unique pour les utilisateurs qui visitent notre site, quels que soient les appareils qu’ils utilisent..
Cela dit, il est également clair que nous ne travaillons pas tous pour une entreprise où chaque personne a un seul rôle (concepteur, développeur, testeur, etc.). Donc, disons que vous êtes un développeur solo, travaillant en tant que pigiste et que vous en savez peu sur la conception de sites Web. Il existe de nombreuses bibliothèques disponibles qui peuvent accélérer votre flux de travail. Les plus complets sont sûrement Boostrap et Foundation, mais ils peuvent parfois être exagérés et vous aurez peut-être besoin de quelque chose de plus petit. Dans ces cas, un nouveau projet intéressant a été lancé par Yahoo et que nous pouvons utiliser, appelé Pure.
Ce qui est pur?
Citant le site Pure, c’est un ensemble de petits modules CSS réactifs que vous pouvez utiliser dans chaque projet Web. Comme indiqué précédemment, la bibliothèque complète est vraiment légère: elle n’est que de 4,2 Ko minifiée et compressée, mais pour que votre site Web soit encore plus léger, vous pouvez inclure uniquement certains des modules disponibles. Fondamentalement, il est composé des modules suivants:
Base
la grille
Formes
Boutons
les tables
Les menus
L’une des choses que j’apprécie vraiment chez Pure, c’est qu’elle est basée sur Normalize.css, une bibliothèque bien connue qui restitue les éléments de manière plus cohérente et conforme aux normes modernes et fonctionne également dans les navigateurs plus anciens. Comme il est vraiment petit, il n’offre pas une solution complète à tous vos problèmes, mais il contient plusieurs éléments d’interface utilisateur prédéfinis que vous pouvez trouver sur de nombreux sites Web. Une autre caractéristique intéressante de Pure est qu’il est hautement extensible et personnalisable. Les auteurs ont utilisé SMACSS pour le construire et toutes ses classes commencent par pur-, afin que vous puissiez facilement les reconnaître.
Bien que Pure soit un projet intéressant à regarder, gardez à l’esprit que c’est vraiment nouveau et que cela ne convient peut-être pas aux grands projets. En fait, la version actuelle (0.2.0 au moment de la rédaction de cet article) présente plusieurs problèmes que vous ne trouverez probablement pas dans des cadres plus matures et sa documentation pourrait également être améliorée. Néanmoins, cela m'a plu et en tant que précurseur, vous avez l'avantage d'étudier et d'apprendre Pure depuis le début, ce qui pourrait bien devenir le prochain projet bien connu sur le Web..
Voyons voir pur en action
Ils disent qu'une image vaut mille mots. Pour nous, développeurs et concepteurs, une démonstration à laquelle nous pouvons jouer est encore meilleure. Alors, pour voir ce que Pure peut faire pour nous, créons une application de démonstration de base. Notre démo consistera en une simple page d'accueil contenant des informations sur moi-même (mon imagination me fait parfois peur). L'image ci-dessous vous montre à quoi devrait ressembler le résultat final sur un grand écran:
Et l'image suivante, à la place, vous montre à quoi cela ressemblera sur un smartphone:
Étape 1: Créer le menu horizontal
Comme je l'ai dit, Pure contient plusieurs éléments communs prédéfinis que vous pouvez trouver dans de nombreux sites Web sur le Web. Un menu horizontal est sûrement l'un d'entre eux et nous donnera l'occasion de jeter un coup d'œil sur certaines des classes du module menus.
Pour créer cela en utilisant HTML5, nous avons généralement un élément enveloppant une liste non ordonnée contenant les liens principaux de notre site Web. Une fois la liste créée, nous devons l'afficher horizontalement. Pour ce faire, nous devons appliquer trois classes à l’emballeur de liste (): .pur-menu, .pur-menu-ouvert, et .pur-menu-horizontal. La première classe applique des règles communes à tous les menus de Pure. le .pur-menu-ouvert class est utilisé pour afficher (au lieu de masquer) les éléments de la liste, tandis que .pur-menu-horizontal La classe est celle qui affiche les éléments de la liste sur la même ligne. Veuillez noter que par défaut, le menu n'est pas centré.
Maintenant, pour améliorer l'interface utilisateur, nous devons mettre en surbrillance l'élément de la liste qui renvoie à la page actuelle. Ceci est fait en appliquant le .pur-menu-sélectionné classe à la élément que vous souhaitez mettre en évidence. Ce faisant, la couleur du texte passera du gris au noir.
Le code complet de notre menu est affiché ci-dessous:
Étape 2: Description de l'auteur
Après le menu, vous pouvez voir que nous avons une "rangée" idéale contenant à gauche une photo et à droite une petite description de moi. Cette "rangée" est en fait un grille réactive constitué de deux unités de grille, où la première enveloppe la photo et occupe 25% de son espace, tandis que la seconde enveloppe la description et occupe les 75% restants, tant que la largeur de l'écran est supérieure à 767 pixels. Au contraire, si la largeur de l'écran est égale ou inférieure, les unités de la grille sont empilées et occupent 100% de la largeur disponible. Veuillez noter que les unités ont une largeur de 100%. Par conséquent, si les éléments à l'intérieur sont moins larges, ils n'occuperont qu'une partie de l'unité. Pour voir comment cela fonctionne, essayez de redimensionner la fenêtre et notez que la photo ne consomme pas 100% de la largeur, tandis que, simultanément, les unités de la grille sont empilées..
Comme indiqué précédemment, Pure dispose d’un module spécifique pour la gestion des grilles. Pour déclarer une grille sensible, vous devez appliquer au conteneur une classe appelée .pure-g-r. Les unités de la grille partagent cependant un nom similaire., .pure-u - * - *, où la dernière partie de la classe spécifie la quantité d'espace occupée par l'unité donnée. Par exemple, si vous appliquez à un élément la .pure-u-1-4 classe, cela réservera 25% de la largeur disponible, comme je l’ai fait pour la photo. Un autre exemple pourrait être .pure-u-2-3 ce qui permettra à l’unité d’occuper 66,6% de l’espace réseau.
Ce système de grille est vraiment intéressant car il peut vous faire gagner beaucoup de temps si vous ne savez pas comment gérer flotte, clair, et d'autres règles pour créer des mises en page. En outre, ils vous éviteront toute la difficulté de gérer le côté réactif de la mise en page.
Cela dit, le code qui implémente la première grille devrait ressembler à ceci:
Aurelio De Rosa
Je suis un développeur italien d'applications Web et j'ai obtenu un baccalauréat en informatique et plus de 5 ans d'expérience dans la programmation Web utilisant HTML5, CSS3, JavaScript et PHP. J'utilise principalement le LAMPE pile et des structures telles que jQuery, jQuery Mobile et Cordova (PhoneGap). Mes intérêts incluent également la sécurité Web, l'accessibilité Web, le référencement et WordPress.
Actuellement, je suis indépendant et travaille avec les technologies citées. Je suis aussi un blogueur habituel pour plusieurs réseaux (SitePoint, Tuts + et FlippinAwesome) où j'écris des articles sur des sujets avec lesquels je travaille habituellement et plus encore..
Étape 3: la grille d'information
La deuxième et dernière grille est divisée en trois parties égales. Je les ai créées pour vous montrer d'autres composants de la bibliothèque, afin que vous puissiez en avoir une bonne vue d'ensemble. En fait, la première unité a un tableau, la seconde un formulaire et la troisième un menu vertical.
Le code ci-dessous vous montre comment scinder la grille en trois parties:
Maintenant, explorons chaque unité de cette grille réactive.
Étape 4: Un tableau réactif
Un autre des modules disponibles dans Pure est Tableaux. Comme son nom l'indique, il contient des règles pour styler un
élément et ses enfants. Par défaut, une bordure verticale est appliquée aux tables pour séparer visuellement les colonnes. Cependant, vous pouvez également ajouter une bordure horizontale, en appliquant le .bordures de table pures classe ou montrer que ce dernier en utilisant le .pure-table-horizontale classe à la
élément. De plus, vous pouvez également créer des tableaux à bandes pour aider l'utilisateur à lire les données. Pour ce faire, vous avez deux possibilités. Le premier fonctionnera sur les navigateurs prenant en charge nième enfant et consiste à appliquer le .rayé pur-table nom de classe au
élément. La seconde, à la place, fonctionne dans tous les navigateurs, y compris Internet Explorer 8 et versions antérieures, mais elle est plus détaillée. Il consiste à ajouter le .pure-table-impair nom de classe à tous les autres
élément. Pour des raisons de compatibilité, je vais pour la deuxième approche.
Actuellement, les tables ont un problème lorsqu'elles sont affichées sur de petits écrans, mais ce problème sera résolu dans la prochaine version. Veuillez noter que vous ne le verrez pas dans la démo car je l'ai corrigé. Haut cinq pour moi.
Le code qui crée la table à bandes est présenté ci-dessous:
Tableau de prix drôle
Nombre d'heures
Prix (€)
Sûr (%)
1
30 €
0%
5
135 €
dix%
dix
255 €
15%
20
480 €
20%
50
1050 €
30%
Étape 5: Un formulaire de contact empilé
Les formulaires constituent un autre module de la bibliothèque Pure. Il vous permet d'afficher vos formulaires dans plusieurs types de styles. Dans cette démo, nous allons créer un formulaire empilé, où les éléments en entrée sont sous les étiquettes. Pour ce faire, nous devons ajouter le .forme pure et le .forme pure empilé des cours au élément. Ensuite, nous devons placer les deux étiquette et le contribution balises dans un wrapper, où nous appliquerons la .groupe de contrôle pur classe et ensuite mettre tous ces emballages dans un élément. Le bouton d'envoi et le bouton de réinitialisation auront également un wrapper, mais leur wrapper aura la classe .contrôles purs. Veuillez noter que pour le bouton d'envoi, nous avons utilisé la classe .bouton-primaire-primaire pour le mettre en valeur. La classe citée appartient au module Boutons et permet de changer le style du bouton en appliquant une couleur bleue..
Voici à quoi devrait ressembler votre code de formulaire:
Contactez moi
Étape 6: Un menu vertical avec un en-tête
Le dernier élément que vous apprendrez à créer en utilisant Pure sera un menu vertical avec un en-tête. Un menu de ce type est stylé avec une bordure noire, tout autour. Pour l'utiliser, nous allons appliquer au wrapper de liste, deux des trois classes que nous avons déjà utilisées à la première étape, c'est-à-dire .pur-menu et .pur-menu-ouvert. De plus, pour créer l’en-tête, il faut ajouter un autre élément et lui appliquer le .rubrique-menu pure classe.
Le code de ce menu est répertorié ci-dessous:
Où me trouver
Mes profils
Gazouillement
LinkedIn
GitHub
Google+
Conclusion
Voilà qui complète cette introduction à Pure. J'espère que vous avez aimé. Si vous souhaitez suivre le développement de Pure, vous pouvez visiter son référentiel sur GitHub. N'hésitez pas à soumettre des problèmes, des demandes de tirage et à contribuer.
Accentsconagua
Share
