diff --git a/bb/brut/site.clj b/bb/brut/site.clj index 9aefcb1..2a15228 100644 --- a/bb/brut/site.clj +++ b/bb/brut/site.clj @@ -86,16 +86,23 @@ "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.fill.card - [:p "With headings"] - [:h3 "this is a normal " [:code "h3"]] - [:h3.tight.big "this is a " [:code "h3"] " with " [:code "big"]] - [:h3.tight.y "this is a " [:code "h3"] " with " [:code "y"] "for yellow"] - [:h3.tight.big.y "this is a " [:code "h3"] " with both " [:code "big"] " and " [:code "y"] "."] - [:br] - [:h3.tight "this contains a " [:code "hl"] " " [:span.hl "HL"] ] - [:h3.tight.hl "this a " [:code "h3"] " with " [:code "hl"] ] - ] + [:div.row + [:div.block + [:p.tight "A block: "] + [:div.card + [:div.tb "textual btn"] + [:br] + [:div.btn "classic btn"] + [:br] + [:div.msg "Some message block"]]] + [:div.block + [: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 diff --git a/brut.min.css b/brut.min.css index 51d3a41..eb612b0 100644 --- a/brut.min.css +++ b/brut.min.css @@ -1 +1 @@ -/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--b)}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(25%)invert(100%)hue-rotate(180deg)}img,.fill{filter:brightness(80%)invert(100%)}.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{filter:brightness(90%)invert(100%)hue-rotate(180deg)}}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}ul{padding:0;margin-left:1.5rem}summary:hover{cursor:pointer}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:2.8rem}.huge{font-size:3rem;line-height:4.1rem}.hl{border:solid 1px var(--fg);padding:1px}.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}.doc p{text-indent:3rem}.tb,.btn,.tag{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:baseline}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.tb.hl{border:none}.btn{border:solid 2px var(--fg);font-weight:700;cursor:pointer;display:inline-block;margin:0 .25em .25em 0;padding:1rem 2rem;box-shadow:.25em .25em var(--nl);vertical-align:bottom}.btn:hover{box-shadow:.25em .25em var(--n1)}.btn:active,.btn:focus{box-shadow:.05em .05em var(--n2);position:relative;top:.2em;left:.2em}.btn.sm{padding:.5rem 1rem}.btn.std{width:12em}.tag{padding:2px;font-size:.875rem;border:solid 1px var(--fg);margin:0 1px}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1;max-height:100%}.col>*{flex:0;max-width:100%}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:1rem;border:solid 1rem;overflow:hidden}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem}.fill{flex-grow:1}footer,.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:var(--bg)}h1.hl,h2.hl,h3.hl,h4.hl,h5.hl,h6.hl{padding:.5rem}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}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:.3}h2:before{content:"= ";opacity:.3}h3:before{content:"- ";opacity:.3}h4:before{content:": ";opacity:.3}h5:before{content:"⋅ ";opacity:.3}h6{padding-left:2rem}.ico{font-family:Arial Unicode MS,Lucida Sans Unicode;font-style:normal}.big.ico,.huge.ico{vertical-align:middle}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:2px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:2px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--accent)}.form-block:focus-within .addon{border-color:var(--accent)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{border-left:5px solid var(--darken);padding:1rem} \ No newline at end of file +/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--b)}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(25%)invert(100%)hue-rotate(180deg)}img,.fill{filter:brightness(80%)invert(100%)}.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{filter:brightness(90%)invert(100%)hue-rotate(180deg)}}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}ul{padding:0;margin-left:1.5rem}summary:hover{cursor:pointer}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:2.8rem}.huge{font-size:3rem;line-height:4.1rem}.hl{border-color:var(--fg)}p>.hl,li>.hl{border:solid 1px var(--fg);padding:1px}.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}.doc p{text-indent:3rem}.tb,.btn,.tag{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:baseline}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.btn{border:solid 2px var(--fg);font-weight:700;cursor:pointer;display:inline-block;margin:0 .25em .25em 0;padding:1rem 2rem;box-shadow:.25em .25em var(--nl);vertical-align:bottom}.btn:hover{box-shadow:.25em .25em var(--n1)}.btn:active,.btn:focus{box-shadow:.05em .05em var(--n2);position:relative;top:.2em;left:.2em}.btn.sm{padding:.5rem 1rem}.btn.std{width:12em}.tag{padding:2px;font-size:.875rem;border:solid 1px var(--fg);margin:0 1px}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1;max-height:100%}.col>*{flex:0;max-width:100%}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:960px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:1rem;border:solid 1rem;overflow:hidden}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem}.fill{flex-grow:1}footer,.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:var(--bg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}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:.3}h2:before{content:"= ";opacity:.3}h3:before{content:"- ";opacity:.3}h4:before{content:": ";opacity:.3}h5:before{content:"⋅ ";opacity:.3}h6{padding-left:2rem}.ico{font-family:Arial Unicode MS,Lucida Sans Unicode;font-style:normal}.big.ico,.huge.ico{vertical-align:middle}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:2px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:2px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--accent)}.form-block:focus-within .addon{border-color:var(--accent)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{border-left:5px solid var(--darken);padding:1rem} \ No newline at end of file diff --git a/index.html b/index.html index ac8dcec..4125b53 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -BRUT

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:

With headings

this is a normal h3

this is a h3 with big

this is a h3 with yfor yellow

this is a h3 with both big and y.


this contains a hl HL

this a h3 with hl

Docs

Download

Download BRUT

Download
\ No newline at end of file +BRUT

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/src/buttons.less b/src/buttons.less index 876e427..0cd6bb7 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -11,7 +11,6 @@ .tb:hover::before,.tb:hover::after { opacity: 1; } .tb:active:before { content: "❰"; } .tb:active:after { content: "❱"; } -.tb.hl { border: none; } .btn { border: solid 2px var(--fg); diff --git a/src/general.less b/src/general.less index 6369b6b..e6e9f8b 100644 --- a/src/general.less +++ b/src/general.less @@ -51,9 +51,13 @@ 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;} -.hl { border: solid 1px var(--fg); - padding: 1px; +.hl { border-color: var(--fg); } +p > .hl, li > .hl { + border: solid 1px var(--fg); + padding: 1px; +} + /* doc are for long text to read */ .doc { max-width: 65ch; font-size: 1.25rem; diff --git a/src/grid.less b/src/grid.less index 3d5d9ca..b9373c9 100644 --- a/src/grid.less +++ b/src/grid.less @@ -84,7 +84,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%; diff --git a/src/headings.less b/src/headings.less index c9a211c..e0cb418 100644 --- a/src/headings.less +++ b/src/headings.less @@ -11,7 +11,6 @@ h1, h2, h3, h4, h5, h6 { a { color: var(--bg); } - &.hl { padding: 0.5rem; } } .tight { margin: 0; }