Share
Ce que vous allez créerDans ce didacticiel, nous allons nous concentrer sur le codage d’une disposition PSD, à l’aide du passe-partout Skeleton. Il existe de nombreux tutoriels sur la manière de coder une conception à l'aide de HTML et de CSS, souvent avec une touche de JavaScript supplémentaire, mais l'objectif principal de ce tutoriel est de créer des choses en utilisant la dernière version du framework Skeleton (2.0.4). Il y a eu de grandes améliorations depuis notre dernière couverture!
Tout d’abord, permettez-moi de vous présenter Skeleton, puis passons au codage..
Skeleton est l’invention de Dave Gamache. Il s'agit d'une grille fluide à douze colonnes, avec une largeur maximale par défaut de 960 pixels, une typographie de base et des styles minimaux pour les éléments HTML courants tels que des boutons, des liens, des entrées et des zones de texte..
Sa force réside dans le fait que c’est un lumière Cadre CSS. Présentant à peine 400 lignes de code, Skeleton est conçu pour être un point de départ, pas un cadre complet bourré d’interface utilisateur comme Bootstrap, Foundation ou SemanticUI..
Parce qu’il est simple à utiliser et qu’il s’agit d’un bon point de départ pour créer vos propres cadres réactifs..
Dave Gamache a présenté et mis à jour plusieurs fonctionnalités de Skeleton v2.0:
Accentsconagua
largeur totale, .u-max-pleine-largeur ce qui est parfait pour les conteneurs de 100% de largeurAu cours de ce tutoriel, nous allons coder le design présenté ci-dessus, réalisé par Samir Timezguida. En chemin, nous allons:
Commençons par télécharger le cadre Skeleton à partir de www.getskeleton.com et récupérer le fichier PSD à partir des fichiers source..
Vous préférerez peut-être une approche différente, mais j'aime commencer par dessiner la mise en page pour visualiser chaque section. Il y a beaucoup de sections dans la mise en page:
Voici le résultat esquissé pour la structure HTML souhaitée:
Pour chaque section, nous allons créer un conteneur (ou groupe) qui remplira toute la largeur de la fenêtre, avec le nom de la section comme nom de classe. À l'intérieur, nous tirons parti de Skeleton en construisant la grille pour créer un conteneur et un wrapper de lignes. Le code HTML de chaque section sera une variante de ceci:
Maintenant, il est temps de prendre chaque section et d'ajouter le balisage. Ne vous préoccupez pas des styles, des images, des polices, etc., nous nous concentrons pour l'instant sur la structure HTML..
Pour le menu, nous devons ajouter l’icône «hamburger» et une liste non ordonnée contenant les liens internes. Chaque lien pointe vers une section spécifique.
Remarque: le plus vif d'entre vous peut reconnaître le fa fa-bars cours sur le élément pour l'icône de navigation. Celles-ci sont typiques des icônes Font Awesome, que nous implémenterons plus tard dans le processus..
Comme on le voit dans le PSD, la section héros comprend une image étirée, un titre et un sous-titre. Pour l’image d’arrière-plan, nous ajouterons un conteneur différent, pour le titre que nous utiliserons h1 et pour le sous-titre a h2. Ici, vous voyez, j'utilise largeur totale, la nouvelle classe utilitaire squelette.
Nous avons du talent
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Commodo ligula eget dolor. Massa Aenean.
L'introduction contient deux éléments; un titre et un sous-titre. Nous préparons le html pour supporter la bordure du titre, en ajoutant un séparateur classe, qui va ajouter bas de la bordure et un peu d'espacement.
introduction
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
La créativité a un fond pleine largeur et un bouton. Vous pouvez aussi voir le centré classe sur le h4; une classe utilitaire que nous allons créer dans le prochain tutoriel pour nous aider à centrer les éléments sur les axes vertical et horizontal.
Il s'agit de la plus grande section du site Web et contient deux lignes supplémentaires. un pour les liens de filtre de travail et un pour les éléments de travail.
Une partie de notre travail
Les filtres de travail contiennent une liste non ordonnée contenant des liens qui filtreront les éléments de travail..
Les éléments de travail eux-mêmes auront une largeur de quatre colonnes, contenant l’image de travail, le titre et la description de travail..
Vous pouvez également voir que j'utilise une autre classe d'utilitaire, verticalement centré, qui va centrer l’article sur l’axe vertical. La description de chaque élément de travail comporte également une bordure en bas. Pour ce faire, nous allons réutiliser le séparateur classe vue précédemment, tout en ajoutant une classe supplémentaire pour un style, une couleur et une taille supplémentaires.
Logo MTV AMA
Dribbble refonte
Google Mail
Icônes plates
Boîte de réception par google
Skeleton skin a une nouvelle interface utilisateur
La section d'aide a la même structure html que la section de créativité, mais nous les différencions en ajoutant des noms de classe différents..
Cette section contient une liste non ordonnée avec les images du client. J'utilise placehold.it pour générer des images d'espace réservé.
Nos clients
Ici nous avons deux rangées différentes, une pour le texte d'introduction et une pour les personnes.
La ligne d'introduction contient un titre et un sous-titre, comme nous l'avons vu précédemment dans la section d'introduction.
À propos de nous
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
La liste de personnes est une liste non ordonnée contenant quatre éléments, le dernier étant destiné à l’embauche. Chaque élément de la liste est large de trois colonnes et contient une image, un lien, le nom et la position de l'individu..
PDG et fondateur
CTO / Fondateur
Designer
La section vidéo ne contient qu'un bouton et l'image d'arrière-plan étendue. Dans les prochains tutoriels, nous allons en faire une fenêtre modale pointant vers une vidéo Youtube.
Pour continuer, la section «pourquoi nous» est composée de deux sections distinctes; un pour une brève introduction et l'autre pour les services actuels.
La section d’introduction a une largeur de douze colonnes et contient le titre enveloppé dans un et le texte pour une brève description enveloppé dans un . Comme vous le verrez ci-dessous, le titre a aussi séparateur classe pour créer l'effet de bordure mentionné précédemment.
Pourquoi nous choisir
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Dans la section services, chaque élément de la liste contient une image et une description..
Lorem ipsum dolor sit amet, consectetur elit adipisicing, fait depuis un mois ilabore et dolore.
Lorem ipsum dolor sit amet, consectetur elit adipisicing, fait depuis un mois ilabore et dolore.
Lorem ipsum dolor sit amet, consectetur elit adipisicing, fait depuis un mois ilabore et dolore.
Cette section hérite de la même structure html que la section créativité, mais avec un texte différent pour le bouton centré.
Juste un couple plus à faire! Cette section propose un bref scénario pour le formulaire. Il est construit avec une structure html qui aura probablement l'air bien familière maintenant, avec un titre et une description séparés par un séparateur.
Entrer en contact
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Nesciunt illum sed veritatis at, ipsam quo vitae minima. Animations un peu douloureuses, incidunt nihil, est vraiment vrai, mais c'est tout.
La section formulaire de contact comprend deux colonnes, une pour les liens de méta et de profil social d'emplacement et l'autre contenant le formulaire permettant à l'utilisateur de contacter l'entreprise..
Encore une fois, j'utilise un balisage pour supporter Font Awesome, que nous intégrerons dans le prochain tutoriel..
La première colonne est large de quatre colonnes et la seconde est large de huit colonnes. Ici, vous pouvez vraiment voir la puissance de Skeleton, parce que nous utilisons des colonnes et des lignes imbriquées. La forme a différentes tailles en son sein; les deux premières entrées ont six colonnes de largeur dans une enveloppe de huit colonnes.
Notre emplacement
174 Mimosa ST. NW
Casablanca, MA 20370
(212) 123 456 7
Samir Timezguida
Notre pied de page contient du texte enveloppé dans un conteneur de douze colonnes.
& copier 2015 WebDesign Tuts+.
Ce tutoriel a montré exactement à quoi sert Skeleton: nous avons utilisé son balisage pour étoffer la structure d'une page Web. Dans le prochain tutoriel, nous allons prendre cette structure et ajouter quelques styles pour lui donner un look complètement unique. On se voit là-bas!
