Commented source code

Before going into the wonderful code of Röcssti, take the time to read the content structure of the CSS. It is absolutely essential for the organization of your future projects and maintainability (conventions, etc.). Do not underestimate it!

Contents

/* convention (adapt if needed)
 *  .parent
 *  .parent__child
 *  .parent--modifier  
 * 
 * RTL = Right To Left =>
 * to adapt a website in a language that is written from right to left
 * designed for multilingual websites with LTR et RTL
 *
 *
 * summary
 * 01 -- reset
 * 02 -- webfonts + Hx structure
 * 03 -- useful classes (utils) + typo fix + styles for "fixed tags"
 * 04 -- links + icons
 * 05 -- layout & modules
 * 06 -- structure (page / skip links / header / main content / footer)
 * 07 -- forms
 * 08 -- inside content
 * 09 -- minor breakpoints between desktop and tablets
 * 10 -- tablets - major breakpoint
 * 11 -- minor breakpoints between tablets and mobile
 * 12 -- mobile - major breakpoint
 * 13 -- minor breakpoints for very small mobiles
 * 14 -- print
 * 15 -- fix viewport
 * 16 -- state classes
 * 17 -- bonus: Fixes IE
 */

Conventions allow to better understand the choices made by the front-end developer.

This order will make you benefit from the CSS cascade, it will limitate the weight of the final file, and it will be easier to maintain the project.

Sass versions use this structure in separate files, in mobile-first or desktop-first.

Reset

/* for 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; }

/* to comment/fallback if you care about 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, remember to style them in 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;
}



/* base font size at 10px */
html { 
  font-size: 62.5%;
  /* IE9-IE11 math fixing. See https://connect.microsoft.com/IE/feedback/details/816709/ */
  /* Thanks to @guardian, @victorbritopro, @eQRoeil & Knacss */
  font-size: calc(1em * 0.625);
}
body {
  background: #fff;
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 1.4em; /* font-size equiv to 14px */
  line-height: 1.5; /* to update if needed */
}

First of all, a very light reset to fix HTML5 tags.

border-box is suggested to simplify responsive.

Some fixes for img and global typography size… and let’s go!

Typo, Hx structure and vertical rythm

/*@font-face {

}*/

/* calculated via https://rocssti.net/en/builder-css
 * based on http://soqr.fr/vertical-rhythm/ thanks @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;
}

/*  other useful classes */
.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;
}

A place is dedicated to font-face declarations.

Hx structure is made, values are not randomly choosed, but are here to create a vertical rythm.

These values are not blocked:

  • you may use the tool provided in comments to calculate your values;
  • or you use preprocessor versions of Röcssti to calculate them automatically.

Useful classes + typo fix + styles for “fixed tags”

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

/*
 * taken from http://tinytypo.tetue.net/ made by @tetue
 * tuned with the help of https://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
 *
 * see https://en.wikipedia.org/wiki/Quotation_mark#Summary_table for reference
 */
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;
}

/* avoid ugly line-height */
sup,
sub {
  vertical-align: 0;
  position: relative;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}

/* avoid margin on nested elements */
li p,
li ul {
  margin-bottom: 0;
  margin-top: 0;
}
/* Thou shalt not pass (Moïse or Gandalf, don’t remember) */
/*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;
  }
}
/* remove hyphenation if needed */
.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;
}
/* important, abbr are good */
/* only those with a title are shown */
abbr[title] {
  border-bottom: dotted 1px; 
  cursor: help;
  text-decoration: none;
  /* color inherited from text */
} 

/* text aligns */
.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; }

Borders are removed from iframes, and a helper .noborder is provided too.

table-layout is set up to fixed by default. With this, the render will be faster.
It is an Opquast best practice.

Quotes with q tag styles are based on the current language (and they are extensible if needed).

sup and sub tags are fixed to avoid problems in vertical rythm.

Some margins are fixed for nested elements.

Hyphenation is available with some minimal styles for some tags (code, kbd, etc.).

At last, helpers like .alignright or .aligncenter are proposed to manage text alignments.

Links and icons

/* links */
a {
  color: #2573be;
  cursor: pointer;
}
/* remember focus */
a:focus,
a:hover,
a:active {
  color: #000;
}
/* avoid border on images in links + fix border image IE */
a:link img,
a:visited img, 
img {
  border-style: none;
}

.nodecoration {
  text-decoration: none;
}

/* links with icons, may use DATA-URI */

/* external links */
/*a[href^="http://"],
a[href^="https://"] {

}*/
/* if full URL of the website in an internal link, remove icon */
/*a[href^="http://www.mydomaine.com"] {

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

}*/
/* if URL ends with .pdf or whatever */
/*a[href$=".pdf"] {

}*/

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

Links are defined, with their hover state (and keyboard focus state too).

A fix is added for images contained in links, to avoid an ugly border.

A lot of examples are in comment for icons, feel free to use.

Layout and modules

/**
 * layout
 */

/* it depends, it exceeds (french joke) */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
svg {
  height: auto;
  max-width: 100%;
}
/* no reset on embed, object & video, some players don’t like */

/* useful to manage floats */
/* containing floats */
.mod {
  overflow: auto;
}
.mod--hidden,
.no-scroll { 
  overflow: hidden;
}

/* some floattings */
.left {
  float: left;
}
.right {
  float: right;
}

/* clear 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;
}*/

/* gut: "spacing" empty div */
.gut {
  height: 1px;
}

/* table-design in 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;
}

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

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

/* inline-block, useful for grids, and not only */
.inbl,
.grid {
  display: inline-block;
}

/* grid = element of inline-grid */
.grid {
  vertical-align: top;
}

/* to relativize */
.relative {
  position: relative;
}

/* centered block */
.center {
  margin-left: auto;
  margin-right: auto;
}

/* hardware-acceleration activation */
.hardware-accelerated {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}



/* block widths */
.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%; }

/* here you may add em widths */
/*.w960e { width: 60em; }*/

/* here you may add pixel widths */
/*.w500p { width: 500px; }*/

/* here you may add em max-widths */
/*.mw960e { max-width: 60em; }*/

/* here you may add pixel max-widths */
/*.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 = warning, use with 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 = warning, use with 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; }

/* for 1px-high hr */
hr {
  background-color: #000;
  border: 0;
  color: #000;
  height: 1px;
  margin: 0 0 1em;
  padding: 0;
}

/* to hide text with accessibility… a11y */
.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; } /* hidden everywhere */
.nodesktop { display: none; } /* hidden on desktop */
/*.noprint   {} /* hidden on print */
/*.notablet  {} /* hidden on tablets */
/*.nomobile  {} /* hidden on mobile */


/**
 * modules
 */

Little responsive tip with max-width: 100% to avoid content overflow.

Floats, table-layout (with classes like .aligntop, etc.), blocks and inline-blocks are available to position elements.

Grids can be created with .grid.

Other helpers are available to center blocks or to enable hardware acceleration (useful for CSS animations).

Some helpers for percent widths, in em or in pixels, also for max-widths in em or in pixels are proposed.

Margin and padding helpers may be used to quickly manage blocks.

.invisible class is made to visually hide tex, however it will be reachable by vocal synthesis.

Lastly, a very simple system of classes for hiding contents on desktop, tablets, mobile and/or print.

Global structure 

/* === page === */
body::before {
  content: 'desktop';
  display: none;
}
.page {
  margin: 0 auto;
  position: relative;
}

/* --- skip links --- */
.skip {

}
/* .skip__link = 1 skip link  */
/* they should be visible not only on focus */
.skip__link {

}
/* anyway remember making them visible on focus */
.skip__link:focus,
.skip__link:hover,
.skip__link:active {

}



/* --- header --- */
.header {

}
.logo {

}
.navigation {

}


/* --- main content --- */
.main {

}


/* --- footer --- */
.footer {

}

In this section, you may put all global styles (header, footer, etc.).

Some standard structure elements are suggested.

Forms

/* makes you want to click on */
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;
}

/* avoid dummy resize */
textarea {
  resize: vertical;
}
/* remove a Firefox difference on button tag */
button::-moz-focus-inner { border: 0; padding: 0; }

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

/* to adapt to your design */
input,
select,
textarea {
  border: 1px solid #000;
  padding: .5em;
  width: 250px;
}

/* for field texts */
.label {
  display: inline-block;
}

/* to adapt to your design */
.button {
  background: #fff;
  color: #000;
}

/*
 * avoids dimensioning for radio, checkboxes and images
 * and a different display on IE
 */
input[type="radio"],
input[type="checkbox"],
input[type="image"] {
  background-color: transparent;
  border: 0;
  width: auto;
}

/* to cancel input sizing or other if needed */
.auto {
  width: auto;
}

/* error or confirmation messages */
.alert,
.alert input,
.alert textarea,
.alert select {
  color: #bf0000;
  font-weight: bold;
}
/* .redborder is only used to debug */
.alert input,
.alert textarea,
.alert select,
.redborder {
  border: 1px solid #bf0000;
}
.alert img {
  border: 0;
}
/*.ok {

}*/

/* can be completed with HTML5 required attribute
 * example with a color, remember not only displaying information with it
 */
/*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;
}*/

Some enhancements are proposed for forms: cursor for labels, buttons, etc.

textarea can be resized only vertically, to prevent problems when the user wants to enlarge them (I can’t fucking stand when it is not done, an innocent kitten dies each time it is forgotten, so many were killed… sorry, I digress).

Some points are fixed, and some elements are suggested.

