Code CSS commenté de Röcssti

Avant de vous précipiter sur ce magnifique code, je me permets d’attirer votre attention sur l’organisation de la structure au début de Röcssti. Elle est absolument capitale, pour l’organisation de vos futurs projets et la maintenabilité (conventions choisies, etc.). Ne la négligez pas !

Table des matières

/* convention (à adapter si besoin)
 *  .parent
 *  .parent__enfant
 *  .parent--modifieur  
 * 
 * RTL = Right To Left => 
 * pour adapter un site dans une langue qui se lit de droite à gauche
 * prévu surtout pour sites multilingues avec LTR et RTL
 *
 * 
 * résumé
 * 01 -- reset
 * 02 -- ainsi font font font + structure Hx
 * 03 -- classes utilitaires + fix typos + styles "balises fixes"
 * 04 -- liens + icônes
 * 05 -- layout et modules
 * 06 -- structure (page / skip links / header / main content / footer)
 * 07 -- forms
 * 08 -- dans le contenu
 * 09 -- breakpoints mineurs entre desktop et tablettes
 * 10 -- homo tablettes - breakpoint majeur
 * 11 -- breakpoints mineurs entre tablettes et mobile
 * 12 -- mobile - breakpoint majeur
 * 13 -- breakpoints mineurs tout petit mobile
 * 14 -- print
 * 15 -- fix viewport 
 * 16 -- règles d’état
 * 17 -- bonus : Fixes IE
 */

Les conventions choisies permettent de mieux comprendre l’approche de l’intégrateur.

Cet ordre permet de tirer le meilleur parti de la cascade CSS, de limiter le poids du fichier final, et de pouvoir mieux maintenir le projet.

Les versions Sass utilisent cette structure en fichiers séparés, que ce soit en mobile-first ou desktop-first.

Reset

/* spécial HTML 5 */
article, aside, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section { display: block; }
audio, canvas, progress, video { display: inline-block; }
abbr, eventsource, mark, meter, time, output, bb { display: inline; }

/* à commenter/fallback si vous vous souciez d’IE<8 */
html { box-sizing: border-box; }
*, *:before, *:after {
  box-sizing: inherit;
}

/* reset minimum */
html, body, blockquote, ul, ol, form, button { margin: 0; padding: 0; }
button { border: 0; }
p, ul, ol, dl, blockquote, pre, td, th, label, textarea {
  font-size: 1em; /* equiv 14px */
  line-height: 1.5;
  margin: 1.5em 0;
}

/* reset buttons, bien les styler ensuite dans les forms */
input, select, textarea, optgroup, button {
  background: transparent;
  border: 0;
  font: inherit;
  /* -webkit-appearance: none; */
}

/* fix display img/iframe */
img,
iframe { vertical-align: middle; }

ul, ol { padding-left: 2em; }

.unstyled {
  padding-left: 0;
  list-style-type: none;
}

/* RTL */
[dir="rtl"] ul, 
[dir="rtl"] ol { 
  padding-left: 0; 
  padding-right: 2em;
}
[dir="rtl"] .unstyled {
  padding-right: 0;
}


/* la base correspond à 10px */
html { 
  font-size: 62.5%;
  /* IE9-IE11 math fixing. Voir https://connect.microsoft.com/IE/feedback/details/816709/ */
  /* Merci à @guardian, @victorbritopro, @eQRoeil & Knacss */
  font-size: calc(1em * 0.625);
}
body {
  background: #fff;
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 1.4em; /* taille de base équiv à 14px */
  line-height: 1.5; /* à corriger si besoin est */
}

Tout d’abord, un reset léger pour fixer les balises HTML5.

Le border-box est suggéré, pour simplifier l’intégration en responsive.

Quelques fixes pour les img et la taille de typographie générale… et c’est parti !

Typo, structure `Hx` et rythme vertical

/*@font-face {

}*/

/* calculées via https://rocssti.net/builder-css
 * basé sur http://soqr.fr/vertical-rhythm/ merci @goetter & @eQRoeil */

h1,
.h1 {
  display: block;
  font-size: 1.85714em; /* equiv 26px */
  line-height: 1.61538;
  margin: 0 0 .80769em 0;
}
h2,
.h2 {
  display: block;
  font-size: 1.71429em; /* equiv 24px */
  line-height: 1.75;
  margin: 0 0 .875em 0;
}
h3,
.h3 {
  display: block;
  font-size: 1.57143em;  /* equiv 22px */
  line-height: 1.90909;
  margin: 0 0 .95455em 0;
}
h4,
.h4 {
  display: block;
  font-size: 1.42857em; /* equiv 20px */
  line-height: 1.05;
  margin: 0 0 1.05em 0;
}
h5,
.h5 {
  display: block;
  font-size: 1.28571em;  /* equiv 18px */
  line-height: 1.16667;
  margin: 0 0 1.16667em 0;
}
h6,
.h6 {
  display: block;
  font-size: 1.14286em;  /* equiv 16px */
  line-height: 1.3125;
  margin: 0 0 1.3125em 0;
}

.uppercase {
  text-transform: uppercase;
}

/* autres classes utiles */
.smaller {
  font-size: .71429em; /* equiv 10px */
  line-height: 2.1;
  margin: 2.1em 0;
}
.small {
  font-size: .85714em; /* equiv 12px */
  line-height: 1.75;
  margin: 1.75em 0;
}
.big {
  font-size: 1.14286em; /* equiv 16px */
  line-height: 1.3125;
  margin: 1.3125em 0;
}
.bigger {
  font-size: 1.28571em; /* equiv 18px */
  line-height: 1.16667;
  margin: 1.16667em 0;
}
.biggest {
  font-size: 1.42857em; /* equiv 20px */
  line-height: 1.05;
  margin: 1.05em 0;
}

Un emplacement est prévu pour rentrer les déclarations de type font-face.

La structure Hx est posée, les valeurs ne sont pas mises au hasard, mais bien pour créer un rythme vertical.

Ces valeurs ne sont pas imposées :

soit vous utilisez l’utilitaire donné en commentaire pour calculer vos valeurs ;
soit vous utilisez une version de Röcssti avec pré-processeur pour le calculer automatiquement.

Classes utilitaires + fix typos + styles balises fixes

.noborder,
iframe,
dialog { border: 0; }

/*
 * repris de http://tinytypo.tetue.net/ de @tetue
 * tuné avec l’aide de http://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
 *
 * voir https://en.wikipedia.org/wiki/Quotation_mark#Summary_table pour les références
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
}
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(es) > q {
  quotes: "\00AB" "\00BB" "\201C" "\201D";
}
:lang(it) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
}
:lang(de) > q {
  quotes: "\201e" "\201c" "\201a" "\2018";
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

/* éviter interlignage disgracieux */
sup,
sub {
  vertical-align: 0;
  position: relative;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}

/* éviter marges supplémentaires sur éléments imbriqués */
li p,
li ul {
  margin-bottom: 0;
  margin-top: 0;
}
/* Vous ne passerez PAS (Gandalf) */
/*textarea,
table,
td,
th,
code,
pre,
samp,
div,
p,*/
.cut {
  word-wrap: break-word;
}
@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
  /*textarea,
  table,
  td,
  th,
  code,
  pre,
  samp,
  div,
  p,*/
  .cut {
    word-wrap: normal;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }
}
/* pour supprimer la césure si besoin */
.nocut {
  word-wrap: normal;
}
@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
  .nocut {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }
}

code,
pre,
samp {
  white-space: pre-wrap;
}
code {
  line-height: 1;
}
kbd {
  border: solid 1px;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
  padding: 0 .25em;
}
table {
  margin-bottom: 1.5em;
  table-layout: fixed;
}
/* j’y tiens, les abbr c’est bon pour la planète */
/* seuls ceux ayant un title sont signalés */
abbr[title] {
  border-bottom: dotted 1px; 
  cursor: help;
  text-decoration: none;
  /* couleur héritée du texte */
} 

