Sidr - A jQuery plugin for creating side menus. You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too).
It uses CSS3 transitions (and fallbacks to $.animate with older browsers) and it supports multiple source types. Get started Like any other plugin, you must include it after the jQuery script. For a better performance load them at the bottom of your page or in an asynchronous way. You have to include a Sidr Theme stylesheet too, choose between the dark or the light one, or if you prefer create one by your own.
Using bower or NPM Instead of downloading the plugin, you can install it with bower or with npm: bower install sidr --save From a CDN. Blueprint: Responsive Multi-Column Form. A responsive multi-column form with example media queries for a flexible layout.
View demo Download source. Display, vous connaissez ? La propriété CSS Display est un puissant outil souvent mal connu et dont les possibilités réelles sont rarement utilisées.
Il faut avouer que Internet Explorer y est pour quelque chose... espérons qu'il se mette à la page, vu les horizons ouvertes par cette propriété. Sources et documentation : Les multicolonnes en CSS3. Le module de positionnement multicolonnes (ou Multi-column Layout Module en anglais) permet, comme son nom l'indique, de faire s'écouler du contenu sur plusieurs colonnes de largeurs égales, tel qu'on peut le voir dans le monde de l'imprimerie.
Encore peu usité, ce module est pourtant loin d'être en brouillon car il s'agit d'une spécification élevée au rang de Candidate Recommendation, donc stable, au sein du W3C depuis avril 2011. Compatibilité de multicolumn Le positionnement multicolonnes est - contre toute attente - plutôt bien supporté par le collège des navigateurs. Les anciennes versions d'Internet Explorer faisant bien entendu exception à la règle.
En pratique, il est actuellement utilisable sans problème en production sur les navigateurs mobiles que l'on retrouve sur smartphones et tablettes. Tableau des compatibilités Mise en oeuvre Les deux principales propriétés de ce module sont column-width et column-count : Voir un exemple de columns. Multicolumns 2. Empêcher les flottants de dépasser de leur conteneur. Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS float (aussi appelés flottants, ou en anglais floats) sortent du flux de leur conteneur.
Autrement dit, les flottants «dépassent». C'est ainsi qu'on se retrouve avec des conteneurs qui font zéro pixel de hauteur, des colonnes qui passent à travers un pied de page, et autres résultats peu souhaitables. Par exemple, avec ce code HTML et CSS les «colonnes» flottantes dépasseront de leur conteneur: Les Media Queries CSS3. La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML.
On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web.
Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Smartphone Browser Landscape. Users expect websites to work on their mobile phones.
In two to three years, mobile support will become standard for any site. CSS3 Media Queries. CSS2 allows you to specify stylesheet for specific media type such as screen or print.
Media types. 7.1 Introduction to media types One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.
Media Queries. Abstract.
Media Queries / Dynamic resolution dependent layouts. Scottjehl/Respond. Creating a Body Border. This article as originally published on February 25, 2008, but is now being completely re-written to be more comprehensive and show modern techniques. Jon Hick's site Hicksdesign is where I first saw the concept of a "body border. " In this case, it's a very subtle and lovely effect. Three-Sided Border. If you need to put a border on only three sides of an element, there are a bunch of ways you can do it. Le modèle tabulaire en CSS. Le modèle de construction tabulaire (HTML et CSS) compte sans aucun doute parmi les plus fascinants qui soient, après avoir été d'abord adulé puis banni vigoureusement par les intégrateurs de tous poils. En 1998, les spécifications CSS2 étendent les historiques valeurs de la propriété display et proposent depuis belle lurette des possibilités de rendus et positionnements “tabulaires” sans pour autant interférer dans la sémantique et le bon usage des éléments HTML.
Passons immédiatement à table et découvrons en détail le monde mal connu du Modèle Tabulaire en CSS…