Construire des mises en page complexe avec PostCSS-Flexbox

Sep 14, 2025

Comment

[dix] [dix] [dix]

[dix]

Flexbox est un excellent outil permettant de réduire le goot CSS et a du sucre intégré pour faire face à des choses comme la commande source et l'alignement. Mais cela n'offre aucune aide pour faire les mathématiques qui crée des tailles de colonne et de gouttière. Comme beaucoup d'experts indiquent à plusieurs reprises: Flexbox est agréable, mais ce n'est pas un système de grille.

[dix]

Nous devrions utiliser Flexbox, mais nous ne devrions pas jeter les concepts de base derrière les systèmes de grille qui nous ont retiré de l'ère des «géocités» du design:

Faire des colonnes proportionnelles à quelque chose
Utilisez des gouttières cohérentes tout au long de votre conception

Nous pouvons utiliser l'un des nombreux systèmes de grille Flexbox, mais dans toute l'honnêteté, les styles derrière ceux-ci sont la plupart des grandes grilles à base de flotteur. Les auteurs ont simplement ajouté l'affichage: FLEX sur le conteneur, ainsi que des classes d'aide qui obfusent Flexbox Propriétés (par exemple, une classe comme .Grid-vertical-align-hid est une obscusation de Align-items: Centre ).

La seule différence est que maintenant les colonnes sont "fléchies", ce qui signifie que nous obtenons ce sucre que j'ai mentionné plus tôt. Mais cela ne résout toujours pas les principaux problèmes que les grilles sont confrontées aujourd'hui: les systèmes de grille émettent toujours une tonne de BLOAT CSS et les grilles sont toujours ennuyeuses.

25 modèles de site Web de haut en classe

Le problème avec les grilles

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — Système BLOQUE: CSS généré par Bootstrap pour la seule grille est de 16 435 caractères - dont vous n'utiliserez jamais

Les auteurs de la grille distribuent généralement d'énormes packs de CSS pouvant compenser, ordre de source, alignement et redimensionnement en fonction de la taille de l'appareil arbitraire. Ils s'appuient sur GZIP pour atténuer certaines des dégâts, mais cela ne tout fait pas tout. Et si vous n'avez pas besoin de ces fonctionnalités supplémentaires?

[dix]

En supposant que le cadre que vous utilisez actuellement offre des mélanges de grille, la meilleure solution pourrait être d'apprendre ceux-ci et de composer vos propres colonnes. Cela produit peu de gonflement, mais limite vos grilles à des fractions et ne vous propose pas beaucoup de mobilité entre différents cadres.

Sur le deuxième problème. Les concepteurs sont devenus mentalement enfermés pour effectuer toutes leurs décisions sur la base d'une combinaison de colonnes de taille égale. En conséquence, l'Internet entier commence à être flou dans une «pile sur mobile; 1/12 combinaisons de colonnes sur toute autre dystopie.

Flexbox introduit flexibilité , qui nous ont un peu libéré. Maintenant, nous pouvons définir des tailles qui ont l'air bien et remplissent l'espace restant avec un élément étiré, mais les gouttières sont-elles alignées de manière cohérente dans la page? Les domaines de contenu sont-ils aménagés avec une sorte de proportions à l'esprit, ou sommes-nous de retour à l'aperçonner?

Entrer dans le dragon

La solution à ces deux problèmes est enveloppée dans une fonction appelée postcss-ant. Les plugins POSTCSS peuvent être utilisés avec une gamme d'outils de construction tels que WebPack, Gulp ou simplement la ligne de commande. fourmi mélange de manière transparente en CSS uni (ou tout préprocesseur) avec une API de manière trompeuse qui masque des dizaines d'huisson d'esprit calcaire formules. Il nécessite deux paramètres de type mixin pour chercher une pléthore de tailles respectueuses de la grille.

Un exemple peut rendre cela plus clair: largeur: tailles (1/2) obtenez (1) Retour Calc (99,99% * 1/2 - (30px - 30px * 1/2)) . Passons ça en bas:

