\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Alexandre Achain (Weizu)}
\pdfinfo{
  /Title (html5-boilerplate.pdf)
  /Creator (Cheatography)
  /Author (Alexandre Achain (Weizu))
  /Subject (HTML5 Boilerplate Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{26282B}
\definecolor{LightBackground}{HTML}{F8F8F8}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{HTML5 Boilerplate Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Alexandre Achain (Weizu)} via \textcolor{DarkBackground}{\uline{cheatography.com/5452/cs/5081/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Alexandre Achain (Weizu) \\
  \uline{cheatography.com/weizu} \\
        \uline{\seqsplit{alexandre}.achain.chez.com/}
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 31st August, 2015.\\
   Updated 13th May, 2016.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.


\begin{tabularx}{17.67cm}{x{2.6992 cm} x{7.0854 cm} x{7.0854 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{17.67cm}}{\bf\textcolor{white}{Common helpers}}  \tn
% Row 0
\SetRowColor{LightBackground}
.ir & Add the .ir class to any element you are applying \seqsplit{image-replacement} to. & When replacing an element's content with an image, make sure to also set a specific \seqsplit{background-image:} \seqsplit{url(pathtoimage.png);},  width, and height so that your replacement image appears. \tn 
% Row Count 12 (+ 12)
% Row 1
\SetRowColor{white}
\seqsplit{.hidden} & Add the .hidden class to any elements that you want to hide from all presentations, including screen readers. & It could be an element that will be populated later with JavaScript or an element you will hide with JavaScript.  Do not use this for SEO keyword stuffing. That is just not cool. \tn 
% Row Count 24 (+ 12)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{.visuallyhidden} & Add the .visuallyhidden class to hide text from browsers but make it available for screen readers. & You can use this to hide text that is specific to screen readers but that other users should not see.  About invisible content, Hiding content for accessibility, HTML5 Boilerplate issue/research. \tn 
% Row Count 37 (+ 13)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{2.6992 cm} x{7.0854 cm} x{7.0854 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{17.67cm}}{\bf\textcolor{white}{Common helpers (cont)}}  \tn
% Row 3
\SetRowColor{LightBackground}
\seqsplit{.invisible} & Add the .invisible class to any element you want to hide without affecting layout. & When you use display: none an element is effectively removed from the layout.  But in some cases you want the element to simply be invisible while remaining in the flow and not affecting the positioning of surrounding content. \tn 
% Row Count 15 (+ 15)
% Row 4
\SetRowColor{white}
\seqsplit{.clearfix} & Adding .clearfix to an element will ensure that it always fully contains its floated children. & There have been many variants of the clearfix hack over the years, and there are other hacks that can also help you to contain floated children,  but the HTML5 Boilerplate currently uses the micro clearfix. \tn 
% Row Count 28 (+ 13)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{17.67cm}}{These classes are pre-written in the boilerplate and just waiting to be used.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Websites}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{\seqsplit{https://html5boilerplate.com/}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{\seqsplit{http://www.initializr.com/}} \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{Ressources for starting H5BP website.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}



\end{document}