ISBN 9782322171040 432 pages FORMAT 17x22 cm Prix Public TTC 36.90 €

En librairie

FLEXBOX CSS 3 par la pratique

Ce livre a pour objectif de proposer une approche pédagogique pour l'apprentissage du modèle de boîte et de positionnement qu'est Flexbox. Il est destiné principalement aux programmeurs et aux développeurs débutants. Entièrement dédié à un seul module de CSS, ce livre a pour mission de vous faire découvrir le phénomène incontournable qu'est devenu Flexbox.

La spécification Flexible Box Layout Module, plus connue sous le nom de Flexbox, est une spécification CSS 3 du W3C qui définit un nouveau modèle de boîte et de positionnement jusqu'alors inédit. A lui seul, ce mode de positionnement rend élémentaires tous les problèmes classiques rencontrés avec CSS depuis sa naissance: les alignements s'effectuent d'une façon simple, la possibilité de réaliser un centrage vertical, les éléments s'emboîtent avec une fluidité naturelle, des hauteurs identiques entre éléments frères, etc. Flexbox intègre une gestion naturelle de la fluidité des éléments, rendant caduc l'usage de grilles d'affichage complexes. Cette spécification Flexbox est en train de révolutionner de manière profonde et pérenne notre façon de concevoir des designs et des composants en CSS.

Flexbox a été pensé et optimisé pour faire table rase de toutes les techniques historiques de positionnement ainsi que les contournements bancales des propriétés CSS. Le but affiché de Flexbox est de remettre de l'ordre en revenant aux bases d'un positionnement propre et adapté aux besoins actuels. Outre la simplification des schémas de positionnement, Flexbox apporte des solutions parfaites à une problématique bien ancrée à notre époque qu'est le Responsive Webdesign. En effet, les projets d'adaptation aux tablettes et aux smartphones nécessitent la réalisation de designs d'éléments flexibles, la réorganisation des blocs ainsi que la faculté à basculer très aisément d'un mode d'affichage horizontal vers un mode d'affichage vertical.

Ce livre s'adresse à des personnes connaissant de façon générale l'usage et l'utilisation des CSS, qui souhaitent apprendre en pratique ce nouveau modèle de positionnement qu'est Flexbox. Cet ouvrage est conçu avant tout pour répondre à des cas réels de la vie d'intégrateur web de tous les jours. Il est essentiellement constitué des notions à connaitre, des exemples concrets décortiqués et des travaux pratiques.

Au chapitre 1, nous allons mettre en place un environnement de travail très complet avec l'utilisation du logiciel gratuit Visual Studio Code 1.30 de façon à optimiser la compréhension et la réalisation des boîtes flexibles, avec l'utilisation de la librairie jQuery 3 pour faciliter les accès au DOM, avec l'utilisation d'un serveur local WampServer pour l'émulation des pages à distance, et avec l'utilisation des navigateurs Internet Explorer, Firefox, Chrome et Edge.

Au chapitre 2, nous aborderons les bases du modèle de boite flexible avec l'ensemble des propriétés et de leurs effets. Nous verrons les propriétés qui agissent sur le conteneur parent (display, flex-direction, flex-wrap, flex-flow, justify-content, align-items et align-content) et les propriétés qui agissent sur les éléments flexibles enfants (flex-grow, flex-shrink, flex-basis et flex).

Au chapitre 3, nous aborderons le concept des media queries et leur utilisation dans un contexte de conteneur flexible de type Flexbox.

Au chapitre 4, nous verrons quelques astuces indispensables qui permettent d'utiliser Flexbox de manière simple et efficace (occuper l'espace restant, centrer verticalement, pousser un élément flexible, aligner un titre avec un retour à la ligne, l'alignement horizontal et vertical, le rétrécissement d'un élément flexible et la construction d'un ensemble de colonnes flexibles).

Au chapitre 5, nous réaliserons un travail pratique pour réaliser un gabarit simple typique d'agencement de page avec le modèle de positionnement Flexbox.

Au chapitre 6, nous réaliserons un travail pratique pour la mise en place d'une grille flexible à colonnes et à gouttières.

Au chapitre 7, nous réaliserons un travail pratique pour la mise en place d'un formulaire fluide destiné à collecter des données avant de les envoyer par un script PHP.

Au chapitre 8, nous réaliserons un travail pratique pour composer une galerie d'images. De nombreux réglages permettront de mieux appréhender la façon de faire pour la mise en place des images au sein de la galerie dédiée.

Au chapitre 9, nous aborderons les techniques courantes de positionnement d'éléments flexibles enfants au sein d'un conteneur flexible parent.

Au chapitre 10, nous réaliserons un travail pratique pour la construction de grille flexible. Nous verrons comment automatiser les tâches pour la création de grille flexible en utilisant un préprocesseur de type LESS (mise en place d'une architecture côté client et utilisation de la syntaxe LESS dans des fichiers au format .less).

Au chapitre 11, nous réaliserons 6 projets applicatifs spécifiques qui permettent d'utiliser le modèle des boîtes flexibles dans des domaines variés. Ainsi nous aurons:

  • un premier projet dans lequel on réalisera des alignements à la façon du site web américain Pinterest.
  • un second projet dans lequel on composera un agencement de blocs verticaux, chaque bloc ayant un pied de page collé sur le bas.
  • un troisième projet dans lequel on réalisera une visualisation de pages en listing, en utilisant JavaScript et jQuery pour des chargements asynchrones.
  • un quatrième projet dans lequel on réalisera des figures géométriques 2D en utilisant la surface graphique de la balise <canvas> grâce à l'API Canvas.
  • un cinquième projet dans lequel on réalisera une scène 3D en utilisant la surface graphique de la balise <canvas> grâce à la technologie WebGL.
  • un sixième projet dans lequel on composera du contenu graphique au format SVG (format de données pour réaliser des graphiques vectoriels adaptables).

Ressources complémentaires

Consulter le sommaire détaillé du livre => en cliquant ici

Télécharger gratuitement le code source de programmation => en cliquant ici

Disponible dans les librairies en ligne

Chez Amazon France => commander ici

Fiche auteur chez Books on Demand => par ici

Chez Books On Demand => commander ici