/* alignements de textes */
.alignright  { text-align: right; }
.aligncenter { text-align: center; }
.alignleft   { text-align: left; }

/* RTL */
[dir="rtl"] .alignright  { text-align: left; }
[dir="rtl"] .alignleft   { text-align: right; }

Les bordures sont virées sur les iframes, et une classe utilitaire .noborder est offerte par la même occasion.

Le mode de rendu fixé du table-layout est mis par défaut. Cela accélère le rendu des pages l’utilisant.
C’est une bonne pratique sur le référentiel Opquast.

Les citations via la balise q ont leurs styles selon la langue utilisée (et sont extensibles au besoin).

Les exposants supérieurs et inférieurs (sup et sub) sont fixés pour éviter des soucis dans le rythme vertical.

Quelques marges sont fixées sur les éléments imbriqués.

La césure est disponible ainsi que quelques styles minimum pour des balises en général peu usitées (code, kbd, etc.).

Enfin, les helpers comme .alignright ou .aligncenter permettent de gérer l’alignement du texte.

Liens et icônes

/* Liens */
a {
  color: #2573be;
  cursor: pointer;
}
/* penser au focus */
a:focus,
a:hover,
a:active {
  color: #000;
}
/* éviter la bordure sur une image comprise dans un lien + fix bordure image IE */
a:link img,
a:visited img, 
img {
  border-style: none;
}

.nodecoration {
  text-decoration: none;
}

/* liens avec icônes, on peut utiliser les DATA-URI */

/* pour signaler liens externes */
/*a[href^="http://"],
a[href^="https://"] {

}*/
/* si URL complète sur un lien interne, virer signalement liens externes */
/*a[href^="http://www.mondomaine.com"] {

}*/
/* contact, liens mailto */
/*.mail,
a[href^="mailto:"] {

}*/
/* dont l’URL se termine par .pdf ou ce que vous voulez comme extension */
/*a[href$=".pdf"] {

}*/

/* facto icons */
/*[class*=icon-30] {
display: inline-block;
width: 30px;
height: 30px;
}*/

Les liens sont définis, ainsi que leur état survolé (et au clavier aussi).

Un fix permet d’éviter une vilaine bordure sur une image comprise dans un lien.

De nombreux exemples sont laissés en commentaire pour les icônes, faites votre choix, rien ne va plus.

Layout et modules

/**
 * layout
 */


/* ça dépend, ça dépasse */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
svg {
  height: auto;
  max-width: 100%;
}
/* pas de reset sur embed, object et video, ça fait foirer certains players */

/* utile pour gérer les floattants */
/* contient des floats */
.mod { 
  overflow: auto;
}
.mod--hidden,
.no-scroll { 
  overflow: hidden;
}

/* quelques floattants */
.left {
  float: left;
}
.right {
  float: right;
}


/* clearer les floats */
.clear {
  clear: both;
}
/*
.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.clearhidden {
  clear: both;
  margin: 0;
  padding: 0;
  visibility: hidden;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
*/

/* RTL */
[dir="rtl"] .left {
  float: right;
}
[dir="rtl"] .right {
  float: left;
}

/*[dir="rtl"] .clearleft {
  clear: right;
}
[dir="rtl"] .clearright {
  clear: left;
}*/


/* gouttière */
.gut {
  height: 1px;
}

/* gestion du table-design en CSS */
.row {
  display: table;
  table-layout: fixed;
}
.inline-row {
  display: inline-table;
  table-layout: fixed;
}
.line {
  display: table-row;
}
.col {
  display: table-cell;
  vertical-align: top;
}
.col-noalign {
  display: table-cell;
}

