Div#navbar ul ( style de liste : aucun ; affichage : bloc ; marge : 0 10px ; ) div#navbar ul li ( float : gauche ; marge : 0 1.5em ; police : gras 1em Arial ; )

Cool! Tout va bien pour nous. Il ne reste qu'un bloc avec une affiche et une présentation du site, mais avant de commencer à les implémenter, je voudrais dire quelques mots sur les frameworks CSS en général.

3. Les frameworks CSS ne résoudront pas tous vos problèmes

Avant de commencer à concevoir votre conception à l'aide d'un framework CSS, vous devez prendre en compte certains des inconvénients de ces systèmes. En lisant cet article, vous n’avez pas pu vous empêcher de remarquer que les règles de création d’une page sont très strictes. Chaque chose a sa propre taille fixe. Lorsque vous modifiez la largeur d’un bloc, vous devez en modifier d’autres. Dans tous les cas, il faut sacrifier quelque chose. Par exemple, que ferez-vous si vous avez un design de 1000px et que 960 Grid vous permet de créer une largeur maximale de 960px... Et vous voulez 1000px ! Sans un changement massif du code, cela est impossible à mettre en œuvre. Par exemple, le client souhaitait un site plus large ou le concepteur n'est pas d'accord avec votre mise en œuvre. Il y a un autre problème concernant la hauteur des enceintes. Si trois colonnes ont la même couleur de fond (comme notre footer), il faut que ces colonnes aient la même hauteur. Autre inconvénient non négligeable : l'utilisation de retraits supplémentaires et la création de cadres entraînent la destruction de l'ensemble du layout. Afin d’ajouter ce qui est nécessaire et de ne rien détruire, il faut compenser les dimensions ajoutées. Maintenant, je vais vous montrer comment. Commençons par terminer la partie supérieure.

4. Partie supérieure

Tout d'abord, résolvons le problème de la hauteur de la colonne - corrigez-le. Ensuite, créons des div vides dans l'un et l'autre bloc. Ils contiendront une image ou un texte d’information. Nous ne définirons pas de rembourrages internes car... vous pouvez modifier la proportion de la largeur de la grille. Créons un petit retrait extérieur pour les balises p afin que le texte soit joli.

Dans ce cas, il est préférable de créer une classe pour le style plutôt qu'un ID, car nous devons l'appliquer à plusieurs blocs. Si nécessaire, cela nous permettra également de modifier la hauteur en 2 temps. Voici à quoi ressemblent nos cours :

Div.topSection div ( bordure : solide 10px #e5e5e6 ; hauteur : 280px ; ) div.topSection div p ( marge : 10px ; )

Cool! Voyons ce que nous avons obtenu :

Prêt à remplir ? Ajoutez ensuite du texte dans le bloc de gauche, mais n’en faites pas trop pour ne pas dépasser la hauteur. En fait, dans les projets réels, le concepteur doit calculer tout cela (le nombre de caractères qui satisfera la taille du bloc) ; Avant d'insérer une image dans le bon bloc, vous devez décider de ses dimensions, si ce n'est pas déjà fait. Cela peut être fait dès le début du développement de la conception ou via FireBug. Cliquez sur Inspecter. Cliquez sur le div dont nous avons besoin. Sélectionnez l'onglet Mise en page. Après cela, vous verrez toutes les informations dont vous avez besoin. L'image suivante vous aidera :

Dans la capture d'écran, l'affiche mesure 360x280. Trouvez une image et stylisez-la :

Img#poster (largeur : 360 px ; hauteur : 280px ; )

C'est ça! Le modèle est prêt. Il ne reste plus qu'à le remplir de contenu réel et à le mettre en ligne :

5. Connaissez vos options

Maintenant que tout est prêt, résumons. 960 Grid nous a permis de riveter un gabarit en 15 minutes. Cool? Oui! L'avons-nous testé dans IE6, IE7 ? Non! Devrions-nous ? Non. Ce n'est que le début ! Que faire maintenant ? Vous devez maintenant le montrer au client et voir sa réaction. S'il en est satisfait, nous pouvons alors commencer les tests, mais sinon et que le client veut quelque chose de plus compliqué, il devra alors tout écrire lui-même à partir de zéro. Je vais le répéter encore. Les frameworks CSS ne résolvent pas tous les problèmes. Malgré cela, des milliers de développeurs les utilisent comme outil de développement Web classique car, comme tout outil, les frameworks CSS ont leur propre domaine pour une large application. Dans tous les cas, si les demandes de conception ne sont pas très spécifiques (80 % des cas), alors en utilisant 960 Grid, vous pouvez gagner beaucoup de temps - et le temps, c'est de l'argent !

Imaginez que des invités viennent chez vous et que des objets sont éparpillés dans votre appartement. Comment pensez-vous pouvoir « ranger » rapidement si vous n’avez pas le temps de nettoyer ? La réponse est simple : vous devez disposer les choses en petits tas. Cela créera immédiatement un sentiment d'ordre, l'appartement aura l'air bien rangé.

Une grille modulaire, qui est un ensemble de guides, fonctionne de la même manière. Les guides (généralement verticaux et horizontaux) forment une sorte de cadre. Disons ceci :

Oui, il n’y a pas de règles, mais il y a du bon sens. En d’autres termes, vous devez d’abord réfléchir à l’utilité du réseau, puis le construire seulement. Par exemple, le cadre dessiné ci-dessus peut servir d'excellent terrain pour jouer au tic-tac-toe ;)

D’ailleurs, le résultat de l’utilisation d’une grille peut être… la grille elle-même. Un exemple est celui des peintures de Piet Mondrian, qui a construit des compositions basées sur une grille spatiale librement construite qui remplissait la toile.

Un exemple frappant d'option intermédiaire, lorsque la grille fait à la fois partie de la conception et résout un problème spécifique, est l'interface du système d'exploitation mobile Windows Phone.

Alors, sur quoi pouvez-vous et devez-vous vous appuyer lors de la création d’une grille modulaire ?

Construire une grille modulaire

Très souvent, dans les articles sur les grilles modulaires, vous pouvez tomber sur une phrase qui ressemble à ceci :

N'insérez pas le design dans une grille ; au contraire, créez une grille qui s'adapte au design.

À première vue, tout semble correct : la grille est avant tout un outil de travail qui n'a aucun sens sans un mode d'emploi décrivant la disposition des principaux éléments (texte, images, etc.).

Cependant, comme le montre la pratique, les deux options sont possibles et ont lieu :

• Le design s’inscrit dans la grille ;
• La grille est créée selon le design.

Considérons chacun d'eux séparément.

Premier exemple : vous devez créer une conception de site Web pour une revue scientifique. Dans le même temps, le client souhaite que le magazine soit le « visage » du site et demande à le placer sur la page principale. La couverture n'a pas l'air très belle, c'est un euphémisme :

Nous ne discuterons pas de la valeur artistique de cette couverture. Concentrons-nous mieux sur l'exécution - c'est clairement nul :

• On a le sentiment que les éléments ont été « esquissés » à la hâte sur le plan de la page, leurs positions ne sont en aucun cas justifiées ;
• Les dimensions du tracé sont incommensurables et disproportionnées ; on ne sait pas ce qui détermine telle ou telle taille ;
• Il n'y a pas d'accents, les marges sont étroites, les objets entrent en conflit les uns avec les autres, le regard erre sur la couverture ;
• Travail analphabète avec du texte, tant en termes de polices (l'auteur en a compté au moins 5) qu'en termes de typographie (il y a des « trous » entre les éléments individuels dans la liste des articles clés) ;
• Couleurs « sales ».

De toute évidence, quelle que soit la qualité de la conception d’un site Web que nous proposons, une telle couverture ne le réduira à rien. Il faut y penser et la grille nous y aidera. Prenons comme base la hauteur de la bande bordeaux (7 mm) et dessinons une grille avec un pas vertical et horizontal similaire. À propos, les bandes supérieure et inférieure « tombent » miraculeusement dedans.

La grille démontre clairement le caractère déplorable de la situation : les objets ne sont pas alignés les uns par rapport aux autres, ont des tailles incompréhensibles, en général, « certains sont dans la forêt, d'autres pour le bois de chauffage ».

Pour remettre de l’ordre, insérons le design dans la grille, en prenant juste en compte une petite nuance. Les éléments individuels (nom du magazine, logo APEL, numéro) sont surdimensionnés, ce qui donne à la couverture un aspect lourd. Réduisons le pas de la grille de 1 mm, cela nous donnera au final un design léger et homogène dans la perception :

Couvrir avec une grille ou sans maille

• Les éléments sont disposés sur une grille et sont proportionnels les uns aux autres, de bonnes marges larges sont apparues ;
• L'accent principal est mis sur le titre du magazine ;
• Les polices et la typographie ont été corrigées, ce qui, avec la grille, nous donne une solution complète.

En conséquence, nous obtenons cette magnifique image pour la page principale du site :

Passons à autre chose. Dans l'un des articles précédents, l'auteur a évoqué en détail les étapes de création d'un site Web de cartes de visite. Lisez-le si vous ne l'avez pas déjà fait et faites attention à la façon dont le design est construit : les objets sur la page sont placés séquentiellement - du général au spécifique, des éléments principaux aux éléments secondaires.

Avec cette approche, lorsque la mise en page est déterminée par la tâche, les éléments sont généralement situés sur la page « à l'œil nu », mais ils « dansent » les uns par rapport aux autres ; Encore une fois, il n'est pas clair sur quoi se concentrer lors du choix de la taille des images, des blocs de texte, etc. Dans une telle situation, intégrer le design dans une grille nous aidera à nouveau.

Tout concepteur de mise en page confronté à la prochaine tâche consistant à créer une mise en page adaptative a besoin de grilles. Dans la plupart des cas, le bon vieux bootstrap est utilisé et les divs avec des classes comme col-xs-6 col-sm-4 col-md-3 commencent à apparaître dans le HTML. Et tout semble aller bien et rapidement, mais dans cette approche, il y a souvent de nombreux pièges. Dans cet article, nous examinerons ces pièges et jetterons des tomates pourries à notre hack pour des grilles sans problème.

Problèmes

Grilles non standards

Du coup, notre maquettiste a très peu de temps, la mise en page brûle, tout doit être fait hier. Par conséquent, il prend comme base le populaire framework CSS bootstrap et commence son travail. Et puis, au milieu de son travail, il tombe soudain sur un bloc de banderoles « 5 à la suite ». Quiconque a travaillé avec bootstrap sait que sa grille par défaut est 12x, donc 5 colonnes d'affilée ne peuvent pas être créées avec une grille bootstrap standard. Oui, bien sûr, vous pouvez assembler un maillage arbitraire dans bootstrap, mais c'est une perte de temps, télécharger des dépendances, collecter moins (et nous, par exemple, écrivons en sass).

Peut-être connecter une bibliothèque pour des grilles personnalisées ? En général, c'est une bonne solution, le seul inconvénient de cette approche est que presque toutes sont conçues soit pour une écriture longue et fastidieuse de @media(min-width:)() , soit pour générer leur propre ensemble de classes, avec un un tas de col15-xs-offset-3 probablement inutiles, qui seront inclus dans le CSS final.

Par conséquent, avec une forte probabilité, le maquettiste écrira simplement tous les styles manuellement (en principe, il n'y a pas grand-chose à écrire là-bas).

Très souvent, une grille d'amorçage standard manque de points d'arrêt supplémentaires, c'est-à-dire qu'il y a xs, sm, md, lg - tous jusqu'à une largeur de 1 200 px. Qu’en est-il des grands moniteurs ? Certains points d'arrêt xl à 1600px ne demandent qu'à être inclus dans l'ensemble standard. Mais encore une fois, ce n'est pas là, et les mêmes options de solution se présentent que dans le paragraphe précédent. Mais il peut y avoir beaucoup de points de contrôle - 320, 360, 640, 768, 992, 1200, 1600, 1900...

Redondance et verbosité

Et ici, nous abordons progressivement le problème suivant. Imaginez que vous deviez spécifier différentes tailles de bloc pour chaque grille, vous obtiendrez alors quelque chose comme ceci :

Est-ce trop ? Ajoutez ici les possibles pull/push et visible/caché et vous pourrez alors commencer à devenir fou en toute sécurité. Mais toutes ces classes sont écrites en CSS, imaginez combien de classes doivent être écrites en CSS pour toutes les combinaisons d'une grille de 60 fois !

Séparer les styles du balisage

Tout concepteur de mise en page sait que les styles en ligne sont mauvais. Alors pourquoi écrivons-nous des styles dans les classes de balisage ? col-xs-6 , visible-sm et Dieu nous en préserve, text-right - ce sont tous des styles, et s'il est nécessaire d'apporter des modifications à la mise en page qui a déjà été présentée, un problème surviendra certainement que le concepteur de mise en page devra demander au concepteur backend de changer col-sm-6 en col-sm-4.

Remplacer les styles inutiles

Souvent, l'ensemble du framework CSS est inclus uniquement pour le plaisir des grilles et de quelques petites fonctions, ce qui entraîne ensuite une réinitialisation excessive des styles et une double taille du CSS final. Par exemple, l'intégralité de bootstrap.min.css est connectée, puis les ombres et les coins arrondis de .btn, .form-control et autres sont joyeusement supprimés, y compris :hover, :focus, :first-child . En conséquence, au lieu d’aider, le cadre commence à interférer. Sans parler des fonctionnalités souvent inutiles comme .glyphicon . Bien sûr, vous pouvez à nouveau assembler le bootstrap à partir de ce dont vous avez besoin, mais il est encore temps.

Normes et styles de code des autres

Disons qu'un maquettiste a étudié BEM et a commencé à l'utiliser. Mais la nécessité d'utiliser le bootstrap dicte ses exceptions - toutes les classes y sont écrites avec un trait d'union, ne suivant pas les principes de BEM. Et ici, le problème du choix se pose - soit accepter le fouillis de noms de classe (btn-block désactivé composant__btn composant__btn_disabled), soit jeter le bootstrap.

Méthodes obsolètes

Comme vous le savez, les grilles de Bootstrap 3 sont basées sur des flotteurs. Ce qui pose souvent des problèmes, l'un des plus courants est la hauteur différente des blocs, à la suite de laquelle la belle grille « se brise ». Arrêtez d'utiliser les flottants à d'autres fins ; tous les navigateurs qui ne prennent pas en charge flexbox sont presque éteints !

Susie ! - est-ce une issue ?

À la recherche d'une solution à tous les problèmes énumérés ci-dessus, je me suis tourné vers le merveilleux framework de grille Susy ! Dans l'ensemble très bien. Mais je n'avais pas assez de vitesse, parce que Susy ! suggéré de décrire les colonnes pour chaque point d'arrêt séparément :

C'est Susy ! suppose que vous gérerez vous-même les points d’arrêt. Aussi, Susy ! n'écrit pas l'affichage : flex pour les lignes pour vous, vous devez vous rappeler de les écrire vous-même. Les retraits entre les colonnes sont définis uniquement de manière relative (il ne sera pas possible de les fixer en pixels). De plus, il a récemment appris flex, et avant cela, il a construit des grilles en utilisant float et:nth-child() . En général, Susy ! c'est bien, mais j'aimerais rapidité et facilité de description des grilles pour tous les points d'arrêt, comme ce fut le cas avec le bootstrap.

La recherche d'autres systèmes de grille n'a pas non plus donné beaucoup de résultats - tout le monde suit soit le chemin susy!, en oubliant les points d'arrêt, soit le chemin d'amorçage, fournissant un ensemble de classes générées pour gérer les grilles en HTML.

Fabrication de vélos

Il a donc été décidé d’écrire quelque chose de notre propre initiative, et c’est ainsi qu’est né le fast-grid. Comme Susy, elle est construite sur l'audace. Quels sont les principaux avantages qu'elle apporte par rapport aux autres solutions, notamment susy!? Tout d’abord, la vitesse due à moins de code, prenons un exemple de bootstrap standard :

En utilisant fast-grid, une telle grille est très simple à décrire :

Passons maintenant en revue nos lacunes et voyons comment le réseau rapide résout tous ces problèmes.

Grilles non standards

La nécessité de votre propre ensemble de points d'arrêt

Redondance et verbosité / Séparation des styles du balisage

fast-grid est un framework de grille à utiliser en CSS plutôt qu'en HTML basé sur des ensembles de classes générés. Cela permet de séparer le balisage des styles, ce qui est bénéfique pour le support futur. Cela élimine également le besoin de générer un ensemble de classes d'assistance (.col-xs-push-4, etc.) qui sont pour la plupart inutilisées.

Remplacer les styles inutiles

Puisque fast-grid est un ensemble de mixins, il ne génère lui-même aucune règle en CSS. Par conséquent, ici, vous ne rencontrerez pas le fait que le framework stylise les éléments d’une manière dont vous n’avez pas besoin. Et en général, ce ne sont que des grilles, et rien de plus.

Normes et styles de code des autres

fast-grid est les mixins que vous devez utiliser en interne le vôtre classes, avec les noms que vous préférez. Aimez-vous BEM? Pas de question !

Méthodes obsolètes

La valeur par défaut est flexbox, qui ouvre de nombreuses possibilités et résout les problèmes des flotteurs classiques. Par exemple, vous pouvez facilement modifier l'ordre des colonnes.

Dans l'exemple ci-dessous, nous affichons une barre latérale sous le contenu principal pour la version mobile et en faisons le premier bloc sur les grands écrans.

Bien sûr, cela pourrait être réalisé en utilisant tirer/pousser pour flotter, mais c'est une très béquille.

Conclusion

En général, la tâche qui m'était assignée a été accomplie - désormais les grilles ne me posent plus aucun problème et la mise en page est rapide et facile. Vous pouvez en savoir plus sur les capacités de fast-grid dans le référentiel et consulter des exemples :

Utilisez-vous toujours bootstrap ? Alors nous venons vers vous !

Balises :

• css
• toupet
• grille

Tout ce qui nous entoure a ses propres proportions. Même enfant, le dessin animé « 38 perroquets » nous a appris que tout peut être divisé en parties égales les unes aux autres (la longueur du boa constrictor était composée de 38 perroquets). Nous savons également tous que la taille d’une personne est égale à sept têtes, qu’un centimètre est composé de dix millimètres, qu’un mètre est composé de cent centimètres, et ainsi de suite. Ainsi, un perroquet de dessin animé, une tête humaine, un millimètre et un centimètre sont des modules.

De tout cela on peut comprendre qu'un module est une unité conventionnelle, une étape dans le rythme de la grille. Et la grille elle-même est un système de proportions.

Comment cette grille modulaire va-t-elle nous aider ? Premièrement, cela accélérera le travail, car nous n’aurons pas à passer beaucoup de temps à essayer de disposer harmonieusement tous les éléments. Deuxièmement, à l’aide de la grille, nous pouvons comprendre quel point nous devons utiliser et quelle doit être la taille de chaque bloc. De manière générale, une grille modulaire est un framework qui facilite grandement la construction d’un site internet.

Voyons ce que sont les maillages.

1. Le type le plus simple est une grille de blocs. C'est-à-dire qu'elle fait un marquage grossier, divisant la zone en blocs.

3. La grille modulaire présente non seulement une division verticale, mais également une division horizontale. Ainsi, ce qui est obtenu aux intersections des lignes est le module.

4. Il existe également une grille hiérarchique dans laquelle les blocs sont placés intuitivement et ne suivent aucun modèle.

Alors, comment créer une grille modulaire.

1. Tout d'abord, nous devons comprendre quelle fonction notre site devra remplir, nous identifions sa structure et la composition des pages. Ensuite, nous déterminons quelles pages seront les plus importantes et le travail commencera par elles. Pour eux, nous créerons une liste de fonctionnalités et la trierons par priorité.

Il faut décrire chaque bloc de fonctionnalités et le détailler dans les moindres détails. Le résultat devrait être une liste dans laquelle les blocs et leurs éléments sont répertoriés par niveau. Ainsi, nous avons maintenant des puzzles sortis de la boîte, et tout ce que nous avons à faire est de les assembler pour former une image complète.

3. Nous commençons à construire le maillage en déterminant la taille de la zone de travail. Ensuite, nous devons créer la grille de polices. Pour ce faire, sélectionnez la hauteur de ligne, qui doit être la même pour l'ensemble de la mise en page. Dans les éléments dont la taille de police est différente de celle du texte principal, l'espacement des lignes doit être un multiple de notre hauteur de ligne.

Ainsi, nous obtenons la base de notre futur maillage. Tout le texte reposera sur cette base.

4. Nous devons maintenant décider de la largeur de notre module. Ici, nous pouvons partir de la largeur de n’importe quel élément permanent. Si vous avez pour tâche de placer des éléments identiques sur toute la largeur de la page, alors tout devient encore plus simple, car vous connaissez déjà ses dimensions.

Pour plus de commodité, nous devons déterminer quelle sera la distance entre les modules. Elle doit être égale à au moins une hauteur de ligne du paragraphe précédent.

Il y a une mise en garde : vous devez choisir les bonnes tailles de modules, car s'ils sont trop grands, la flexibilité du maillage disparaîtra, et s'ils sont petits, le maillage sera tout simplement perdu.

5. La division horizontale est assez simple à réaliser. Sa hauteur doit être un multiple de la hauteur de notre ligne. Et le nombre de lignes que vous insérez dans une division dépend de votre esquisse.