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. En action ! Flexbox (le modèle de boîte flexible) se fonde schématiquement sur une architecture de ce type : Démonstration display: flex Compatibilité Standardisation
Flexbox Cheatsheet Cheatsheet
While I am no stranger to the magic of Flexbox, I find that I am not using it very often just yet. As a result I end up pausing and referring back to this post at CSS-Tricks whenever an opportunity to utilize its powers presents itself. I set out to create a quick visual to summarize Flexbox when I run into these moments of pause in the future. Anyway, I thought I would share it just in case others may find such a resource beneficial as well. If you would prefer to have this guy as a PDF you can grab that here.
Framework CSS - Developpeur / integrateur web & referenceur
Ils parlent de framework CSS : Liste de framework CSS : speckyboy (Liste de framework css)fuelYourCoding (Liste de framework css)noupe (Liste de framework css)skytechgeek (Liste de framework css) bootstrap twitter (sur eewee) Le Framework CSS « bootstrap twitter » propose : ÉlégantIntuitifPuissantLe développement web plus rapide & plus facile. Construit chez Twitter par @mdo & @fat, Le bootstrap utilise LESS CSS, est compilé via Node (+ en video), et managé sur GitHub. Il est basé sur une grille de 12 colonnes, des dizaines de composants, plugins JavaScript, typographies, gestion de formulaire, et même un Customizer sur le Web pour faire votre propre Bootstrap. Exemples : Structures, Construit avec le bootstrap, jumpstartui.com, color-theme.com, gotfocussolutions.com, wrapbootstrap.com, boat-charter-mallorca.com. Réseaux sociaux : blog, twitter Autres infos : Documentation, GitHub Télécharger : framework CSS bootstrap twitter foundation zurb (sur eewee) Télécharger : framework CSS foundation zurb
KNACSS, a simple and lightweight CSS framework
Gratuit, 20 framework responsive webdesign
Un framework (littéralement cadre de travail) est un outil de construction de sites internet qui s'adresse aux développeurs web et les webmasters et leur offre la fondation et la structure de base et leurs font gagner des dizaines d'heures de travail. Je vous propose ainsi une liste de 20 framework qui ont fait leurs preuves, tous gratuits et responsive web design. Base : Simple et complet, Base est crée en HTML5 et jQuery et permet de faire des site web compatibles Cross-browser et adaptés aux appareils mobiles. Bootstrap : Le très célébre Framewok produit par twitter, il est assez complet, et sons interface de personnalisation le rend unique selon l'usage qu'on veux faire. Less Framework : Basé sur un système d'une seule grille (Grid), sonlayout de par défaut faut 992 Pixel de largeur contre 320 px pour mode d'affichage pour smartphone.
Initiation au positionnement en CSS (Partie 1)
Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS est dorénavant indispensable. Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées "calques" en général), ce qui les rend souvent peu compatibles et peu pratiques. Cet article en deux parties explique comment positionner les éléments en CSS de façon optimale. Résumé et pense-bête. Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés, ... grâce aux styles CSS. Les balises de bloc et les balises en-ligne Ce chapitre sur la structure des balises est primordial, vous devez auparavant avoir consulté le tutoriel sur les bloc/en-ligne. Voici un résumé pour les lecteurs pressés les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Ancêtre, Parents, Enfants, Frères Le Flux
Comprendre le Viewport dans le Web mobile
Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface physique C'est le nombre physique de pixels qui composent la matrice de l'écran, telle que le constructeur le décrit dans les caractéristiques, en gros la "résolution" (en vérité le terme juste est "définition"). Niveau de zoom initial
Conseils sur les fichiers sitemaps et le référencement (SEO)
Voici tout ce qu'il faut savoir sur le fameux fichier sitemap et son impact sur le référencement. Ce tuto explique les risques d'une mauvaise compréhension de l'utilité du sitemap et donne de nombreux conseils. Article mis à jour le 22/06/2015, publié initialement le 07/06/2014 Un fichier sitemap pour Google, utile au SEO ? Ce dossier fournit des explications et des conseils pour exploiter les fichiers sitemaps XML ou TXT pour votre référencement naturel Qu'est-ce que le fichier sitemap ? J'écris "fichier sitemap" pour ne pas confondre avec le plan de site, cette page web destinée aux internautes, leur permettant de se situer dans le site et de comprendre la logique de son arborescence. Un fichier sitemap est un fichier listant des URL du site que l'on souhaite faire crawler (et donc aussi indexer). Exemple de fichier sitemap XML (sur elysee.fr). Intérêt des sitemaps Un fichier sitemap favorise-t-il le référencement ? La réponse rapide est NON ! Oui, c'est à peu près mon point de vue. <?
Les sprites CSS
Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Les avantages des sprites CSS sont multiples : Des sites à fort trafic (Youtube, Google, Facebook, Amazon, ...) exploitent cette technique sur des pages que vous consultez tous les jours : Inconvénients
