Share
Je voudrais vous parler de limonade. Pas la boisson aux agrumes rafraîchissante, mais un système de grille que j'ai créé.
Lemonade est un système de grille conçu pour donner aux concepteurs et aux développeurs la confiance nécessaire pour créer des sites Web entièrement réactifs, ce qui élimine la frustration liée à la navigation entre navigateurs à la recherche de bugs et d'erreurs. Voyons comment cela est mis en place et comment vous pouvez construire votre propre système de grille réactif.
Avant de créer la mienne, j’utilisais souvent Skeleton.css pour mes mises en page réactives. Cependant, au fil du temps, j’ai eu l’impression que c’était un peu une cause perdue, tout simplement parce que je l’ajustais constamment à mes besoins et que je retirais des éléments inutiles que je ne pensais pas être utilisables. C'est un très bon cadre, mais je ne le recommanderais qu'aux personnes qui ne sont pas à l'aise avec le travail frontal.
Il existe une multitude de grilles, de cadres et de bibliothèques, mais choisir le bon est une décision difficile à prendre. La meilleure façon de décider est de vous demander "Qu'est-ce que j'essaie de faire?" Par exemple: je suis en train de construire un CMS (principalement PHP) et je ne veux pas du tout me concentrer sur l'interface (le panneau d'administration), j'ai donc opté pour Bootstrap. Bootstrap est un cadre incroyablement complet qui prend littéralement soin de vous tout au long du processus de conception..
Je voulais vraiment faire quelque chose qui me donnerait un contrôle total, dans lequel je n'aurais pas à passer la majorité de mon temps à personnaliser la grille. Pour commencer, je pensais que faire une grille allait être une promenade dans le parc, j'ai en fait pensé que je pourrais le faire en quelques heures. Le 24 juin 2013 aux alentours de 12h30, j'ai ouvert mon éditeur et commencé à écrire du code, en grande partie. Mais surprise, surprise, il était extrêmement difficile d’y aller; comment créer quelque chose qui a été créé des centaines de fois, mais en mieux? J'avais besoin de penser à l'avenir, de créer comment je voudrais que cela fonctionne, et non pas comment je pensais qu'un système de grille devrait fonctionner, alors je me suis fixé trois objectifs (je les ai écrits sur des notes autocollantes et les ai collés sur mon mur):
Laissez-moi vous présenter ces objectifs de manière plus détaillée. Je voulais que la grille soit si petite, si petite que si je devais la modifier, je ne maudirais pas l'écran avec frustration. Il devait fonctionner sur les navigateurs modernes (oubliez IE8 et les versions antérieures); Je voulais supprimer le scénario de feuilleter les navigateurs en s’inquiétant si tout se passe bien. L'objectif final était de l'utiliser, je ne voulais pas faire quelque chose et juste le coller sur GitHub et ne plus jamais l'utiliser. Si je devais créer quelque chose, il faudrait l'utiliser dans chaque projet que j'ai fait.
Commençons par le CSS. Rappelez-vous le premier objectif: "Soyez petit, mais puissant"
*, *: après, *: avant marge: 0; rembourrage: 0; / * Supprime le comportement de remplissage sur les largeurs * / -webkit-box-sizing: border-box; -moz-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; / * Sélecteur d'attributs * / [class * = 'bit-'] float: left; rembourrage: 10px; / * Floats last ".bit-" à droite * / [class * = 'bit -']: dernier du type padding-right: 10px; Flotter à droite; / * Clearfix * / .frame: après le contenu: ""; affichage: table; clarifier les deux;
Il s’agit essentiellement de l’épine dorsale de la grille; c'est ce qui fait la fonction de la grille et tient le tout ensemble.
Le paramétrage de border-box avec un sélecteur universel nous évite de nous soucier du rembourrage de nos éléments et de nos largeurs.
Bien que nous parlions de sélecteurs, le plus grand tueur d’espace de notre réseau est le sélecteur d’attributs. Vous pouvez voir le sélecteur d'attribut en action où j'ai utilisé [classe * = 'bit-']. Ceci cible tous les éléments dont l'attribut de classe contient "bit-". Nous aurions aussi pu utiliser [classe ^ = 'bit-'] qui cible tous les éléments où la classe commence avec "bit-". L'utilisation d'un sélecteur d'attributs pour englober toutes nos différentes classes de colonnes nous fera gagner beaucoup de temps lors de l'écriture de nouvelles largeurs de colonnes..
Une dernière chose à noter est l’utilisation d’un sélecteur de type de dernier type. [class * = 'bit -']: dernier type. Chaque rangée de "bits" sera contenue dans un Cadre élément:
En utilisant le dernier sélecteur de type, nous pouvons cibler le dernier élément "bit-" du groupe, en lui ordonnant de flotter à droite au lieu de gauche. Cela garantit que tout s'aligne parfaitement contre le bord droit, dans les navigateurs compatibles.
Une question fréquente que j'entends beaucoup parler de Lemonade est la suivante: "Pourquoi des noms de classe aussi étranges?" Ce n'est pas une histoire passionnante, je me suis toujours référé aux colonnes comme des "bits" dans mes notes, alors ça a dégénéré. En disant cela, je pense que je souhaitais inconsciemment que les classes soient différentes de la norme "col-1" utilisée dans de nombreux autres systèmes de grille..
J'ai généré les largeurs des colonnes à l'aide d'une calculatrice (vous n'avez pas besoin d'être un nerd mathématique). Calculer les colonnes n'a pas été difficile du tout, en fait, c'était vraiment facile. Par exemple, dans ma grille, chaque bit est une fraction de la largeur totale, le bit 8 est un huitième. Par conséquent, 100 8 = 12,5, nous définissons donc la largeur de chaque bit-8 à 12,5%.
J'ai soigneusement testé chaque section de colonne avec un contenu réel et elles fonctionnent toutes parfaitement sur différents navigateurs et appareils..
/ * Largeurs principales * / .bit-1 width: 100%; .bit-2 width: 50%; .bit-3 width: 33.33%; .bit-4 width: 25%; .bit-5 width: 20%; .bit-6 width: 16.6666666667%; .bit-7 width: 14.2857142857%; .bit-8 width: 12.5%; .bit-9 width : 11.1111111111%; .bit-10 width: 10%; .bit-11 width: 9.09090909091%; .bit-12 width: 8.33%;
Maintenant, comme vous pouvez le constater, les largeurs sont très propres, lisibles et c’est ce que j’avais voulu au départ - vous pouvez facilement voir ce qu’il y a dedans et au besoin, vous pouvez jouer et modifier les tailles avec facilité.
Éditer Lemonade est agréablement simple. Les systèmes de grille sont souvent intimidants lors de la modification, aussi je me suis mis au défi de simplifier les miens autant que possible. La seule règle pour personnaliser Lemonade est la suivante: tant que vos colonnes sont égales à 100%, cela fonctionnera parfaitement. L'ajout de vos propres bits est simple, car les sélecteurs d'attributs prennent en charge la majeure partie de la structure de la grille:
.bit-25 largeur: 25%; .bit-75 largeur: 75%;
Ces deux en combinaison serait bien.
Le rendre réactif était assez difficile; le rendre parfait sur tous les appareils et déterminer les points d'arrêt était extrêmement frustrant. Laissez-moi vous passer en revue le code. J'ai choisi de travailler sur le bureau, plutôt que sur mobile, mais c'est à vous de choisir l'approche que vous préférez..
Nous avons déjà défini nos largeurs de base, nous allons donc cibler les périphériques entre 800 et 1100px:
/ * tablette de base aux petits styles de bureau * / @media (largeur minimale: 800 pixels) et (largeur maximale: 1100 pixels) .bit-2, .bit-7 width: 100%; .bit-4, .bit-8, .bit-10, .bit-12 width: 50%;
Nous pourrions en gros décrire cela comme un ciblage de Landscape Tablet sur le bureau (sachez toutefois que les largeurs de périphérique ne sont en aucun cas figées). C'était aussi important que les autres requêtes des médias - pourquoi? Parce que j'ai constaté que la majorité des utilisateurs de portables 13 "avaient rarement le navigateur en pleine largeur, ils l'auraient à quelques centaines de pixels de la largeur totale, de sorte que ce qui paraît bien sur une tablette Paysage doit bien paraître également sur le bureau..
/ * styles de tablette de base * / @media (largeur maximale: 800 pixels) .bits-4, .bits-6, .bits-8, .bits-10, .bits-12 largeurs: 50%; .bit-1, .bit-2, .bit-3, .bit-5, .bit-7, .bit-9, .bit-11 width: 100%;
Je pense que cette gamme cible le mobile sur la tablette (même si, encore une fois, définir des appareils en fonction de la résolution de l'écran est un terrain rocheux). Pourquoi les points d'arrêt étranges? Rien de trop fou, c’est ce qui a le mieux fonctionné: les grilles sont très fastidieuses en ce qui concerne la rigueur des largeurs, et j’ai trouvé que ces points de rupture fonctionnaient bien à l’état sauvage..
La taille unique des colonnes était assez difficile à créer et c’est en fait ce sur quoi j’ai consacré la plupart de mes recherches; que voyez-vous habituellement sur le bureau qui change radicalement sur le mobile? Principalement du contenu en ligne qui devient un contenu empilé - j'ai donc dû réfléchir à ce qui va probablement être placé côte à côte et ce qui sera empilé les uns sur les autres.
/ * styles de base mobiles - tout 100% * / @media (largeur maximale: 480px) .bit-1, .bit-2, .bit-3, .bit-4, .bit-5, .bit-6 , .bit-7, .bit-8, .bit-9, .bit-10, .bit-11, .bit-12 width: 100%;
Ce point d'arrêt répond à ce que la plupart des gens reconnaîtraient comme mobile. J'ai essayé de faire preuve de plus de créativité en matière de réglage des largeurs pour mobile, mais je sentais que je devais garder la base, car j'imagine que la plupart des gens ne recherchent pas une configuration de métro ou quelque chose de trop fou comme ça..
Le HTML est super simple et c'est ce qui est génial avec cette grille. Pour continuer notre exemple, faisons une colonne de trois grilles (par exemple une galerie).
Voilà, une galerie réactive et compatible avec les navigateurs en trois colonnes. Bien sûr, vous pouvez jouer avec le code HTML et faire tous les types de mises en page..
Construire Lemonade a été une grosse courbe d'apprentissage pour moi, cela m'a appris que si je ne suis pas à l'aise avec quelque chose, je n'ai pas à rester et à attendre des alternatives, je peux créer le mien.!
J'espère que ce tutoriel vous a donné un aperçu de la création de trucs vraiment géniaux. Jetez un coup d'œil à certains sites sauvages pour voir comment d'autres l'ont utilisé:
Si vous avez des questions ou des problèmes, laissez un commentaire ci-dessous ou n'hésitez pas à me tweeter.
Accentsconagua
