Share
Lors des précédents screencasts de cette série, nous avons parcouru beaucoup de terrain en construisant notre structure réactive (ou adaptative) avec le passe-partout Skeleton. Il est maintenant temps de finir tous les détails finaux; sans doute la partie la plus fastidieuse de toute construction de site Web!
Au cours de ces trois screencasts, nous examinerons les colonnes de nidification, les intégrations vidéo flexibles, les éléments de forme et les onglets de Skeleton. Nous préciserons tout balisage manquant et compléterons les CSS. Il y a beaucoup de choses à dire; Bien plus d’une heure de métrage à absorber, vous devrez peut-être vous préparer mentalement…
Nous avons précédemment examiné la structure en seize colonnes de Skeleton et la façon dont le style change avec quelques requêtes multimédia sélectionnées. Nous allons maintenant regarder ce qui se passe quand nous nid colonnes l'une dans l'autre.
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes ou YouTube.!
Il est temps d'ajouter de la viande à notre barre latérale. Nous ajouterons tout le balisage nécessaire, puis commencerons à styliser les différentes sections. Pendant ce temps, nous parlerons rapidement du style de formulaire de Skeleton et nous saisirons des polices Web pour nos icônes..
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes ou YouTube.!
Si vous êtes sérieux au sujet de la conception Web flexible, vous devez savoir comment gérer un contenu intégré flexible. Dans cette vidéo, nous verrons comment rendre notre contenu vidéo élastique. Il y a plus à discuter sur le sujet, mais cette approche de base est un bon début.
Une fois que nous aurons couvert cela, nous parlerons rapidement des onglets de Skeleton et nous ajouterons quelques bannières promotionnelles qui varient en fonction des requêtes des médias utilisées..
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes ou YouTube.!
Le sujet des embed flexibles est assez intéressant. Voici, pour votre dissection, les extraits de base dont vous aurez besoin pour commencer. D'abord le balisage:
Et puis les styles:
/ * Nous traitons d’abord avec l’élément conteneur qui le positionne relativement et définit sa hauteur proportionnellement à sa largeur - nous obtenant un rapport 16: 9 * / .embed position: relative; rembourrage: 0; rembourrage en bas: 56,25%; / * Rapport 16: 9 * / hauteur: 0; débordement caché; / * alors nous faisons en sorte que le contenu incorporé réel se comporte en termes de dimensions et de position dans le conteneur * / .embed iframe, objet .embed, .embed embed position: absolute; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%;
Remarque: Dans le screencast j'ai mis le la taille du conteneur emboîté à 56,25%, j'aurais dû le mettre à zéro (hé, je commençais à être fatigué…) Dans la plupart des cas, cela n'aurait aucun effet néfaste, mais j'ai pensé que cela valait la peine d'être mentionné :)
Quelques liens utiles pour développer davantage ce qui a été couvert dans ces vidéos.
Accentsconagua