Specific items for pages + minor desktop breakpoints

/*
 *****************************************************************
 * 08 -- inside content (other styles for pages)
 *****************************************************************
 */

/* home */





/*
 *****************************************************************
 * 09 -- minor breakpoints between desktop and tablets
 *****************************************************************
 */

Section #08 is here to add styles for specific pages.

Section #09 is here for big-screen breakpoints or for minor breakpoints between desktop and tablets.

Major tablet breakpoint

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

  /* display elements */
  .nodesktop { display: block; }

  /* hide unnecessary elements */
  .notablet { display: none; }
  
  /* linearization of floating content/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; }
  
  /* text aligns */
  .ontablet-alignleft   { text-align: left; }
  .ontablet-aligncenter { text-align: center; }
  .ontablet-alignright  { text-align: right; }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */
  body::before {
    content: 'tablet';
  }
  
  /**
   * inside content (other styles for pages)
   */

}

The breakpoint is em-based, as explained in Röcssti guideline.

Some classes for hiding content are updated (.nodesktop and .notablet).

.autotablet linearizes contents for tablets.

Then, sections for adapting contents to tablets are here, from global to specific.

Minor breakpoints between tablets and mobiles

/*
 *****************************************************************
 * 11 -- minor breakpoints between tablets and mobile
 *****************************************************************
 */

This section is for minor breakpoints between tablets and mobiles.

Major breakpoint for mobiles

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

  /**
   * layout/modules
   */

  /* display elements */
  .notablet { display: block; }

  /* hide unnecessary elements */
  .nomobile { display: none; }

  /* linearization of floating content/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; }
  
  /* text aligns */
  .onmobile-alignleft   { text-align: left; }
  .onmobile-aligncenter { text-align: center; }
  .onmobile-alignright  { text-align: right; }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */
  body::before {
    content: 'mobile';
  }
  
  /**
   * inside content (other styles for pages)
   */

}

The breakpoint is em-based, as explained in Röcssti guideline.

Some classes for hiding content are updated (.notablet and .nomobile).

.automobile linearizes contents for mobiles.

Then, sections for adapting contents to mobiles are here, from global to specific.

Minor breakpoints for very small mobiles

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

  /**
   * layout/modules
   */

  /* display elements */
  /*.nomobile { display: block; }*/

  /* hide unnecessary elements */
  .notinymobile { display: none; }

  /* linearization of floating content/table-layout */
  .autotinymobile {
    float: none;
    display: block;
    width: auto;
  }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */
  body::before {
    content: 'tinymobile';
  }
  
  /**
   * inside content (other styles for pages)
   */


}

This section is for minor breakpoints for very small screens.

Print

@media print {

  /* Fix a crazy scrollbar display on Edge printing */
  html {
      -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  /**
   * add in this all elements which need to be hardly reseted for 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;
  }

  /* hide unnecessary elements */
  .noprint {
    display: none;
  }
  
  /* display specific elements for print */
  .onprint {
    display: block;
  }
  
  /* avoid problematic page break */
  blockquote, ul, ol {
    page-break-inside: avoid;
  }
  h1, h2, h3, caption {
    page-break-after: avoid;
  }
  
  /* display links, except for those containing images */
  /* warning, remember checking the result & think to limitate
   * this option only for inside content links */
  /*a:after {
    content: " (" attr(href) ") ";
  }
  a:after img {
    content: "";
  }*/

  /* fix particular properties */


} /* end print */

.reset4print class makes a violent print reset on elements. Either this class was put directly into the structure, either you might factor elements with it in the CSS.

.noprint is for hiding contents for print version, .onprint does the opposite: displays an element only on print version.

Other possibilities are provided, feel free to use and adapt.

With these classes, producing a print version takes just a few minutes.

Fix viewport

/* fix viewport for Win8 (snap mode) and preparing day
 * when viewport will be supported by all render engines
 *
 * Examples: 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;
 *
 * for Win8 snap mode => only width: device-width; works for the moment
 */

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

This section is here for the moment for Windows 8 snap mode, and for some smartphones.

In a few years, it will replace meta viewport.

State rules

/*
 * State classes = put here to take priority on all classes
 *
 */

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

The state rules are used for modules with multiple states (tabs, a burger menu type, etc.).

They were popularized in particular with the SMACSS approach.

Bonus: Fixes for IE

/*
 * based on conditional classes on HTML element
 *
 * to be used only if there are not to many fixes &
 * small impact on webperfs for other browsers
 *
 */

/* 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;
}

These classes are based on conditionnal classes put on html element, as explained in the old IE section in Röcssti guideline.

For example, .noie7 will hide an element on IE7.

A fallback based on floats is proposed for table-layout.

Congratulations, if you came down here, you proved you were motivated. Just for you, here is a picture of a kitten.

kitten