Construire avec une grille est devenu une exigence quotidienne pour les développeurs front-end. Les grilles fournissent non seulement un sens du rythme et de la cohérence dans la conception, mais, lorsqu'une structure de grille bien connue est utilisée, elle fournit un langage de conception collectif simple pour le travail entre équipes..

Flexboxgrid est un nouveau cadre qui vous permet de combiner la prévisibilité et la structure linguistique commune d’un système de grille avec la flexibilité et la simplicité de la flexbox. Aujourd'hui, nous allons passer en revue les bases de l'utilisation de Flexboxgrid et l'utiliser pour créer une simple page de portefeuille de flux Dribbble. Commençons!

Commencer avec le CSS Flexboxgrid

La première étape pour démarrer avec Flexboxgrid consiste à récupérer le CSS. Pour le développement, utilisez la version non finifiée.

Ensuite, parlons un peu du fonctionnement de Flexboxgrid. La documentation est entièrement comprise sur la page d'accueil de Flexboxgrid.com, mais nous allons passer en revue les points forts..

Colonnes réactives

Flexboxgrid est conçu pour prendre en charge quatre points d'arrêt principaux, nommés de manière arbitraire pour éviter les problèmes de maintenance des points d'arrêt spécifiques aux pixels. Ces points d'arrêt sont main, tour, bureau, et mur, nommé d'après ce qui est considéré comme étant la largeur des fenêtres des mains, des genoux, des bureaux et des murs (c'est-à-dire: lorsqu'un périphérique est susceptible de se trouver). Les classes de colonnes elles-mêmes sont structurées comme suit:

column- [numéro] - [point d'arrêt] column-4 - hand column-auto - mur

Flexboxgrid est une grille de douze colonnes et utilise des colonnes basées sur des pourcentages en combinaison avec la puissance de flexbox pour une grille solide comme le roc.

Remarque: la prise en charge de Flexbox par le navigateur est encore incomplète; Il ne faut pas compter sur Flexboxgrid pour les projets nécessitant une implémentation complète entre navigateurs.

Une ligne d'exemple

En prenant directement à partir de la documentation, le balisage d’une ligne d’exemple utilisant Flexboxgrid ressemble à ceci:

 
 
Sensible
 
 

Colonnes Auto

Une largeur de colonne "auto" est disponible à chaque point d'arrêt. Cela fait quelque chose de différent d'un traditionnel largeur: auto règle. Flexbox remplit automatiquement la ligne de manière appropriée avec des colonnes de même taille, quel que soit le nombre de colonnes placées dans la ligne..

 
 
auto
 
 
 
auto
 
 
 
auto
 
 

Par exemple, dans l'exemple ci-dessus, les colonnes occuperont un tiers chacune..

Alignement

Flexboxgrid permet de faire beaucoup plus, notamment en alignant les colonnes d'une ligne horizontalement:

ainsi que verticalement:

Flexboxgrid tire également parti des techniques de réorganisation faciles et des options d'espacement dynamique de Flexbox, mais pour le moment, nous allons procéder à la création de notre grille Dribbble.!

Une grille de dribbble

Nous allons commencer par un simple document HTML vide, comprenant jQuery et Normalize. N'hésitez pas à utiliser quelque chose comme HTML5 Boilerplate avec des outils tels que Modernizr, mais pour ce projet, nous resterons concentrés sur JavaScript, HTML et CSS dont vous avez besoin pour écrire vous-même..

À partir de là, nous allons construire la structure du code HTML que nous voulons utiliser, puis nous allons tout brancher avec l'API Dribbble..

Notre grille de calcul

Tout d’abord, supposons que nous voulions mettre en place une grille qui commence au minimum par deux blocs par rangée horizontale et se déplace jusqu’à six blocs par rangée au premier rang. mur point d'arrêt. Voici comment nous accomplirions cela:

colonne 6 - main dicte qu'au main point d'arrêt (pour les dispositifs tenus dans la main), chaque bloc remplira six des douze colonnes. Nous pourrons donc adapter deux miniatures Dribbble sur une rangée de notre mise en page à ce stade..

Au tour point d'arrêt, colonne 4 - tour dicte que chaque bloc aura quatre colonnes de large, nous pourrons donc en insérer trois sur une ligne.

Plus de balisage dynamique

Disons que nous voulons rendre la grille un peu plus dynamique. Voici un exemple de ligne de grille utilisant la largeur automatique et des largeurs variables.

Remarque: dans le point d'arrêt du mur, nous avons en fait une grille de cinq; cela ne serait normalement pas possible avec un système de grille à douze colonnes sans classes personnalisées ajoutées, car douze n'est pas divisible par cinq. Cependant, avec Flexbox, les largeurs de colonne peuvent facilement être calculées automatiquement.

Faire venir Jribbble

Maintenant que nous avons une structure de grille en place, écrivons le code nécessaire pour importer notre contenu Dribbble. Nous utiliserons le plugin jQuery Jribbble. Vous pouvez récupérer la source de GitHub. Jribbble rendra extrêmement facile de tirer des coups de Dribbble.

Incluez Jribbble dans un fichier JS séparé ou dans la partie supérieure de votre script.js. En dessous de Jribbble, ce code vous permettra d’obtenir vos photos Dribbble désirées..

(function () var playerId = "envato"; $ .jribbble.getShotsByPlayerId (playerId, fonction (data) var shots = data.shots; var h = "; $ (shots) .each (fonction (i, shot) h + = '
'; h + = ''; h + = '
'; ); $ ('. dribbble-shots'). html (h); );  ());

Nous encapsulons tout d'abord notre code dans une expression de fonction immédiatement appelée, ce qui nous permet de protéger notre portée JavaScript. Ensuite, nous définissons notre ID de joueur, puis nous utilisons Jribbble pour importer nos tirs. Une fois que nous avons nos plans, nous construisons le code HTML en effectuant une itération sur chaque plan et en remplissant un élément avec la classe. dribbble-shots avec ce html.

Notre structure HTML devrait ressembler à ceci:

         
 
Mes coups de filet
 
 
 
    

Notez que nous avons également inclus une police Google.. 

Style minimaliste

Ensuite, nous fournirons un style minimal en style.css:

body font-family: 'Maven Pro', sans serif; couleur de fond: # f1faff;  h1 font-weight: 400;  * [classe ^ = colonne] / * hauteur maximale: 100px; * / débordement: caché; marge inférieure: 12px;  * [classe ^ = colonne] img width: 100%;  .container width: 80%; marge: 0 auto; position: relative; rembourrage en haut: 100px;  a display: block; opacité: 0,9;  a: survol opacité: 1; 

Votre produit final devrait ressembler à ceci:

Conclusion

Flexboxgrid offre une solution de grille très flexible qui permet un contrôle très intéressant de l’espacement, du dimensionnement, de l’affichage et même de la commande des éléments. Combiné à un contenu attrayant, Flexboxgrid vous permet de faire facilement ce qui était auparavant beaucoup plus compliqué avec votre grille.