/* alignements */
.aligntop    { vertical-align: top; }
.alignbottom { vertical-align: bottom; }
.alignmiddle { vertical-align: middle; }

/* block */
.bl {
  display: block;
}

/* inline-block, utile pour les grilles et pas seulement */
.inbl,
.grid {
  display: inline-block;
}

/* grid = élément d’une inline-grid */
.grid {
  vertical-align: top;
}

/* pour relativiser */
.relative {
  position: relative;
}

/* bloc centré */
.center {
  margin-left: auto;
  margin-right: auto;
}

/* activation de l’accélération matérielle */
.hardware-accelerated {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}


/* largeurs de blocks */
.w1   { width: 1%; }
.w2   { width: 2%; }
.w3   { width: 3%; }
.w5   { width: 5%; }
.w10  { width: 10%; }
.w20  { width: 20%; }
.w25  { width: 25%; }
.w30  { width: 30%; }
.w33  { width: 33.333%; }
.w40  { width: 40%; }
.w45  { width: 45%; }
.w49  { width: 49%; }
.w50  { width: 50%; }
.w60  { width: 60%; }
.w66  { width: 66.666%; }
.w70  { width: 70%; }
.w75  { width: 75%; }
.w80  { width: 80%; }
.w90  { width: 90%; }
.w100 { width: 100%; }

/* ici ajouter les largeurs en em */
/*.w960e { width: 60em; }*/

/* ici ajouter les largeurs en pixels */
/*.w500p { width: 500px; }*/

/* ici ajouter les largeurs max en em */
/*.mw960e { max-width: 60em; }*/

/* ici ajouter les largeurs max en pixels */
/*.mw960p { max-width: 960px; }*/

/* margins */
.mt0 { margin-top: 0; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.m0  { margin: 0; }
.m1  { margin: 1em; }
.m2  { margin: 2em; }

.mtauto { margin-top: auto; }
.mrauto { margin-right: auto; }
.mbauto { margin-bottom: auto; }
.mlauto { margin-left: auto; }
.mauto  { margin: auto; }

/* RTL = attention, utiliser avec précaution */
[dir="rtl"] .mr0 { margin-left: 0; }
[dir="rtl"] .mr1 { margin-right: inherit; margin-left: 1em; }
[dir="rtl"] .mr2 { margin-right: inherit; margin-left: 2em; }
[dir="rtl"] .ml0 { margin-right: 0; }
[dir="rtl"] .ml1 { margin-left: inherit; margin-right: 1em; }
[dir="rtl"] .ml2 { margin-left: inherit; margin-right: 2em; }

/* paddings */
.pt0 { padding-top: 0; }
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: 1em; }
.pr2 { padding-right: 2em; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: 1em; }
.pl2 { padding-left: 2em; }
.p0  { padding: 0; }
.p1  { padding: 1em; }
.p2  { padding: 2em; }

/* RTL = attention, utiliser avec précaution */
[dir="rtl"] .pr0 { padding-left: 0; }
[dir="rtl"] .pr1 { padding-right: 0; padding-left: 1em; }
[dir="rtl"] .pr2 { padding-right: 0; padding-left: 2em; }
[dir="rtl"] .pl0 { padding-right: 0; }
[dir="rtl"] .pl1 { padding-left: 0; padding-right: 1em; }
[dir="rtl"] .pl2 { padding-left: 0; padding-right: 2em; }

/* spécial hr de 1px de haut */
hr {
  background-color: #000;
  border: 0;
  color: #000;
  height: 1px;
  margin: 0 0 1em;
  padding: 0;
}

/* pour cacher du texte de manière accessible… toussââââ */
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.nonvisible { visibility: hidden; }

.hidden, [hidden] { display: none; } /* caché partout */
.nodesktop { display: none; } /* caché sur desktop */
/*.noprint   {} /* caché sur print */
/*.notablet  {} /* caché sur tablettes */
/*.nomobile  {} /* caché sur mobile */


/**
 * modules
 */

