From 7b0e2df9edfecffcb58e4af6de19b0a8c2a5da96 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Mon, 13 Nov 2023 11:26:43 +0100 Subject: [PATCH] updated to improve uploading website --- README.md | 14 + brut.min.css => _site/brut.min.css | 0 _site/h/docs.html | 1158 ++++++++++++++++++++++++++++ _site/h/download.html | 1 + _site/h/img/brutalism.webp | Bin 0 -> 25602 bytes _site/index.html | 1 + bb.edn | 4 +- bb/brut/build_css.clj | 3 +- bb/brut/site.clj | 18 +- build.sh | 2 - deploy.sh | 14 + flake.lock | 30 +- gen.sh | 7 - 13 files changed, 1230 insertions(+), 22 deletions(-) rename brut.min.css => _site/brut.min.css (100%) create mode 100644 _site/h/docs.html create mode 100644 _site/h/download.html create mode 100644 _site/h/img/brutalism.webp create mode 100644 _site/index.html create mode 100755 deploy.sh delete mode 100755 gen.sh diff --git a/README.md b/README.md index 98c098d..fb46c52 100644 --- a/README.md +++ b/README.md @@ -24,5 +24,19 @@ Then ``` If you don't have `nix` you need to manually install: + +- [babashka](https://babashka.org) - [`lessc`](https://lesscss.org), - and [`minify`](https://www.minifier.org). + +### Develop + +``` +nix develop +``` + +all tasks + +``` +bb tasks +``` diff --git a/brut.min.css b/_site/brut.min.css similarity index 100% rename from brut.min.css rename to _site/brut.min.css diff --git a/_site/h/docs.html b/_site/h/docs.html new file mode 100644 index 0000000..8d99e76 --- /dev/null +++ b/_site/h/docs.html @@ -0,0 +1,1158 @@ +BRUT - documentation

Documentation

Here a bunch of examples with their source code to make them happen.

[§] Textual content

title in h1

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

Links will looks like this into text: This is a link inside a paragraph.

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

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

Here is some blockquote. This can give you an idea about the look and feel for them.


code
+  <div id="text">
+    <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>. If you really want something to be extremly
+    visible, <strong class="hl">use the class <code class="hl">hl</code></strong>.</p>
+    <p>Links will looks like this into text: <a href="#">This is a
+    link inside a paragraph.</a></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>Note we still try to keep a coherent and nice vertical
+    rythm.</p>
+    <blockquote>
+      <p>Here is some blockquote. This can give you an idea about
+      the look and feel for them.</p>
+    </blockquote>
+  </div>
+

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

Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus ligula porttitor metus.

Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat posuere hac. Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, etiam ultricies proin quisque lectus sociis id tristique, integer phasellus taciti pretium adipiscing tortor sagittis ligula.

The doc class ensure the width of the text is not too wide and use a very legible font.

code
+  <div id="doc">
+    <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>
+    <div class="doc">
+      <p>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 ligula porttitor
+      metus.</p>
+      <p>Vivamus integer non suscipit taciti mus etiam at primis
+      tempor sagittis sit, euismod libero facilisi aptent elementum
+      felis blandit cursus gravida sociis erat ante, eleifend
+      lectus nullam dapibus netus feugiat curae curabitur est ad.
+      Massa curae fringilla porttitor quam sollicitudin iaculis
+      aptent leo ligula euismod dictumst, orci penatibus mauris
+      eros etiam praesent erat volutpat posuere hac. Metus
+      fringilla nec ullamcorper odio aliquam lacinia conubia mauris
+      tempor, etiam ultricies proin quisque lectus sociis id
+      tristique, integer phasellus taciti pretium adipiscing tortor
+      sagittis ligula.</p>
+    </div>
+    <p>The <code>doc</code> class ensure the width of the text is
+    not too wide and use a very legible font.</p>
+  </div>
+

headings

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

h1

h2

h3

h4

h5
h6

tight headings

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

h1 tight

h2 tight

h3 tight

h4 tight

h5 tight
h6 tight

code
+  <div>
+    <h3>headings</h3>
+    <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>
+    <h3>tight headings</h3>
+    <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>
+  </div>
+

itemization

ul

  • item 1
  • item 2
  • item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the list-style-position: outside.
  • item 4

ol

  1. item 1
  2. item 2
  3. item 3
  4. item 4
code
+  <div id="itemize">
+    <h2>itemization</h2>
+    <h3>ul</h3>
+    <ul>
+      <li>item 1</li>
+      <li>item 2</li>
+      <li>item 3; with a very long text that should wrap to the
+      next line in any browser. We'll see that the wrapped text
+      should be aligned with the text of the other items. This is
+      due to the <code>list-style-position: outside</code>.</li>
+      <li>item 4</li>
+    </ul>
+    <h3>ol</h3>
+    <ol>
+      <li>item 1</li>
+      <li>item 2</li>
+      <li>item 3</li>
+      <li>item 4</li>
+    </ol>
+  </div>
+

[§] Grid

With default gap

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

code
+  <div>
+    <h3>With default gap</h3>
+    <div>
+      <div class="row">
+        <div class="bg-neutral c12">
+          c12
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c11">
+          c11
+        </div>
+        <div class="y c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c10">
+          c10
+        </div>
+        <div class="y c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c9">
+          c9
+        </div>
+        <div class="y c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c8">
+          c8
+        </div>
+        <div class="y c4">
+          c4
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="y c5">
+          c5
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="y c6">
+          c6
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="y c7">
+          c7
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="y c8">
+          c8
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="y c9">
+          c9
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="y c10">
+          c10
+        </div>
+      </div>
+      <div class="row">
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="y c11">
+          c11
+        </div>
+      </div>
+      <div class="row">
+        <div class="y c12">
+          c12
+        </div>
+      </div>
+    </div>
+  </div>
+

Gapless

c12
c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11
c12
code
+  <div>
+    <h3>Gapless</h3>
+    <div>
+      <div class="row gapless">
+        <div class="bg-neutral c12">
+          c12
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c11">
+          c11
+        </div>
+        <div class="y c1">
+          c1
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c10">
+          c10
+        </div>
+        <div class="y c2">
+          c2
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c9">
+          c9
+        </div>
+        <div class="y c3">
+          c3
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c8">
+          c8
+        </div>
+        <div class="y c4">
+          c4
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="y c5">
+          c5
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="y c6">
+          c6
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="y c7">
+          c7
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="y c8">
+          c8
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="y c9">
+          c9
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="y c10">
+          c10
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="y c11">
+          c11
+        </div>
+      </div>
+      <div class="row gapless">
+        <div class="y c12">
+          c12
+        </div>
+      </div>
+    </div>
+  </div>
+

3 columns


c1
c10
c1

c2
c9
c1
c1
c9
c2

c3
c8
c1
c2
c8
c2
c1
c8
c3

c4
c7
c1
c3
c7
c2
c2
c7
c3
c1
c7
c4

c5
c6
c1
c4
c6
c2
c3
c6
c3
c2
c6
c4
c1
c6
c5

c6
c5
c1
c5
c5
c2
c4
c5
c3
c3
c5
c4
c2
c5
c5
c1
c5
c6

c7
c4
c1
c6
c4
c2
c5
c4
c3
c4
c4
c4
c3
c4
c5
c2
c4
c6
c1
c4
c7

c8
c3
c1
c7
c3
c2
c6
c3
c3
c5
c3
c4
c4
c3
c5
c3
c3
c6
c2
c3
c7
c1
c3
c8

c9
c2
c1
c8
c2
c2
c7
c2
c3
c6
c2
c4
c5
c2
c5
c4
c2
c6
c3
c2
c7
c2
c2
c8
c1
c2
c9

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


code
+  <div>
+    <h3>3 columns</h3>
+    <div>
+      <br></br>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c10">
+          c10
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c9">
+          c9
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c9">
+          c9
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c8">
+          c8
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c8">
+          c8
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c8">
+          c8
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c7">
+          c7
+        </div>
+        <div class="r c4">
+          c4
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="r c4">
+          c4
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c6">
+          c6
+        </div>
+        <div class="r c5">
+          c5
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c6">
+          c6
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c4">
+          c4
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c5">
+          c5
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c5">
+          c5
+        </div>
+        <div class="r c6">
+          c6
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c7">
+          c7
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c6">
+          c6
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c4">
+          c4
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c5">
+          c5
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c6">
+          c6
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c4">
+          c4
+        </div>
+        <div class="r c7">
+          c7
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c8">
+          c8
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c7">
+          c7
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c6">
+          c6
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c4">
+          c4
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c5">
+          c5
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c6">
+          c6
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c7">
+          c7
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c3">
+          c3
+        </div>
+        <div class="r c8">
+          c8
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c9">
+          c9
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c8">
+          c8
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c7">
+          c7
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c6">
+          c6
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c4">
+          c4
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c5">
+          c5
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c6">
+          c6
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c7">
+          c7
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c8">
+          c8
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c2">
+          c2
+        </div>
+        <div class="r c9">
+          c9
+        </div>
+      </div><br></br>
+      <div class="row">
+        <div class="b c10">
+          c10
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c1">
+          c1
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c9">
+          c9
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c2">
+          c2
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c8">
+          c8
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c3">
+          c3
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c7">
+          c7
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c4">
+          c4
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c6">
+          c6
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c5">
+          c5
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c5">
+          c5
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c6">
+          c6
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c4">
+          c4
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c7">
+          c7
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c3">
+          c3
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c8">
+          c8
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c2">
+          c2
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c9">
+          c9
+        </div>
+      </div>
+      <div class="row">
+        <div class="b c1">
+          c1
+        </div>
+        <div class="bg-neutral c1">
+          c1
+        </div>
+        <div class="r c10">
+          c10
+        </div>
+      </div><br></br>
+    </div>
+  </div>
+

[§] Images

Images

Inside a grid

Inside a card

In a block

Directly in the column

code
+  <div id="images">
+    <h1>Images</h1>
+    <h2>Inside a grid</h2>
+    <div class="row">
+      <div class="card">
+      <p>Inside a card</p><img src="../h/img/brutalism.webp"></img></div>
+      <div class="block">
+      <p>In a block</p><img src="../h/img/brutalism.webp"></img></div>
+      <div><span>Directly in the column</span><img src="../h/img/brutalism.webp"></img></div>
+    </div>
+  </div>
+

[§] icons

Safe

☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € № +

The "Safe" icons should work almost everywhere.

Inserting ☎ in ♂ the ♀ middle ⓧ of © some § text ® to ⇦ check ⇧ the ⇨ size. ⇩ Now ♠ this ♣ should ♥ give ♦ an ♪ idea ♛ about ♜ the ♝ size ♞ relatively ♟ to ☜ the ☞ text. ♨ Hmmm ♭ this ♯ is ￥ quite ￡ long ￠ and ❊ boring ฿ to ๏ write ※ text ₧ in ₨ between ₪ like € that! №


code
+  <div class="col start">
+    <h4>Safe</h4><i class="ico block big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣
+    ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
+    <div class="msg push">
+      <p>The "Safe" icons should work almost everywhere.</p>
+      <p><span>Inserting</span> <i class="ico">☎</i>
+      <span>in</span> <i class="ico">♂</i> <span>the</span>
+      <i class="ico">♀</i> <span>middle</span> <i class="ico">ⓧ</i>
+      <span>of</span> <i class="ico">©</i> <span>some</span>
+      <i class="ico">§</i> <span>text</span> <i class="ico">®</i>
+      <span>to</span> <i class="ico">⇦</i> <span>check</span>
+      <i class="ico">⇧</i> <span>the</span> <i class="ico">⇨</i>
+      <span>size.</span> <i class="ico">⇩</i> <span>Now</span>
+      <i class="ico">♠</i> <span>this</span> <i class="ico">♣</i>
+      <span>should</span> <i class="ico">♥</i> <span>give</span>
+      <i class="ico">♦</i> <span>an</span> <i class="ico">♪</i>
+      <span>idea</span> <i class="ico">♛</i> <span>about</span>
+      <i class="ico">♜</i> <span>the</span> <i class="ico">♝</i>
+      <span>size</span> <i class="ico">♞</i>
+      <span>relatively</span> <i class="ico">♟</i> <span>to</span>
+      <i class="ico">☜</i> <span>the</span> <i class="ico">☞</i>
+      <span>text.</span> <i class="ico">♨</i> <span>Hmmm</span>
+      <i class="ico">♭</i> <span>this</span> <i class="ico">♯</i>
+      <span>is</span> <i class="ico">￥</i> <span>quite</span>
+      <i class="ico">￡</i> <span>long</span> <i class="ico">￠</i>
+      <span>and</span> <i class="ico">❊</i> <span>boring</span>
+      <i class="ico">฿</i> <span>to</span> <i class="ico">๏</i>
+      <span>write</span> <i class="ico">※</i> <span>text</span>
+      <i class="ico">₧</i> <span>in</span> <i class="ico">₨</i>
+      <span>between</span> <i class="ico">₪</i> <span>like</span>
+      <i class="ico">€</i> <span>that!</span> <i class="ico">№</i></p>
+    </div>
+  </div>
+

Total Set

✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩ +
Just a bunch of a few more unicode icons.
code
+  <div class="col start">
+    <h4>Total Set</h4><i class="ico block big">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢
+    ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩
+    ◍ ۩</i>
+    <div class="msg">
+      Just a bunch of a few more unicode icons.
+    </div>
+  </div>
+

[§] Forms





$


Be careful with addons! If you do not want a space between the addon and the input make sure that there is no space between the <span> and <input> tags. Example: 
... </span> <input ...
$ 
... </span><input ...
$

code
+  <div>
+    <input id="example1" placeholder="text input" type="text"></input><br></br>
+    <br></br>
+    <textarea cols="30" id="textarea1" placeholder="textarea" rows="3"></textarea><br></br>
+    <br></br>
+    <div class="form-block">
+      <span class="addon info">$</span><input placeholder="with addon" type="text"></input>
+    </div><br></br>
+    <br></br>
+    <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;<span class="hl"> </span>&lt;input ...</pre>
+      <div class="form-block">
+        <span class="addon">$</span> <input class="smooth" type="text"></input>
+      </div>
+      <pre>... &lt;/span&gt;&lt;input ...</pre>
+      <div class="form-block">
+        <span class="addon">$</span><input class="smooth" type="text"></input>
+      </div>
+    </div>
+  </div>
+

[§] Tables

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

code
+  <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>
+

[§] Buttons

Tags

  • item-1tag
  • item-2hl tag
  • item-3info
  • item-4ok
  • item-5warn
  • item-6err
  • item-7fatal

code
+  <div id="tags">
+    <h2>Tags</h2>
+    <ul>
+      <li>item-1<span class="tag">tag</span></li>
+      <li>item-2<span class="tag hl">hl tag</span></li>
+      <li>item-3<span class="tag info">info</span></li>
+      <li>item-4<span class="tag ok">ok</span></li>
+      <li>item-5<span class="tag warn">warn</span></li>
+      <li>item-6<span class="tag err">err</span></li>
+      <li>item-7<span class="tag fatal">fatal</span></li>
+    </ul>
+  </div>
+

Inline Tags

tagtag hlinfookwarnerrfatal
code
+  <div id="tags-inline">
+    <h2>Inline Tags</h2><span class="tag">tag</span><span class="tag hl">tag hl</span><span class="tag info">info</span><span class="tag ok">ok</span><span class="tag warn">warn</span><span class="tag err">err</span><span class="tag fatal">fatal</span>
+  </div>
+

Textual buttons

tbtb hltb infotb oktb warntb errtb fatal

code
+  <div id="text-buttons">
+    <h3>Textual buttons</h3><a class="tb">tb</a><a class="tb hl">tb
+    hl</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>
+  </div>
+

Textual Buttons Sizes

Some text: small button
Some text: normal ok
Some text: big warn
Some text: huge err
code
+  <div id="text-buttons-sizes">
+    <h3>Textual Buttons Sizes</h3>
+    <div class="block">
+      Some text: <a class="tb sm">small button</a><br></br>
+      Some text: <a class="tb ok">normal ok</a><br></br>
+      Some text: <a class="tb big warn">big warn</a><br></br>
+      Some text: <a class="tb huge err">huge err</a>
+    </div>
+  </div>
+

Buttons

Classic

btnbtn hlbtn infobtn okbtn warnbtn errbtn fatal

Sizes

btn smbtn infobtn big warnbtn huge err

Standardized Width btn std

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

Big

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

Huge

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

code
+  <div class="col">
+    <h2>Buttons</h2>
+    <div class="row">
+      <div class="card">
+        <h3>Classic</h3><a class="btn">btn</a><a class="btn hl">btn
+        hl</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>
+      </div>
+      <div class="card">
+        <h3>Sizes</h3><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>
+      </div>
+    </div>
+    <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 hl">btn
+          std hl</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 card c4">
+        <h3>Big</h3>
+        <div class="col big">
+          <a class="btn std">btn std</a><a class="btn std hl">btn
+          std hl</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 card c4">
+        <h3>Huge</h3>
+        <div class="col huge">
+          <a class="btn std">btn std</a><a class="btn std hl">btn
+          std hl</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>
+  </div>
+

[§] Messages

Basic Messages


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

code
+  <div class="row">
+    <div class="col c6 gapless">
+      <h2>Basic Messages</h2><br></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 big">☞</i> Info</strong> This is done
+        by adding <code>info</code> to the class.
+      </div>
+      <div class="msg ok">
+        <strong><i class="ico big">☑</i> OK</strong> This is done
+        by adding <code>ok</code> to the class.
+      </div>
+      <div class="msg warn">
+        <strong><i class="ico big">☣</i> Warning</strong> This is
+        done by adding <code>warn</code> to the class.
+      </div>
+      <div class="msg err">
+        <strong><i class="ico big">☒</i> Error</strong> This is
+        done by adding <code>err</code> to the class.
+      </div>
+      <div class="msg fatal">
+        <strong><i class="ico big">☠</i> Fatal</strong> This is
+        done by adding <code>fatal</code> to the class.
+      </div>
+      <div class="msg hl">
+        <strong><i class="ico big">☞</i>Highlighted</strong> This
+        is done by adding <code>hl</code> to the class.
+      </div>
+    </div>
+  </div>
+

code
+  <div class="navbar">
+    <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>
+  </div>
+

code
+  <footer>
+    <div class="container">
+      <p>Made by <a href="https://yannesposito.com">Yann
+      Esposito</a></p>
+    </div>
+  </footer>
+
\ No newline at end of file diff --git a/_site/h/download.html b/_site/h/download.html new file mode 100644 index 0000000..b477362 --- /dev/null +++ b/_site/h/download.html @@ -0,0 +1 @@ +BRUT - download
Download BRUT
\ No newline at end of file diff --git a/_site/h/img/brutalism.webp b/_site/h/img/brutalism.webp new file mode 100644 index 0000000000000000000000000000000000000000..2f1b77689b1e300a2b3687b5baf8e7fd7bf22358 GIT binary patch literal 25602 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

BRUT

A Brutalist and Minimalist CSS Framework

This CSS framework is ideal to be used for private admin interfaces.

Just by the look of it, it will scream: THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!

Docs

A few quick examples to show every components. This should be quick and straightforward.

This CSS framework makes its best to respect some expected composability accross classes. Here are a few examples:

A block:

textual btn

classic btn

Some message block

Then add the class big:

textual btn

classic btn

Some message block
Docs

Download

Download BRUT

Download
\ No newline at end of file diff --git a/bb.edn b/bb.edn index 8468cfa..dc9fa92 100644 --- a/bb.edn +++ b/bb.edn @@ -6,8 +6,8 @@ {clean {:doc "clean temporary assets" :requires ([babashka.fs :as fs]) :task (do (fs/delete-tree "_build") - (fs/delete-if-exists "brut.min.css") - (fs/delete-if-exists "brut-nocolors.min.css"))} + (fs/delete-tree "_site") + (fs/delete-if-exists "brut.min.css"))} build-site {:doc "build the HTML" :requires ([brut.site]) :task (brut.site/-main)} diff --git a/bb/brut/build_css.clj b/bb/brut/build_css.clj index 7138fb8..1cb8bea 100644 --- a/bb/brut/build_css.clj +++ b/bb/brut/build_css.clj @@ -8,7 +8,7 @@ tmp-dir (-> (fs/create-temp-dir) (fs/delete-on-exit)) tmp-css (fs/file tmp-dir "tmp.css") - brut-css "brut.min.css" + brut-css "_site/brut.min.css" sub-css ["colors" "extended-colors" "general" @@ -37,6 +37,7 @@ (spit min-css minified) (when-not (= "extended-colors" item) (spit tmp-css minified :append true)))) + (fs/create-dirs (fs/parent brut-css)) (fs/move tmp-css brut-css {:replace-existing true :atomic-move true}) (println "built: " brut-css))) diff --git a/bb/brut/site.clj b/bb/brut/site.clj index d7971c1..9f617ce 100644 --- a/bb/brut/site.clj +++ b/bb/brut/site.clj @@ -51,6 +51,8 @@ (when footer? (footer))]))) +(def dest "_site") + (defn gen-page [file-path metas content-fn] (let [depth (or (some-> file-path fs/parent @@ -58,9 +60,11 @@ count) 0) rel-pref (apply str (repeat depth "../")) - html (mk-page rel-pref metas (content-fn rel-pref metas))] - (println "Generates: " file-path) - (spit file-path html))) + html (mk-page rel-pref metas (content-fn rel-pref metas)) + dst (str dest "/" file-path)] + (fs/create-dirs (fs/parent dst)) + (println "Generates: " dst) + (spit dst html))) (defn mk-index [rel-pref _metas] (let [to (fn [path] (str rel-pref path)) @@ -526,6 +530,12 @@ [:summary.bg-neutral "code"] (to-pre c2)]])])])])) +(defn brut-copy + [path] + (let [dst (str dest "/" path)] + (println "Copying: " path " to " dst) + (fs/copy-tree path dst))) + (defn -main [& _args] (gen-page "index.html" {:title "BRUT" @@ -539,4 +549,4 @@ (gen-page "h/docs.html" {:title "BRUT - documentation"} mk-docs) - ) + (brut-copy "h/img")) diff --git a/build.sh b/build.sh index f437563..4bc95e1 100755 --- a/build.sh +++ b/build.sh @@ -20,11 +20,9 @@ for item in "${subtypes[@]}"; do done [ -f $DISTCSS.bak ] && rm -f $DISTCSS.bak -[ -f $DISTFULLCSS.bak ] && rm -f $DISTFULLCSS.bak [ -f $DISTCSS ] && mv $DISTCSS $DISTCSS.bak mv $TMPCSS $DISTCSS # cleanup rm -f $DISTCSS.bak -rm -f $DISTFULLCSS.bak rm -f $TMPCSS echo "Built: $DISTCSS" diff --git a/deploy.sh b/deploy.sh new file mode 100755 index 0000000..b5366fa --- /dev/null +++ b/deploy.sh @@ -0,0 +1,14 @@ +#!/usr/bin/env zsh + +cd "$(git rev-parse --show-toplevel)" || exit 1 +webdir="_site" + +[[ -d $webdir ]] || { echo "no $webdir directory"; exit 1 } + +echo -n "Uploading website" +rsync --progress\ + --partial \ + --delete \ + --exclude '.git' \ + -avHe ssh ${webdir}/ root@esy.fun:/var/www/brut.esy.fun/ +echo " [done]" diff --git a/flake.lock b/flake.lock index df64d75..a1cc4c0 100644 --- a/flake.lock +++ b/flake.lock @@ -1,12 +1,15 @@ { "nodes": { "flake-utils": { + "inputs": { + "systems": "systems" + }, "locked": { - "lastModified": 1659877975, - "narHash": "sha256-zllb8aq3YO3h8B/U0/J1WBgAL8EX5yWf5pMj3G0NAmc=", + "lastModified": 1694529238, + "narHash": "sha256-zsNZZGTGnMOf9YpHKJqMSsa0dXbfmxeoJ7xHlrt+xmY=", "owner": "numtide", "repo": "flake-utils", - "rev": "c0e246b9b83f637f4681389ecabcb2681b4f3af0", + "rev": "ff7b65b44d01cf9ba6a71320833626af21126384", "type": "github" }, "original": { @@ -17,11 +20,11 @@ }, "nixpkgs": { "locked": { - "lastModified": 1664058032, - "narHash": "sha256-djifox1rDQ2x+ujJCHiXyPAl2bXk+GlYorA0Clfhfko=", + "lastModified": 1699725108, + "narHash": "sha256-NTiPW4jRC+9puakU4Vi8WpFEirhp92kTOSThuZke+FA=", "owner": "NixOS", "repo": "nixpkgs", - "rev": "f2ea9a9fcd41b65651fd89c1b9198798f4362f66", + "rev": "911ad1e67f458b6bcf0278fa85e33bb9924fed7e", "type": "github" }, "original": { @@ -34,6 +37,21 @@ "flake-utils": "flake-utils", "nixpkgs": "nixpkgs" } + }, + "systems": { + "locked": { + "lastModified": 1681028828, + "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=", + "owner": "nix-systems", + "repo": "default", + "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e", + "type": "github" + }, + "original": { + "owner": "nix-systems", + "repo": "default", + "type": "github" + } } }, "root": "root", diff --git a/gen.sh b/gen.sh deleted file mode 100755 index 10666ae..0000000 --- a/gen.sh +++ /dev/null @@ -1,7 +0,0 @@ -#!/usr/bin/env bb - -(require '[]) - -(defn build-css - [] - )