From d559589325ad524c24d8c2c532a6fb27bb581bc1 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Wed, 14 Aug 2024 16:20:27 +0200 Subject: [PATCH] Improvements --- _site/h/docs.html | 26 +++---------------- bb/brut/site.clj | 63 ++++++++++++++++++----------------------------- 2 files changed, 27 insertions(+), 62 deletions(-) diff --git a/_site/h/docs.html b/_site/h/docs.html index c772396..b20197a 100644 --- a/_site/h/docs.html +++ b/_site/h/docs.html @@ -1,4 +1,4 @@ -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
+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 class="inner" id="text">
     <h1>title in h1</h1>
     <div class="content">
@@ -104,15 +104,10 @@
       </ol>
     </div>
   </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
+
[§] Grid
With default gap
c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11

code
   <div class="inner">
     <h3>With default gap</h3>
     <div class="content">
-      <div class="row">
-        <div class="bg-neutral c12">
-          c12
-        </div>
-      </div>
       <div class="row">
         <div class="bg-neutral c11">
           c11
@@ -201,22 +196,12 @@
           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
+
Gapless
c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11
code
   <div class="inner">
     <h3>Gapless</h3>
     <div class="content">
-      <div class="row gapless">
-        <div class="bg-neutral c12">
-          c12
-        </div>
-      </div>
       <div class="row gapless">
         <div class="bg-neutral c11">
           c11
@@ -305,11 +290,6 @@
           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
diff --git a/bb/brut/site.clj b/bb/brut/site.clj
index 2e92095..d99a231 100644
--- a/bb/brut/site.clj
+++ b/bb/brut/site.clj
@@ -292,9 +292,7 @@
                      :alt "another image"}]]]]
         images-section {:title "Images"
                         :cards [images
-                                figures
-                                ]}
-
+                                figures]}
 
         text-buttons [:div.inner {:id "text-buttons"}
                       [:h3 "Textual buttons"]
@@ -539,32 +537,28 @@
         [:div.inner
          [:h3 "With default gap"]
          [:div.content
-          (for [i (range 12 -1 -1)]
+          (for [i (range 11 0 -1)]
             (let [cl (str "c" i)
                   co-cl (str "c" (- 12 i))]
               [:div.row
-               (when (> i 0)
-                 [:div.bg-neutral {:class cl} cl])
-               (when (> (- 12 i) 0)
-                 [:div.y {:class co-cl} co-cl])]))]]
+               [:div.bg-neutral {:class cl} cl]
+               [:div.y {:class co-cl} co-cl]]))]]
         grid-gapless
         [:div.inner
          [:h3 "Gapless"]
          [:div.content
-          (for [i (range 12 -1 -1)]
+          (for [i (range 11 0 -1)]
             (let [cl (str "c" i)
                   co-cl (str "c" (- 12 i))]
               [:div.row.gapless
-               (when (> i 0)
-                 [:div.bg-neutral {:class cl} cl])
-               (when (> (- 12 i) 0)
-                 [:div.y {:class co-cl} co-cl])]))]]
+               [:div.bg-neutral {:class cl} cl]
+               [:div.y {:class co-cl} co-cl]]))]]
         grid-3col
         [:div.inner
          [:h3 "3 columns"]
          [:div.content
-          (for [i (range 11 0 -1)
-                j (range (- 11 i) -1 -1)]
+          (for [i (range 11 0 -1)        ;; from 11 to 1
+                j (range (- 11 i) -1 -1)] ;; from (11 - i) to 0
             (let [k (- 12 i j)
                   cli (str "c" i)
                   clj (str "c" j)
@@ -572,34 +566,25 @@
               (if (= j 0)
                 [:br]
                 [:div.row
-                 (when (> j 0)
-                   [:div.b {:class clj} clj])
-                 (when (> i 0)
-                   [:div.bg-neutral {:class cli} cli])
-                 (when (> k 0)
-                   [:div.r {:class clk} clk])
-                 ])))]]
+                 [:div.b          {:class clj} clj]
+                 [:div.bg-neutral {:class cli} cli]
+                 [:div.r          {:class clk} clk]]))
+            )]]
         grid-section {:title "Grid"
-                      :cards [grid grid-gapless grid-3col]}
-
-        all-sections [textual-section
-                      grid-section
-                      images-section
-                      icons-section
-                      forms-section
-                      tables-section
-                      buttons-section
-                      messages-section
-                      navbar-section
-                      footer-section]]
+                      :cards [grid grid-gapless grid-3col]}]
     [:div.container
      [:h1 "Documentation"]
      [:p "Here a bunch of examples with their source code to make them happen."]
-     [:ul
-      (for [{:keys [title]} all-sections]
-        [:li [:a {:href (str "#" title)} title]])]
-
-     (for [{:keys [title cards]} all-sections]
+     (for [{:keys [title cards]} [textual-section
+                                  grid-section
+                                  images-section
+                                  icons-section
+                                  forms-section
+                                  tables-section
+                                  buttons-section
+                                  messages-section
+                                  navbar-section
+                                  footer-section]]
        [:div.col
         [:h2 {:id title}
          [:a {:href (str "#" title)} [:i.ico "[§]"]] " "