Petite astuce responsive avec max-width: 100% pour éviter que certains contenus ne débordent de leur conteneur.

Les flottants, le table-layout (avec des classes comme .aligntop, etc.), les blocs et autres inline-blocks sont disponibles pour positionner des éléments.

La création de grilles est aussi possible via .grid.

D’autres classes utilitaires permettent de centrer un bloc ou d’activer l’accélération matérielle (utile pour fluidifier les animations CSS notamment).

Des helpers pour les largeurs en pourcentage, en em ou en pixels, ainsi que pour des largeurs maximales en em ou en pixels sont proposés.

Les helpers pour les marges et padding permettent de jouer rapidement pour espacer/aérer des blocs.

Une classe .invisible permet de cacher visuellement du texte en le laissant atteignable par les aides-techniques de type synthèses vocales.

Enfin, un système simple de classes permet de cacher des contenus selon que l’on se trouve sur la « version » desktop, tablette, mobile et/ou print.

Structure globale

/* === page === */
body::before {
  content: 'desktop';
  display: none;
}

.page {
  margin: 0 auto;
  position: relative;
}

/* === skip links = liens d’évitement === */
.skip {

}
/* skip__link = un lien d’évitement  */
/* idéalement mettez-les visibles pas uniquement au focus */
.skip__link {

}
/* sinon pensez à les rendre visibles au focus */
.skip__link:focus,
.skip__link:hover,
.skip__link:active {

}



/* === header === */
.header {

}
.logo {

}
.navigation {

}


/* === contenu principal === */
.main {

}


/* === footer === */
.footer {

}

Dans cette section doivent se retrouver tous les styles globaux qui se retrouvent partout sur le site (bandeau, pied de page, etc.).

Quelques éléments usuels de structure sont suggérés.

Formulaires

/* donne envie de cliquer sur un bouton */
label,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled] {
  cursor: default;
}

/* évite un resize potentiellement foireux */
textarea {
  resize: vertical;
}
/* supprime un bug Firefox sur button */
button::-moz-focus-inner { border: 0; padding: 0; }

label,
button,
input,
select {
  vertical-align: middle;
}

/* à adapter selon le design voulu */
input,
select,
textarea {
  border: 1px solid #000;
  padding: .5em;
  width: 250px;
}

/* pour les textes des champs */
.label {
  display: inline-block;
}

/* à adapter selon le design voulu */
.button {
  background: #fff;
  color: #000;
}

/* 
 * évite dimensionnement des radios, checkboxes et images
 * et un affichage différent sous IE 
 */
input[type="radio"],
input[type="checkbox"],
input[type="image"] {
  background-color: transparent;
  border: 0;
  width: auto;
}

/* pour annuler la taille des inputs ou autres */
.auto {
  width: auto;
}

/* messages d’erreur ou de confirmation */
.alert,
.alert input,
.alert textarea,
.alert select {
  color: #bf0000;
  font-weight: bold;
}
/* .redborder sert à débugger uniquement */
.alert input,
.alert textarea,
.alert select,
.redborder {
  border: 1px solid #bf0000;
}
.alert img {
  border: 0;
}
/*.ok {

}*/

/* 
 * peut être complété par les attributs HTML5 required
 * exemple avec une couleur, penser à ne pas uniquement transmettre l’info ainsi
 */
/*select:required:invalid,
input:required:invalid,
input:focus:invalid,
textarea:required:invalid,
textarea:focus:invalid {
  background: #fef6f6;
  -moz-box-shadow: none;
}

input:focus:required:valid,
textarea:focus:required:valid,
select:focus:required:valid {
  background: #efe;
  -moz-box-shadow: none;
}*/

Diverses améliorations sont proposées pour les formulaires : indiquer le curseur pour les label, boutons, etc.

Les textarea ne se redimensionnent que dans le sens vertical, pour éviter qu’elles dépassent n’importe comment quand l’utilisateur souhaite les agrandir (oui, je trouve ça insupportable, un châton innocent meurt à chaque fois que ce point est oublié, ça en a zigouillé un paquet… pardon, je m’égare).

Quelques points sont fixés, et quelques éléments et classes sont suggérées par défaut.

Éléments spécifiques à certaines pages + breakpoints mineurs desktop

/*
 *****************************************************************
 * 08 -- dans le contenu (contenus spécifiques aux pages)
 *****************************************************************
 */

/* home */





/*
 *****************************************************************
 * 09 -- breakpoints mineurs entre desktop et tablettes
 *****************************************************************
 */

La section 08 permet de mettre des styles spécifiques aux pages.

La section 09 permet de mettre les breakpoints pour les très larges écrans ou les breakpoints mineurs entre desktop et tablettes.

Breakpoint majeur des tablettes

@media (max-width: 48em) { /* equiv 768px */
   
  /**
   * layout/modules
   */

  /* affichage des éléments */
  .nodesktop { display: block; }

  /* cachage des éléments inutiles, chabitte ! */
  .notablet { display: none; }
  
  /* linéarisation contenus flottants/table-layout */
  .autotablet {
    float: none;
    display: block;
    width: auto;
  }

  /* margins */
  .ontablet-mt0 { margin-top: 0; }
  .ontablet-mt1 { margin-top: 1em; }
  .ontablet-mt2 { margin-top: 2em; }
  .ontablet-mr0 { margin-right: 0; }
  .ontablet-mr1 { margin-right: 1em; }
  .ontablet-mr2 { margin-right: 2em; }
  .ontablet-mb0 { margin-bottom: 0; }
  .ontablet-mb1 { margin-bottom: 1em; }
  .ontablet-mb2 { margin-bottom: 2em; }
  .ontablet-ml0 { margin-left: 0; }
  .ontablet-ml1 { margin-left: 1em; }
  .ontablet-ml2 { margin-left: 2em; }
  .ontablet-m0  { margin: 0; }
  .ontablet-m1  { margin: 1em; }
  .ontablet-m2  { margin: 2em; }

  /* paddings */
  .ontablet-pt0 { padding-top: 0; }
  .ontablet-pt1 { padding-top: 1em; }
  .ontablet-pt2 { padding-top: 2em; }
  .ontablet-pr0 { padding-right: 0; }
  .ontablet-pr1 { padding-right: 1em; }
  .ontablet-pr2 { padding-right: 2em; }
  .ontablet-pb0 { padding-bottom: 0; }
  .ontablet-pb1 { padding-bottom: 1em; }
  .ontablet-pb2 { padding-bottom: 2em; }
  .ontablet-pl0 { padding-left: 0; }
  .ontablet-pl1 { padding-left: 1em; }
  .ontablet-pl2 { padding-left: 2em; }
  .ontablet-p0  { padding: 0; }
  .ontablet-p1  { padding: 1em; }
  .ontablet-p2  { padding: 2em; }
  
  /* alignements de textes */
  .ontablet-alignleft   { text-align: left; }
  .ontablet-aligncenter { text-align: center; }
  .ontablet-alignright  { text-align: right; }

  /**
   * adaptation structure globale (page / skip links / header / contenu principal / footer)
   */
  body::before {
    content: 'tablet';
  }
  
  /**
   * dans le contenu (contenus spécifiques aux pages)
   */

}

Le breakpoint est en em, comme expliqué dans la guideline de Röcssti.

Les classes utilitaires pour cacher des contenus sont mises à jour (.nodesktop et .notablet).

.autotablet permet de linéariser des contenus pour les tablettes.

Les sections d’adaptations aux tablettes viennent ensuite, du plus global au plus spécifique.

Breakpoint mineurs entre tablettes et mobiles

/*
 *****************************************************************
 * 11 -- breakpoints mineurs entre tablettes et mobile
 *****************************************************************
 */

Une section pour les breakpoints mineurs entre tablettes et mobiles.

