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

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"] {:paths ["bb"]
:deps {hiccup/hiccup {:mvn/version "1.0.5"} :deps {hiccup/hiccup {:mvn/version "1.0.5"}}
clojure.java-time/clojure.java-time {:mvn/version "1.1.0"}}
:min-bb-version "0.4.0" :min-bb-version "0.4.0"
:tasks :tasks
{clean {:doc "clean temporary assets" {clean {:doc "clean temporary assets"
:requires ([babashka.fs :as fs]) :requires ([babashka.fs :as fs])
:task (do (fs/delete-tree "_build") :task (do (fs/delete-tree "_build")
(fs/delete "brut.min.css") (fs/delete-if-exists "brut.min.css")
(fs/delete "brut-nocolors.min.css"))} (fs/delete-if-exists "brut-nocolors.min.css"))}
build-site {:doc "build the HTML" build-site {:doc "build the HTML"
:requires ([brut.main]) :requires ([brut.main])
:task (brut.main/-main)} :task (brut.main/-main)}
build-css {:doc "build the CSS" build-css {:doc "build the CSS"
:task (shell "./build.sh")} :task (shell "./build.clj")}
build {:doc "Build everything" build {:doc "Build everything"
:depends [build-css build-site]}}} :depends [build-css build-site]}}}

9
bb/brut/main.clj
View file

@ -33,7 +33,7 @@
[:meta {:http-equiv "Content-Type" :content "text/html; charset=UTF-8"}] [: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"}] [:meta {:name "viewport" :content "width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"}]
[:title title] [: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? [(if gapless?
:body.col.gapless :body.col.gapless
:body.col) :body.col)
@ -175,7 +175,7 @@ vel nostra tellus commodo pretium sapien sociosqu."]
[:div.block [:div.block
[:p "In a block"] [:p "In a block"]
[:img {:src (to brutalism-img)}]]]] [:img {:src (to brutalism-img)}]]]]
docs [:div buttons [:div {:id "buttons"}
[:h1 "Buttons"] [:h1 "Buttons"]
[:h2 "Text Buttons"] [:h2 "Text Buttons"]
[:h3 "Classic"] [:h3 "Classic"]
@ -247,7 +247,8 @@ vel nostra tellus commodo pretium sapien sociosqu."]
[:div {:class "col"} [:div {:class "col"}
[:a {:class "btn std huge"} "btn std"] [:a {:class "btn std huge"} "btn std"]
[:a {:class "btn std huge info"} "btn std info"] [:a {:class "btn std huge info"} "btn std info"]
[:a {:class "btn std huge ok"} "btn std ok"]]]] [:a {:class "btn std huge ok"} "btn std ok"]]]]]
docs [:div
[:h1 "Messages"] [:h1 "Messages"]
[:div {:class "row"} [:div {:class "row"}
[:div {:class "col c6 gapless"} [:div {:class "col c6 gapless"}
@ -453,7 +454,7 @@ vel nostra tellus commodo pretium sapien sociosqu."]
[:br] [:br]
[:pre "<h1>Level One Heading</h1>"]]]] [:pre "<h1>Level One Heading</h1>"]]]]
[:div.container [:div.container
(for [b [txt images docs]] (for [b [txt images buttons docs]]
(conj b (to-pre b)))])) (conj b (to-pre b)))]))
(defn -main [& _args] (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 #!/usr/bin/env bb
(require '[babashka.fs :as fs] (require '[babashka.fs :as fs]
'[babashka.process :refer [process]] '[babashka.process :refer [process]])
'[java-time.api :as jt])
(def dist "_build") (def dist "_build")
(def tmp-dir (-> (fs/create-temp-dir) (def tmp-dir (-> (fs/create-temp-dir)
@ -26,16 +25,23 @@
"tables" "tables"
"messages"]) "messages"])
(spit tmp-css (str "/* Copyright %s Yann Esposito; MIT licensed */" (defn current-year []
(jt/year (jt/local-date)))) (-> (new java.util.Date)
(doseq [item sub-css] .getYear
(println "building: %s" item) ;; yeah... it's dumb
(let [css (fs/file tmp-dir (str item ".css")) (+ 1900)))
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))))
(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) (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. vehicula class ultricies mollis dictumst, aenean non a in donec nulla.
Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer
placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus 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;img src=&quot;../h/img/brutalism.webp&quot; /&gt;
&lt;/div&gt; &lt;/div&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. &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;
</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;Buttons&lt;/h1&gt; &lt;h1&gt;Buttons&lt;/h1&gt;
&lt;h2&gt;Text Buttons&lt;/h2&gt; &lt;h2&gt;Text Buttons&lt;/h2&gt;
&lt;h3&gt;Classic&lt;/h3&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;
&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;h1&gt;Messages&lt;/h1&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col c6 gapless&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; } ul > li::marker { font-size: 1.5rem; }
.sm { font-size: 0.75rem; } .sm { font-size: 0.75rem; }
.big { font-size: 2rem; line-height: 2rem;} .big { font-size: 2rem; line-height: 3rem;}
.huge { font-size: 3rem; line-height: 3rem;} .huge { font-size: 3rem; line-height: 4.5rem;}
/* highligh revert the colors */ /* highligh revert the colors */
.hl { background: var(--fg); color: var(--bg); } .hl { background: var(--fg); color: var(--bg); }
/* doc are for long text to read */ /* doc are for long text to read */

9
src/messages.less
View file

@ -1,5 +1,10 @@
.msg { .msg {
background: var(--nl); background: var(--bg2);
border-left: 5px solid var(--n0); border-left: 5px solid var(--darken);
padding: 1rem; 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); }
} }