tailles () est une liste de tailles séparées par l'espace. Celles-ci peuvent être une combinaison de différentes tailles: des nombres fixes sous la forme de longueurs CSS valides ( px , em , % ); les fractions ou les nombres de flotteurs (qui renvoient tout ce qui est restes, sans nombre fixe); et auto Mots-clés (qui rendent la taille de la taille, sans fractions et chiffres fixes)
cueillir() est un index basé sur 1 qui récupère une taille respectueuse de la grille de votre liste. Alors tailles (1px 2px 3px) obtenir (2) retournerais 2px
Le calcaire La formule est une taille conviviale de la grille

Nous obtenons la largeur de chaque colonne dans une grille à deux colonnes avec une gouttière unique de 30 px entre eux:

.la grille {
  Affichage: flex;
  Flex-Wrap: enveloppe;
}

.demi {
  largeur: tailles (1/2) obtenez (1); / * retourne calc (99,99% * 1/2 - (30px - 30px * 1/2)) * /
  marge-droit: 30px; / * met une gouttière sur le côté droit de chaque colonne * /
}

.HALF: Nth-enfant (2n + 2) {/ * commence au 2e élément et commence à compter par 2s * /
  Marge-droite: 0; / * supprime la dernière gouttière de chaque rangée * /
}

Cela donne déjà des concepteurs le pouvoir d'utiliser ces tailles partout où ils voient en forme, mais plongons plus profondément.

tailles (100px 1/2) obtenez (1) Retour 100px . Assez simple, mais pourquoi devrions-nous utiliser une fourmi pour revenir 100px ? Nous allons arriver à cela dans une seconde.

tailles (100px 1/2) obtenez (2) Retour Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) . Sainte Crap. Ant découvre la taille totale des nombres fixes, puis revenant 1/2 de tout ce qui est laissé trop - d'une manière de la nième réseau.

