Compare commits
10 commits
cb938464cb
...
7b0e2df9ed
| Author | SHA1 | Date | |
|---|---|---|---|
|
7b0e2df9ed
|
||
|
|
c66dfade4d
|
||
|
|
bce23d1cca
|
||
|
|
861c7bcccd
|
||
|
|
36cb28823d
|
||
|
|
1e29408400
|
||
|
|
5144b0637b
|
||
|
|
e6d4a7f1f9
|
||
|
|
286b3670c4
|
||
|
|
bb7b1b222d
|
14
README.md
14
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
|
||||
```
|
||||
|
|
|
|||
1
_site/brut.min.css
vendored
Normal file
1
_site/brut.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1158
_site/h/docs.html
Normal file
1158
_site/h/docs.html
Normal file
File diff suppressed because one or more lines are too long
1
_site/h/download.html
Normal file
1
_site/h/download.html
Normal file
|
|
@ -0,0 +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.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>
|
||||
BIN
_site/h/img/brutalism.webp
Normal file
BIN
_site/h/img/brutalism.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
1
_site/index.html
Normal file
1
_site/index.html
Normal file
|
|
@ -0,0 +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.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><div class="hero" style="background: url(h/img/brutalism.webp)"><div class="container col middle"><div class="row middle"><div class="c2"></div><div class="c8 col block bg-neutral"><h1 class="tight huge">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>This CSS framework is ideal to be used for <strong>private admin interfaces</strong>.</p><p> Just by the look of it, it will scream: <span class="hl">THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!</span></p></div><div class="c2"></div></div></div></div><div class="container"><div class="row"><div class="card"><h3>Docs</h3><p>A few quick examples to show every components. This should be quick and straightforward.</p><p>This CSS framework makes its best to respect some expected composability accross classes. Here are a few examples:</p><div class="row"><div><p class="tight">A block: </p><div class="card"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div><div><p class="tight">Then add the class <code>big</code>: </p><div class="card big"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div></div><a class="btn big push" href="h/docs.html">Docs</a></div><div class="col card"><h3>Download</h3><p>Download BRUT</p><a class="btn warn big push" href="h/download.html">Download</a></div></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>
|
||||
4
bb.edn
4
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)}
|
||||
|
|
|
|||
|
|
@ -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)))
|
||||
|
|
|
|||
203
bb/brut/site.clj
203
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,37 +60,60 @@
|
|||
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))
|
||||
hero [:div.hero.bg-neutral
|
||||
[:div.row.middle
|
||||
[:img.c3.no-grow {:src (to brutalism-img) :alt "brutalism"}]
|
||||
[:div.col.block.c6
|
||||
[:h1.title "BRUT"]
|
||||
[:h4 "A Brutalist and Minimalist CSS Framework"]
|
||||
[:p (str "This CSS framework is ideal to be used for admin interface where you"
|
||||
"want to make it clear, this is not for any kind of end user but only"
|
||||
"advanced technical people.")]]
|
||||
[:img.c3.no-grow {:src (to brutalism-img) :alt "brutalism"}]
|
||||
]]
|
||||
cards [:div.row
|
||||
[:div.col.card
|
||||
[:h3 "Docs"]
|
||||
[:p "A few quick examples to show every components. "
|
||||
"This should be quick and straightforward."]
|
||||
[:a.btn.big.push {:href (to "h/docs.html")}
|
||||
"Docs"]]
|
||||
[:div.col.card
|
||||
[:h3 "Download"]
|
||||
[:div.block
|
||||
[:p "Download BRUT"]]
|
||||
[:a.btn.warn.big.push {:href (to "h/download.html")}
|
||||
"Download"]]]]
|
||||
[:div.container.col
|
||||
hero [:div.hero
|
||||
{:style (format "background: url(%s)" (to brutalism-img))}
|
||||
[:div.container.col.middle
|
||||
[:div.row.middle
|
||||
[:div.c2]
|
||||
[:div.c8.col.block.bg-neutral
|
||||
[:h1.tight.huge "BRUT"]
|
||||
[:h4 "A Brutalist and Minimalist CSS Framework"]
|
||||
[:p "This CSS framework is ideal to be used for "
|
||||
[:strong "private admin interfaces"]
|
||||
"."]
|
||||
[:p " Just by the look of it, it will scream: "
|
||||
[:span.hl "THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!"]]]
|
||||
[:div.c2]]]]
|
||||
cards [:div.container
|
||||
[:div.row
|
||||
[:div.card
|
||||
[:h3 "Docs"]
|
||||
[:p "A few quick examples to show every components. "
|
||||
"This should be quick and straightforward."]
|
||||
[:p "This CSS framework makes its best to respect some expected composability accross classes."
|
||||
" Here are a few examples:"]
|
||||
[:div.row
|
||||
[:div
|
||||
[:p.tight "A block: "]
|
||||
[:div.card
|
||||
[:div.tb "textual btn"]
|
||||
[:br]
|
||||
[:div.btn "classic btn"]
|
||||
[:br]
|
||||
[:div.msg "Some message block"]]]
|
||||
[:div
|
||||
[:p.tight "Then add the class " [:code "big"] ": "]
|
||||
[:div.card.big
|
||||
[:div.tb "textual btn"]
|
||||
[:br]
|
||||
[:div.btn "classic btn"]
|
||||
[:br]
|
||||
[:div.msg "Some message block"]]]]
|
||||
[:a.btn.big.push {:href (to "h/docs.html")}
|
||||
"Docs"]]
|
||||
[:div.col.card
|
||||
[:h3 "Download"]
|
||||
[:p "Download BRUT"]
|
||||
[:a.btn.warn.big.push {:href (to "h/download.html")} "Download"]]]]]
|
||||
[:div
|
||||
hero
|
||||
cards]))
|
||||
|
||||
|
|
@ -205,6 +230,7 @@
|
|||
text-buttons [:div#text-buttons
|
||||
[:h3 "Textual buttons"]
|
||||
[:a.tb "tb"]
|
||||
[:a.tb.hl "tb hl"]
|
||||
[:a.tb.info "tb info"]
|
||||
[:a.tb.ok "tb ok"]
|
||||
[:a.tb.warn "tb warn"]
|
||||
|
|
@ -213,58 +239,71 @@
|
|||
text-buttons-sizes [:div#text-buttons-sizes
|
||||
[:h3 "Textual Buttons Sizes"]
|
||||
[:div.block
|
||||
"Some text: " [:a {:class "tb sm info"} "small button"] [:br]
|
||||
"Some text: " [:a {:class "tb sm"} "small button"] [:br]
|
||||
"Some text: " [:a {:class "tb ok"} "normal ok"] [:br]
|
||||
"Some text: " [:a {:class "tb big warn"} "big warn"] [:br]
|
||||
"Some text: " [:a {:class "tb huge err"} "huge err"]]]
|
||||
buttons [:div {:id "buttons"}
|
||||
[:h2 "Classic"]
|
||||
[:a {:class "btn"} "btn"]
|
||||
[:a {:class "btn info"} "btn info"]
|
||||
[:a {:class "btn ok"} "btn ok"]
|
||||
[:a {:class "btn warn"} "btn warn"]
|
||||
[:a {:class "btn err"} "btn err"]
|
||||
[:a {:class "btn fatal"} "btn fatal"]
|
||||
[:pre {:class "block"} "<a class="btn btn-b">btn-b</a>"]
|
||||
[:h2 "Sizes"]
|
||||
[:a {:class "btn sm"} "btn sm"]
|
||||
[:a {:class "btn info"} "btn info"]
|
||||
[:a {:class "btn big warn"} "btn big warn"]
|
||||
[:a {:class "btn huge err"} "btn huge err"]
|
||||
[:pre {:class "block"} "<a class="btn sm info">btn sm info</a>"]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "col c4 card"}
|
||||
buttons [:div.col
|
||||
[:h2 "Buttons"]
|
||||
[:div.row
|
||||
[:div.card
|
||||
[:h3 "Classic"]
|
||||
[:a.btn "btn"]
|
||||
[:a.btn.hl "btn hl"]
|
||||
[:a.btn.info "btn info"]
|
||||
[:a.btn.ok "btn ok"]
|
||||
[:a.btn.warn "btn warn"]
|
||||
[:a.btn.err "btn err"]
|
||||
[:a.btn.fatal "btn fatal"]]
|
||||
[:div.card
|
||||
[:h3 "Sizes"]
|
||||
[:a.btn.sm "btn sm"]
|
||||
[:a.btn.info "btn info"]
|
||||
[:a.btn.big.warn "btn big warn"]
|
||||
[:a.btn.huge.err "btn huge err"]]]
|
||||
[:div.row
|
||||
[:div.col.c4.card
|
||||
[:h3 "Standardized Width "
|
||||
[:code "btn std"]]
|
||||
[:div {:class "col"}
|
||||
[:a {:class "btn std"} "btn std"]
|
||||
[:a {:class "btn std info"} "btn std info"]
|
||||
[:a {:class "btn std ok"} "btn std ok"]
|
||||
[:a {:class "btn std warn"} "btn std warn"]
|
||||
[:a {:class "btn std err"} "btn std err"]
|
||||
[:a {:class "btn std fatal"} "btn std fatal"]]]
|
||||
[:div {:class "col c4 card"}
|
||||
[:div.col
|
||||
[:a.btn.std "btn std"]
|
||||
[:a.btn.std.hl "btn std hl"]
|
||||
[:a.btn.std.info "btn std info"]
|
||||
[:a.btn.std.ok "btn std ok"]
|
||||
[:a.btn.std.warn "btn std warn"]
|
||||
[:a.btn.std.err "btn std err"]
|
||||
[:a.btn.std.fatal "btn std fatal"]]]
|
||||
[:div.col.card.c4
|
||||
[:h3 "Big"]
|
||||
[:div {:class "col"}
|
||||
[:a {:class "btn std big "} "btn std"]
|
||||
[:a {:class "btn std big info"} "btn std info"]
|
||||
[:a {:class "btn std big ok"} "btn std ok"]
|
||||
[:a {:class "btn std big warn"} "btn std warn"]]]
|
||||
[:div {:class "col c4 card"}
|
||||
[:div.col.big
|
||||
[:a.btn.std "btn std"]
|
||||
[:a.btn.std.hl "btn std hl"]
|
||||
[:a.btn.std.info "btn std info"]
|
||||
[:a.btn.std.ok "btn std ok"]
|
||||
[:a.btn.std.warn "btn std warn"]
|
||||
[:a.btn.std.err "btn std err"]
|
||||
[:a.btn.std.fatal "btn std fatal"]]
|
||||
]
|
||||
[:div.col.card.c4
|
||||
[:h3 "Huge"]
|
||||
[:div {:class "col"}
|
||||
[:a {:class "btn std huge"} "btn std"]
|
||||
[:a {:class "btn std huge info"} "btn std info"]
|
||||
[:a {:class "btn std huge ok"} "btn std ok"]]]]]
|
||||
[:div.col.huge
|
||||
[:a.btn.std "btn std"]
|
||||
[:a.btn.std.hl "btn std hl"]
|
||||
[:a.btn.std.info "btn std info"]
|
||||
[:a.btn.std.ok "btn std ok"]
|
||||
[:a.btn.std.warn "btn std warn"]
|
||||
[:a.btn.std.err "btn std err"]
|
||||
[:a.btn.std.fatal "btn std fatal"]]]]]
|
||||
tags [:div {:id "tags"}
|
||||
[:h2 "Tags"]
|
||||
[:ul
|
||||
[:li "item-1" [:span.tag "tag"]]
|
||||
[:li "item-2" [:span.tag.info "info"]]
|
||||
[:li "item-3" [:span.tag.ok "ok"]]
|
||||
[:li "item-4" [:span.tag.warn "warn"]]
|
||||
[:li "item-5" [:span.tag.err "err"]]
|
||||
[:li "item-6" [:span.tag.fatal "fatal"]]]]
|
||||
[:li "item-2" [:span.tag.hl "hl tag"]]
|
||||
[:li "item-3" [:span.tag.info "info"]]
|
||||
[:li "item-4" [:span.tag.ok "ok"]]
|
||||
[:li "item-5" [:span.tag.warn "warn"]]
|
||||
[:li "item-6" [:span.tag.err "err"]]
|
||||
[:li "item-7" [:span.tag.fatal "fatal"]]]]
|
||||
tags-listed [:div {:id "tags-inline"}
|
||||
[:h2 "Inline Tags"]
|
||||
[:span.tag "tag"]
|
||||
|
|
@ -283,7 +322,7 @@
|
|||
[:h2 "Basic Messages"]
|
||||
[:br]
|
||||
[:div {:class "msg"}
|
||||
[:strong "Normal Message"]
|
||||
[:strong " Normal Message"]
|
||||
" This is a normal message with " [:code "msg"] "."]
|
||||
[:div {:class "msg info"}
|
||||
[:strong
|
||||
|
|
@ -460,6 +499,8 @@
|
|||
grid-section {:title "Grid"
|
||||
:cards [grid grid-gapless grid-3col]}]
|
||||
[:div.container
|
||||
[:h1 "Documentation"]
|
||||
[:p "Here a bunch of examples with their source code to make them happen."]
|
||||
(for [{:keys [title cards]} [textual-section
|
||||
grid-section
|
||||
images-section
|
||||
|
|
@ -472,25 +513,33 @@
|
|||
footer-section]]
|
||||
[:div.col
|
||||
[:h2 {:id title}
|
||||
[:a {:href (str "#" title)} [:i.ico "§"]] " "
|
||||
[:a {:href (str "#" title)} [:i.ico "[§]"]] " "
|
||||
title]
|
||||
(for [[c1 c2] (partition 2 2 nil cards)]
|
||||
[:div.row
|
||||
[:div.card.c6
|
||||
c1
|
||||
[:details
|
||||
[:summary "code"]
|
||||
[:br]
|
||||
[:details.push
|
||||
[:summary.bg-neutral "code"]
|
||||
(to-pre c1)]]
|
||||
(when c2
|
||||
[:div.card.c6
|
||||
c2
|
||||
[:details
|
||||
[:summary "code"]
|
||||
[:details.push
|
||||
[: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"}
|
||||
{:title "BRUT"
|
||||
:gapless? true}
|
||||
mk-index)
|
||||
(gen-page "h/download.html"
|
||||
{:title "BRUT - download"
|
||||
|
|
@ -500,4 +549,4 @@
|
|||
(gen-page "h/docs.html"
|
||||
{:title "BRUT - documentation"}
|
||||
mk-docs)
|
||||
)
|
||||
(brut-copy "h/img"))
|
||||
|
|
|
|||
1
brut.min.css
vendored
1
brut.min.css
vendored
File diff suppressed because one or more lines are too long
2
build.sh
2
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"
|
||||
|
|
|
|||
14
deploy.sh
Executable file
14
deploy.sh
Executable file
|
|
@ -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]"
|
||||
30
flake.lock
30
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",
|
||||
|
|
|
|||
107
h/docs.html
107
h/docs.html
File diff suppressed because one or more lines are too long
|
|
@ -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.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>A few quick examples to show every components. This should be quick and straightforward.</p><a class="btn 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 warn 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 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><div class="hero" style="background: url(h/img/brutalism.webp)"><div class="container col middle"><div class="row middle"><div class="c2"></div><div class="c8 col block bg-neutral"><h1 class="tight huge">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>This CSS framework is ideal to be used for <strong>private admin interfaces</strong>.</p><p> Just by the look of it, it will scream: <span class="hl">THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!</span></p></div><div class="c2"></div></div></div></div><div class="container"><div class="row"><div class="card"><h3>Docs</h3><p>A few quick examples to show every components. This should be quick and straightforward.</p><p>This CSS framework makes its best to respect some expected composability accross classes. Here are a few examples:</p><div class="row"><div><p class="tight">A block: </p><div class="card"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div><div><p class="tight">Then add the class <code>big</code>: </p><div class="card big"><div class="tb">textual btn</div><br /><div class="btn">classic btn</div><br /><div class="msg">Some message block</div></div></div></div><a class="btn big push" href="h/docs.html">Docs</a></div><div class="col card"><h3>Download</h3><p>Download BRUT</p><a class="btn warn big push" href="h/download.html">Download</a></div></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 0.25em 0.25em 0;
|
||||
padding: 1rem 2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
box-shadow: 0.25em 0.25em var(--nl);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
|
@ -35,8 +35,6 @@
|
|||
}
|
||||
|
||||
.btn.sm { padding: 0.5rem 1rem; }
|
||||
.btn.std { width: 12rem; }
|
||||
.btn.big.std { width: 20rem; }
|
||||
.btn.huge.std { width: 24rem; }
|
||||
.btn.std { width: 12em; }
|
||||
|
||||
.tag { padding: 2px; font-size: 0.875rem; border: solid 1px var(--fg); margin: 0 1px; }
|
||||
|
|
|
|||
|
|
@ -25,28 +25,37 @@
|
|||
--accent: var(--b);
|
||||
}
|
||||
|
||||
body.soft { filter: brightness(95%) sepia(5%);}
|
||||
body.soft { filter: brightness(85%) sepia(25%);}
|
||||
html { background: var(--bg); color: var(--fg); }
|
||||
.neutral { color: var(--n0); }
|
||||
.bg-neutral { background: var(--nl); }
|
||||
a { color: var(--fg); }
|
||||
p > a, li > a { color: var(--accent); }
|
||||
|
||||
|
||||
.msg, .btn { background-color: var(--bg2); color: var(--fg); }
|
||||
.hl, .msg, .btn, .b, .info, .g, .ok, .y, .warn, .r, .err, .m, .fatal, .o, .v, .c,.alert {
|
||||
border-color: var(--fg);
|
||||
}
|
||||
.hl, .b, .info, .g, .ok, .y, .warn, .r, .err, .m, .fatal, .o, .v, .c,.alert {
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.hl { background-color: var(--fg); }
|
||||
.b, .info { background-color: var(--b); }
|
||||
.g, .ok { background-color: var(--g); }
|
||||
.y, .warn { background-color: var(--y); }
|
||||
.r, .err { background-color: var(--r); }
|
||||
.m, .fatal { background-color: var(--m); }
|
||||
.o { background-color: var(--o); }
|
||||
.v { background-color: var(--v); }
|
||||
.c { background-color: var(--c); }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body { filter: invert(100%) hue-rotate(180deg);}
|
||||
body.soft { filter: brightness(85%) sepia(5%) invert(100%) hue-rotate(180deg);}
|
||||
body.soft { filter: brightness(85%) sepia(25%) invert(100%) hue-rotate(180deg);}
|
||||
img,.fill { filter: brightness(80%) invert(100%) ; }
|
||||
.msg, .btn, .b, .info, .g, .ok, .y, .warn, .r, .err, .m, .fatal, .o, .v, .c,.alert {
|
||||
.b, .info, .g, .ok, .y, .warn, .r, .err, .m, .fatal, .o, .v, .c,.alert {
|
||||
filter: brightness(90%) invert(100%) hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.msg, .btn { background-color: var(--bg2) }
|
||||
.b, .info { color: var(--bg); background-color: var(--b); border-color: var(--fg); }
|
||||
.g, .ok { color: var(--bg); background-color: var(--g); border-color: var(--fg); }
|
||||
.y, .warn { color: var(--bg); background-color: var(--y); border-color: var(--fg); }
|
||||
.r, .err { color: var(--bg); background-color: var(--r); border-color: var(--fg); }
|
||||
.m, .fatal { color: var(--bg); background-color: var(--m); border-color: var(--fg); }
|
||||
.o { color: var(--bg); background-color: var(--o); border-color: var(--fg); }
|
||||
.v { color: var(--bg); background-color: var(--v); border-color: var(--fg); }
|
||||
.c { color: var(--bg); background-color: var(--c); border-color: var(--fg); }
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
/* card and block to put space between blocks */
|
||||
|
||||
.card, .block {
|
||||
padding: 1rem;
|
||||
padding: 0;
|
||||
border: solid 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card > ul > li > a { width: 100%; display: inline-block; }
|
||||
.card > ul > li > a:hover { background: var(--accent); color: var(--bg); }
|
||||
|
||||
.col.card, .col.block {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
|
@ -11,6 +15,10 @@
|
|||
|
||||
|
||||
.card { border-color: var(--nl); }
|
||||
.card > *, .block > * { margin: 1rem; }
|
||||
.card,.block {
|
||||
& > h1:first-child, & > h2:first-child, & > h3:first-child, & > h4:first-child, & > h5:first-child, & > h6:first-child { margin-top: 0; }
|
||||
& > h1, & > h2, & > h3, & > h4, & > h5 { margin-left: 0; margin-right: 0; } }
|
||||
.block { border-color: transparent; }
|
||||
|
||||
/* To be used as main image for presentation */
|
||||
|
|
@ -28,8 +36,21 @@ button ~ .central {
|
|||
|
||||
.hero {
|
||||
padding: 2rem;
|
||||
border: double 1rem;
|
||||
}
|
||||
|
||||
.fill { flex-grow: 1; }
|
||||
.push { justify-self: flex-end; margin-top: auto;}
|
||||
footer,.push { justify-self: flex-end; margin-top: auto;}
|
||||
|
||||
/* doc are for long text to read */
|
||||
.doc { max-width: 65ch;
|
||||
font-size: 1.25rem;
|
||||
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;
|
||||
text-align: justify;
|
||||
line-height: 1.5em;
|
||||
p {
|
||||
text-indent: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.col.card,.row.card, .col.block,.row.block { padding: 0; }
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ label > * {
|
|||
|
||||
form > * {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
textarea, input, select {
|
||||
border: 2px solid;
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
textarea, input[type=text] {
|
||||
|
|
|
|||
|
|
@ -10,11 +10,6 @@ body, textarea, input, select {
|
|||
}
|
||||
img { max-width: 100%; }
|
||||
|
||||
.addon, .sm, .nav, textarea, input, select {
|
||||
outline: 0;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
|
|
@ -28,7 +23,9 @@ img { max-width: 100%; }
|
|||
}
|
||||
|
||||
pre { background: var(--bg2);
|
||||
padding: 10px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1rem;
|
||||
overflow: scroll;
|
||||
}
|
||||
code { background: var(--darken);
|
||||
|
|
@ -44,24 +41,22 @@ ol {
|
|||
padding-inline-start: 2rem;
|
||||
}
|
||||
ul > li::marker { font-size: 1.5rem; }
|
||||
summary:hover { cursor: pointer; background: var(--bg2);}
|
||||
ul { padding: 0; margin: 0 1.5rem 0 0; }
|
||||
li { line-height: 1.2rem; }
|
||||
.action, summary:hover { cursor: pointer; background: var(--bg2); }
|
||||
table { font-size: 1rem; }
|
||||
|
||||
.sm { font-size: 0.75rem; line-height: 0.65rem; }
|
||||
.big { font-size: 2rem; line-height: 2.8rem;}
|
||||
.huge { font-size: 3rem; line-height: 4.1rem;}
|
||||
/* highligh revert the colors */
|
||||
.hl { background: var(--fg); color: var(--bg);
|
||||
border: solid 1px;
|
||||
padding: 1px;
|
||||
.sm { font-size: 0.75rem; }
|
||||
.big { font-size: 2rem; line-height: 1.5em; }
|
||||
.huge { font-size: 4rem; line-height: 1.5em; }
|
||||
.addon, .sm, .nav, textarea, input, select {
|
||||
outline: 0;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.hl { border-color: var(--fg);
|
||||
}
|
||||
/* doc are for long text to read */
|
||||
.doc { max-width: 65ch;
|
||||
font-size: 1.25rem;
|
||||
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;
|
||||
text-align: justify;
|
||||
line-height: 1.5em;
|
||||
p {
|
||||
text-indent: 3rem;
|
||||
}
|
||||
}
|
||||
p > .hl, li > .hl {
|
||||
border: solid 1px var(--fg);
|
||||
padding: 1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
.col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.col > .row { padding: 0 1rem; }
|
||||
.row > .col { padding: 1rem 0; }
|
||||
.start {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
|
@ -84,7 +86,7 @@
|
|||
}
|
||||
|
||||
/* For smaller screens, change all columns to 100% width */
|
||||
@media (max-width:800px) {
|
||||
@media (max-width:960px) {
|
||||
.row > * {
|
||||
flex: 0 1 100%;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
color: var(--bg);
|
||||
margin: 1rem 0;
|
||||
width: 100%;
|
||||
margin: 0 0 1rem 0;
|
||||
a {
|
||||
color: var(--bg);
|
||||
}
|
||||
|
|
@ -20,3 +20,9 @@ h3 { background: var(--n1); }
|
|||
h4 { color: var(--fg); background: var(--nl); }
|
||||
h5 { color: var(--fg); background: var(--bg2); }
|
||||
h6 { color: var(--fg); }
|
||||
h1:before { content: "≡ "; opacity: 0.3; }
|
||||
h2:before { content: "= "; opacity: 0.3; }
|
||||
h3:before { content: "- "; opacity: 0.3; }
|
||||
h4:before { content: ": "; opacity: 0.3; }
|
||||
h5:before { content: "⋅ "; opacity: 0.3; }
|
||||
h6 { padding-left: 1.25rem; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue