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

use bb and clojure

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-10-09 11:03:15 +02:00
parent 0d1c82b1e4
commit 208f4da683
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
10 changed files with 169 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
bb.edn
View file

@ -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]}}}

149
bb/brut/main.clj
View file

@ -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]

1
brut-nocolors.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
brut.min.css vendored
View file

File diff suppressed because one or more lines are too long

32
build.clj
View file

@ -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)

2
h/download.html
View file

@ -1 +1 @@
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT - download</title><link href="../brut-nocolors.min.css" rel="stylesheet" type="text/css" /></head><body class="col gapless"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="../index.html">BRUT</a><a href="../h/docs.html">Docs</a><a href="../h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="central fill" style="background:url(&apos;../h/img/brutalism.webp&apos;)"><a class="btn warn huge" href="../brut.min.css">Download BRUT</a></div></body>
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT - download</title><link href="../brut.min.css" rel="stylesheet" type="text/css" /></head><body class="col gapless"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="../index.html">BRUT</a><a href="../h/docs.html">Docs</a><a href="../h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="central fill" style="background:url(&apos;../h/img/brutalism.webp&apos;)"><a class="btn warn huge" href="../brut.min.css">Download BRUT</a></div></body>

117
h/g-docs.html
View file

@ -1,4 +1,4 @@
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT - documentation</title><link href="../brut-nocolors.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="../index.html">BRUT</a><a href="../h/docs.html">Docs</a><a href="../h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="container"><div id="textual"><h1>title in h1</h1><p>Some text in &lt;p&gt; with different styles; <b>bold</b>, <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>, <code>code</code>, and if you really want something to be extremly visible use the class <code class="hl">hl</code>.</p><p>The text should be <strong class="hl">very dense</strong> on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce <em>professional</em> UI applications. So no time to make it breathes. We want to make it compact and efficient.</p><p>Not we still try to keep a coherent and nice vertical rythm.</p><p>Remark if you need to present a long text to read you can still use the class <code>doc</code>. Take a look at the next paragraph for example: </p><blockquote class="doc">Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT - documentation</title><link href="../brut.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="../index.html">BRUT</a><a href="../h/docs.html">Docs</a><a href="../h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="container"><div id="textual"><h1>title in h1</h1><p>Some text in &lt;p&gt; with different styles; <b>bold</b>, <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>, <code>code</code>, and if you really want something to be extremly visible use the class <code class="hl">hl</code>.</p><p>The text should be <strong class="hl">very dense</strong> on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce <em>professional</em> UI applications. So no time to make it breathes. We want to make it compact and efficient.</p><p>Not we still try to keep a coherent and nice vertical rythm.</p><p>Remark if you need to present a long text to read you can still use the class <code>doc</code>. Take a look at the next paragraph for example: </p><blockquote class="doc">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.&lt;/blockquote&gt;
&lt;img src=&quot;../h/img/brutalism.webp&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre></div><div><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><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 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 fatal"><strong><i class="ico">☒</i> Fatal</strong> This is done by adding <code>fatal</code> to the class.
</div></div><div class="col c6 gapless"><h2>Strong Alerts</h2><br /><div class="msg alert"><strong>Alert Message</strong>This is a normal message with <code>msg</code>.
</div><div class="msg alert info"><strong><i class="ico">☞</i> Alert Info</strong>This is done by adding <code>info</code> to the class.
</div><div class="msg alert ok"><strong><i class="ico">☑</i> Alert OK</strong>This is done by adding <code>ok</code> to the class.
</div><div class="msg alert warn"><strong><i class="ico">☣</i> Alert Warning</strong>This is done by adding <code>warn</code> to the class.
</div><div class="msg alert err"><strong><i class="ico">☒</i> Alert Error</strong>This is done by adding <code>err</code> to the class.
</div><div class="msg alert fatal"><strong><i class="ico">☒</i> Alert Fatal</strong>This is done by adding <code>fatal</code> to the class.
</div></div></div><pre>&amp;lt;div class=&amp;quot;msg&amp;quot;&amp;gt;
&amp;lt;strong&amp;gt;Alert headline!&amp;lt;/strong&amp;gt;
Message text
&amp;lt;/div&amp;gt;</pre><div><h1>Forms</h1><input class="neutral" placeholder="input" type="text" /><br /><textarea class="neutral" placeholder="textarea" rows="3"></textarea><br /><span class="addon bg-info">$</span><input type="text" /><br /><pre>&amp;lt;input type=&amp;quot;text&amp;quot;&amp;gt;
<br />&amp;lt;textarea rows=&amp;quot;3&amp;quot;&amp;gt;
<br />&amp;lt;span class=&amp;quot;addon&amp;quot;&amp;gt;$&amp;lt;/span&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot;&amp;gt;</pre><div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code>&amp;lt;/span&amp;gt;</code> and <code>&amp;lt;input&amp;gt;</code> tags. Example: <pre>... &amp;lt;/span&amp;gt; &amp;lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text" /><pre>... &amp;lt;/span&amp;gt;&amp;lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text" /></div></div><div class="navbar"><h1>Navbars</h1><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename current" href="#">BRUT</a><a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a></div></nav><button class="btn-close btn sm">×</button><br /><pre>&amp;lt;nav class=&amp;quot;nav&amp;quot; tabindex=&amp;quot;-1&amp;quot; onclick=&amp;quot;this.focus()&amp;quot;&amp;gt;
&amp;lt;div class=&amp;quot;container&amp;quot;&amp;gt;
&amp;lt;a class=&amp;quot;pagename current&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;BRUT&amp;lt;/a&amp;gt;
&amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;One&amp;lt;/a&amp;gt;
&amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Two&amp;lt;/a&amp;gt;
&amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Three&amp;lt;/a&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/nav&amp;gt;
&amp;lt;button class=&amp;quot;btn-close btn sm&amp;quot;&amp;gt;×&amp;lt;/button&amp;gt;</pre></div><div><h1>Tables</h1><table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table><br /><br /><pre>&amp;lt;table class=&amp;quot;table&amp;quot;&amp;gt;
&amp;lt;thead&amp;gt;
&amp;lt;tr&amp;gt;
&amp;lt;th&amp;gt;#&amp;lt;/th&amp;gt;
&amp;lt;th&amp;gt;Widgets Sold&amp;lt;/th&amp;gt;
&amp;lt;/tr&amp;gt;
&amp;lt;/thead&amp;gt;
&amp;lt;tbody&amp;gt;
&amp;lt;tr&amp;gt;
&amp;lt;td&amp;gt;1&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;5&amp;lt;/td&amp;gt;
&amp;lt;/tr&amp;gt;
&amp;lt;tr&amp;gt;
&amp;lt;td&amp;gt;2&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;10&amp;lt;/td&amp;gt;
&amp;lt;/tr&amp;gt;
&amp;lt;tr&amp;gt;
&amp;lt;td&amp;gt;3&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;500&amp;lt;/td&amp;gt;
&amp;lt;/tr&amp;gt;
&amp;lt;/tbody&amp;gt;
&amp;lt;/table&amp;gt;
</pre></div><h1>Icons</h1><div class="icons"><div class="row"><div class="c6"><div class="col card"><div class="block"><b>Android Safe</b></div><i class="ico block" style="line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
</i><div class="msg push">The &amp;quot;Android Safe&amp;quot; icons work everywhere, tested on hundreds of devices.
</div></div></div><div class="c6"><div class="col card"><div class="block"><b>Total Set</b></div><i class="ico block" style="line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
</i><div class="msg warn push">Although over 75% of Android devices we tested
support all &amp;quot;Total Set&amp;quot; icons, if a substantial
portion of your users use old Android devices
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.)
</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;
</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;
&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;
&lt;h1&gt;Buttons&lt;/h1&gt;
&lt;h2&gt;Text Buttons&lt;/h2&gt;
&lt;h3&gt;Classic&lt;/h3&gt;
@ -227,6 +171,63 @@ you should stick to the &amp;quot;Android Safe&amp;quot; set.
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&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.
</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 err"><strong><i class="ico">☒</i> Error</strong> This is done by adding <code>err</code> to the class.
</div><div class="msg fatal"><strong><i class="ico">☒</i> Fatal</strong> This is done by adding <code>fatal</code> to the class.
</div></div><div class="col c6 gapless"><h2>Strong Alerts</h2><br /><div class="msg alert"><strong>Alert Message</strong>This is a normal message with <code>msg</code>.
</div><div class="msg alert info"><strong><i class="ico">☞</i> Alert Info</strong>This is done by adding <code>info</code> to the class.
</div><div class="msg alert ok"><strong><i class="ico">☑</i> Alert OK</strong>This is done by adding <code>ok</code> to the class.
</div><div class="msg alert warn"><strong><i class="ico">☣</i> Alert Warning</strong>This is done by adding <code>warn</code> to the class.
</div><div class="msg alert err"><strong><i class="ico">☒</i> Alert Error</strong>This is done by adding <code>err</code> to the class.
</div><div class="msg alert fatal"><strong><i class="ico">☒</i> Alert Fatal</strong>This is done by adding <code>fatal</code> to the class.
</div></div></div><pre>&amp;lt;div class=&amp;quot;msg&amp;quot;&amp;gt;
&amp;lt;strong&amp;gt;Alert headline!&amp;lt;/strong&amp;gt;
Message text
&amp;lt;/div&amp;gt;</pre><div><h1>Forms</h1><input class="neutral" placeholder="input" type="text" /><br /><textarea class="neutral" placeholder="textarea" rows="3"></textarea><br /><span class="addon bg-info">$</span><input type="text" /><br /><pre>&amp;lt;input type=&amp;quot;text&amp;quot;&amp;gt;
<br />&amp;lt;textarea rows=&amp;quot;3&amp;quot;&amp;gt;
<br />&amp;lt;span class=&amp;quot;addon&amp;quot;&amp;gt;$&amp;lt;/span&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot;&amp;gt;</pre><div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code>&amp;lt;/span&amp;gt;</code> and <code>&amp;lt;input&amp;gt;</code> tags. Example: <pre>... &amp;lt;/span&amp;gt; &amp;lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text" /><pre>... &amp;lt;/span&amp;gt;&amp;lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text" /></div></div><div class="navbar"><h1>Navbars</h1><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename current" href="#">BRUT</a><a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a></div></nav><button class="btn-close btn sm">×</button><br /><pre>&amp;lt;nav class=&amp;quot;nav&amp;quot; tabindex=&amp;quot;-1&amp;quot; onclick=&amp;quot;this.focus()&amp;quot;&amp;gt;
&amp;lt;div class=&amp;quot;container&amp;quot;&amp;gt;
&amp;lt;a class=&amp;quot;pagename current&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;BRUT&amp;lt;/a&amp;gt;
&amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;One&amp;lt;/a&amp;gt;
&amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Two&amp;lt;/a&amp;gt;
&amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Three&amp;lt;/a&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/nav&amp;gt;
&amp;lt;button class=&amp;quot;btn-close btn sm&amp;quot;&amp;gt;×&amp;lt;/button&amp;gt;</pre></div><div><h1>Tables</h1><table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table><br /><br /><pre>&amp;lt;table class=&amp;quot;table&amp;quot;&amp;gt;
&amp;lt;thead&amp;gt;
&amp;lt;tr&amp;gt;
&amp;lt;th&amp;gt;#&amp;lt;/th&amp;gt;
&amp;lt;th&amp;gt;Widgets Sold&amp;lt;/th&amp;gt;
&amp;lt;/tr&amp;gt;
&amp;lt;/thead&amp;gt;
&amp;lt;tbody&amp;gt;
&amp;lt;tr&amp;gt;
&amp;lt;td&amp;gt;1&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;5&amp;lt;/td&amp;gt;
&amp;lt;/tr&amp;gt;
&amp;lt;tr&amp;gt;
&amp;lt;td&amp;gt;2&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;10&amp;lt;/td&amp;gt;
&amp;lt;/tr&amp;gt;
&amp;lt;tr&amp;gt;
&amp;lt;td&amp;gt;3&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;500&amp;lt;/td&amp;gt;
&amp;lt;/tr&amp;gt;
&amp;lt;/tbody&amp;gt;
&amp;lt;/table&amp;gt;
</pre></div><h1>Icons</h1><div class="icons"><div class="row"><div class="c6"><div class="col card"><div class="block"><b>Android Safe</b></div><i class="ico block" style="line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
</i><div class="msg push">The &amp;quot;Android Safe&amp;quot; icons work everywhere, tested on hundreds of devices.
</div></div></div><div class="c6"><div class="col card"><div class="block"><b>Total Set</b></div><i class="ico block" style="line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
</i><div class="msg warn push">Although over 75% of Android devices we tested
support all &amp;quot;Total Set&amp;quot; icons, if a substantial
portion of your users use old Android devices
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.)
</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;
</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;
&lt;h1&gt;Messages&lt;/h1&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col c6 gapless&quot;&gt;

2
index.html
View file

@ -1 +1 @@
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT</title><link href="brut-nocolors.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="index.html">BRUT</a><a href="h/docs.html">Docs</a><a href="h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="container col"><div class="hero bg-neutral"><div class="row middle"><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /><div class="col block c6"><h1 class="title">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>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.</p></div><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /></div></div><div class="row"><div class="col card"><h3>Docs</h3><p>Docs</p><p>Docs</p><a class="btn err big push" href="h/docs.html">Docs</a></div><div class="col card"><h3>Download</h3><div class="block"><p>Download BRUT</p></div><a class="btn err big push" href="h/download.html">Download</a></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT</title><link href="brut.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="index.html">BRUT</a><a href="h/docs.html">Docs</a><a href="h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="container col"><div class="hero bg-neutral"><div class="row middle"><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /><div class="col block c6"><h1 class="title">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>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.</p></div><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /></div></div><div class="row"><div class="col card"><h3>Docs</h3><p>Docs</p><p>Docs</p><a class="btn err big push" href="h/docs.html">Docs</a></div><div class="col card"><h3>Download</h3><div class="block"><p>Download BRUT</p></div><a class="btn err big push" href="h/download.html">Download</a></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>

4
src/general.less
View file

@ -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 */

9
src/messages.less
View file

@ -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); }
}