use bb and clojure
This commit is contained in:
parent
0d1c82b1e4
commit
208f4da683
10 changed files with 169 additions and 158 deletions
9
bb.edn
9
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]}}}
|
||||
|
|
|
@ -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,7 +175,7 @@ vel nostra tellus commodo pretium sapien sociosqu."]
|
|||
[:div.block
|
||||
[:p "In a block"]
|
||||
[:img {:src (to brutalism-img)}]]]]
|
||||
docs [:div
|
||||
buttons [:div {:id "buttons"}
|
||||
[:h1 "Buttons"]
|
||||
[:h2 "Text Buttons"]
|
||||
[:h3 "Classic"]
|
||||
|
@ -247,7 +247,8 @@ vel nostra tellus commodo pretium sapien sociosqu."]
|
|||
[: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"]]]]
|
||||
[:a {:class "btn std huge ok"} "btn std ok"]]]]]
|
||||
docs [:div
|
||||
[: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
1
brut-nocolors.min.css
vendored
File diff suppressed because one or more lines are too long
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
32
build.clj
32
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)
|
||||
|
|
|
@ -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('../h/img/brutalism.webp')"><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('../h/img/brutalism.webp')"><a class="btn warn huge" href="../brut.min.css">Download BRUT</a></div></body>
|
117
h/g-docs.html
117
h/g-docs.html
|
@ -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 <p> 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 <p> 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.</blockquote>
|
|||
<img src="../h/img/brutalism.webp" />
|
||||
</div>
|
||||
</div>
|
||||
</div></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">&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&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">&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&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>&lt;div class=&quot;msg&quot;&gt;
|
||||
&lt;strong&gt;Alert headline!&lt;/strong&gt;
|
||||
Message text
|
||||
&lt;/div&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>&lt;input type=&quot;text&quot;&gt;
|
||||
<br />&lt;textarea rows=&quot;3&quot;&gt;
|
||||
<br />&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input type=&quot;text&quot;&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>&lt;/span&gt;</code> and <code>&lt;input&gt;</code> tags. Example: <pre>... &lt;/span&gt; &lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text" /><pre>... &lt;/span&gt;&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>&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;</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>&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;
|
||||
</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 &quot;Android Safe&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 &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.)
|
||||
</div></div></div></div><pre>&lt;i class=&quot;ico&quot;&gt;Copy and paste icons from above here!&lt;/i&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>&lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;c12&quot;&gt;12&lt;/div&gt;<br />&lt;/div&gt;
|
||||
<br />&lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;c4&quot;&gt;4&lt;/div&gt;<br /> &lt;div class=&quot;c8&quot;&gt;8&lt;/div&gt;<br />&lt;/div&gt;
|
||||
</pre></div><h1>Headings</h1><div class="headings"><p>By default there is some space before and after any heading:</p><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><br /><p>You can remove the space by using the class <code>tight</code> to the heading:</p><h1 class="tight">h1 tight</h1><h2 class="tight">h2 tight</h2><h3 class="tight">h3 tight</h3><h4 class="tight">h4 tight</h4><h5 class="tight">h5 tight</h5><h6 class="tight">h6 tight</h6><br /><pre>&lt;h1&gt;Level One Heading&lt;/h1&gt;</pre></div><pre><div>
|
||||
</div></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">&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&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">&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&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><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></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>&lt;div class=&quot;msg&quot;&gt;
|
||||
&lt;strong&gt;Alert headline!&lt;/strong&gt;
|
||||
Message text
|
||||
&lt;/div&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>&lt;input type=&quot;text&quot;&gt;
|
||||
<br />&lt;textarea rows=&quot;3&quot;&gt;
|
||||
<br />&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input type=&quot;text&quot;&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>&lt;/span&gt;</code> and <code>&lt;input&gt;</code> tags. Example: <pre>... &lt;/span&gt; &lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text" /><pre>... &lt;/span&gt;&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>&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;</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>&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;
|
||||
</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 &quot;Android Safe&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 &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.)
|
||||
</div></div></div></div><pre>&lt;i class=&quot;ico&quot;&gt;Copy and paste icons from above here!&lt;/i&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>&lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;c12&quot;&gt;12&lt;/div&gt;<br />&lt;/div&gt;
|
||||
<br />&lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;c4&quot;&gt;4&lt;/div&gt;<br /> &lt;div class=&quot;c8&quot;&gt;8&lt;/div&gt;<br />&lt;/div&gt;
|
||||
</pre></div><h1>Headings</h1><div class="headings"><p>By default there is some space before and after any heading:</p><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><br /><p>You can remove the space by using the class <code>tight</code> to the heading:</p><h1 class="tight">h1 tight</h1><h2 class="tight">h2 tight</h2><h3 class="tight">h3 tight</h3><h4 class="tight">h4 tight</h4><h5 class="tight">h5 tight</h5><h6 class="tight">h6 tight</h6><br /><pre>&lt;h1&gt;Level One Heading&lt;/h1&gt;</pre></div><pre><div>
|
||||
<h1>Messages</h1>
|
||||
<div class="row">
|
||||
<div class="col c6 gapless">
|
||||
|
|
|
@ -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>
|
|
@ -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 */
|
||||
|
|
|
@ -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); }
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue