\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{Gaston}
\pdfinfo{
  /Title (json.pdf)
  /Creator (Cheatography)
  /Author (Gaston)
  /Subject (JSON 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}{6A5BA3}
\definecolor{LightBackground}{HTML}{F5F4F9}
\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{JSON Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Gaston} via \textcolor{DarkBackground}{\uline{cheatography.com/24027/cs/5472/}}}
\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}Gaston \\
  \uline{cheatography.com/gaston} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 21st October, 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{multicols*}{2}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Overview example}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{  "sequence": 52634,  \newline    "employees" : {[} \newline       \{ "first": "Anna", "last:": "Smith", "loc": 1\}, \newline       \{ "first": "John", "last:": "Doe", "loc" : 1 \}, \newline       \{ "first": "Sandra", "last:": "Jones", "loc" : 2\}  \newline     {]}, \newline     "locations" : {[} \newline       \{ "city" : "New York", "type" : "HQ", key: 1 \}, \newline       \{ "city" : "Los Angeles", "type" : "Branch", key: 2 \} \newline     {]} \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{This is a virtual example demonstrating JSON usage. The main object contains a sequence number ("sequence") with a value of 52634, an array of employees and an array of locations.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.68 cm} x{6.32 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Values}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{"string"} & see "Strings" box for details \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
1234 & integer number \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{1234.5678} & floating point number \tn 
% Row Count 4 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{1.234e-3} & floating point with exponent\textasciicircum{}(1)\textasciicircum{} \tn 
% Row Count 6 (+ 2)
% Row 4
\SetRowColor{LightBackground}
true & boolean "True" \tn 
% Row Count 7 (+ 1)
% Row 5
\SetRowColor{white}
false & boolean "False" \tn 
% Row Count 8 (+ 1)
% Row 6
\SetRowColor{LightBackground}
null & denoting "empy" \tn 
% Row Count 9 (+ 1)
% Row 7
\SetRowColor{white}
object & a value can be an object \tn 
% Row Count 10 (+ 1)
% Row 8
\SetRowColor{LightBackground}
array & a value can be an array of values \tn 
% Row Count 12 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{(1) Exponent prefix is case insensitive (e or E) and could be followed by a sign, mandatory for negative, optional for positive}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{5.2 cm} x{2.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Object}}  \tn
% Row 0
\SetRowColor{LightBackground}
\{ \} & empty object \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\{ "key" : value \} & single value object \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\{ "key1" : value , "key2": value, ... \} & multiple value object \tn 
% Row Count 5 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{(1) An object is the preferred top level structure for JSON \newline (2) The key can be any string (see "string" for details) \newline (3) See "Values" box for information on possible values}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.24 cm} x{3.76 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Array}}  \tn
% Row 0
\SetRowColor{LightBackground}
{[} {]} & empty array \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{[} value {]} & single element array \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
{[} value , value , ... {]} & multiple value array \tn 
% Row Count 5 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{(1) See "Values" box for information on possible values}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{5.36 cm} x{2.64 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Strings}}  \tn
% Row 0
\SetRowColor{LightBackground}
"" & empty string \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
"some string characters" & string\textasciicircum{}(1)\textasciicircum{} \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{(1) see "String characters" box for details on allowed characters and coding}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.8 cm} x{5.2 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{String character}}  \tn
% Row 0
\SetRowColor{LightBackground}
non-special characters & Any unicode character except " (quotes), \textbackslash{} (backslash) or any control character \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\textbackslash{}" & double quotes \tn 
% Row Count 5 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\textbackslash{}\textbackslash{} & backslash \tn 
% Row Count 6 (+ 1)
% Row 3
\SetRowColor{white}
\textbackslash{}/ & slash \tn 
% Row Count 7 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\textbackslash{}b & backspace \tn 
% Row Count 8 (+ 1)
% Row 5
\SetRowColor{white}
\textbackslash{}f & formfeed \tn 
% Row Count 9 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\textbackslash{}n & newlinw \tn 
% Row Count 10 (+ 1)
% Row 7
\SetRowColor{white}
\textbackslash{}r & carriage return \tn 
% Row Count 11 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\textbackslash{}t & horizontal tab \tn 
% Row Count 12 (+ 1)
% Row 9
\SetRowColor{white}
\textbackslash{}uXXXX & where XXXX is the 4 digit hexadecimal unicode code for the character \tn 
% Row Count 15 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}