From 208f4da683a89508e1950af95b7341fe5718ca02 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Sun, 9 Oct 2022 11:03:15 +0200 Subject: [PATCH] use bb and clojure --- bb.edn | 9 ++- bb/brut/main.clj | 149 +++++++++++++++++++++--------------------- brut-nocolors.min.css | 1 - brut.min.css | 2 +- build.clj | 32 +++++---- h/download.html | 2 +- h/g-docs.html | 117 +++++++++++++++++---------------- index.html | 2 +- src/general.less | 4 +- src/messages.less | 9 ++- 10 files changed, 169 insertions(+), 158 deletions(-) delete mode 100644 brut-nocolors.min.css diff --git a/bb.edn b/bb.edn index 2692236..980653b 100644 --- a/bb.edn +++ b/bb.edn @@ -1,17 +1,16 @@ {:paths ["bb"] - :deps {hiccup/hiccup {:mvn/version "1.0.5"} - clojure.java-time/clojure.java-time {:mvn/version "1.1.0"}} + :deps {hiccup/hiccup {:mvn/version "1.0.5"}} :min-bb-version "0.4.0" :tasks {clean {:doc "clean temporary assets" :requires ([babashka.fs :as fs]) :task (do (fs/delete-tree "_build") - (fs/delete "brut.min.css") - (fs/delete "brut-nocolors.min.css"))} + (fs/delete-if-exists "brut.min.css") + (fs/delete-if-exists "brut-nocolors.min.css"))} build-site {:doc "build the HTML" :requires ([brut.main]) :task (brut.main/-main)} build-css {:doc "build the CSS" - :task (shell "./build.sh")} + :task (shell "./build.clj")} build {:doc "Build everything" :depends [build-css build-site]}}} diff --git a/bb/brut/main.clj b/bb/brut/main.clj index a11ba7f..c99ff20 100644 --- a/bb/brut/main.clj +++ b/bb/brut/main.clj @@ -33,7 +33,7 @@ [:meta {:http-equiv "Content-Type" :content "text/html; charset=UTF-8"}] [:meta {:name "viewport" :content "width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"}] [:title title] - [:link {:href (str rel-pref "brut-nocolors.min.css") :rel "stylesheet" :type "text/css"}]] + [:link {:href (str rel-pref "brut.min.css") :rel "stylesheet" :type "text/css"}]] [(if gapless? :body.col.gapless :body.col) @@ -175,79 +175,80 @@ vel nostra tellus commodo pretium sapien sociosqu."] [:div.block [:p "In a block"] [:img {:src (to brutalism-img)}]]]] + buttons [:div {:id "buttons"} + [:h1 "Buttons"] + [:h2 "Text Buttons"] + [:h3 "Classic"] + [:a {:class "tb"} "tb"] + [:a {:class "tb info"} "tb info"] + [:a {:class "tb ok"} "tb ok"] + [:a {:class "tb warn"} "tb warn"] + [:a {:class "tb err"} "tb err"] + [:a {:class "tb fatal"} "tb fatal"] + [:h3 "Sizes"] + [:div {:class "block"} "Text" + [:a {:class "tb sm"} "small"] + [:a {:class "tb"} "normal"] + [:a {:class "tb big"} "Big"] + [:a {:class "tb huge"} "HUGE"]] + [:div {:class "row"} + [:div {:class "col c2 gapless"} + [:span " Text " + [:a {:class "tb sm"} "tb sm"]" "] + [:a {:class "tb sm info"} "tb sm"] + [:a {:class "tb sm ok"} "tb sm"] + [:a {:class "tb sm warn"} "tb sm"]] + [:div {:class "col c2 gapless"} + [:a {:class "tb"} "tb"] + [:a {:class "tb info"} "tb"] + [:a {:class "tb ok"} "tb"] + [:a {:class "tb warn"} "tb"]] + [:div {:class "col c3 gapless"} + [:a {:class "tb big warn"} "tb big"] + [:a {:class "tb big err"} "tb big"] + [:a {:class "tb big fatal"} "tb big"]] + [:div {:class "col c5 gapless"} + [:a {:class "tb huge err"} "tb huge"] + [:a {:class "tb huge fatal"} "tb huge"]]] + [:h2 "Classic"] + [:a {:class "btn"} "btn"] + [:a {:class "btn info"} "btn info"] + [:a {:class "btn ok"} "btn ok"] + [:a {:class "btn warn"} "btn warn"] + [:a {:class "btn err"} "btn err"] + [:a {:class "btn fatal"} "btn fatal"] + [:pre {:class "block"} "<a class="btn btn-b">btn-b</a>"] + [:h2 "Sizes"] + [:a {:class "btn sm"} "btn sm"] + [:a {:class "btn info"} "btn info"] + [:a {:class "btn big warn"} "btn big warn"] + [:a {:class "btn huge err"} "btn huge err"] + [:pre {:class "block"} "<a class="btn sm info">btn sm info</a>"] + [:div {:class "row"} + [:div {:class "col c4 card"} + [:h3 "Standardized Width " + [:code "btn std"]] + [:div {:class "col"} + [:a {:class "btn std"} "btn std"] + [:a {:class "btn std info"} "btn std info"] + [:a {:class "btn std ok"} "btn std ok"] + [:a {:class "btn std warn"} "btn std warn"] + [:a {:class "btn std err"} "btn std err"] + [:a {:class "btn std fatal"} "btn std fatal"]]] + [:div {:class "col c4 card"} + [:h3 "Big"] + [:div {:class "col"} + [:a {:class "btn std big "} "btn std"] + [:a {:class "btn std big info"} "btn std info"] + [:a {:class "btn std big ok"} "btn std ok"] + [:a {:class "btn std big warn"} "btn std warn"]]] + [:div {:class "col c4 card"} + [:h3 "Huge"] + [:div {:class "col"} + [:a {:class "btn std huge"} "btn std"] + [:a {:class "btn std huge info"} "btn std info"] + [:a {:class "btn std huge ok"} "btn std ok"]]]]] docs [:div - [:h1 "Buttons"] - [:h2 "Text Buttons"] - [:h3 "Classic"] - [:a {:class "tb"} "tb"] - [:a {:class "tb info"} "tb info"] - [:a {:class "tb ok"} "tb ok"] - [:a {:class "tb warn"} "tb warn"] - [:a {:class "tb err"} "tb err"] - [:a {:class "tb fatal"} "tb fatal"] - [:h3 "Sizes"] - [:div {:class "block"} "Text" - [:a {:class "tb sm"} "small"] - [:a {:class "tb"} "normal"] - [:a {:class "tb big"} "Big"] - [:a {:class "tb huge"} "HUGE"]] - [:div {:class "row"} - [:div {:class "col c2 gapless"} - [:span " Text " - [:a {:class "tb sm"} "tb sm"]" "] - [:a {:class "tb sm info"} "tb sm"] - [:a {:class "tb sm ok"} "tb sm"] - [:a {:class "tb sm warn"} "tb sm"]] - [:div {:class "col c2 gapless"} - [:a {:class "tb"} "tb"] - [:a {:class "tb info"} "tb"] - [:a {:class "tb ok"} "tb"] - [:a {:class "tb warn"} "tb"]] - [:div {:class "col c3 gapless"} - [:a {:class "tb big warn"} "tb big"] - [:a {:class "tb big err"} "tb big"] - [:a {:class "tb big fatal"} "tb big"]] - [:div {:class "col c5 gapless"} - [:a {:class "tb huge err"} "tb huge"] - [:a {:class "tb huge fatal"} "tb huge"]]] - [:h2 "Classic"] - [:a {:class "btn"} "btn"] - [:a {:class "btn info"} "btn info"] - [:a {:class "btn ok"} "btn ok"] - [:a {:class "btn warn"} "btn warn"] - [:a {:class "btn err"} "btn err"] - [:a {:class "btn fatal"} "btn fatal"] - [:pre {:class "block"} "<a class="btn btn-b">btn-b</a>"] - [:h2 "Sizes"] - [:a {:class "btn sm"} "btn sm"] - [:a {:class "btn info"} "btn info"] - [:a {:class "btn big warn"} "btn big warn"] - [:a {:class "btn huge err"} "btn huge err"] - [:pre {:class "block"} "<a class="btn sm info">btn sm info</a>"] - [:div {:class "row"} - [:div {:class "col c4 card"} - [:h3 "Standardized Width " - [:code "btn std"]] - [:div {:class "col"} - [:a {:class "btn std"} "btn std"] - [:a {:class "btn std info"} "btn std info"] - [:a {:class "btn std ok"} "btn std ok"] - [:a {:class "btn std warn"} "btn std warn"] - [:a {:class "btn std err"} "btn std err"] - [:a {:class "btn std fatal"} "btn std fatal"]]] - [:div {:class "col c4 card"} - [:h3 "Big"] - [:div {:class "col"} - [:a {:class "btn std big "} "btn std"] - [:a {:class "btn std big info"} "btn std info"] - [:a {:class "btn std big ok"} "btn std ok"] - [:a {:class "btn std big warn"} "btn std warn"]]] - [:div {:class "col c4 card"} - [:h3 "Huge"] - [:div {:class "col"} - [:a {:class "btn std huge"} "btn std"] - [:a {:class "btn std huge info"} "btn std info"] - [:a {:class "btn std huge ok"} "btn std ok"]]]] [:h1 "Messages"] [:div {:class "row"} [:div {:class "col c6 gapless"} @@ -453,7 +454,7 @@ vel nostra tellus commodo pretium sapien sociosqu."] [:br] [:pre "<h1>Level One Heading</h1>"]]]] [:div.container - (for [b [txt images docs]] + (for [b [txt images buttons docs]] (conj b (to-pre b)))])) (defn -main [& _args] diff --git a/brut-nocolors.min.css b/brut-nocolors.min.css deleted file mode 100644 index b7b72d1..0000000 --- a/brut-nocolors.min.css +++ /dev/null @@ -1 +0,0 @@ -:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}.sm{font-size:.75rem}.big{font-size:2rem;line-height:2rem}.huge{font-size:3rem;line-height:3rem}.hl{background:var(--fg);color:var(--bg)}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif}.tb,.btn{text-decoration:none;display:inline-block}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.btn{background:var(--n0);border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);text-align:center;vertical-align:bottom}.btn:hover{background:var(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row .col{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--nl);border-left:5px solid var(--n0);padding:1rem} \ No newline at end of file diff --git a/brut.min.css b/brut.min.css index 4b6fed6..0f68d3e 100644 --- a/brut.min.css +++ b/brut.min.css @@ -1 +1 @@ -/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}:root{--il:#b8d9fa;--i0:#59d;--i1:#408cd9;--i2:#2a7fd5;--ol:#7fdd7f;--o0:#494;--o1:#3c873c;--o2:#347634;--wl:#ffd24d;--w0:#c90;--w1:#b38600;--w2:#997300;--el:#fa9595;--e0:#d33;--e1:#d32323;--e2:#bd2020;--fl:#dc95fa;--f0:#a3d;--f1:#9e23d3;--f2:#8e20bd;--ia:#0b7ff4;--ib:#3399ff;--oa:#1f8b1f;--ob:#1dc01d;--wa:#997300;--wb:#cc9900;--ea:#d90404;--eb:#ff1111;--fa:#9904d9;--fb:#b811ff}@media(prefers-color-scheme:dark){:root{--il:#2266aa;--i0:#2a7fd5;--i1:#408cd9;--i2:#4b99e7;--ol:#255225;--o0:#347634;--o1:#3c873c;--o2:#39a439;--wl:#664d00;--w0:#997300;--w1:#b38600;--w2:#cc9900;--el:#921818;--e0:#bd2020;--e1:#d32323;--e2:#e92727;--fl:#6d1892;--f0:#8e20bd;--f1:#9e23d3;--f2:#af27e9}}.info{color:var(--i0)}.bg-info{background:var(--il)}.ok{color:var(--o0)}.bg-ok{background:var(--ol)}.warn{color:var(--w0)}.bg-warn{background:var(--wl)}.err{color:var(--e0)}.bg-err{background:var(--el)}.fatal{color:var(--f0)}.bg-fatal{background:var(--fl)}.msg.info{color:var(--fg);background:var(--il);border-color:var(--i0)}.msg.ok{color:var(--fg);background:var(--ol);border-color:var(--o0)}.msg.warn{color:var(--fg);background:var(--wl);border-color:var(--w0)}.msg.err{color:var(--fg);background:var(--el);border-color:var(--e0)}.msg.fatal{color:var(--fg);background:var(--fl);border-color:var(--f0)}.msg.alert,.msg.alert *{color:var(--cnt);background:var(--na);border-color:var(--nb)}.msg.alert.info,.msg.alert.info *{color:#fff;background:var(--ia);border-color:var(--ib)}.msg.alert.ok,.msg.alert.ok *{color:#fff;background:var(--oa);border-color:var(--ob)}.msg.alert.warn,.msg.alert.warn *{color:#fff;background:var(--wa);border-color:var(--wb)}.msg.alert.err,.msg.alert.err *{color:#fff;background:var(--ea);border-color:var(--eb)}.msg.alert.fatal,.msg.alert.fatal *{color:#fff;background:var(--fa);border-color:var(--fb)}.tb.info{color:var(--i0)}.tb.info:hover{color:var(--i1)}.tb.info:active{color:var(--i2)}.tb.ok{color:var(--o0)}.tb.ok:hover{color:var(--o1)}.tb.ok:active{color:var(--o2)}.tb.warn{color:var(--w0)}.tb.warn:hover{color:var(--w1)}.tb.warn:active{color:var(--w2)}.tb.err{color:var(--e0)}.tb.err:hover{color:var(--e1)}.tb.err:active{color:var(--e2)}.tb.fatal{color:var(--f0)}.tb.fatal:hover{color:var(--f1)}.tb.fatal:active{color:var(--f2)}.btn.info{background:var(--i0)}.btn.info:hover{background:var(--i1)}.btn.info:active,.btn.info:focus{background:var(--i2)}.btn.ok{background:var(--o0)}.btn.ok:hover{background:var(--o1)}.btn.ok:active,.btn.ok:focus{background:var(--o2)}.btn.warn{background:var(--w0)}.btn.warn:hover{background:var(--w1)}.btn.warn:active,.btn.warn:focus{background:var(--w2)}.btn.err{background:var(--e0)}.btn.err:hover{background:var(--e1)}.btn.err:active,.btn.err:focus{background:var(--e2)}.btn.fatal{background:var(--f0)}.btn.fatal:hover{background:var(--f1)}.btn.fatal:active,.btn.fatal:focus{background:var(--f2)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}.sm{font-size:.75rem}.big{font-size:2rem;line-height:2rem}.huge{font-size:3rem;line-height:3rem}.hl{background:var(--fg);color:var(--bg)}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif}.tb,.btn{text-decoration:none;display:inline-block}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.btn{background:var(--n0);border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);text-align:center;vertical-align:bottom}.btn:hover{background:var(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row .col{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--nl);border-left:5px solid var(--n0);padding:1rem} \ No newline at end of file +/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}.sm{font-size:.75rem}.big{font-size:2rem;line-height:3rem}.huge{font-size:3rem;line-height:4.5rem}.hl{background:var(--fg);color:var(--bg)}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif}.tb,.btn{text-decoration:none;display:inline-block}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.btn{background:var(--n0);border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);text-align:center;vertical-align:bottom}.btn:hover{background:var(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row .col{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--bg2);border-left:5px solid var(--darken);padding:1rem}.msg.info{background:var(--bg2)}.msg.ok{background:var(--nl)}.msg.warn{background:var(--n0);color:var(--bg)}.msg.err{background:var(--n2);color:var(--bg)}.msg.fatal{background:var(--fg);color:var(--bg)} \ No newline at end of file diff --git a/build.clj b/build.clj index dc92d2d..e36d1cd 100755 --- a/build.clj +++ b/build.clj @@ -1,7 +1,6 @@ #!/usr/bin/env bb (require '[babashka.fs :as fs] - '[babashka.process :refer [process]] - '[java-time.api :as jt]) + '[babashka.process :refer [process]]) (def dist "_build") (def tmp-dir (-> (fs/create-temp-dir) @@ -26,16 +25,23 @@ "tables" "messages"]) -(spit tmp-css (str "/* Copyright %s Yann Esposito; MIT licensed */" - (jt/year (jt/local-date)))) -(doseq [item sub-css] - (println "building: %s" item) - (let [css (fs/file tmp-dir (str item ".css")) - min-css (fs/file tmp-dir (str item ".min.css"))] - (process ["lessc" (format "src/%s.less" item)] {:out css}) - (process ["minify" min-css] {:out min-css}) - (when-not (= "extended-colors" item) - (spit tmp-css (slurp min-css) :append true)))) +(defn current-year [] + (-> (new java.util.Date) + .getYear + ;; yeah... it's dumb + (+ 1900))) -(fs/move tmp-css brut-css :replace-existing :atomic-move) +(spit tmp-css (format "/* Copyright %s Yann Esposito; MIT licensed */" (current-year))) +(doseq [item sub-css] + (printf "building: %s\n" item) + (let [css (fs/file tmp-dir (str item ".css")) + min-css (fs/file dist (str item ".min.css")) + _ @(process ["lessc" (format "src/%s.less" item)] {:out css}) + minified (-> @(process ["minify" css] {:out :string}) :out)] + (spit min-css minified) + (when-not (= "extended-colors" item) + (spit tmp-css minified :append true)))) + +(fs/move tmp-css brut-css {:replace-existing true + :atomic-move true}) (println "build: " brut-css) diff --git a/h/download.html b/h/download.html index db5f21b..b477362 100644 --- a/h/download.html +++ b/h/download.html @@ -1 +1 @@ -BRUT - download
Download BRUT
\ No newline at end of file +BRUT - download
Download BRUT
\ No newline at end of file diff --git a/h/g-docs.html b/h/g-docs.html index 8703046..b3f7c6e 100644 --- a/h/g-docs.html +++ b/h/g-docs.html @@ -1,4 +1,4 @@ -BRUT - documentation

title in h1

Some text in <p> with different styles; bold, strong, italic, emphasis, code, and if you really want something to be extremly visible use the class hl.

The text should be very dense on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce professional UI applications. So no time to make it breathes. We want to make it compact and efficient.

Not we still try to keep a coherent and nice vertical rythm.

Remark if you need to present a long text to read you can still use the class doc. Take a look at the next paragraph for example:

Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis +BRUT - documentation

title in h1

Some text in <p> with different styles; bold, strong, italic, emphasis, code, and if you really want something to be extremly visible use the class hl.

The text should be very dense on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce professional UI applications. So no time to make it breathes. We want to make it compact and efficient.

Not we still try to keep a coherent and nice vertical rythm.

Remark if you need to present a long text to read you can still use the class doc. Take a look at the next paragraph for example:

Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus @@ -87,63 +87,7 @@ vel nostra tellus commodo pretium sapien sociosqu.</blockquote> <img src="../h/img/brutalism.webp" /> </div> </div> -</div>

Buttons

Text Buttons

Classic

tbtb infotb oktb warntb errtb fatal

Sizes

TextsmallnormalBigHUGE
Text tb sm tb smtb smtb sm
tbtbtbtb
tb bigtb bigtb big
tb hugetb huge

Classic

btnbtn infobtn okbtn warnbtn errbtn fatal
&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&gt;

Sizes

btn smbtn infobtn big warnbtn huge err
&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&gt;

Standardized Width btn std

btn stdbtn std infobtn std okbtn std warnbtn std errbtn std fatal

Big

btn stdbtn std infobtn std okbtn std warn

Huge

btn stdbtn std infobtn std ok

Messages

Basic Messages


Normal Message This is a normal message with msg.
☞ Info This is done by adding info to the class. -
☑ OK This is done by adding ok to the class. -
☣ Warning This is done by adding warn to the class. -
☒ Error This is done by adding err to the class. -
☒ Fatal This is done by adding fatal to the class. -

Strong Alerts


Alert MessageThis is a normal message with msg. -
☞ Alert InfoThis is done by adding info to the class. -
☑ Alert OKThis is done by adding ok to the class. -
☣ Alert WarningThis is done by adding warn to the class. -
☒ Alert ErrorThis is done by adding err to the class. -
☒ Alert FatalThis is done by adding fatal to the class. -
&lt;div class=&quot;msg&quot;&gt;
-  &lt;strong&gt;Alert headline!&lt;/strong&gt;
-  Message text
-&lt;/div&gt;

Forms



$
&lt;input type=&quot;text&quot;&gt;
-
&lt;textarea rows=&quot;3&quot;&gt;
-
&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input type=&quot;text&quot;&gt;
Be careful with addons! If you do not want a space between the addon and the input make sure that there is no space between the &lt;/span&gt; and &lt;input&gt; tags. Example: 
... &lt;/span&gt; &lt;input ...
$
... &lt;/span&gt;&lt;input ...
$

Navbars


&lt;nav class=&quot;nav&quot; tabindex=&quot;-1&quot; onclick=&quot;this.focus()&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=&quot;#&quot;&gt;One&lt;/a&gt;
-        &lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
-        &lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
-    &lt;/div&gt;
-&lt;/nav&gt;
-&lt;button class=&quot;btn-close btn sm&quot;&gt;×&lt;/button&gt;

Tables

#Widgets SoldRevenue (£)Profit (£)
15102
210204
35001000200


&lt;table class=&quot;table&quot;&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th&gt;#&lt;/th&gt;
-      &lt;th&gt;Widgets Sold&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;1&lt;/td&gt;
-      &lt;td&gt;5&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;2&lt;/td&gt;
-      &lt;td&gt;10&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;3&lt;/td&gt;
-      &lt;td&gt;500&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-

Icons

Android Safe
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € № -
The &quot;Android Safe&quot; icons work everywhere, tested on hundreds of devices. -
Total Set
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩ -
Although over 75% of Android devices we tested -support all &quot;Total Set&quot; icons, if a substantial -portion of your users use old Android devices -you should stick to the &quot;Android Safe&quot; set. -(The &quot;Total Set&quot; does not include icons from the &quot;Android Safe&quot; set.) -
&lt;i class=&quot;ico&quot;&gt;Copy and paste icons from above here!&lt;/i&gt;

Grids

c12
c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11
c12

&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;c12&quot;&gt;12&lt;/div&gt;
&lt;/div&gt;
-
&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;c4&quot;&gt;4&lt;/div&gt;
    &lt;div class=&quot;c8&quot;&gt;8&lt;/div&gt;
&lt;/div&gt;
-

Headings

By default there is some space before and after any heading:

h1

h2

h3

h4

h5
h6

You can remove the space by using the class tight to the heading:

h1 tight

h2 tight

h3 tight

h4 tight

h5 tight
h6 tight

&lt;h1&gt;Level One Heading&lt;/h1&gt;
<div>
+</div>

Buttons

Text Buttons

Classic

tbtb infotb oktb warntb errtb fatal

Sizes

TextsmallnormalBigHUGE
Text tb sm tb smtb smtb sm
tbtbtbtb
tb bigtb bigtb big
tb hugetb huge

Classic

btnbtn infobtn okbtn warnbtn errbtn fatal
&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&gt;

Sizes

btn smbtn infobtn big warnbtn huge err
&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&gt;

Standardized Width btn std

btn stdbtn std infobtn std okbtn std warnbtn std errbtn std fatal

Big

btn stdbtn std infobtn std okbtn std warn

Huge

btn stdbtn std infobtn std ok
<div id="buttons">
 <h1>Buttons</h1>
 <h2>Text Buttons</h2>
 <h3>Classic</h3>
@@ -227,6 +171,63 @@ you should stick to the &quot;Android Safe&quot; set.
 </div>
 </div>
 </div>
+</div>

Messages

Basic Messages


Normal Message This is a normal message with msg.
☞ Info This is done by adding info to the class. +
☑ OK This is done by adding ok to the class. +
☣ Warning This is done by adding warn to the class. +
☒ Error This is done by adding err to the class. +
☒ Fatal This is done by adding fatal to the class. +

Strong Alerts


Alert MessageThis is a normal message with msg. +
☞ Alert InfoThis is done by adding info to the class. +
☑ Alert OKThis is done by adding ok to the class. +
☣ Alert WarningThis is done by adding warn to the class. +
☒ Alert ErrorThis is done by adding err to the class. +
☒ Alert FatalThis is done by adding fatal to the class. +
&lt;div class=&quot;msg&quot;&gt;
+  &lt;strong&gt;Alert headline!&lt;/strong&gt;
+  Message text
+&lt;/div&gt;

Forms



$
&lt;input type=&quot;text&quot;&gt;
+
&lt;textarea rows=&quot;3&quot;&gt;
+
&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input type=&quot;text&quot;&gt;
Be careful with addons! If you do not want a space between the addon and the input make sure that there is no space between the &lt;/span&gt; and &lt;input&gt; tags. Example: 
... &lt;/span&gt; &lt;input ...
$
... &lt;/span&gt;&lt;input ...
$

Navbars


&lt;nav class=&quot;nav&quot; tabindex=&quot;-1&quot; onclick=&quot;this.focus()&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=&quot;#&quot;&gt;One&lt;/a&gt;
+        &lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
+        &lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
+    &lt;/div&gt;
+&lt;/nav&gt;
+&lt;button class=&quot;btn-close btn sm&quot;&gt;×&lt;/button&gt;

Tables

#Widgets SoldRevenue (£)Profit (£)
15102
210204
35001000200


&lt;table class=&quot;table&quot;&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;#&lt;/th&gt;
+      &lt;th&gt;Widgets Sold&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;1&lt;/td&gt;
+      &lt;td&gt;5&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;2&lt;/td&gt;
+      &lt;td&gt;10&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;3&lt;/td&gt;
+      &lt;td&gt;500&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+

Icons

Android Safe
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € № +
The &quot;Android Safe&quot; icons work everywhere, tested on hundreds of devices. +
Total Set
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩ +
Although over 75% of Android devices we tested +support all &quot;Total Set&quot; icons, if a substantial +portion of your users use old Android devices +you should stick to the &quot;Android Safe&quot; set. +(The &quot;Total Set&quot; does not include icons from the &quot;Android Safe&quot; set.) +
&lt;i class=&quot;ico&quot;&gt;Copy and paste icons from above here!&lt;/i&gt;

Grids

c12
c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11
c12

&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;c12&quot;&gt;12&lt;/div&gt;
&lt;/div&gt;
+
&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;c4&quot;&gt;4&lt;/div&gt;
    &lt;div class=&quot;c8&quot;&gt;8&lt;/div&gt;
&lt;/div&gt;
+

Headings

By default there is some space before and after any heading:

h1

h2

h3

h4

h5
h6

You can remove the space by using the class tight to the heading:

h1 tight

h2 tight

h3 tight

h4 tight

h5 tight
h6 tight

&lt;h1&gt;Level One Heading&lt;/h1&gt;
<div>
 <h1>Messages</h1>
 <div class="row">
 <div class="col c6 gapless">
diff --git a/index.html b/index.html
index cebcbb3..0f7ffbd 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-BRUT
brutalism
BRUT
A Brutalist and Minimalist CSS Framework
This CSS framework is ideal to be used for admin interface where youwant to make it clear, this is not for any kind of end user but onlyadvanced technical people.
brutalism
Docs
Docs
Docs
Docs
Download
Download BRUT
Download

\ No newline at end of file
+BRUT
brutalism
BRUT
A Brutalist and Minimalist CSS Framework
This CSS framework is ideal to be used for admin interface where youwant to make it clear, this is not for any kind of end user but onlyadvanced technical people.
brutalism
Docs
Docs
Docs
Docs
Download
Download BRUT
Download

\ No newline at end of file
diff --git a/src/general.less b/src/general.less
index c591f31..85a936f 100644
--- a/src/general.less
+++ b/src/general.less
@@ -46,8 +46,8 @@ ol {
 ul > li::marker { font-size: 1.5rem; }
 
 .sm { font-size: 0.75rem; }
-.big { font-size: 2rem; line-height: 2rem;}
-.huge { font-size: 3rem; line-height: 3rem;}
+.big { font-size: 2rem; line-height: 3rem;}
+.huge { font-size: 3rem; line-height: 4.5rem;}
 /* highligh revert the colors */
 .hl { background: var(--fg); color: var(--bg); }
 /* doc are for long text to read */
diff --git a/src/messages.less b/src/messages.less
index a80afda..faf6328 100644
--- a/src/messages.less
+++ b/src/messages.less
@@ -1,5 +1,10 @@
 .msg {
-	background: var(--nl);
-	border-left: 5px solid var(--n0);
+	background: var(--bg2);
+	border-left: 5px solid var(--darken);
 	padding: 1rem;
+    &.info { background: var(--bg2); }
+    &.ok { background: var(--nl); }
+    &.warn { background: var(--n0); color: var(--bg); }
+    &.err { background: var(--n2); color: var(--bg); }
+    &.fatal { background: var(--fg); color: var(--bg); }
 }