Snippets

D'autres snippets sont également disponibles sur https://snipt.net/Lucifer/

Grille de contrôle pour Bootstrap et Foundation

Faites un glissé/déposé du marque-page scripté dans vos signets pour l'utiliser à volonté Grid displayer

Concentré CSS documenté (à utiliser au cas par cas)

/* Inspiré de Normalize.css (MIT License): http://necolas.github.io/normalize.css/ * Cette feuille de style ne vise pas à annuler les styles par défaut des différents navigateurs, mais à les harmoniser. * Il s'agit d'un concentré de bonnes pratiques et d'expériences rencontrées sur différents projets ajusté pour mes besoins. * Ce Concentré de CSS est redistribué et traduit en français par Laurent Warin: http://warin-creations.be */ /* ================================ Définitions d'affichage ================================ */ /* L'affichage en display "block" n'est pas dénini dans IE 6/7/8/9 et Firefox 3.*/ header,nav,article,main,section,summary,aside,figcaption,figure,details,footer{display:block} /* L'affichage en display "inline-block" n'est pas dénini dans IE 6/7/8/9 et Firefox 3.*/ audio,canvas,video{display:inline-block} /* 1. Permet aux navigateurs modernes d'afficher la balise "audio" sans les contrôles. * 2. Retire la hauteur superflue dans les appareils iOS 5.*/ audio:not([controls]){display:none; /* 1 */ height:0 /* 2 */} /* L'attribut [hidden] n'est pas natif dans IE 7/8/9, Firefox 3 et Safari 4. * Problème connu: pas de support pour IE 6. * Plus d'infos sur les attributs globaux => http://goo.gl/ehTPsr */ [hidden]{display:none} /* ================================ Balise Figure ================================ */ /* Les marges ne sont pas natives dans IE 6/7/8/9, Safari 5 et Opera 11.*/ figure{margin:0} /* ================================ Base ================================ */ /* 1. S'assurer qu'il ya une gouttière pour la scrollbar dans tous les navigateurs, indépendamment du contenu. * 2. Empêche iOS et Windows d'ajuster la taille du texte après un changement d'orientation, sans désactiver le zoom utilisateur.*/ html{overflow-y:scroll; /* 1 */ -webkit-text-size-adjust:100%; /* 2 */ -ms-text-size-adjust:100% /* 2 */} /* 1. Supprime les marges par défaut. * 2. Applique une couleur de fond de page pour prévenir les bugs dans Firefox, IE et Opera. * 3. Redimensionnement correct du texte dans IE 6/7 lorsque la propriété "font-size" est définie à l'aide des unités "em": 65.2% défini selon mes préférences (convertisseur px vers em http://pxtoem.com). * 4. Applique une couleur à la police d'écriture pour prévenir les bugs dans Firefox, IE et Opera.*/ body{margin:0; /* 1 */ background:#fff; /* 2 */ font-size:62.5%; /* 3 */ color:#000; /* 4 */} /* ================================ Empêcher les flottants de dépasser de leur conteneur ================================ */ /* 1. Méthode classique: ajouter avec la propriété "overflow" avec la valeur "hidden" sur le parent.*/ /* 2. Méthode classique: ajout d'une balise avec la propriété "clear" et la valeur "both" après les flottants.*/ .clear{clear:both} /* 3. Méthode clearfix: en créant du contenu généré via le pseudo-élément :after http://goo.gl/CJiU6k */ #nom_du_conteneur{zoom:1} /* ajouter le "hasLayout" pour IE 6/7 (via un commentaire conditionnel: car non valide W3C.*/ #nom_du_conteneur:after{ content:""; display:table; clear:both} /* ================================ Liens ================================ */ /* Retire la couleur de fond "grise" des liens actifs dans IE 10.*/ a{background:transparent} /* Corrige l'incohérence de l'apparence de la propriété "outline" entre Chrome et les autres navigateurs.*/ a:focus{outline:thin dotted} /* Augmente la lisibilité en désactivant "outline" quand la balise "a" est survolée et cliquée dans tous les navigateurs.*/ a:active,a:hover{outline:0} /* ================================ Typographie ================================ */ /* Les marges et les tailles de police sont définies différemment dans IE 6/7... * ...ainsi que la propriété "font-size" dans les balises "section" et "article" dans Firefox 4+, Safari 5 and Chrome.*/ h1{margin:0.67em 0;font-size:2em} h2{margin:0.83em 0;font-size:1.5em} h3{margin:1em 0;font-size:1.17em} h4{margin:1.33em 0;font-size:1em} h5{margin:1.67em 0;font-size:0.83em} h6{margin:2.33em 0;font-size:0.67em} /* Le style de la balise "abrr" n'est pas défini dans IE 7/8/9, Safari 5, et Chrome.*/ abbr[title]{border-bottom:1px dotted} /* La valeur "blod" n'est pas définie dans Firefox 3+, Safari 4/5, et Chrome.*/ b,strong{font-weight:bold} /* Affiche les citations de façon attrayante.*/ blockquote,q{quotes:none} blockquote:before,q:before,blockquote:after,q:after{color:#588500} blockquote:before,q:before{content:"\201C "} blockquote:after,q:after{content:" \201D"} /* La valeur "italic" pour "dfn" n'est pas définie dans Safari 5 et Chrome.*/ dfn{font-style:italic} /* Corrige une différence entre Firefox et les autres navigateurs (plus d'info sur box-sizing => http://goo.gl/6CYsV5 ).*/ hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0} /* Le style de la balise "mark" n'est pas défini dans IE 6/7/8/9.*/ mark{background:#ff0;color:#000} /* Les marges sont différentes dans IE 6/7.*/ p,pre{margin:1em 0} /* Corrige la police de caractère utilisée étrangement dans IE 6, Safari 4/5, et Chrome.*/ code,kbd,pre,samp{font-family:"Courier New",monospace,serif;font-size:1em} /* Améliore la lisibilité d'un texte pré-formaté dans tous les navigateurs.*/ pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word} /* Harmonise de la taille de la balise "small" dans tous les navigateurs.*/ small{font-size:80%} /* Empêche les balises "sub" et "sup" d'affecter la propriété "line-height" dans tous les navigateurs.*/ sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sup{top:-0.5em} sub{bottom:-0.25em} /* ================================ Contenu intégré ================================ */ /* 1. Supprime la bordure autour des images dans tous les navigateurs. * 2. Améliore le lissage de l'image lors de mises à l'échelle en forçant le lissage bicubique dans IE 7 => http://goo.gl/TfLkp2 */ img{border:0; /* 1 */ -ms-interpolation-mode:bicubic; /* 2 */} /* Corrige les débordements d'affichage bizarres dans IE 9.*/ svg:not(:root){overflow:hidden} /* ================================ Responsive ================================ */ *{ -webkit-box-sizing:border-box; /* Limite à 100% de la largeur, même si des paddings ou bordures sont appliquées à l’élément.*/ -moz-box-sizing:border-box; box-sizing:border-box; *behavior:url("../js/boxsizing.htc"); /*Active la propriété box-sizing sur IE 6/7 http://goo.gl/H3D0lT */ } /* Limite la taille de l'élément à la largeur du parent pour le rendre "responsive" sur petits écrans.*/ table,td,blockquote,code,pre,textarea,input,video{max-width:100%} /* combo ultime pour les images*/ img{ max-width:100%; /* Limite la taille de l'élément à la largeur du parent.*/ width:auto; /* Corriger un bug sur IE 8.*/ height:auto; /* Conserve le ratio, même si un attribut height est précisé en HTML.*/ } /* ================================ Retina ================================ */ /* Délivrer des images "retina" pour des écrans ayant une densité de pixel supérieure.*/ /* Exemple */ .balise_perso{ background-image: url("img/img.png"); background-size: 200px 300px; height: 300px; width: 200px} @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .balise_perso{ background-image: url("img/img@2x.png"); } } /* ================================ Formulaires ================================ */ /* Applique un margin, padding ainsi qu'une bordure (pour distinguer visuellement les différentes étapes du formulaire).*/ fieldset{margin:0 2px;padding:0.35em 0.625em 0.75em;border:1px solid #c0c0c0} /* 1. Supprime la couleur appliquée dans IE 6/7/8/9. * 2. Rectifie le formatage du texte dans Firefox 3. * 3. Corrige un alignement bizarre dans IE 6/7.*/ legend{border:0;/* 1 */padding:0;white-space:normal;/* 2 */*margin-left:-7px;/* 3 */} /* 1. Force l'héritage de la propriété "font-family" dans tous les navigateurs. * 2. Force la taille à 100% de la propriété "font-size" dans tous les navigateurs. * 3. Corrige la taille des marges dans Firefox 4+, Safari 5 et Chrome.*/ button,input,select,textarea{font-family:inherit;/* 1 */font-size:100%;/* 2 */margin:0;/* 3 */} /* 1. Evite le bug de WebKit dans Android 4.0. détruisant les contrôles natifs dans les éléments de type "audio" et "vidéo". * 2. Permet à iOS d'afficher un bouton. * 3. Permet de rendre l'élément visuelement cliquable.*/ button,html input[type="button"],/* 1 */input[type="reset"],input[type="submit"]{-webkit-appearance:button;/* 2 */cursor:pointer;/* 3 */} /* Réinitialise le curseur par défaut pour les éléments désactivés.*/ button[disabled],html input[disabled]{cursor:default} /* 1. Change le comportement du navigateur, les bordures et le padding seront ajoutés à l'intérieur et non plus à l'extérieur dans IE 8/9/10. * 2. Supprime le padding excessif dans IE 8/9/10.*/ input[type="checkbox"],input[type="radio"]{box-sizing:border-box;/* 1 */padding:0;/* 2 */} /* 1. Change l'apparence de l'input de type search dans Safari 5 et Chrome. http://goo.gl/SKahP * 2. Modifie le modèle de boîte CSS par défaut qui est utilisé pour calculer la largeur et la hauteur des éléments dans Safari 5 et Chrome. http://goo.gl/KGa0Pz */ input[type="search"]{-webkit-appearance:textfield;/* 1 */-moz-box-sizing:content-box;-webkit-box-sizing:content-box;/* 2 */box-sizing:content-box} /* 1. Supprime le padding et l'affichage des petites icônes d’action pour vider le contenu entré dans Safari 5 et Chrome sur OS X http://goo.gl/lp3SDU * 2. Supprime la petite croix qui efface le texte ainsi que pour révéler le mot de passe entré. */ input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}/* 1 */ ::-ms-clear{display:none} ::--ms-reveal{display:none} /* Supprime le padding et la bordure dans Firefox 4+.*/ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} /* 1. Supprime l'ascenseur vertical dans IE 8/9. * 2. Améliore la lisibilité et l'alignement dans tous les navigateurs.*/ textarea{overflow:auto;/* 1 */vertical-align:top;/* 2 */} /* Styler le placeholder (text-decoration, font-style, color).*/ ::-webkit-input-placeholder {} /*WebKit*/ :-moz-placeholder {} /*FF 4 à 18*/ ::-moz-placeholder {} /*FF 19+*/ :-ms-input-placeholder {} /*IE 10+*/ /* ================================ Tableaux ================================ */ /* Supprime les espacements entre les cellules d'un tableau.*/ table{border-collapse:collapse;border-spacing:0}

Feuille de style basique pour l’impression

/* Ajouter une marge à la page */ @page :left{margin:0.5cm} @page :right{margin:0.8cm} /* Utiliser le sélecteur universel pour réinitialiser certains styles par défaut */ *{ background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important} /* Supprimer la navigation.*/ nav, aside, #sidebar{display:none} /* Augmenter la largeur du texte à lire.*/ #containeur_global{ width:100%; margin:0; float:none} /* Modifier les polices de caractère et remettre la couleur des textes par défaut.*/ body{ font-family:Georgia,"Times New Roman",Times,"Liberation Serif",FreeSerif,serif; color:#111} /* Empècher les images de déborder hors du contenu*/ img{max-width:100% !important} /* Afficher la destination des liens.*/ a:link:after{ content:" (" attr(href) ") "; color:#888; background-color:inherit; font-style:italic; size:80%} /* Afficher le contenu de l'attribut ALT entre parenthèses après chaque image. * Pour afficher le contenu généré sous les images, un passage à la ligne est effectué grâce à \A */ img[alt]:after{content:"\A ("attr(alt)")"} /* Faire ressortir des liens présents dans le texte.*/ a:link{ font-weight:bold; text-decoration:underline; color:#06c} /* Utiliser des tailles de polices cohérentes avec une imprimante.*/ p{font-size:12pt} /* Modifier l’affichage des commentaires s’ils sont nombreux en insérant un saut de page forcé avant un élément.*/ #exemple{page-break-before:always} /* Afficher un message à l’impression uniquement en le déclarant initialement dans la css globale en display:none; .*/ .print-msg{display:block}

Mixins SASS

// ----- Mixin et Placeholder SASS ----- @mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } // @include box-shadow(0 0 10px rgba(0,0,0,.8)); @mixin border-radius($radius...) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } // @include border-radius(4px); @mixin transition($transition...) { -webkit-transition: $transition; -moz-transition: $transition; -o-transition: $transition; transition: $transition; } // @include transition(all 150ms linear); @mixin transform($transform...) { -webkit-transform:$transform; -moz-transform:$transform; -o-transform:$transform; -ms-transform:$transform; transform:$transform; } // @include transform(scale(0.96)); @mixin animation($animation){ -webkit-animation:$animation; -moz-animation:$animation; -o-animation:$animation; -ms-animation:$animation; animation:$animation; } // @include animation(spin 6s infinite linear); @mixin background-size($bgsize){ -webkit-background-size:$bgsize; -moz-background-size:$bgsize; background-size:$bgsize; } // background-size: cover; @mixin calc($property, $expression) { #{$property}: -moz-calc(#{$expression}); #{$property}: -webkit-calc(#{$expression}); #{$property}: calc(#{$expression}); } // height: calc(100vh - 50px); @mixin opacity($opacity) { $opacity-ie: $opacity * 100; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity * 100}); // IE 8 filter: alpha(opacity=$opacity-ie); // IE 5-7 opacity: $opacity; } // @include opacity(0.9); // ----- Fonctions SASS COULEUR ----- // lighten($color, $amount); // plus clair // darken($color, $amount); // plus sombre // saturate($color, $amount); // Plus saturé // desaturate($color, $amount); // Moins saturé // desaturate($color, $amount); // Avec un $amount de 100% -> équivalent à grayscale() // invert($color); // La couleur inverse (négatif) // grayscale($color); // La nuance de gris correspondant à la couleur // mix($color1, $color2); // Le mélange des deux couleurs // opacify($color, $amount); // plus opaque // transparentize($color, $amount); // moins opaque // ----- Variables SASS ----- // couleur $couleur_de_fond: #fff; //XXX