Breakpoint majeur des mobiles

@media (max-width: 40em) { /* equiv 640px */

  /**
   * layout/modules
   */

  /* affichage des éléments */
  .notablet { display: block; }

  /* cachage des éléments inutiles, chabitte ! */
  .nomobile { display: none; }

  /* linéarisation contenus flottants/table-layout */
  .automobile {
    float: none;
    display: block;
    width: auto;
  }
  
  /* margins */
  .onmobile-mt0 { margin-top: 0; }
  .onmobile-mt1 { margin-top: 1em; }
  .onmobile-mt2 { margin-top: 2em; }
  .onmobile-mr0 { margin-right: 0; }
  .onmobile-mr1 { margin-right: 1em; }
  .onmobile-mr2 { margin-right: 2em; }
  .onmobile-mb0 { margin-bottom: 0; }
  .onmobile-mb1 { margin-bottom: 1em; }
  .onmobile-mb2 { margin-bottom: 2em; }
  .onmobile-ml0 { margin-left: 0; }
  .onmobile-ml1 { margin-left: 1em; }
  .onmobile-ml2 { margin-left: 2em; }
  .onmobile-m0  { margin: 0; }
  .onmobile-m1  { margin: 1em; }
  .onmobile-m2  { margin: 2em; }

  /* paddings */
  .onmobile-pt0 { padding-top: 0; }
  .onmobile-pt1 { padding-top: 1em; }
  .onmobile-pt2 { padding-top: 2em; }
  .onmobile-pr0 { padding-right: 0; }
  .onmobile-pr1 { padding-right: 1em; }
  .onmobile-pr2 { padding-right: 2em; }
  .onmobile-pb0 { padding-bottom: 0; }
  .onmobile-pb1 { padding-bottom: 1em; }
  .onmobile-pb2 { padding-bottom: 2em; }
  .onmobile-pl0 { padding-left: 0; }
  .onmobile-pl1 { padding-left: 1em; }
  .onmobile-pl2 { padding-left: 2em; }
  .onmobile-p0  { padding: 0; }
  .onmobile-p1  { padding: 1em; }
  .onmobile-p2  { padding: 2em; }
  
  /* alignements de textes */
  .onmobile-alignleft   { text-align: left; }
  .onmobile-aligncenter { text-align: center; }
  .onmobile-alignright  { text-align: right; }

  /**
   * adaptation structure globale (page / skip links / header / contenu principal / footer)
   */
  body::before {
    content: 'mobile';
  }
  
  /**
   * dans le contenu (contenus spécifiques aux pages)
   */

}

Le breakpoint est en em, comme expliqué dans la guideline de Röcssti.

Les classes utilitaires pour cacher des contenus sont mises à jour (.notablet et .nomobile).

.automobile permet de linéariser des contenus pour les mobiles.

Les sections d’adaptations aux mobiles viennent ensuite, du plus global au plus spécifique.

Breakpoint mineurs tout petit mobile

@media (max-width: 20em) { /* equiv 320px */

  /**
   * layout/modules
   */

  /* affichage des éléments */
  /*.nomobile { display: block; }*/

  /* cachage des éléments inutiles ! */
  .notinymobile { display: none; }

  /* linéarisation contenus flottants/table-layout */
  .autotinymobile {
    float: none;
    display: block;
    width: auto;
  }

  /**
   * adaptation structure globale (page / skip links / header / contenu principal / footer)
   */
  body::before {
    content: 'tinymobile';
  }
  
  /**
   * dans le contenu (contenus spécifiques aux pages)
   */

}

Une section pour les breakpoints mineurs pour les tout petits écrans.

Print

