background preloader

CSS3 Flexbox Layout module

CSS3 Flexbox Layout module
Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Au sein de ce schéma, on ne raisonne plus en “block” ou “inline”, ni même en float ou autres types de boîtes “classiques” CSS, mais en “Modèle de boîte flexible”, dont les quatre possibilités principales sont : Note : ce tutoriel a été initialement rédigé en octobre 2010. Il a subi une refonte intégrale en décembre 2014 pour se mettre à jour. En action ! Démonstration display: flex Compatibilité Tableau des compatibilités Standardisation

http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Related:  HTML / CSS / JSCSS/CSS3HTML/CSSCSSGrille & construction HTML

XMLHttpRequest La deuxième version du XHR ajoute de nombreuses fonctionnalités intéressantes. Pour ceux qui se posent la question, le XHR2 ne fait pas partie de la spécification du HTML5. Cependant, cette deuxième version utilise de nombreuses technologies liées au HTML5, nous allons donc nous limiter à ce qui est utilisable (et intéressant) et nous verrons le reste plus tard, dans la partie consacrée au HTML5. Tout d'abord, faisons une petite clarification : L'objet utilisé pour la deuxième version est le même que celui utilisé pour la première, à savoir XMLHttpRequest.Toutes les fonctionnalités présentes dans la première version sont présentes dans la deuxième.

Gérer les débordements de contenus grâce à CSS Sommaire Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants. Préambule Jack in the flexbox Cousin germain de l'objet Media, qui fait les beaux jours de OOCSS, l'objet “Autogrid” a les particularités suivantes : s'adapte automatiquement au nombre d'éléments enfantschaque enfant est fluide, de même largeur et même hauteur par défautaffichage sur une seule ligne (pas de saut de ligne prévu)des gouttières précises sont possibles Cette configuration est présente dans un nombre impressionnants de gabarits et de designs.

Sass : Mixin ou Placeholder ? Hugo Giraudel est un spécialiste internationalement reconnu de Sass. Il explique ici clairement et simplement la différence entre mixin et placeholder, comment utiliser l'un ou l'autre ou... combiner les deux. Par Hugo Giraudel Quand j'ai commencé à m'amuser avec Sass il y a un an et demi, j'ai mis un peu de temps à comprendre la différence entre inclure un mixin et étendre un placeholder. En fait, la notion même de placeholder relevait un peu de la magie noire pour moi. Une grille responsive avec CSS3 Flexbox et LESS (ou Sass) Ce tutoriel a pour but de présenter dans les détails une technique de conception de grille de mise en forme responsive à l’aide du positionnement CSS3 Flexbox Layout, actuellement parfaitement adapté à ce genre de fonctions en attendant une meilleure implémentation de Grid Layout. Le concept de grille produite permettra de gérer les espaces inter-colonnes (gouttières), les décalages (“offsets”), les différentes tailles d’écran et d’être automatisable. Le tout en un minimum de code et un maximum de propreté HTML. Voir le résultat final en ligne Le fondement : Flexbox Layout Notre grille sera construite grâce au module Flexbox, aujourd’hui compatible sur une bonne majorité des navigateurs (95% en France selon les stats Caniuse en fin 2014).

Lassés de Bootstrap ? Découvrez inuit.css ! inuit.css est un framework CSS extensible, construit sur un ensemble de bonnes pratiques CSS et qui n'impose pas de design prédéfini. inuit.css est-il fait pour vous ? Pour faire simple, voici les cas de figure dans lesquels ce framework peut vous intéresser : Vous avez besoin de mettre en place rapidement une architecture CSS décenteVous découvrez/connaissez les avantages du code Orienté Objet et appréciez son adaptabilité et sa réusabilitéVous devez implémenter un certain design qui ne colle pas forcément aux éléments “par défaut” des autres frameworksVous aimez le concept de framework mais, développeur dans l’âme, aimez avoir la main-mise sur le code Et voici clairement le cas de figure où vous pouvez passer votre chemin (sauf si vous êtes curieux) : Vous cherchez un framework CSS qui prenne en charge le design des éléments

Menu fixe avec un effet de slide en CSS3 Aujourd'hui nous allons apprendre comment rendre la navigation de vos utilisateurs plus facile en créant un menu fixe toujours visible. Mais pour que ce menu ne gène pas le contenu de chaque page, on masquera la moitié des images utilisées pour le menu. Les images ne s'afficheront entières qu'au survol de la souris. Pour commencer, nous allons écrire le code HTML nécessaire à la navigation en utilisant le tag <ul> pour créer une liste. Chaque item de la liste contient un lien (tag <a>) et chaque lien contient une image.

Redécouvrez la mise en page avec Flexbox Qu’est qu’une flex-box Flexbox est une nouvelle propriété CSS qui nous permet de gérer simplement la mise en page d’une série d’éléments au sein d’un élément parent et plus précisément de : Mettre en place plusieurs éléments sur une ligne sans avoir à se soucier de la largeur de chacun d’eux. Modifier rapidement le sens de lecture vertical/horizontal. Aligner les éléments à gauche, à droite ou au centre du parent. Modifier l’ordre d’affichage des différents éléments.

Related:  CSS