diff --git a/brut.min.css b/brut.min.css index 1fce447..9968f53 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);--cn-1:#d9d9d9;--cn0:#999;--cn1:#8c8c8c;--cn2:#808080;--ci-1:#b8d9fa;--ci0:#59d;--ci1:#408cd9;--ci2:#2a7fd5;--co-1:#7fdd7f;--co0:#494;--co1:#3c873c;--co2:#347634;--cw-1:#ffd24d;--cw0:#c90;--cw1:#b38600;--cw2:#997300;--ce-1:#fa9595;--ce0:#d33;--ce1:#d32323;--ce2:#bd2020;--shadow:rgba(0, 0, 0, 0.75)}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--cn-1:#666666;--cn0:#808080;--cn1:#8c8c8c;--cn2:#999999;--ci-1:#2266aa;--ci0:#2a7fd5;--ci1:#408cd9;--ci2:#4b99e7;--co-1:#255225;--co0:#347634;--co1:#3c873c;--co2:#39a439;--cw-1:#664d00;--cw0:#997300;--cw1:#b38600;--cw2:#cc9900;--ce-1:#921818;--ce0:#bd2020;--ce1:#d32323;--ce2:#e92727;--shadow:rgba(128, 128, 128, 0.3)}}.neutral{color:var(--cn-0)}.bg-neutral{background:var(--cn-1)}.info{color:var(--ci0)}.bg-info{background:var(--ci-1)}.ok{color:var(--co0)}.bg-ok{background:var(--co-1)}.warn{color:var(--cw0)}.bg-warn{background:var(--cw-1)}.err{color:var(--ce0)}.bg-err{background:var(--ce-1)}html{font-size:12px}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}*{box-sizing:border-box}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:10px}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}pre{background:var(--bg2);padding:10px}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}img{max-width:100%}.big{font-size:2em}.huge{font-size:3em}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3}.tb:before{content:"〈"}.tb:after{content:"〉"}.tb:hover:before,.tb:hover:after{opacity:1}.tb:active:before{content:"《"}.tb:active:after{content:"》"}.tb.info{color:var(--ci0)}.tb.info:hover{color:var(--ci1)}.tb.info:active{color:var(--ci2)}.tb.ok{color:var(--co0)}.tb.ok:hover{color:var(--co1)}.tb.ok:active{color:var(--co2)}.tb.warn{color:var(--cw0)}.tb.warn:hover{color:var(--cw1)}.tb.warn:active{color:var(--cw2)}.tb.err{color:var(--ce0)}.tb.err:hover{color:var(--ce1)}.tb.err:active{color:var(--ce2)}.btn{background:var(--cn0);border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:2px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);text-align:center}.btn:hover{background:var(--cn1)}.btn:active,.btn:focus{background:var(--cn2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.info{background:var(--ci0)}.btn.info:hover{background:var(--ci1)}.btn.info:active,.btn.info:focus{background:var(--ci2)}.btn.ok{background:var(--co0)}.btn.ok:hover{background:var(--co1)}.btn.ok:active,.btn.ok:focus{background:var(--co2)}.btn.warn{background:var(--cw0)}.btn.warn:hover{background:var(--cw1)}.btn.warn:active,.btn.warn:focus{background:var(--cw2)}.btn.err{background:var(--ce0)}.btn.err:hover{background:var(--ce1)}.btn.err:active,.btn.err:focus{background:var(--ce2)}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.row{display:flex;justify-content:space-evenly;align-items:stretch;flex-wrap:wrap}.col{display:flex;flex-direction:column;justify-content:space-evenly;align-items:stretch;flex-wrap:wrap}.col>*,.row>*{padding:5px}.col.no-padding>*,.row.no-padding>*{padding:0}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}.card,.block{padding:5px;border:solid 2px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}.col>.card,.col>.block{height:100%}.row>.card,.row>.block{width:100%}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;outline-style:double;outline-width:.5rem;margin:1rem}h1,h2,h3,h4,h5,h6{display:table;padding:.25rem;font-size:1rem}h1{font-size:2rem}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{opacity:.3;font-size:1rem}h1:before{content:"# "}h2:before{content:"## "}h3:before{content:"### "}h4:before{content:"#### "}h5:before{content:"##### "}h6:before{content:"###### "}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid #ccc;padding:8px}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid #888}.addon{padding:8px 12px;border-width:2px;border-color:#888;border-style:solid none solid solid}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:50px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;color:#aaa;float:right;font-size:25px;margin:-54px 7px;display:none}.btn.btn-close:hover{color:#fff}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--fg);border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.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{background:var(--cn-1);border-left:5px solid var(--cn0);padding:1.5em}.msg.info{background:var(--ci-1);border-color:var(--ci0)}.msg.ok{background:var(--co-1);border-color:var(--co0)}.msg.warn{background:var(--cw-1);border-color:var(--cw0)}.msg.err{background:var(--ce-1);border-color:var(--ce0)}.msg.black,.msg.black *{background:#333;border-color:#000;color:#fff}.msg.attention,.msg.attention *{background:#b74fde;border-color:#9311bb;color:#fff}.msg.fatal,.msg.fatal *{background:#df1023;border-color:#ba0000;color:#fff} \ 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);--cn-1:#d9d9d9;--cn0:#999;--cn1:#8c8c8c;--cn2:#808080;--ci-1:#b8d9fa;--ci0:#59d;--ci1:#408cd9;--ci2:#2a7fd5;--co-1:#7fdd7f;--co0:#494;--co1:#3c873c;--co2:#347634;--cw-1:#ffd24d;--cw0:#c90;--cw1:#b38600;--cw2:#997300;--ce-1:#fa9595;--ce0:#d33;--ce1:#d32323;--ce2:#bd2020;--shadow:rgba(0, 0, 0, 0.75)}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--cn-1:#666666;--cn0:#808080;--cn1:#8c8c8c;--cn2:#999999;--ci-1:#2266aa;--ci0:#2a7fd5;--ci1:#408cd9;--ci2:#4b99e7;--co-1:#255225;--co0:#347634;--co1:#3c873c;--co2:#39a439;--cw-1:#664d00;--cw0:#997300;--cw1:#b38600;--cw2:#cc9900;--ce-1:#921818;--ce0:#bd2020;--ce1:#d32323;--ce2:#e92727;--shadow:rgba(128, 128, 128, 0.3)}}.neutral{color:var(--cn-0)}.bg-neutral{background:var(--cn-1)}.info{color:var(--ci0)}.bg-info{background:var(--ci-1)}.ok{color:var(--co0)}.bg-ok{background:var(--co-1)}.warn{color:var(--cw0)}.bg-warn{background:var(--cw-1)}.err{color:var(--ce0)}.bg-err{background:var(--ce-1)}html{font-size:12px}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}*{box-sizing:border-box}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:10px}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}pre{background:var(--bg2);padding:10px}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}img{max-width:100%}.big{font-size:2em}.huge{font-size:3em}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3}.tb:before{content:"〈"}.tb:after{content:"〉"}.tb:hover:before,.tb:hover:after{opacity:1}.tb:active:before{content:"《"}.tb:active:after{content:"》"}.tb.info{color:var(--ci0)}.tb.info:hover{color:var(--ci1)}.tb.info:active{color:var(--ci2)}.tb.ok{color:var(--co0)}.tb.ok:hover{color:var(--co1)}.tb.ok:active{color:var(--co2)}.tb.warn{color:var(--cw0)}.tb.warn:hover{color:var(--cw1)}.tb.warn:active{color:var(--cw2)}.tb.err{color:var(--ce0)}.tb.err:hover{color:var(--ce1)}.tb.err:active{color:var(--ce2)}.btn{background:var(--cn0);border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:2px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);text-align:center}.btn:hover{background:var(--cn1)}.btn:active,.btn:focus{background:var(--cn2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.info{background:var(--ci0)}.btn.info:hover{background:var(--ci1)}.btn.info:active,.btn.info:focus{background:var(--ci2)}.btn.ok{background:var(--co0)}.btn.ok:hover{background:var(--co1)}.btn.ok:active,.btn.ok:focus{background:var(--co2)}.btn.warn{background:var(--cw0)}.btn.warn:hover{background:var(--cw1)}.btn.warn:active,.btn.warn:focus{background:var(--cw2)}.btn.err{background:var(--ce0)}.btn.err:hover{background:var(--ce1)}.btn.err:active,.btn.err:focus{background:var(--ce2)}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.row{display:flex;justify-content:space-evenly;align-items:stretch;flex-wrap:wrap}.col{display:flex;flex-direction:column;justify-content:space-evenly;align-items:stretch;flex-wrap:wrap}.col>*,.row>*{padding:5px}.col.no-padding>*,.row.no-padding>*{padding:0}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}.card,.block{padding:5px;border:solid 2px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}.col>.card,.col>.block{height:100%}.row>.card,.row>.block{width:100%}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;outline-style:double;outline-width:.5rem;margin:1rem}h1,h2,h3,h4,h5,h6{display:table;padding:.25rem;font-size:1rem}h1{font-size:2rem}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{opacity:.3;font-size:1rem}h1:before{content:"# "}h2:before{content:"## "}h3:before{content:"### "}h4:before{content:"#### "}h5:before{content:"##### "}h6:before{content:"###### "}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid #ccc;padding:8px}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid #888}.addon{padding:8px 12px;border-width:2px;border-color:#888;border-style:solid none solid solid}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:50px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;color:#aaa;float:right;font-size:25px;margin:-54px 7px;display:none}.btn.btn-close:hover{color:#fff}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--fg);border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.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{background:var(--cn-1);border-left:5px solid var(--cn0);padding:1.5em}.msg.info{background:var(--ci-1);border-color:var(--ci0)}.msg.ok{background:var(--co-1);border-color:var(--co0)}.msg.warn{background:var(--cw-1);border-color:var(--cw0)}.msg.err{background:var(--ce-1);border-color:var(--ce0)}.msg.black,.msg.black *{background:#333;border-color:#000;color:#fff}.msg.attention,.msg.attention *{background:#b74fde;border-color:#9311bb;color:#fff}.msg.fatal,.msg.fatal *{background:#df1023;border-color:#ba0000;color:#fff} \ No newline at end of file diff --git a/h/docs.html b/h/docs.html index 970a1c6..56bfed9 100644 --- a/h/docs.html +++ b/h/docs.html @@ -17,7 +17,6 @@ BRUT Docs Download - Examples Code @@ -25,7 +24,6 @@

Images

- brutalisme

Inside Grid

@@ -65,23 +63,49 @@
<a class="btn btn-b">btn-b</a>
-

Small btn sm

+

Sizes

btn sm - btn sm info - btn sm ok - btn sm warn - btn sm err + btn info + btn big warn + btn huge err
<a class="btn sm info">btn sm info</a>
-

Standardized Width btn std

- btn std - btn std info - btn std ok - btn std warn - btn std err +
+
+

Standardized Width btn std

+ +
+ +
<a class="btn btn-b btn-sm">btn-sm</a>
+ +
<a class="btn sm info">btn sm info</a>

Messages

diff --git a/h/download.html b/h/download.html index 2600b31..37185d8 100644 --- a/h/download.html +++ b/h/download.html @@ -11,9 +11,8 @@ diff --git a/h/example.html b/h/example.html deleted file mode 100644 index 3f1fa7d..0000000 --- a/h/example.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - Your Page Title - - - - - -
-

Example

-

You can view the source of this page and copy it to get a quick start on a project with Min!

-
- - diff --git a/h/example2.html b/h/example2.html deleted file mode 100644 index f12a31e..0000000 --- a/h/example2.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - - Your Page Title - - - - -
-
-

Example

-

You can view the source of this page and copy it to get a quick start on a project with Min!

-

You can view the source of this page and copy it to get a quick start on a project with Min!

- Go places! -
-
-
-

Yay headings!

- You can view the source of this page and copy it to get a quick start on a project with Min! -
- - Do stuff! - -
-
-

Yay headings!

- You can view the source of this page and copy it to get a quick start on a project with Min! -
- - Do stuff! - -
-
-

Yay headings!

- You can view the source of this page and copy it to get a quick start on a project with Min! -
- - Do stuff! - -
-
-
-
-

Yay headings!

- You can view the source of this page and copy it to get a quick start on a project with Min! -
- - Do stuff! - -
-
-

Yay headings!

-
- Something. -
-
- - Do stuff! - -
-
-

Yay headings!

- You can view the source of this page and copy it to get a quick start on a project with Min! -
- - Do stuff! - -
-
-
- - diff --git a/h/example3.html b/h/example3.html deleted file mode 100644 index b4640bf..0000000 --- a/h/example3.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - Your Page Title - - - - - - - - -
-

Example

-

You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min!

-

Doing things!

-

Enter how many dollars you want! $ You can view the source of this page and copy it to get a quick start on a project with Min!

-

Do we like numbers?

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

Conclusions ☺ ☻

- We like chess. ♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟ -
We like phones! ☎ -
We like arrows! ⇦ ⇧ ⇨ ⇩ -
- - diff --git a/h/examples.html b/h/examples.html deleted file mode 100644 index 3b1ac34..0000000 --- a/h/examples.html +++ /dev/null @@ -1,132 +0,0 @@ - - - - - - - - - min - examples - - - - - - - - - - - - -
-

Examples

-

- All of these examples are completely free to use, copy, and distribute however you like; they are all MIT licensed. -

- Basic Page w/Nav -

- Standard Page w/Hero -

- Page w/More Elements -

-
- - - - - - - - diff --git a/h/oldindex.html b/h/oldindex.html deleted file mode 100644 index 6f700bf..0000000 --- a/h/oldindex.html +++ /dev/null @@ -1,284 +0,0 @@ - - - - - - - - - - - min - - - - - - - - - - - - - - - - -
-

Min

-

The 995 byte CSS framework that supports IE5.5+

-
- -
-
 
-
-

Exceptional browser support

-

Min supports IE5.5+, FF3+, Opera 9+, and Safari 4+, the best browser support of any CSS framework by far. Unfortunately, IE5.5 does not support border-radius and as such does not have rounded button corners. That said, IE5.5 users will be so surprised to see a site load correctly they will overlook this.

-
-
-

Ridiculously small

-

Min is only 995 bytes, so it will never slow down your website unlike bulky frameworks like Bootstrap. Min also does not require Javascript. Pages built with Min can load faster than a blink of an eye. (Average loading times for three Min pages tested were 334ms; a human eye blink is 400ms.)

-
-
 
-
- -
-
 
-
-

Unprescriptive

-

Min is extremely lightweight and doesn't prescribe a certain design for you, like Bootstrap. It's easy to override the default rules since there are so few of them and they are at low specificity levels. This customizability helps you avoid the Yet Another Bootstrap Site phenomenon.

-
-
-

Semantic markup

-

Min uses the new HTML5 semantic elements liberally, has clear and short class names, and uses <div>s sparingly. Patients that switched from Bootstrap to Min reported up to a ninefold decrease in markup and drastic improvements in most cases of divitis. Ask your CSS-atrician if Min is right for you.

-
-
 
-
- -
-
 
-
- Docs -
-
- Download -
-
 
-
-
-

Hire Owen

-

As the creator of Min, the smallest and fastest CSS framework in the world, I know CSS. My software is used by over 100,000 people in 185+ countries, and I have countless years of experience with front-end work. Nobody knows Min better than I do, and for this month only I am offering a 50% discount to anyone using Min in their project. Use the link below to get a quote at my website.

- Hire Me -

-
-
- -
- - - - - - diff --git a/index.html b/index.html index eb67af6..b3b0cad 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,6 @@ BRUT Docs Download - Examples Code
diff --git a/src/buttons.less b/src/buttons.less index 6ffc8cf..8b06ac9 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -93,3 +93,5 @@ .btn.sm { padding: 0.5rem 1rem; } .btn.std { width: 12rem; } +.btn.big.std { width: 20rem; } +.btn.huge.std { width: 24rem; }