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