Share
960gs était super! Lorsque la majorité des visiteurs de votre site utilisaient des ordinateurs de bureau avec des moniteurs d’une largeur d’au moins 1024 pixels, 960 g rendait la conception d’un site en code simple et simple. Cependant, avec l'avènement de la prolifération des périphériques et de la prévalence des requêtes dans les médias, les sites à largeur fixe sont nettement moins efficaces que les présentations dynamiques..
Dans ce document, je vais décrire comment utiliser votre site à largeur fixe de 960 g et le déplacer vers le framework Foundation de ZURB. Sans trop m'éloigner du sujet, je veux être juste avec 960gs et mentionner Adapt.js, la réponse de ce cadre à une conception Web réactive. Maintenant, cet article couvrira les bases de la grille Foundation, comment elle se compare à la grille de 960 g et quelques options supplémentaires avec Sass de la Fondation. Pour ce tutoriel, je suppose que vous connaissez déjà 960gs et que vous considérez Foundation comme un moyen d'obtenir un design réactif..
Pour commencer, vous devez comprendre les concepts de base des lignes et des colonnes dans Foundation. La convention de 960gs consistait à utiliser un méga conteneur et à utiliser chaque combinaison de DIV pour créer une ligne. Ainsi:
Vous pourriez avoir un jeté entre les DIVs de grille qui totalisent 12, mais c'est optionnel. Cette disposition produirait en effet deux lignes avec deux colonnes divisant la largeur disponible de manière égale. Si vous ajoutez alpha et oméga classes, il va respectivement dépouiller le extra marge gauche et marge droite.
Dans les classes HTML prédéfinies de Foundation, cette même présentation serait réalisée par l'extrait de code suivant:
Il n’existe pas de méga-conteneur pour Foundation, mais des lignes et des lignes contenant des colonnes. Le nombre total de colonnes doit être égal à 12. Chaque colonne est définie en ajoutant les éléments suivants: des colonnes classe accompagnée d'au moins une classe pour dicter la largeur de cette colonne.
Pour aller sur une courte tangente, pour ce que cela vaut, la grille de Foundation est similaire aux lignes et étendues de Twitter Bootstrap, à l'exception que Foundation vous donne le pouvoir de définir la largeur des colonnes à plusieurs points d'arrêt..
Vous remarquerez la notation moyen-6. Cela signifie qu'au point d'arrêt moyen (quelle que soit sa définition, la valeur par défaut est 641 pixels), vous verrez apparaître six colonnes d'une largeur égale à la moitié de la largeur disponible. Une autre classe peut être ajoutée pour indiquer combien de colonnes de largeur le div devrait prendre à d'autres points de rupture, y compris petit et grand. Voici à quoi cela ressemblerait:
Fondation est premier mobile. Code pour les petits écrans en premier, et les plus gros appareils hériteront de ces styles. Personnaliser pour les grands écrans si nécessaire. la source
Par défaut, Foundation est conçu dans un premier concept mobile. Ce que cela signifie pour les grilles, c’est que le petit La classe peut être utilisée seule pour définir la largeur d'une colonne au petit point d'arrêt. Tous les points d'arrêt précédents en hériteront dès lors qu'un moyen ou grand la classe n'est pas présente. D'un autre côté, si vous utilisez simplement un moyen classe, les petits points d'arrêt par défaut transformeront les DIV en lignes empilées à une seule colonne (équivalent à petit-12) qui est la valeur par défaut appliquée aux colonnes du petit point d'arrêt.
Compte tenu de tout ce qui précède, voici les principes de base pour changer votre marge bénéficiaire. Premièrement, la div avec le récipient la classe peut être supprimée. Ensuite, autour de votre la grille_# DIVs qui forment des "lignes", vous devrez créer un div avec la classe rangée. Les DIV individuelles contenant la grille les classes peuvent être changées en moyen-#.
Cela vous donnera quelque chose qui ressemble énormément à votre ancienne mise en page de 960 g pour les fenêtres au-dessus de 640 pixels et au-dessous de cette largeur; vous aurez juste des piles de lignes sur toute la largeur, ce qui signifie que chaque colonne div passera à 100% largeur.
Voici quelques autres concepts de 960g traduits dans le langage de la Fondation:
En 960g, la nidification peut être réalisée en ajoutant alpha à la première colonne de votre ligne et oméga à votre dernier, en supprimant efficacement les marges horizontales. Lorsque vous utilisez cette approche, vos lignes imbriquées devaient correspondre à la somme de la largeur de la colonne dans laquelle les colonnes imbriquées vivaient..
Dans Foundation, l'imbrication est faite pour vous, il vous suffit d'insérer une ligne à l'intérieur d'une colonne. Aucun cours supplémentaire requis. L’autre principale différence est que chaque rangée de nids suppose 12 nouvelles colonnes dans l’espace disponible. Donc, une rangée à l'intérieur d'un moyen-6 vous permettra de diviser ces six colonnes en 12.
Les classes de préfixes et suffixes de 960gs étaient d’excellentes classes d’utilitaires pour la création d’espaces vides dans votre mise en page et un moyen de centrage. Foundation a les mêmes capacités, avec des compensations.
C'est en fait à peu près la même chose dans les deux cadres. L'ordre des sources vous permet de créer vos colonnes dans l'ordre que vous voulez dans votre code HTML actuel, mais de les afficher dans un ordre différent de gauche à droite. Pour cela, vous pouvez utiliser pousser et tirez Des classes.
Foundation couvre toutes les capacités de 960g et bien plus. Consultez la documentation pour en savoir plus sur tout ce que vous pouvez faire..
Eh bien, c’est la raison principale pour laquelle vous passez à quelque chose comme Foundation: la réactivité. Vous connaissez grand, moyen et petit points d'arrêt, mais il y a aussi xgrande et xxlarge. Voici à quoi ces classes de points d'arrêt se rapportent:
| Point d'arrêt | Largeur de la fenêtre |
|---|---|
| petit | < 40em (640px) |
| moyen | 40.063em (641px) < 64em (1024px) |
| grand | 64.063em (1025px) < 90em (1440px) |
| xgrande | 90.063em (1441px)> 120em (1920px) |
| xxlarge | > 120.063em (1921px) |
Notez que seul le petit, moyen et grand Les points d'arrêt peuvent être utilisés dans votre code HTML. Si vous avez besoin d'utiliser xgrande ou xxlarge, ou si vous souhaitez personnaliser ces points d'arrêt, vous pouvez utiliser le travail avec Sass pour adapter Foundation à vos besoins..
Foundation est conçu pour fonctionner avec Compass et Sass. Si vous êtes à l'aise avec Sass, cela peut faciliter le développement. En savoir plus sur comment démarrer avec Sass et Foundation.
Le principal avantage de l'utilisation de Sass est qu'au lieu d'ajouter des classes spécifiques à Foundation dans votre code HTML, vous pouvez simplement étendre les attributs de Foundation en fonction du balisage existant. Par exemple, celui existant div avec la classe nouvelles peut être fait pour imiter un grille-6 colonnes div.
Voici un exemple complet de ce à quoi cela pourrait ressembler, disons que vous avez ce code HTML:
Pour obtenir une répartition 50/50 de .nouvelles et .événements, votre Sass ressemblerait à ceci:
.main @include grid-row; .news @include grid-column (6); .events @include grid-colmn (6);
C'est l'équivalent de changer le balisage en ceci:
Si vous souhaitez inclure d'autres points d'arrêt dans votre SCSS, utilisez simplement cette technique:
.main @include grid-row; .news @include grid-column (8); @media # $ large-up grille-colonne (6) .events @include grille-colmn (4); @media # $ large-up grille-colonne (6)
Quel est le même que:
La technique SCSS est agréable car elle permet de garder vos classes non encombrées dans votre code HTML et vous permet d’être plus sémantique..
Il y a encore une chose importante à comprendre à propos de cette méthode. Si vous compilez votre CSS dans une feuille de style distincte et supplémentaire, mais que vous souhaitez utiliser Foundation mixins, vous devez importer ce dont vous avez besoin, mais éviter la duplication des styles de fondations. Pour éviter d’ajouter des styles redondants à votre CSS de sortie, vous devez spécifier le $ include-html-classes variable comme faux, voici à quoi cela ressemble:
@import "foundation / settings"; $ include-html-classes: false; @import "fondation";
Notez que les chemins peuvent différer en fonction de votre propre configuration. Cela vous permettra d'utiliser tous les mixins, fonctions et paramètres de Foundation, sans avoir à dupliquer tout le CSS. Ceci est pratique si vous incluez déjà le code CSS de la fondation sur la page sur laquelle vous travaillez. Cette méthode peut, par exemple, être utilisée comme emplacement pour stocker tous vos remplacements pour une page spéciale ou un sous-ensemble de pages..
Ceci n'est que la pointe de l'iceberg: Foundation et Sass ont tous deux beaucoup plus à offrir et ont tous les deux un grand nombre de développeurs qui continuent de les rendre à la fois plus avancés et meilleurs..
Accentsconagua