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 @@
<a class="btn btn-b">btn-b</a>-
btn sm
<a class="btn sm info">btn sm info</a>-
btn std
btn std
<a class="btn btn-b btn-sm">btn-sm</a>+ +
<a class="btn sm info">btn sm info</a>
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!
- Go places! -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!
-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!
-# | Widgets Sold | Revenue (£) | Profit (£) |
---|---|---|---|
1 | 5 | 10 | 2 |
2 | 10 | 20 | 4 |
3 | 500 | 1000 | 200 |
- 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
-
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.
-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.)
-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.
-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.
-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 -