yogsototh/brutcss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pretty html in pre

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-10-09 23:12:58 +02:00
parent 6103d212c0
commit 77c58ac746
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
5 changed files with 496 additions and 394 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
bb.edn
View file

@ -1,5 +1,6 @@
{:paths ["bb"] {:paths ["bb"]
:deps {hiccup/hiccup {:mvn/version "1.0.5"}} :deps {hiccup/hiccup {:mvn/version "1.0.5"}
org.jsoup/jsoup {:mvn/version "1.15.3"}}
:min-bb-version "0.4.0" :min-bb-version "0.4.0"
:tasks :tasks
{clean {:doc "clean temporary assets" {clean {:doc "clean temporary assets"

4
bb/brut/build_css.clj
View file

@ -32,8 +32,8 @@
(printf "building: %s\n" item) (printf "building: %s\n" item)
(let [css (fs/file tmp-dir (str item ".css")) (let [css (fs/file tmp-dir (str item ".css"))
min-css (fs/file dist (str item ".min.css")) min-css (fs/file dist (str item ".min.css"))
_ @(process ["lessc" (format "src/%s.less" item)] {:out css}) _ @(process ["lessc" (format "src/%s.less" item)] {:out css})
minified (-> @(process ["minify" css] {:out :string}) :out)] minified (-> @(process ["minify" css] {:out :string}) :out)]
(spit min-css minified) (spit min-css minified)
(when-not (= "extended-colors" item) (when-not (= "extended-colors" item)
(spit tmp-css minified :append true)))) (spit tmp-css minified :append true))))

11
bb/brut/site.clj
View file

@ -1,7 +1,12 @@
(ns brut.site (ns brut.site
(:require [hiccup2.core :as h] (:require [hiccup2.core :as h]
[clojure.string :as string] [babashka.fs :as fs]
[babashka.fs :as fs])) [babashka.process :refer [process]]))
(defn html-pp [html-str]
(:out
@(process ["tidy" "-i" "-utf8"] {:in html-str
:out :string})))
(def brutalism-img (def brutalism-img
"h/img/brutalism.webp") "h/img/brutalism.webp")
@ -94,7 +99,7 @@
(defn to-pre [hc] (defn to-pre [hc]
(h/html {:escape-strings? true} (h/html {:escape-strings? true}
[:pre (-> (str (h/html hc)) [:pre (-> (str (h/html hc))
(string/replace #"><" ">\n<"))])) html-pp)]))
(defn mk-docs [rel-pref _metas] (defn mk-docs [rel-pref _metas]
(let [to (fn [path] (str rel-pref path)) (let [to (fn [path] (str rel-pref path))

871
h/g-docs.html
View file

@ -22,156 +22,192 @@ mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus
nibh est, metus lobortis morbi cras magna vivamus per risus fermentum. nibh est, metus lobortis morbi cras magna vivamus per risus fermentum.
Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum
sagittis, enim et magna sit inceptos sodales parturient pharetra mollis, aenean sagittis, enim et magna sit inceptos sodales parturient pharetra mollis, aenean
vel nostra tellus commodo pretium sapien sociosqu.</blockquote><p>The <code>doc</code> class ensure the width of the text is not too wide and use a very legible font.</p><blockquote>Some blockquote</blockquote><h2>itemization</h2><h3>ul</h3><ul><li>item 1</li><li>item 2</li><li>item 3; with a very long text that should wrap to the next line in any browser. We&apos;ll see that the wrapped text should be aligned with the text of the other items. This is due to the <code>list-style-position: outside</code>.</li><li>item 4</li></ul><h3>ol</h3><ol><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ol><pre>&lt;div id=&quot;textual&quot;&gt; vel nostra tellus commodo pretium sapien sociosqu.</blockquote><p>The <code>doc</code> class ensure the width of the text is not too wide and use a very legible font.</p><blockquote>Some blockquote</blockquote><h2>itemization</h2><h3>ul</h3><ul><li>item 1</li><li>item 2</li><li>item 3; with a very long text that should wrap to the next line in any browser. We&apos;ll see that the wrapped text should be aligned with the text of the other items. This is due to the <code>list-style-position: outside</code>.</li><li>item 4</li></ul><h3>ol</h3><ol><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ol><pre>&lt;!DOCTYPE html&gt;
&lt;h1&gt;title in h1&lt;/h1&gt; &lt;html&gt;
&lt;p&gt;Some text in &amp;lt;p&amp;gt; with different styles; &lt;b&gt;bold&lt;/b&gt;, &lt;strong&gt;strong&lt;/strong&gt;, &lt;i&gt;italic&lt;/i&gt;, &lt;em&gt;emphasis&lt;/em&gt;, &lt;code&gt;code&lt;/code&gt;, and if you really want something to be extremly visible use the class &lt;code class=&quot;hl&quot;&gt;hl&lt;/code&gt;.&lt;/p&gt; &lt;head&gt;
&lt;p&gt;The text should be &lt;strong class=&quot;hl&quot;&gt;very dense&lt;/strong&gt; on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce &lt;em&gt;professional&lt;/em&gt; UI applications. So no time to make it breathes. We want to make it compact and efficient.&lt;/p&gt; &lt;meta name=&quot;generator&quot; content=
&lt;p&gt;Not we still try to keep a coherent and nice vertical rythm.&lt;/p&gt; &quot;HTML Tidy for HTML5 for Apple macOS version 5.8.0&quot;&gt;
&lt;p&gt;Remark if you need to present a long text to read you can still use the class &lt;code&gt;doc&lt;/code&gt;. Take a look at the next paragraph for example: &lt;/p&gt; &lt;title&gt;&lt;/title&gt;
&lt;blockquote class=&quot;doc&quot;&gt;Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis &lt;/head&gt;
vehicula class ultricies mollis dictumst, aenean non a in donec nulla. &lt;body&gt;
Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer &lt;div id=&quot;textual&quot;&gt;
placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus &lt;h1&gt;title in h1&lt;/h1&gt;
ligula porttitor metus. &lt;p&gt;Some text in &amp;lt;p&amp;gt; with different styles; &lt;b&gt;bold&lt;/b&gt;,
&lt;strong&gt;strong&lt;/strong&gt;, &lt;i&gt;italic&lt;/i&gt;, &lt;em&gt;emphasis&lt;/em&gt;,
Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, &lt;code&gt;code&lt;/code&gt;, and if you really want something to be
euismod libero facilisi aptent elementum felis blandit cursus gravida sociis extremly visible use the class &lt;code class=&quot;hl&quot;&gt;hl&lt;/code&gt;.&lt;/p&gt;
erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. &lt;p&gt;The text should be &lt;strong class=&quot;hl&quot;&gt;very dense&lt;/strong&gt; on
Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula purpose. Forget your lessons about nice space in design here.
euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat The goal of this design is to produce &lt;em&gt;professional&lt;/em&gt; UI
posuere hac. applications. So no time to make it breathes. We want to make
Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, it compact and efficient.&lt;/p&gt;
etiam ultricies proin quisque lectus sociis id tristique, integer phasellus &lt;p&gt;Not we still try to keep a coherent and nice vertical
taciti pretium adipiscing tortor sagittis ligula. rythm.&lt;/p&gt;
&lt;p&gt;Remark if you need to present a long text to read you can
Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, still use the class &lt;code&gt;doc&lt;/code&gt;. Take a look at the next
ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, paragraph for example:&lt;/p&gt;
consectetur mi risus molestie curae malesuada cum. &lt;blockquote class=&quot;doc&quot;&gt;
Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, Lorem ipsum with pretty Lorem ipsum dolor sit amet
mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus consectetur adipiscing elit, urna consequat felis vehicula
nibh est, metus lobortis morbi cras magna vivamus per risus fermentum. class ultricies mollis dictumst, aenean non a in donec nulla.
Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum Phasellus ante pellentesque erat cum risus consequat
sagittis, enim et magna sit inceptos sodales parturient pharetra mollis, aenean imperdiet aliquam, integer placerat et turpis mi eros nec
vel nostra tellus commodo pretium sapien sociosqu.&lt;/blockquote&gt; lobortis taciti, vehicula nisl litora tellus ligula porttitor
&lt;p&gt;The &lt;code&gt;doc&lt;/code&gt; class ensure the width of the text is not too wide and use a very legible font.&lt;/p&gt; metus. Vivamus integer non suscipit taciti mus etiam at
&lt;blockquote&gt;Some blockquote&lt;/blockquote&gt; primis tempor sagittis sit, euismod libero facilisi aptent
&lt;h2&gt;itemization&lt;/h2&gt; elementum felis blandit cursus gravida sociis erat ante,
&lt;h3&gt;ul&lt;/h3&gt; eleifend lectus nullam dapibus netus feugiat curae curabitur
&lt;ul&gt; est ad. Massa curae fringilla porttitor quam sollicitudin
&lt;li&gt;item 1&lt;/li&gt; iaculis aptent leo ligula euismod dictumst, orci penatibus
&lt;li&gt;item 2&lt;/li&gt; mauris eros etiam praesent erat volutpat posuere hac. Metus
&lt;li&gt;item 3; with a very long text that should wrap to the next line in any browser. We&amp;apos;ll see that the wrapped text should be aligned with the text of the other items. This is due to the &lt;code&gt;list-style-position: outside&lt;/code&gt;.&lt;/li&gt; fringilla nec ullamcorper odio aliquam lacinia conubia mauris
&lt;li&gt;item 4&lt;/li&gt; tempor, etiam ultricies proin quisque lectus sociis id
&lt;/ul&gt; tristique, integer phasellus taciti pretium adipiscing tortor
&lt;h3&gt;ol&lt;/h3&gt; sagittis ligula. Mollis pretium lorem primis senectus
&lt;ol&gt; habitasse lectus scelerisque donec, ultricies tortor
&lt;li&gt;item 1&lt;/li&gt; suspendisse adipiscing fusce morbi volutpat pellentesque,
&lt;li&gt;item 2&lt;/li&gt; consectetur mi risus molestie curae malesuada cum. Dignissim
&lt;li&gt;item 3&lt;/li&gt; lacus convallis massa mauris enim ad mattis magnis senectus
&lt;li&gt;item 4&lt;/li&gt; montes, mollis taciti phasellus accumsan bibendum semper
&lt;/ol&gt; blandit suspendisse faucibus nibh est, metus lobortis morbi
&lt;/div&gt;</pre></div><div id="images"><h1>Images</h1><h2>Inside a grid</h2><div class="row"><div class="card"><p>Inside a card</p><img src="../h/img/brutalism.webp" /></div><div><p>Directly a card</p><img src="../h/img/brutalism.webp" /></div><div class="block"><p>In a block</p><img src="../h/img/brutalism.webp" /></div></div><pre>&lt;div id=&quot;images&quot;&gt; cras magna vivamus per risus fermentum. Dapibus imperdiet
&lt;h1&gt;Images&lt;/h1&gt; praesent magnis ridiculus congue gravida curabitur dictum
&lt;h2&gt;Inside a grid&lt;/h2&gt; sagittis, enim et magna sit inceptos sodales parturient
&lt;div class=&quot;row&quot;&gt; pharetra mollis, aenean vel nostra tellus commodo pretium
&lt;div class=&quot;card&quot;&gt; sapien sociosqu.
&lt;p&gt;Inside a card&lt;/p&gt; &lt;/blockquote&gt;
&lt;img src=&quot;../h/img/brutalism.webp&quot; /&gt; &lt;p&gt;The &lt;code&gt;doc&lt;/code&gt; class ensure the width of the text is
&lt;/div&gt; not too wide and use a very legible font.&lt;/p&gt;
&lt;div&gt; &lt;blockquote&gt;
&lt;p&gt;Directly a card&lt;/p&gt; Some blockquote
&lt;img src=&quot;../h/img/brutalism.webp&quot; /&gt; &lt;/blockquote&gt;
&lt;/div&gt; &lt;h2&gt;itemization&lt;/h2&gt;
&lt;div class=&quot;block&quot;&gt; &lt;h3&gt;ul&lt;/h3&gt;
&lt;p&gt;In a block&lt;/p&gt; &lt;ul&gt;
&lt;img src=&quot;../h/img/brutalism.webp&quot; /&gt; &lt;li&gt;item 1&lt;/li&gt;
&lt;/div&gt; &lt;li&gt;item 2&lt;/li&gt;
&lt;/div&gt; &lt;li&gt;item 3; with a very long text that should wrap to the
&lt;/div&gt;</pre></div><div id="buttons"><h1>Buttons</h1><h2>Text Buttons</h2><h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a><h3>Sizes</h3><div class="block">Text<a class="tb sm">small</a><a class="tb">normal</a><a class="tb big">Big</a><a class="tb huge">HUGE</a></div><div class="row"><div class="col c2 gapless"><span> Text <a class="tb sm">tb sm</a> </span><a class="tb sm info">tb sm</a><a class="tb sm ok">tb sm</a><a class="tb sm warn">tb sm</a></div><div class="col c2 gapless"><a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a></div><div class="col c3 gapless"><a class="tb big warn">tb big</a><a class="tb big err">tb big</a><a class="tb big fatal">tb big</a></div><div class="col c5 gapless"><a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a></div></div><h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a><pre class="block">&amp;lt;a class=&amp;quot;btn btn-b&amp;quot;&amp;gt;btn-b&amp;lt;/a&amp;gt;</pre><h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a><pre class="block">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;gt;</pre><div class="row"><div class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><div class="col"><a class="btn std">btn std</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div><div class="col c4 card"><h3>Big</h3><div class="col"><a class="btn std big ">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a></div></div><div class="col c4 card"><h3>Huge</h3><div class="col"><a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a></div></div></div><pre>&lt;div id=&quot;buttons&quot;&gt; next line in any browser. We&apos;ll see that the wrapped text
&lt;h1&gt;Buttons&lt;/h1&gt; should be aligned with the text of the other items. This is
&lt;h2&gt;Text Buttons&lt;/h2&gt; due to the &lt;code&gt;list-style-position: outside&lt;/code&gt;.&lt;/li&gt;
&lt;h3&gt;Classic&lt;/h3&gt; &lt;li&gt;item 4&lt;/li&gt;
&lt;a class=&quot;tb&quot;&gt;tb&lt;/a&gt; &lt;/ul&gt;
&lt;a class=&quot;tb info&quot;&gt;tb info&lt;/a&gt; &lt;h3&gt;ol&lt;/h3&gt;
&lt;a class=&quot;tb ok&quot;&gt;tb ok&lt;/a&gt; &lt;ol&gt;
&lt;a class=&quot;tb warn&quot;&gt;tb warn&lt;/a&gt; &lt;li&gt;item 1&lt;/li&gt;
&lt;a class=&quot;tb err&quot;&gt;tb err&lt;/a&gt; &lt;li&gt;item 2&lt;/li&gt;
&lt;a class=&quot;tb fatal&quot;&gt;tb fatal&lt;/a&gt; &lt;li&gt;item 3&lt;/li&gt;
&lt;h3&gt;Sizes&lt;/h3&gt; &lt;li&gt;item 4&lt;/li&gt;
&lt;div class=&quot;block&quot;&gt;Text&lt;a class=&quot;tb sm&quot;&gt;small&lt;/a&gt; &lt;/ol&gt;
&lt;a class=&quot;tb&quot;&gt;normal&lt;/a&gt; &lt;/div&gt;
&lt;a class=&quot;tb big&quot;&gt;Big&lt;/a&gt; &lt;/body&gt;
&lt;a class=&quot;tb huge&quot;&gt;HUGE&lt;/a&gt; &lt;/html&gt;
&lt;/div&gt; </pre></div><div id="images"><h1>Images</h1><h2>Inside a grid</h2><div class="row"><div class="card"><p>Inside a card</p><img src="../h/img/brutalism.webp" /></div><div><p>Directly a card</p><img src="../h/img/brutalism.webp" /></div><div class="block"><p>In a block</p><img src="../h/img/brutalism.webp" /></div></div><pre>&lt;!DOCTYPE html&gt;
&lt;div class=&quot;row&quot;&gt; &lt;html&gt;
&lt;div class=&quot;col c2 gapless&quot;&gt; &lt;head&gt;
&lt;span&gt; Text &lt;a class=&quot;tb sm&quot;&gt;tb sm&lt;/a&gt; &lt;/span&gt; &lt;meta name=&quot;generator&quot; content=
&lt;a class=&quot;tb sm info&quot;&gt;tb sm&lt;/a&gt; &quot;HTML Tidy for HTML5 for Apple macOS version 5.8.0&quot;&gt;
&lt;a class=&quot;tb sm ok&quot;&gt;tb sm&lt;/a&gt; &lt;title&gt;&lt;/title&gt;
&lt;a class=&quot;tb sm warn&quot;&gt;tb sm&lt;/a&gt; &lt;/head&gt;
&lt;/div&gt; &lt;body&gt;
&lt;div class=&quot;col c2 gapless&quot;&gt; &lt;div id=&quot;images&quot;&gt;
&lt;a class=&quot;tb&quot;&gt;tb&lt;/a&gt; &lt;h1&gt;Images&lt;/h1&gt;
&lt;a class=&quot;tb info&quot;&gt;tb&lt;/a&gt; &lt;h2&gt;Inside a grid&lt;/h2&gt;
&lt;a class=&quot;tb ok&quot;&gt;tb&lt;/a&gt; &lt;div class=&quot;row&quot;&gt;
&lt;a class=&quot;tb warn&quot;&gt;tb&lt;/a&gt; &lt;div class=&quot;card&quot;&gt;
&lt;/div&gt; &lt;p&gt;Inside a card&lt;/p&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col c3 gapless&quot;&gt; &lt;div&gt;
&lt;a class=&quot;tb big warn&quot;&gt;tb big&lt;/a&gt; &lt;p&gt;Directly a card&lt;/p&gt;&lt;img src=
&lt;a class=&quot;tb big err&quot;&gt;tb big&lt;/a&gt; &quot;../h/img/brutalism.webp&quot;&gt;&lt;/div&gt;
&lt;a class=&quot;tb big fatal&quot;&gt;tb big&lt;/a&gt; &lt;div class=&quot;block&quot;&gt;
&lt;/div&gt; &lt;p&gt;In a block&lt;/p&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col c5 gapless&quot;&gt; &lt;/div&gt;
&lt;a class=&quot;tb huge err&quot;&gt;tb huge&lt;/a&gt; &lt;/div&gt;
&lt;a class=&quot;tb huge fatal&quot;&gt;tb huge&lt;/a&gt; &lt;/body&gt;
&lt;/div&gt; &lt;/html&gt;
&lt;/div&gt; </pre></div><div id="buttons"><h1>Buttons</h1><h2>Text Buttons</h2><h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a><h3>Sizes</h3><div class="block">Text<a class="tb sm">small</a><a class="tb">normal</a><a class="tb big">Big</a><a class="tb huge">HUGE</a></div><div class="row"><div class="col c2 gapless"><span> Text <a class="tb sm">tb sm</a> </span><a class="tb sm info">tb sm</a><a class="tb sm ok">tb sm</a><a class="tb sm warn">tb sm</a></div><div class="col c2 gapless"><a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a></div><div class="col c3 gapless"><a class="tb big warn">tb big</a><a class="tb big err">tb big</a><a class="tb big fatal">tb big</a></div><div class="col c5 gapless"><a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a></div></div><h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a><pre class="block">&amp;lt;a class=&amp;quot;btn btn-b&amp;quot;&amp;gt;btn-b&amp;lt;/a&amp;gt;</pre><h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a><pre class="block">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;gt;</pre><div class="row"><div class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><div class="col"><a class="btn std">btn std</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div><div class="col c4 card"><h3>Big</h3><div class="col"><a class="btn std big ">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a></div></div><div class="col c4 card"><h3>Huge</h3><div class="col"><a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a></div></div></div><pre>&lt;!DOCTYPE html&gt;
&lt;h2&gt;Classic&lt;/h2&gt; &lt;html&gt;
&lt;a class=&quot;btn&quot;&gt;btn&lt;/a&gt; &lt;head&gt;
&lt;a class=&quot;btn info&quot;&gt;btn info&lt;/a&gt; &lt;meta name=&quot;generator&quot; content=
&lt;a class=&quot;btn ok&quot;&gt;btn ok&lt;/a&gt; &quot;HTML Tidy for HTML5 for Apple macOS version 5.8.0&quot;&gt;
&lt;a class=&quot;btn warn&quot;&gt;btn warn&lt;/a&gt; &lt;title&gt;&lt;/title&gt;
&lt;a class=&quot;btn err&quot;&gt;btn err&lt;/a&gt; &lt;/head&gt;
&lt;a class=&quot;btn fatal&quot;&gt;btn fatal&lt;/a&gt; &lt;body&gt;
&lt;pre class=&quot;block&quot;&gt;&amp;amp;lt;a class=&amp;amp;quot;btn btn-b&amp;amp;quot;&amp;amp;gt;btn-b&amp;amp;lt;/a&amp;amp;gt;&lt;/pre&gt; &lt;div id=&quot;buttons&quot;&gt;
&lt;h2&gt;Sizes&lt;/h2&gt; &lt;h1&gt;Buttons&lt;/h1&gt;
&lt;a class=&quot;btn sm&quot;&gt;btn sm&lt;/a&gt; &lt;h2&gt;Text Buttons&lt;/h2&gt;
&lt;a class=&quot;btn info&quot;&gt;btn info&lt;/a&gt; &lt;h3&gt;Classic&lt;/h3&gt;&lt;a class=&quot;tb&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb info&quot;&gt;tb
&lt;a class=&quot;btn big warn&quot;&gt;btn big warn&lt;/a&gt; info&lt;/a&gt;&lt;a class=&quot;tb ok&quot;&gt;tb ok&lt;/a&gt;&lt;a class=&quot;tb warn&quot;&gt;tb
&lt;a class=&quot;btn huge err&quot;&gt;btn huge err&lt;/a&gt; warn&lt;/a&gt;&lt;a class=&quot;tb err&quot;&gt;tb err&lt;/a&gt;&lt;a class=&quot;tb fatal&quot;&gt;tb
&lt;pre class=&quot;block&quot;&gt;&amp;amp;lt;a class=&amp;amp;quot;btn sm info&amp;amp;quot;&amp;amp;gt;btn sm info&amp;amp;lt;/a&amp;amp;gt;&lt;/pre&gt; fatal&lt;/a&gt;
&lt;div class=&quot;row&quot;&gt; &lt;h3&gt;Sizes&lt;/h3&gt;
&lt;div class=&quot;col c4 card&quot;&gt; &lt;div class=&quot;block&quot;&gt;
&lt;h3&gt;Standardized Width &lt;code&gt;btn std&lt;/code&gt; Text&lt;a class=&quot;tb sm&quot;&gt;small&lt;/a&gt;&lt;a class=
&lt;/h3&gt; &quot;tb&quot;&gt;normal&lt;/a&gt;&lt;a class=&quot;tb big&quot;&gt;Big&lt;/a&gt;&lt;a class=
&lt;div class=&quot;col&quot;&gt; &quot;tb huge&quot;&gt;HUGE&lt;/a&gt;
&lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt; &lt;/div&gt;
&lt;a class=&quot;btn std info&quot;&gt;btn std info&lt;/a&gt; &lt;div class=&quot;row&quot;&gt;
&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt; &lt;div class=&quot;col c2 gapless&quot;&gt;
&lt;a class=&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt; &lt;span&gt;Text &lt;a class=&quot;tb sm&quot;&gt;tb sm&lt;/a&gt;&lt;/span&gt; &lt;a class=
&lt;a class=&quot;btn std err&quot;&gt;btn std err&lt;/a&gt; &quot;tb sm info&quot;&gt;tb sm&lt;/a&gt;&lt;a class=&quot;tb sm ok&quot;&gt;tb
&lt;a class=&quot;btn std fatal&quot;&gt;btn std fatal&lt;/a&gt; sm&lt;/a&gt;&lt;a class=&quot;tb sm warn&quot;&gt;tb sm&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;div class=&quot;col c2 gapless&quot;&gt;
&lt;div class=&quot;col c4 card&quot;&gt; &lt;a class=&quot;tb&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb info&quot;&gt;tb&lt;/a&gt;&lt;a class=
&lt;h3&gt;Big&lt;/h3&gt; &quot;tb ok&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb warn&quot;&gt;tb&lt;/a&gt;
&lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
&lt;a class=&quot;btn std big &quot;&gt;btn std&lt;/a&gt; &lt;div class=&quot;col c3 gapless&quot;&gt;
&lt;a class=&quot;btn std big info&quot;&gt;btn std info&lt;/a&gt; &lt;a class=&quot;tb big warn&quot;&gt;tb big&lt;/a&gt;&lt;a class=&quot;tb big err&quot;&gt;tb
&lt;a class=&quot;btn std big ok&quot;&gt;btn std ok&lt;/a&gt; big&lt;/a&gt;&lt;a class=&quot;tb big fatal&quot;&gt;tb big&lt;/a&gt;
&lt;a class=&quot;btn std big warn&quot;&gt;btn std warn&lt;/a&gt; &lt;/div&gt;
&lt;/div&gt; &lt;div class=&quot;col c5 gapless&quot;&gt;
&lt;/div&gt; &lt;a class=&quot;tb huge err&quot;&gt;tb huge&lt;/a&gt;&lt;a class=
&lt;div class=&quot;col c4 card&quot;&gt; &quot;tb huge fatal&quot;&gt;tb huge&lt;/a&gt;
&lt;h3&gt;Huge&lt;/h3&gt; &lt;/div&gt;
&lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
&lt;a class=&quot;btn std huge&quot;&gt;btn std&lt;/a&gt; &lt;h2&gt;Classic&lt;/h2&gt;&lt;a class=&quot;btn&quot;&gt;btn&lt;/a&gt;&lt;a class=&quot;btn info&quot;&gt;btn
&lt;a class=&quot;btn std huge info&quot;&gt;btn std info&lt;/a&gt; info&lt;/a&gt;&lt;a class=&quot;btn ok&quot;&gt;btn ok&lt;/a&gt;&lt;a class=&quot;btn warn&quot;&gt;btn
&lt;a class=&quot;btn std huge ok&quot;&gt;btn std ok&lt;/a&gt; warn&lt;/a&gt;&lt;a class=&quot;btn err&quot;&gt;btn err&lt;/a&gt;&lt;a class=&quot;btn fatal&quot;&gt;btn
&lt;/div&gt; fatal&lt;/a&gt;
&lt;/div&gt; &lt;pre class=
&lt;/div&gt; &quot;block&quot;&gt;&amp;amp;lt;a class=&amp;amp;quot;btn btn-b&amp;amp;quot;&amp;amp;gt;btn-b&amp;amp;lt;/a&amp;amp;gt;&lt;/pre&gt;
&lt;/div&gt;</pre></div><div><h1>Messages</h1><div class="row"><div class="col c6 gapless"><h2>Basic Messages</h2><br /><div class="msg"><strong>Normal Message</strong> This is a normal message with <code>msg</code>.</div><div class="msg info"><strong><i class="ico">☞</i> Info</strong> This is done by adding <code>info</code> to the class. &lt;h2&gt;Sizes&lt;/h2&gt;&lt;a class=&quot;btn sm&quot;&gt;btn sm&lt;/a&gt;&lt;a class=
&quot;btn info&quot;&gt;btn info&lt;/a&gt;&lt;a class=&quot;btn big warn&quot;&gt;btn big
warn&lt;/a&gt;&lt;a class=&quot;btn huge err&quot;&gt;btn huge err&lt;/a&gt;
&lt;pre class=
&quot;block&quot;&gt;&amp;amp;lt;a class=&amp;amp;quot;btn sm info&amp;amp;quot;&amp;amp;gt;btn sm info&amp;amp;lt;/a&amp;amp;gt;&lt;/pre&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col c4 card&quot;&gt;
&lt;h3&gt;Standardized Width &lt;code&gt;btn std&lt;/code&gt;&lt;/h3&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std info&quot;&gt;btn
std info&lt;/a&gt;&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=
&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt;&lt;a class=&quot;btn std err&quot;&gt;btn
std err&lt;/a&gt;&lt;a class=&quot;btn std fatal&quot;&gt;btn std fatal&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col c4 card&quot;&gt;
&lt;h3&gt;Big&lt;/h3&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;a class=&quot;btn std big&quot;&gt;btn std&lt;/a&gt;&lt;a class=
&quot;btn std big info&quot;&gt;btn std info&lt;/a&gt;&lt;a class=
&quot;btn std big ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=
&quot;btn std big warn&quot;&gt;btn std warn&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col c4 card&quot;&gt;
&lt;h3&gt;Huge&lt;/h3&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;a class=&quot;btn std huge&quot;&gt;btn std&lt;/a&gt;&lt;a class=
&quot;btn std huge info&quot;&gt;btn std info&lt;/a&gt;&lt;a class=
&quot;btn std huge ok&quot;&gt;btn std ok&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre></div><div><h1>Messages</h1><div class="row"><div class="col c6 gapless"><h2>Basic Messages</h2><br /><div class="msg"><strong>Normal Message</strong> This is a normal message with <code>msg</code>.</div><div class="msg info"><strong><i class="ico">☞</i> Info</strong> This is done by adding <code>info</code> to the class.
</div><div class="msg ok"><strong><i class="ico">☑</i> OK</strong> This is done by adding <code>ok</code> to the class. </div><div class="msg ok"><strong><i class="ico">☑</i> OK</strong> This is done by adding <code>ok</code> to the class.
</div><div class="msg warn"><strong><i class="ico">☣</i> Warning</strong> This is done by adding <code>warn</code> to the class. </div><div class="msg warn"><strong><i class="ico">☣</i> Warning</strong> This is done by adding <code>warn</code> to the class.
</div><div class="msg err"><strong><i class="ico">☒</i> Error</strong> This is done by adding <code>err</code> to the class. </div><div class="msg err"><strong><i class="ico">☒</i> Error</strong> This is done by adding <code>err</code> to the class.
@ -227,103 +263,107 @@ you should stick to the &amp;quot;Android Safe&amp;quot; set.
(The &amp;quot;Total Set&amp;quot; does not include icons from the &amp;quot;Android Safe&amp;quot; set.) (The &amp;quot;Total Set&amp;quot; does not include icons from the &amp;quot;Android Safe&amp;quot; set.)
</div></div></div></div><pre>&amp;lt;i class=&amp;quot;ico&amp;quot;&amp;gt;Copy and paste icons from above here!&amp;lt;/i&amp;gt;</pre><h1>Grids</h1><div class="row"><div class="bg-neutral c12">c12</div></div><div class="row"><div class="bg-neutral c11">c11</div><div class="light c1">c1</div></div><div class="row"><div class="bg-neutral c10">c10</div><div class="light c2">c2</div></div><div class="row"><div class="bg-neutral c9">c9</div><div class="light c3">c3</div></div><div class="row"><div class="bg-neutral c8">c8</div><div class="light c4">c4</div></div><div class="row"><div class="bg-neutral c7">c7</div><div class="light c5">c5</div></div><div class="row"><div class="bg-neutral c6">c6</div><div class="light c6">c6</div></div><div class="row"><div class="bg-neutral c5">c5</div><div class="light c7">c7</div></div><div class="row"><div class="bg-neutral c4">c4</div><div class="light c8">c8</div></div><div class="row"><div class="bg-neutral c3">c3</div><div class="light c9">c9</div></div><div class="row"><div class="bg-neutral c2">c2</div><div class="light c10">c10</div></div><div class="row"><div class="bg-neutral c1">c1</div><div class="light c11">c11</div></div><div class="row"><div class="light c12">c12</div></div><br /><pre>&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;<br /> &amp;lt;div class=&amp;quot;c12&amp;quot;&amp;gt;12&amp;lt;/div&amp;gt;<br />&amp;lt;/div&amp;gt; </div></div></div></div><pre>&amp;lt;i class=&amp;quot;ico&amp;quot;&amp;gt;Copy and paste icons from above here!&amp;lt;/i&amp;gt;</pre><h1>Grids</h1><div class="row"><div class="bg-neutral c12">c12</div></div><div class="row"><div class="bg-neutral c11">c11</div><div class="light c1">c1</div></div><div class="row"><div class="bg-neutral c10">c10</div><div class="light c2">c2</div></div><div class="row"><div class="bg-neutral c9">c9</div><div class="light c3">c3</div></div><div class="row"><div class="bg-neutral c8">c8</div><div class="light c4">c4</div></div><div class="row"><div class="bg-neutral c7">c7</div><div class="light c5">c5</div></div><div class="row"><div class="bg-neutral c6">c6</div><div class="light c6">c6</div></div><div class="row"><div class="bg-neutral c5">c5</div><div class="light c7">c7</div></div><div class="row"><div class="bg-neutral c4">c4</div><div class="light c8">c8</div></div><div class="row"><div class="bg-neutral c3">c3</div><div class="light c9">c9</div></div><div class="row"><div class="bg-neutral c2">c2</div><div class="light c10">c10</div></div><div class="row"><div class="bg-neutral c1">c1</div><div class="light c11">c11</div></div><div class="row"><div class="light c12">c12</div></div><br /><pre>&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;<br /> &amp;lt;div class=&amp;quot;c12&amp;quot;&amp;gt;12&amp;lt;/div&amp;gt;<br />&amp;lt;/div&amp;gt;
<br />&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;<br /> &amp;lt;div class=&amp;quot;c4&amp;quot;&amp;gt;4&amp;lt;/div&amp;gt;<br /> &amp;lt;div class=&amp;quot;c8&amp;quot;&amp;gt;8&amp;lt;/div&amp;gt;<br />&amp;lt;/div&amp;gt; <br />&amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;<br /> &amp;lt;div class=&amp;quot;c4&amp;quot;&amp;gt;4&amp;lt;/div&amp;gt;<br /> &amp;lt;div class=&amp;quot;c8&amp;quot;&amp;gt;8&amp;lt;/div&amp;gt;<br />&amp;lt;/div&amp;gt;
</pre></div><h1>Headings</h1><div class="headings"><p>By default there is some space before and after any heading:</p><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><br /><p>You can remove the space by using the class <code>tight</code> to the heading:</p><h1 class="tight">h1 tight</h1><h2 class="tight">h2 tight</h2><h3 class="tight">h3 tight</h3><h4 class="tight">h4 tight</h4><h5 class="tight">h5 tight</h5><h6 class="tight">h6 tight</h6><br /><pre>&amp;lt;h1&amp;gt;Level One Heading&amp;lt;/h1&amp;gt;</pre></div><pre>&lt;div&gt; </pre></div><h1>Headings</h1><div class="headings"><p>By default there is some space before and after any heading:</p><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><br /><p>You can remove the space by using the class <code>tight</code> to the heading:</p><h1 class="tight">h1 tight</h1><h2 class="tight">h2 tight</h2><h3 class="tight">h3 tight</h3><h4 class="tight">h4 tight</h4><h5 class="tight">h5 tight</h5><h6 class="tight">h6 tight</h6><br /><pre>&amp;lt;h1&amp;gt;Level One Heading&amp;lt;/h1&amp;gt;</pre></div><pre>&lt;!DOCTYPE html&gt;
&lt;h1&gt;Messages&lt;/h1&gt; &lt;html&gt;
&lt;div class=&quot;row&quot;&gt; &lt;head&gt;
&lt;div class=&quot;col c6 gapless&quot;&gt; &lt;meta name=&quot;generator&quot; content=
&lt;h2&gt;Basic Messages&lt;/h2&gt; &quot;HTML Tidy for HTML5 for Apple macOS version 5.8.0&quot;&gt;
&lt;br /&gt; &lt;title&gt;&lt;/title&gt;
&lt;div class=&quot;msg&quot;&gt; &lt;/head&gt;
&lt;strong&gt;Normal Message&lt;/strong&gt; This is a normal message with &lt;code&gt;msg&lt;/code&gt;.&lt;/div&gt; &lt;body&gt;
&lt;div class=&quot;msg info&quot;&gt; &lt;div&gt;
&lt;strong&gt; &lt;h1&gt;Messages&lt;/h1&gt;
&lt;i class=&quot;ico&quot;&gt;☞&lt;/i&gt; Info&lt;/strong&gt; This is done by adding &lt;code&gt;info&lt;/code&gt; to the class. &lt;div class=&quot;row&quot;&gt;
&lt;/div&gt; &lt;div class=&quot;col c6 gapless&quot;&gt;
&lt;div class=&quot;msg ok&quot;&gt; &lt;h2&gt;Basic Messages&lt;/h2&gt;&lt;br&gt;
&lt;strong&gt; &lt;div class=&quot;msg&quot;&gt;
&lt;i class=&quot;ico&quot;&gt;☑&lt;/i&gt; OK&lt;/strong&gt; This is done by adding &lt;code&gt;ok&lt;/code&gt; to the class. &lt;strong&gt;Normal Message&lt;/strong&gt; This is a normal message
&lt;/div&gt; with &lt;code&gt;msg&lt;/code&gt;.
&lt;div class=&quot;msg warn&quot;&gt; &lt;/div&gt;
&lt;strong&gt; &lt;div class=&quot;msg info&quot;&gt;
&lt;i class=&quot;ico&quot;&gt;☣&lt;/i&gt; Warning&lt;/strong&gt; This is done by adding &lt;code&gt;warn&lt;/code&gt; to the class. &lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☞&lt;/i&gt; Info&lt;/strong&gt; This is done
&lt;/div&gt; by adding &lt;code&gt;info&lt;/code&gt; to the class.
&lt;div class=&quot;msg err&quot;&gt; &lt;/div&gt;
&lt;strong&gt; &lt;div class=&quot;msg ok&quot;&gt;
&lt;i class=&quot;ico&quot;&gt;☒&lt;/i&gt; Error&lt;/strong&gt; This is done by adding &lt;code&gt;err&lt;/code&gt; to the class. &lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☑&lt;/i&gt; OK&lt;/strong&gt; This is done by
&lt;/div&gt; adding &lt;code&gt;ok&lt;/code&gt; to the class.
&lt;div class=&quot;msg fatal&quot;&gt; &lt;/div&gt;
&lt;strong&gt; &lt;div class=&quot;msg warn&quot;&gt;
&lt;i class=&quot;ico&quot;&gt;☒&lt;/i&gt; Fatal&lt;/strong&gt; This is done by adding &lt;code&gt;fatal&lt;/code&gt; to the class. &lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☣&lt;/i&gt; Warning&lt;/strong&gt; This is
&lt;/div&gt; done by adding &lt;code&gt;warn&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;col c6 gapless&quot;&gt; &lt;div class=&quot;msg err&quot;&gt;
&lt;h2&gt;Strong Alerts&lt;/h2&gt; &lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☒&lt;/i&gt; Error&lt;/strong&gt; This is done
&lt;br /&gt; by adding &lt;code&gt;err&lt;/code&gt; to the class.
&lt;div class=&quot;msg alert&quot;&gt; &lt;/div&gt;
&lt;strong&gt;Alert Message&lt;/strong&gt;This is a normal message with &lt;code&gt;msg&lt;/code&gt;. &lt;div class=&quot;msg fatal&quot;&gt;
&lt;/div&gt; &lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☒&lt;/i&gt; Fatal&lt;/strong&gt; This is done
&lt;div class=&quot;msg alert info&quot;&gt; by adding &lt;code&gt;fatal&lt;/code&gt; to the class.
&lt;strong&gt; &lt;/div&gt;
&lt;i class=&quot;ico&quot;&gt;☞&lt;/i&gt; Alert Info&lt;/strong&gt;This is done by adding &lt;code&gt;info&lt;/code&gt; to the class. &lt;/div&gt;
&lt;/div&gt; &lt;div class=&quot;col c6 gapless&quot;&gt;
&lt;div class=&quot;msg alert ok&quot;&gt; &lt;h2&gt;Strong Alerts&lt;/h2&gt;&lt;br&gt;
&lt;strong&gt; &lt;div class=&quot;msg alert&quot;&gt;
&lt;i class=&quot;ico&quot;&gt;☑&lt;/i&gt; Alert OK&lt;/strong&gt;This is done by adding &lt;code&gt;ok&lt;/code&gt; to the class. &lt;strong&gt;Alert Message&lt;/strong&gt;This is a normal message
&lt;/div&gt; with &lt;code&gt;msg&lt;/code&gt;.
&lt;div class=&quot;msg alert warn&quot;&gt; &lt;/div&gt;
&lt;strong&gt; &lt;div class=&quot;msg alert info&quot;&gt;
&lt;i class=&quot;ico&quot;&gt;☣&lt;/i&gt; Alert Warning&lt;/strong&gt;This is done by adding &lt;code&gt;warn&lt;/code&gt; to the class. &lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☞&lt;/i&gt; Alert Info&lt;/strong&gt;This is
&lt;/div&gt; done by adding &lt;code&gt;info&lt;/code&gt; to the class.
&lt;div class=&quot;msg alert err&quot;&gt; &lt;/div&gt;
&lt;strong&gt; &lt;div class=&quot;msg alert ok&quot;&gt;
&lt;i class=&quot;ico&quot;&gt;☒&lt;/i&gt; Alert Error&lt;/strong&gt;This is done by adding &lt;code&gt;err&lt;/code&gt; to the class. &lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☑&lt;/i&gt; Alert OK&lt;/strong&gt;This is
&lt;/div&gt; done by adding &lt;code&gt;ok&lt;/code&gt; to the class.
&lt;div class=&quot;msg alert fatal&quot;&gt; &lt;/div&gt;
&lt;strong&gt; &lt;div class=&quot;msg alert warn&quot;&gt;
&lt;i class=&quot;ico&quot;&gt;☒&lt;/i&gt; Alert Fatal&lt;/strong&gt;This is done by adding &lt;code&gt;fatal&lt;/code&gt; to the class. &lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☣&lt;/i&gt; Alert Warning&lt;/strong&gt;This
&lt;/div&gt; is done by adding &lt;code&gt;warn&lt;/code&gt; to the class.
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;div class=&quot;msg alert err&quot;&gt;
&lt;pre&gt;&amp;amp;lt;div class=&amp;amp;quot;msg&amp;amp;quot;&amp;amp;gt; &lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☒&lt;/i&gt; Alert Error&lt;/strong&gt;This is
done by adding &lt;code&gt;err&lt;/code&gt; to the class.
&lt;/div&gt;
&lt;div class=&quot;msg alert fatal&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico&quot;&gt;☒&lt;/i&gt; Alert Fatal&lt;/strong&gt;This is
done by adding &lt;code&gt;fatal&lt;/code&gt; to the class.
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;pre&gt;&amp;amp;lt;div class=&amp;amp;quot;msg&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;strong&amp;amp;gt;Alert headline!&amp;amp;lt;/strong&amp;amp;gt; &amp;amp;lt;strong&amp;amp;gt;Alert headline!&amp;amp;lt;/strong&amp;amp;gt;
Message text Message text
&amp;amp;lt;/div&amp;amp;gt;&lt;/pre&gt; &amp;amp;lt;/div&amp;amp;gt;&lt;/pre&gt;
&lt;div&gt; &lt;div&gt;
&lt;h1&gt;Forms&lt;/h1&gt; &lt;h1&gt;Forms&lt;/h1&gt;&lt;input class=&quot;neutral&quot; placeholder=&quot;input&quot;
&lt;input class=&quot;neutral&quot; placeholder=&quot;input&quot; type=&quot;text&quot; /&gt; type=&quot;text&quot;&gt;&lt;br&gt;
&lt;br /&gt; &lt;textarea class=&quot;neutral&quot; placeholder=&quot;textarea&quot; rows=
&lt;textarea class=&quot;neutral&quot; placeholder=&quot;textarea&quot; rows=&quot;3&quot;&gt; &quot;3&quot;&gt;&lt;/textarea&gt;&lt;br&gt;
&lt;/textarea&gt; &lt;span class=&quot;addon bg-info&quot;&gt;$&lt;/span&gt;&lt;input type=&quot;text&quot;&gt;&lt;br&gt;
&lt;br /&gt; &lt;pre&gt;&amp;amp;lt;input type=&amp;amp;quot;text&amp;amp;quot;&amp;amp;gt;
&lt;span class=&quot;addon bg-info&quot;&gt;$&lt;/span&gt; &lt;br&gt;&amp;amp;lt;textarea rows=&amp;amp;quot;3&amp;amp;quot;&amp;amp;gt;
&lt;input type=&quot;text&quot; /&gt; &lt;br&gt;&amp;amp;lt;span class=&amp;amp;quot;addon&amp;amp;quot;&amp;amp;gt;$&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;input type=&amp;amp;quot;text&amp;amp;quot;&amp;amp;gt;&lt;/pre&gt;
&lt;br /&gt; &lt;div class=&quot;msg&quot;&gt;
&lt;pre&gt;&amp;amp;lt;input type=&amp;amp;quot;text&amp;amp;quot;&amp;amp;gt; &lt;strong&gt;Be careful with addons!&lt;/strong&gt; If you do not want
&lt;br /&gt;&amp;amp;lt;textarea rows=&amp;amp;quot;3&amp;amp;quot;&amp;amp;gt; a space between the addon and the input make sure that
&lt;br /&gt;&amp;amp;lt;span class=&amp;amp;quot;addon&amp;amp;quot;&amp;amp;gt;$&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;input type=&amp;amp;quot;text&amp;amp;quot;&amp;amp;gt;&lt;/pre&gt; there is no space between the
&lt;div class=&quot;msg&quot;&gt; &lt;code&gt;&amp;amp;lt;/span&amp;amp;gt;&lt;/code&gt; and
&lt;strong&gt;Be careful with addons!&lt;/strong&gt; If you do not want a space between the addon and the input make sure that there is no space between the &lt;code&gt;&amp;amp;lt;/span&amp;amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;amp;lt;input&amp;amp;gt;&lt;/code&gt; tags. Example: &lt;pre&gt;... &amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;input ...&lt;/pre&gt; &lt;code&gt;&amp;amp;lt;input&amp;amp;gt;&lt;/code&gt; tags. Example:
&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt; &lt;pre&gt;... &amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;input ...&lt;/pre&gt;&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input class=&quot;smooth&quot;
&lt;input class=&quot;smooth&quot; type=&quot;text&quot; /&gt; type=&quot;text&quot;&gt;
&lt;pre&gt;... &amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;input ...&lt;/pre&gt; &lt;pre&gt;... &amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;input ...&lt;/pre&gt;&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input class=&quot;smooth&quot;
&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt; type=&quot;text&quot;&gt;
&lt;input class=&quot;smooth&quot; type=&quot;text&quot; /&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;div class=&quot;navbar&quot;&gt;
&lt;div class=&quot;navbar&quot;&gt; &lt;h1&gt;Navbars&lt;/h1&gt;
&lt;h1&gt;Navbars&lt;/h1&gt; &lt;nav class=&quot;nav&quot; onclick=&quot;this.focus()&quot; tabindex=&quot;-1&quot;&gt;
&lt;nav class=&quot;nav&quot; onclick=&quot;this.focus()&quot; tabindex=&quot;-1&quot;&gt; &lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;container&quot;&gt; &lt;a class=&quot;pagename current&quot; href=&quot;#&quot;&gt;BRUT&lt;/a&gt;&lt;a href=
&lt;a class=&quot;pagename current&quot; href=&quot;#&quot;&gt;BRUT&lt;/a&gt; &quot;#&quot;&gt;One&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;&lt;a href=
&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt; &quot;#&quot;&gt;Three&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;Four&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt; &lt;/div&gt;
&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt; &lt;/nav&gt;&lt;button class=&quot;btn-close btn sm&quot;&gt;×&lt;/button&gt;&lt;br&gt;
&lt;a href=&quot;#&quot;&gt;Four&lt;/a&gt; &lt;pre&gt;&amp;amp;lt;nav class=&amp;amp;quot;nav&amp;amp;quot; tabindex=&amp;amp;quot;-1&amp;amp;quot; onclick=&amp;amp;quot;this.focus()&amp;amp;quot;&amp;amp;gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;button class=&quot;btn-close btn sm&quot;&gt;×&lt;/button&gt;
&lt;br /&gt;
&lt;pre&gt;&amp;amp;lt;nav class=&amp;amp;quot;nav&amp;amp;quot; tabindex=&amp;amp;quot;-1&amp;amp;quot; onclick=&amp;amp;quot;this.focus()&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;div class=&amp;amp;quot;container&amp;amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;amp;quot;container&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;a class=&amp;amp;quot;pagename current&amp;amp;quot; href=&amp;amp;quot;#&amp;amp;quot;&amp;amp;gt;BRUT&amp;amp;lt;/a&amp;amp;gt; &amp;amp;lt;a class=&amp;amp;quot;pagename current&amp;amp;quot; href=&amp;amp;quot;#&amp;amp;quot;&amp;amp;gt;BRUT&amp;amp;lt;/a&amp;amp;gt;
&amp;amp;lt;a href=&amp;amp;quot;#&amp;amp;quot;&amp;amp;gt;One&amp;amp;lt;/a&amp;amp;gt; &amp;amp;lt;a href=&amp;amp;quot;#&amp;amp;quot;&amp;amp;gt;One&amp;amp;lt;/a&amp;amp;gt;
@ -332,42 +372,41 @@ you should stick to the &amp;quot;Android Safe&amp;quot; set.
&amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/nav&amp;amp;gt; &amp;amp;lt;/nav&amp;amp;gt;
&amp;amp;lt;button class=&amp;amp;quot;btn-close btn sm&amp;amp;quot;&amp;amp;gt;×&amp;amp;lt;/button&amp;amp;gt;&lt;/pre&gt; &amp;amp;lt;button class=&amp;amp;quot;btn-close btn sm&amp;amp;quot;&amp;amp;gt;×&amp;amp;lt;/button&amp;amp;gt;&lt;/pre&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div&gt; &lt;div&gt;
&lt;h1&gt;Tables&lt;/h1&gt; &lt;h1&gt;Tables&lt;/h1&gt;
&lt;table class=&quot;table&quot;&gt; &lt;table class=&quot;table&quot;&gt;
&lt;thead&gt; &lt;thead&gt;
&lt;tr&gt; &lt;tr&gt;
&lt;th&gt;#&lt;/th&gt; &lt;th&gt;#&lt;/th&gt;
&lt;th&gt;Widgets Sold&lt;/th&gt; &lt;th&gt;Widgets Sold&lt;/th&gt;
&lt;th&gt;Revenue (£)&lt;/th&gt; &lt;th&gt;Revenue (£)&lt;/th&gt;
&lt;th&gt;Profit (£)&lt;/th&gt; &lt;th&gt;Profit (£)&lt;/th&gt;
&lt;/tr&gt; &lt;/tr&gt;
&lt;/thead&gt; &lt;/thead&gt;
&lt;tbody&gt; &lt;tbody&gt;
&lt;tr&gt; &lt;tr&gt;
&lt;td&gt;1&lt;/td&gt; &lt;td&gt;1&lt;/td&gt;
&lt;td&gt;5&lt;/td&gt; &lt;td&gt;5&lt;/td&gt;
&lt;td&gt;10&lt;/td&gt; &lt;td&gt;10&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt; &lt;td&gt;2&lt;/td&gt;
&lt;/tr&gt; &lt;/tr&gt;
&lt;tr&gt; &lt;tr&gt;
&lt;td&gt;2&lt;/td&gt; &lt;td&gt;2&lt;/td&gt;
&lt;td&gt;10&lt;/td&gt; &lt;td&gt;10&lt;/td&gt;
&lt;td&gt;20&lt;/td&gt; &lt;td&gt;20&lt;/td&gt;
&lt;td&gt;4&lt;/td&gt; &lt;td&gt;4&lt;/td&gt;
&lt;/tr&gt; &lt;/tr&gt;
&lt;tr&gt; &lt;tr&gt;
&lt;td&gt;3&lt;/td&gt; &lt;td&gt;3&lt;/td&gt;
&lt;td&gt;500&lt;/td&gt; &lt;td&gt;500&lt;/td&gt;
&lt;td&gt;1000&lt;/td&gt; &lt;td&gt;1000&lt;/td&gt;
&lt;td&gt;200&lt;/td&gt; &lt;td&gt;200&lt;/td&gt;
&lt;/tr&gt; &lt;/tr&gt;
&lt;/tbody&gt; &lt;/tbody&gt;
&lt;/table&gt; &lt;/table&gt;&lt;br&gt;
&lt;br /&gt; &lt;br&gt;
&lt;br /&gt; &lt;pre&gt;&amp;amp;lt;table class=&amp;amp;quot;table&amp;amp;quot;&amp;amp;gt;
&lt;pre&gt;&amp;amp;lt;table class=&amp;amp;quot;table&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;thead&amp;amp;gt; &amp;amp;lt;thead&amp;amp;gt;
&amp;amp;lt;tr&amp;amp;gt; &amp;amp;lt;tr&amp;amp;gt;
&amp;amp;lt;th&amp;amp;gt;#&amp;amp;lt;/th&amp;amp;gt; &amp;amp;lt;th&amp;amp;gt;#&amp;amp;lt;/th&amp;amp;gt;
@ -390,112 +429,168 @@ you should stick to the &amp;quot;Android Safe&amp;quot; set.
&amp;amp;lt;/tbody&amp;amp;gt; &amp;amp;lt;/tbody&amp;amp;gt;
&amp;amp;lt;/table&amp;amp;gt; &amp;amp;lt;/table&amp;amp;gt;
&lt;/pre&gt; &lt;/pre&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h1&gt;Icons&lt;/h1&gt; &lt;h1&gt;Icons&lt;/h1&gt;
&lt;div class=&quot;icons&quot;&gt; &lt;div class=&quot;icons&quot;&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;c6&quot;&gt; &lt;div class=&quot;c6&quot;&gt;
&lt;div class=&quot;col card&quot;&gt; &lt;div class=&quot;col card&quot;&gt;
&lt;div class=&quot;block&quot;&gt; &lt;div class=&quot;block&quot;&gt;
&lt;b&gt;Android Safe&lt;/b&gt; &lt;b&gt;Android Safe&lt;/b&gt;
&lt;/div&gt; &lt;/div&gt;&lt;i class=&quot;ico block&quot; style=
&lt;i class=&quot;ico block&quot; style=&quot;line-height: 1.5rem&quot;&gt;☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € № &quot;line-height: 1.5rem&quot;&gt;☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛
&lt;/i&gt; ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №&lt;/i&gt;
&lt;div class=&quot;msg push&quot;&gt;The &amp;amp;quot;Android Safe&amp;amp;quot; icons work everywhere, tested on hundreds of devices. &lt;div class=&quot;msg push&quot;&gt;
&lt;/div&gt; The &amp;amp;quot;Android Safe&amp;amp;quot; icons work
&lt;/div&gt; everywhere, tested on hundreds of devices.
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;c6&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;col card&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;block&quot;&gt; &lt;div class=&quot;c6&quot;&gt;
&lt;b&gt;Total Set&lt;/b&gt; &lt;div class=&quot;col card&quot;&gt;
&lt;/div&gt; &lt;div class=&quot;block&quot;&gt;
&lt;i class=&quot;ico block&quot; style=&quot;line-height: 1.5rem&quot;&gt;✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩ &lt;b&gt;Total Set&lt;/b&gt;
&lt;/i&gt; &lt;/div&gt;&lt;i class=&quot;ico block&quot; style=
&lt;div class=&quot;msg warn push&quot;&gt;Although over 75% of Android devices we tested &quot;line-height: 1.5rem&quot;&gt;✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼
support all &amp;amp;quot;Total Set&amp;amp;quot; icons, if a substantial ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍
portion of your users use old Android devices ۩&lt;/i&gt;
you should stick to the &amp;amp;quot;Android Safe&amp;amp;quot; set. &lt;div class=&quot;msg warn push&quot;&gt;
(The &amp;amp;quot;Total Set&amp;amp;quot; does not include icons from the &amp;amp;quot;Android Safe&amp;amp;quot; set.) Although over 75% of Android devices we tested
&lt;/div&gt; support all &amp;amp;quot;Total Set&amp;amp;quot; icons, if a
&lt;/div&gt; substantial portion of your users use old Android
&lt;/div&gt; devices you should stick to the &amp;amp;quot;Android
&lt;/div&gt; Safe&amp;amp;quot; set. (The &amp;amp;quot;Total
&lt;pre&gt;&amp;amp;lt;i class=&amp;amp;quot;ico&amp;amp;quot;&amp;amp;gt;Copy and paste icons from above here!&amp;amp;lt;/i&amp;amp;gt;&lt;/pre&gt; Set&amp;amp;quot; does not include icons from the
&lt;h1&gt;Grids&lt;/h1&gt; &amp;amp;quot;Android Safe&amp;amp;quot; set.)
&lt;div class=&quot;row&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;bg-neutral c12&quot;&gt;c12&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;bg-neutral c11&quot;&gt;c11&lt;/div&gt; &lt;pre&gt;&amp;amp;lt;i class=&amp;amp;quot;ico&amp;amp;quot;&amp;amp;gt;Copy and paste icons from above here!&amp;amp;lt;/i&amp;amp;gt;&lt;/pre&gt;
&lt;div class=&quot;light c1&quot;&gt;c1&lt;/div&gt; &lt;h1&gt;Grids&lt;/h1&gt;
&lt;/div&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;bg-neutral c12&quot;&gt;
&lt;div class=&quot;bg-neutral c10&quot;&gt;c10&lt;/div&gt; c12
&lt;div class=&quot;light c2&quot;&gt;c2&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c9&quot;&gt;c9&lt;/div&gt; &lt;div class=&quot;bg-neutral c11&quot;&gt;
&lt;div class=&quot;light c3&quot;&gt;c3&lt;/div&gt; c11
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;light c1&quot;&gt;
&lt;div class=&quot;bg-neutral c8&quot;&gt;c8&lt;/div&gt; c1
&lt;div class=&quot;light c4&quot;&gt;c4&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c7&quot;&gt;c7&lt;/div&gt; &lt;div class=&quot;bg-neutral c10&quot;&gt;
&lt;div class=&quot;light c5&quot;&gt;c5&lt;/div&gt; c10
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;light c2&quot;&gt;
&lt;div class=&quot;bg-neutral c6&quot;&gt;c6&lt;/div&gt; c2
&lt;div class=&quot;light c6&quot;&gt;c6&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c5&quot;&gt;c5&lt;/div&gt; &lt;div class=&quot;bg-neutral c9&quot;&gt;
&lt;div class=&quot;light c7&quot;&gt;c7&lt;/div&gt; c9
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;light c3&quot;&gt;
&lt;div class=&quot;bg-neutral c4&quot;&gt;c4&lt;/div&gt; c3
&lt;div class=&quot;light c8&quot;&gt;c8&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;c3&lt;/div&gt; &lt;div class=&quot;bg-neutral c8&quot;&gt;
&lt;div class=&quot;light c9&quot;&gt;c9&lt;/div&gt; c8
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;light c4&quot;&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;c2&lt;/div&gt; c4
&lt;div class=&quot;light c10&quot;&gt;c10&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;c1&lt;/div&gt; &lt;div class=&quot;bg-neutral c7&quot;&gt;
&lt;div class=&quot;light c11&quot;&gt;c11&lt;/div&gt; c7
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;light c5&quot;&gt;
&lt;div class=&quot;light c12&quot;&gt;c12&lt;/div&gt; c5
&lt;/div&gt; &lt;/div&gt;
&lt;br /&gt; &lt;/div&gt;
&lt;pre&gt;&amp;amp;lt;div class=&amp;amp;quot;row&amp;amp;quot;&amp;amp;gt;&lt;br /&gt; &amp;amp;lt;div class=&amp;amp;quot;c12&amp;amp;quot;&amp;amp;gt;12&amp;amp;lt;/div&amp;amp;gt;&lt;br /&gt;&amp;amp;lt;/div&amp;amp;gt; &lt;div class=&quot;row&quot;&gt;
&lt;br /&gt;&amp;amp;lt;div class=&amp;amp;quot;row&amp;amp;quot;&amp;amp;gt;&lt;br /&gt; &amp;amp;lt;div class=&amp;amp;quot;c4&amp;amp;quot;&amp;amp;gt;4&amp;amp;lt;/div&amp;amp;gt;&lt;br /&gt; &amp;amp;lt;div class=&amp;amp;quot;c8&amp;amp;quot;&amp;amp;gt;8&amp;amp;lt;/div&amp;amp;gt;&lt;br /&gt;&amp;amp;lt;/div&amp;amp;gt; &lt;div class=&quot;bg-neutral c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;light c6&quot;&gt;
c6
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;light c7&quot;&gt;
c7
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;light c8&quot;&gt;
c8
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;light c9&quot;&gt;
c9
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;light c10&quot;&gt;
c10
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;light c11&quot;&gt;
c11
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;light c12&quot;&gt;
c12
&lt;/div&gt;
&lt;/div&gt;&lt;br&gt;
&lt;pre&gt;&amp;amp;lt;div class=&amp;amp;quot;row&amp;amp;quot;&amp;amp;gt;&lt;br&gt; &amp;amp;lt;div class=&amp;amp;quot;c12&amp;amp;quot;&amp;amp;gt;12&amp;amp;lt;/div&amp;amp;gt;&lt;br&gt;&amp;amp;lt;/div&amp;amp;gt;
&lt;br&gt;&amp;amp;lt;div class=&amp;amp;quot;row&amp;amp;quot;&amp;amp;gt;&lt;br&gt; &amp;amp;lt;div class=&amp;amp;quot;c4&amp;amp;quot;&amp;amp;gt;4&amp;amp;lt;/div&amp;amp;gt;&lt;br&gt; &amp;amp;lt;div class=&amp;amp;quot;c8&amp;amp;quot;&amp;amp;gt;8&amp;amp;lt;/div&amp;amp;gt;&lt;br&gt;&amp;amp;lt;/div&amp;amp;gt;
&lt;/pre&gt; &lt;/pre&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h1&gt;Headings&lt;/h1&gt; &lt;h1&gt;Headings&lt;/h1&gt;
&lt;div class=&quot;headings&quot;&gt; &lt;div class=&quot;headings&quot;&gt;
&lt;p&gt;By default there is some space before and after any heading:&lt;/p&gt; &lt;p&gt;By default there is some space before and after any
&lt;h1&gt;h1&lt;/h1&gt; heading:&lt;/p&gt;
&lt;h2&gt;h2&lt;/h2&gt; &lt;h1&gt;h1&lt;/h1&gt;
&lt;h3&gt;h3&lt;/h3&gt; &lt;h2&gt;h2&lt;/h2&gt;
&lt;h4&gt;h4&lt;/h4&gt; &lt;h3&gt;h3&lt;/h3&gt;
&lt;h5&gt;h5&lt;/h5&gt; &lt;h4&gt;h4&lt;/h4&gt;
&lt;h6&gt;h6&lt;/h6&gt; &lt;h5&gt;h5&lt;/h5&gt;
&lt;br /&gt; &lt;h6&gt;h6&lt;/h6&gt;&lt;br&gt;
&lt;p&gt;You can remove the space by using the class &lt;code&gt;tight&lt;/code&gt; to the heading:&lt;/p&gt; &lt;p&gt;You can remove the space by using the class
&lt;h1 class=&quot;tight&quot;&gt;h1 tight&lt;/h1&gt; &lt;code&gt;tight&lt;/code&gt; to the heading:&lt;/p&gt;
&lt;h2 class=&quot;tight&quot;&gt;h2 tight&lt;/h2&gt; &lt;h1 class=&quot;tight&quot;&gt;h1 tight&lt;/h1&gt;
&lt;h3 class=&quot;tight&quot;&gt;h3 tight&lt;/h3&gt; &lt;h2 class=&quot;tight&quot;&gt;h2 tight&lt;/h2&gt;
&lt;h4 class=&quot;tight&quot;&gt;h4 tight&lt;/h4&gt; &lt;h3 class=&quot;tight&quot;&gt;h3 tight&lt;/h3&gt;
&lt;h5 class=&quot;tight&quot;&gt;h5 tight&lt;/h5&gt; &lt;h4 class=&quot;tight&quot;&gt;h4 tight&lt;/h4&gt;
&lt;h6 class=&quot;tight&quot;&gt;h6 tight&lt;/h6&gt; &lt;h5 class=&quot;tight&quot;&gt;h5 tight&lt;/h5&gt;
&lt;br /&gt; &lt;h6 class=&quot;tight&quot;&gt;h6 tight&lt;/h6&gt;&lt;br&gt;
&lt;pre&gt;&amp;amp;lt;h1&amp;amp;gt;Level One Heading&amp;amp;lt;/h1&amp;amp;gt;&lt;/pre&gt; &lt;pre&gt;&amp;amp;lt;h1&amp;amp;gt;Level One Heading&amp;amp;lt;/h1&amp;amp;gt;&lt;/pre&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;</pre></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body> &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>

1
shell.nix
View file

@ -5,6 +5,7 @@ mkShell {
lessc lessc
minify minify
babashka babashka
html-tidy
]; ];
shellHook = '' shellHook = ''
echo "shell with lessc and minify" echo "shell with lessc and minify"