Créez facilement des mises en page modernes avec le système de grille Gridlex CSS
Le développement frontend s’est radicalement amélioré avec l’introduction de Flexbox CSS. Cela rend beaucoup plus facile de créer des grilles et des colonnes qui changent naturellement pour des mises en page réactives.
Au lieu de coder votre propre grille Flexbox à partir de zéro, il est beaucoup plus facile d'utiliser un outil tel que Gridlex. Cette librairie flexbox open source gratuite est super léger et très facile à personnaliser.
Tout ce que tu fais c'est ajouter la feuille de style Gridlex sur votre page web et travailler avec ses classes de grille. Les colonnes internes prennent un cours .col et vous enroulez tous ces éléments dans un .la grille récipient. Ceci définit chaque colonne à la même largeur et crée une interface uniforme.
Ce défaut peut être remplacé en ajoutant cours de dimensionnement à chaque colonne. De cette façon, vous pouvez avoir une colonne à 70% de largeur et une autre colonne à 30% de largeur (par exemple, contenu / barre latérale)..
Vous trouverez des tonnes de échantillons de grille sur la page d'accueil de Gridlex avec démos en direct et extraits de code copier / coller sur votre site. C'est une immense bibliothèque avec tant de cours optionnels pour vous aider à construire les grilles les plus simples pour n'importe quel site web.
Toutes les grilles s’ajoutent à un total de 12 mini-colonnes, afin que vous puissiez définir combien d’espace chaque colonne devrait occuper. Cela peut sembler déroutant, mais cela a du sens quand vous voyez les démos visuelles.
Voici un exemple de code utilisé pour une grille plus grande avec des largeurs variables:
………
Notez que le .la grille classe contient tout et les colonnes tentent de divisé en 12 parties (dans l'exemple, cela correspondrait à ⅓ largeur pour chacun). Cependant, les colonnes fixes span 2 et 6 cols respectivement, donc la toute première colonne utilise une largeur automatique basé sur tout ce qui reste.
En utilisant les deux autres colonnes, on peut en déduire qu'il resterait 4 colonnes (12-6-2) à frapper un total de 12. Ce sont des calculs très simples, mais les noms de classe peuvent être déroutants. Une fois que vous commencez à jouer avec Gridlex sur un projet, vous décrivez rapidement le système de nommage..
Gridlex est actuellement dans la version 2.x et son constamment mis à jour sur GitHub. Au fur et à mesure que la prise en charge du navigateur augmente, je garantirai davantage d'attention à la flexbox, avec davantage de sites adoptant ce modèle pour les grilles de pages.
Vous pouvez même trouver un galerie complète des sites Web exécutant Gridlex pour voir à quoi cela ressemble lorsqu'il est appliqué aux sites Web en direct.
Si vous n'avez jamais utilisé flexbox, Gridlex est une bibliothèque amusante à utiliser. Mais je vous recommande également de commencer par vous amuser avec des jeux flexbox amusants pour tester vos connaissances et vous aider à comprendre les principes fondamentaux..
Gridlex est disponible gratuitement dans le dépôt GitHub ou vous pouvez le tirer via npm ou bower. CA offre documentation complète sur le site principal, y compris des démonstrations pour des colonnes de largeur variable et des requêtes multimédia.
Tu as controle total sur la conception de la boîte souple et seulement prend quelques cours de CSS pour y arriver! Et si vous avez une question rapide ou souhaitez partager un site que vous avez créé à l'aide de Gridlex, vous pouvez contacter le créateur sur Twitter @webdevlint..