Nous pouvons utiliser ces calcaire formules pour créer une grille avec un 100px colonne et deux 1/2 colonnes comme si (je vais omettre le .la grille Styles pour sauver des arbres, mais assurez-vous de les inclure dans votre code):

 .Fixé-taille {
  largeur: tailles (100px 1/2) obtenez (1); / * retourne 100px (je sais qu'il semble idiot mais supporte avec moi un peu plus longtemps) * /
  marge-droit: 30px;
}

.demi {
  largeur: tailles (100px 1/2) obtenez (2); / * retourne calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  marge-droit: 30px;
}

.HALF: NTH-Child (3n + 3) {
  Marge-droite: 0;
}

Maintenant, nous pouvons obtenir des tailles déjà irréalisables, mais ce n'est pas encore super flexible et peut nécessiter beaucoup d'écriture lorsqu'il s'agit de nombreuses tailles.

[dix]

Boucle de préprocesseur

Minimal markup: A minimal markup, two-column, nth grid using postcss-ant. Notice how there is no margin-right on the last element in the row — Marquage minimal: balise minimale, deux colonnes, nième grille à l'aide de PostCSS-ant. Remarquez comment il n'y a pas de marge-droit sur le dernier élément de la rangée

Les préprocesseurs et les postes postales ne s'entendent pas toujours - surtout lorsque la syntaxe personnalisée est impliquée. Heureusement, l'API de la fourmi est favorable au préprocesseur. Nous pouvons utiliser un parseur PostCSS-Parser comme PostCSS-SCSS avec un plug-in PreySSS, mais cette approche utilise beaucoup de plug-ins non finis / non sous-finis / hométacés qui mimalement Mimic Sass 'Fonctionnalité. J'ai trouvé le meilleur flux de travail est de:

Utilisez un préprocesseur rapide comme Node-Sass pour regarder in.scss à out.css
Utilisez PostCss pour regarder out.css à final.css
& lt; link & gt; à final.css Dans votre balisage

Cela vous donne le meilleur de la syntaxe de préprocesseur avec tous les plugins PostCSS que vos désirs du coeur.

Maintenant pour les choses cool. Les préprocesseurs ont généralement un moyen de boucler un nombre spécifié de temps tout en fournissant un itérateur:

 @for $ i de 1 à 3 {
  Contenu: $ i; // retourne le contenu: 1; Contenu: 2; Contenu: 3;
}

Avec une petite connaissance des préprocesseurs, vous pouvez commencer à utiliser la fourmi de manière vraiment intéressante ...

 $ Tailles: 100px 1/2 1/2;
$ gouttière: 30px;
$ Longueur: longueur ($ tailles);

.Column {
  marge-droit: $ gutter;

  @for $ i de 1 à $ longueur {
    & amp;: nth-enfant (# {$ longueur} n + # {$ i}) {
      largeur: tailles ($ tailles) Obtenez ($ i) gouttière ($ gouttière);
    }
  }

  & amp;: nth-enfant (# {$ longueur} n + # {$ longueur}) {
    Marge-droite: 0;
  }
}

Maintenant, nos colonnes de taille irrégulière enveloppent les nouvelles lignes sans marquage supplémentaire. Allez-y et bricolez avec ce code. Essayez de varier de tailles, de gouttières et d'ajouter de nouvelles tailles (comme 100px Auto 100px).

C'est un modèle assez courant avec la fourmi, donc j'ai enveloppé dans une propriété qui fonctionne avec Vanilla CSS aussi:

 .grid {
  générer-grille: tailles (100px 1/2 1/2); / * Vous pouvez passer des options supplémentaires, mais le cueillette () n'est plus nécessaire. * /
}

Beaucoup d'options

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible — Boucles de préprocesseur: la fourmi commence vraiment à montrer sa force lorsque nous le combinons avec des boucles de préprocesseur pour créer des mises en page utilisées pour être impossible

Les nth grilles sont formidables lorsque vous connaissez la taille et le nombre d'éléments à passer, mais vous voudrez parfois créer un conteneur et vider des éléments de taille au hasard là-bas. Dans ces cas, marge négative Les grilles sont votre meilleur pari. Passer simplement marge négative Attendez de comme ça:

 .grid {
  marge: 0 -15px;
}

.Column {
  largeur: tailles (1/3) obtenir (1) grille (marge négative);
  marge: 0 15px;
}

Conclusion

Ces exemples n'étaient qu'un petit aperçu de toutes les choses cool postes-ant peuvent faire. Il dispose d'un couple de paramètres plus facultatifs et de nombreuses tâches d'erreur descriptives, mais vous êtes vrai pouvoir.

Les outils «muettes» qui renvoient simplement un peu de données sont toujours les meilleurs outils, car ils remettent le courant dans les mains du développeur. C'est ce que PostCsS-ant a été conçu pour faire. Si vous êtes intrigué, dirigez-vous vers Corysimmons.github.io/postcsss-ant Pour certaines démos fondues et doux docs.

Cet article a été publié à l'origine dans le numéro 286 du magazine Net, Achetez-le ici.

Articles Liés:

Pourquoi la conception web nécessite des experts ux
10 meilleurs livres de conception de web pour Noël 2016
3 Top outils pour tester les performances Web

[dix] [dix]

[dix]

Construire des mises en page complexe avec PostCSS-Flexbox

Le problème avec les grilles

Entrer dans le dragon

Boucle de préprocesseur

Beaucoup d'options

Conclusion

Comment - Most Popular Articles

Jamstack: Construisez des sites plus rapides et plus efficaces aujourd'hui

Style Un site utilisant Sass

Comment réaliser un meilleur éclairage avec V-ray

Comment créer des mondes colorés qui racontent une histoire

Créer des brosses personnalisées dans le clip Studio Peinture

Comment peindre des runes brillantes magiques

Faire une double exposition dans Photoshop

Créer une perspective en déformant vos textures dans Photoshop

Catégories