@media print {

  /* Fixe un bug délirant de Edge au print */
  html {
      -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  /** 
   * ajouter là-dedans les éléments qui ont besoin d’être
   * resetés de manière très bourrine pour le print
   */
  body,
  html,
  .page,
  .reset4print {
    background-color: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    max-height: none;
    display: block;
  }

  body {
    padding: .5em;
    overflow: auto;
  }

  /* cachage des éléments inutiles, chabitte ! */
  .noprint {
    display: none;
  }
  
  /* affichage éléments spécifiques au print */
  .onprint {
    display: block;
  }
  
  /* éviter saut de page hasardeux */
  blockquote, ul, ol {
    page-break-inside: avoid;
  }
  h1, h2, h3, caption {
    page-break-after: avoid;
  }
  
  /* affichage des liens, sauf pour image contenue */
  /* attention, penser à vérifier le résultat et penser 
   * à limiter cette possibilité aux liens dans le contenu */
  /*a:after {
    content: " (" attr(href) ") ";
  }
  a:after img {
    content: "";
  }*/

  /* ici fix propriétés particulières */


} /* end print */

La classe .reset4print permet de faire un reset assez violent sur des éléments pour la version imprimable. Soit cette classe a été mise directement dans la structure, soit il faudra ajouter dans la CSS ces éléments.

.noprint permet de cacher des éléments pour la version imprimable, .onprint fait exactement l’inverse : afficher un contenu exclusivement pour la version imprimable.

D’autres possibilités sont laissées à discrétion comme afficher les adresses après les liens.

Avec ces classes, en général, produire une version print prend quelques minutes à tout casser.

Fix viewport

/* fix viewport pour Win8 (snap mode) et préparer le jour 
 * où le viewport sera supporté par tous les moteurs 
 *  
 * Exemples : http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
 * width=device-width   => width: device-width;
 * height=device-height => height: device-height;
 * initial-scale=2      => zoom: 2;
 * maximum-scale=2      => max-zoom: 2;
 * minimum-scale=0.5    => min-zoom: 0.5;
 * user-scalable=no     => user-zoom: fixed;
 * 
 * pour le snap mode de Win8 => seul width: device-width; fonctionne pour l’instant  
 */

@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

Le Fix viewport sert pour l’instant à Windows 8, notamment pour le snap mode, et pour certains smartphones.

À terme, il remplacera le meta viewport.

Règles d’état

/*
 * Règles d’état = mises en bas pour être prioritaires
 *
 */

/*
.is-hidden,
[aria-hidden=true] {
  display: none;
}
*/

Les règles d’état servent pour les modules ayant plusieurs états (des onglets, un menu de type burger, etc.).

Elles ont été popularisées notamment avec l’approche SMACSS.

Bonus : Fixes IE

/*  
 * basé sur les classes conditionnelles sur l’élément HTML
 *  
 * à utiliser seulement si peu de corrections et 
 * pas d’impact sur les perfs sur les autres navigateurs
 *       
 */

/* less than IE 9 */
.oldies .nooldies {
  display: none;
}

.ie6 .noie6 {
  display: none;
}
.ie7 .noie7 {
  display: none;
}
.ie8 .noie8 {
  display: none;
}
.ie9 .noie9 {
  display: none;
}

.ie7 .col,
.ie7 .col-noalign,
.ie6 .col,
.ie6 .col-noalign {
  float: left;
}
.ie7 .row,
.ie6 .row {
  overflow: auto;
}

/* RTL */
[dir="rtl"] .ie7 .col,
[dir="rtl"] .ie7 .col-noalign,
[dir="rtl"] .ie6 .col,
[dir="rtl"] .ie6 .col-noalign {
  float: right;
}

Ces classes sont basées sur les classes conditionnelles sur l’élément html, comme expliqué dans la section vieux IE dans la guideline de Röcssti.

Par exemple, .noie7 cachera l’élément sur lequel elle sera mise, sur IE7.

Une solution de repli basée sur des flottants est proposée pour le table-layout.

Félicitations, si vous êtes arrivé en bas, c’est que vous étiez motivé. Rien que pour cela, je vous offre une image de châton, parce que vous êtes quelqu’un de bien.

Châton souriant