yogsototh/brutcss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

std size

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-09-27 12:11:16 +02:00
parent e58d9a10b0
commit 3ee2a24287
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
10 changed files with 42 additions and 586 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
brut.min.css vendored
View file

File diff suppressed because one or more lines are too long

50
h/docs.html
View file

@ -17,7 +17,6 @@
<a class="pagename current" href="../index.html">BRUT</a>
<a class="current" href="#">Docs</a>
<a href="download.html">Download</a>
<a href="examples.html">Examples</a>
<a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a>
</div>
</nav>
@ -25,7 +24,6 @@
<div class="container">
<div>
<h1>Images</h1>
<img src="img/brutalisme.jpg" alt="brutalisme"/>
<h2>Inside Grid</h2>
<div class="row">
<div class="c4">
@ -65,23 +63,49 @@
<pre class="block">&lt;a class="btn btn-b"&gt;btn-b&lt;/a&gt;</pre>
<h2>Small <code>btn sm</code></h2>
<h2>Sizes</h2>
<a class="btn sm">btn sm</a>
<a class="btn sm info">btn sm info</a>
<a class="btn sm ok">btn sm ok</a>
<a class="btn sm warn">btn sm warn</a>
<a class="btn sm err">btn sm err</a>
<a class="btn info">btn info</a>
<a class="btn big warn">btn big warn</a>
<a class="btn huge err">btn huge err</a>
<pre class="block">&lt;a class="btn sm info"&gt;btn sm info&lt;/a&gt;</pre>
<h2>Standardized Width <code>btn std</code></h2>
<a class="btn std">btn std</a>
<a class="btn std info">btn std info</a>
<a class="btn std ok">btn std ok</a>
<a class="btn std warn">btn std warn</a>
<a class="btn std err">btn std err</a>
<div class="row">
<div class="col c4">
<h2>Standardized Width <code>btn std</code></h2>
<div class="col">
<a class="btn std">btn std</a>
<a class="btn std info">btn std info</a>
<a class="btn std ok">btn std ok</a>
<a class="btn std warn">btn std warn</a>
<a class="btn std err">btn std err</a>
</div>
</div>
<div class="col c4">
<h3>Big</h3>
<div class="col">
<a class="btn std big ">btn std</a>
<a class="btn std big info">btn std info</a>
<a class="btn std big ok">btn std ok</a>
<a class="btn std big warn">btn std warn</a>
<a class="btn std big err">btn std err</a>
</div>
</div>
<div class="col c4">
<h3>Huge</h3>
<div class="col">
<a class="btn std huge ">btn std</a>
<a class="btn std huge info">btn std info</a>
<a class="btn std huge ok">btn std ok</a>
<a class="btn std huge warn">btn std warn</a>
<a class="btn std huge err">btn std err</a>
</div>
</div>
<pre class="block">&lt;a class="btn btn-b btn-sm"&gt;btn-sm&lt;/a&gt;</pre>
<pre class="block">&lt;a class="btn sm info"&gt;btn sm info&lt;/a&gt;</pre>
</div>
<h1>Messages</h1>

5
h/download.html
View file

@ -11,9 +11,8 @@
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<a class="pagename" href="../index.html">BRUT</a>
<a href="#">Docs</a>
<a class="current" href="download.html">Download</a>
<a href="examples.html">Examples</a>
<a href="docs.html">Docs</a>
<a class="current" href="#">Download</a>
<a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a>
</div>
</nav>

26
h/example.html
View file

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../brut.min.css" rel="stylesheet" type="text/css">
<title>Your Page Title</title>
</head>
<body>
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<a class="pagename current" href="../index.html">Your Site Name</a>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
</nav>
<button class="btn-close btn btn-sm">×</button>
<div class="container">
<h1>Example</h1>
<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
</div>
</body>
</html>

83
h/example2.html
View file

@ -1,83 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="entireframework.min.css" rel="stylesheet" type="text/css">
<style>body { font-family: monospace; }</style>
<title>Your Page Title</title>
</head>
<body>
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<a class="pagename current" href="#">Your Site Name</a>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
</nav>
<button class="btn-close btn btn-sm">×</button>
<div class="container">
<div class="hero">
<h1>Example</h1>
<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
<a class="btn btn-b" href="#">Go places!</a>
</div>
<div class="row">
<div class="col block">
<h3>Yay headings!</h3>
You can view the source of this page and copy it to get a quick start on a project with Min!
<br>
<a href="#" class="btn btn-sm btn-a">
Do stuff!
</a>
</div>
<div class="col block">
<h3>Yay headings!</h3>
You can view the source of this page and copy it to get a quick start on a project with Min!
<br>
<a href="#" class="btn btn-sm btn-b">
Do stuff!
</a>
</div>
<div class="col block">
<h3>Yay headings!</h3>
You can view the source of this page and copy it to get a quick start on a project with Min!
<br>
<a href="#" class="btn btn-sm btn-c">
Do stuff!
</a>
</div>
</div>
<div class="row">
<div class="col c4 card">
<h3>Yay headings!</h3>
You can view the source of this page and copy it to get a quick start on a project with Min!
<br>
<a href="#" class="btn btn-sm">
Do stuff!
</a>
</div>
<div class="col c4 card">
<h3>Yay headings!</h3>
<div class="block">
Something.
</div>
<br>
<a href="#" class="btn btn-sm btn-b">
Do stuff!
</a>
</div>
<div class="col c4 card">
<h3>Yay headings!</h3>
You can view the source of this page and copy it to get a quick start on a project with Min!
<br>
<a href="#" class="btn btn-sm btn-c">
Do stuff!
</a>
</div>
</div>
</div>
</body>
</html>

43
h/example3.html
View file

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Page Title</title>
<link href="//mincss.com/entireframework.min.css" rel="stylesheet" type="text/css">
<style>
h1 {
margin: 0.2em 0;
border-bottom: 5px solid;
margin-bottom: 15px;
padding-bottom: 5px;
}
</style>
</head>
<body>
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<a class="pagename current" href="#">Your Site Name</a>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
</nav>
<button class="btn-close btn btn-sm">×</button>
<div class="container">
<h1>Example</h1>
<p>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!</p>
<h1>Doing things!</h1>
<p>Enter how many dollars you want! <span class="addon">$</span><input type="text" class="smooth"> You can view the source of this page and copy it to get a quick start on a project with Min!</p>
<h1>Do we like numbers?</h1>
<table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table>
<h1>Conclusions ☺ ☻</h1>
<i class="ico">We like chess. ♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟</i>
<br><i class="ico">We like phones! ☎</i>
<br><i class="ico">We like arrows! ⇦ ⇧ ⇨ ⇩</i>
</div>
</body>
</html>

132
h/examples.html
View file

@ -1,132 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>min - examples</title>
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<style>
html {
overflow-x: hidden;
}
</style>
<![endif]-->
<style type="text/css">
/* Min+ plugin*/
message {
display: block;
padding: 2em;
background: #def;
border-left: 5px solid #44e;
}
.warning {
border-color: #e44;
background: #fdd;
}
.great {
border-color: #2d2;
background: #dfd;
}
/* Fun h1s */
h1:not(.exampleh1) {
margin: 0.2em 0;
border-bottom: 5px solid;
margin-bottom: 15px;
padding-bottom: 5px;
}
.fourways {
color: #666;
margin-bottom: 0;
}
small {
color: #6b6;
font-size: 0.6em;
}
/* New css */
img {
border: 1px solid;
border-radius: 6px;
align-self: center;
vertical-align: middle;
margin-right: 10px;
}
a {
color: #5583bb;
}
</style>
<!--[if lte IE 6]>
<style>
.col {
margin: 0.5%;
}
.c12 {
margin: 0.5%;
margin-left: 0.5%;
width: 97%;
}
.container {
width: 90%;
}
</style>
<![endif]-->
</head>
<body>
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<a class="pagename current" href="index.html">Min</a>
<a href="docs.html">Docs</a>
<!--
<a href="bootstrapconverter.html">Bootstrap Converter</a>
<a href="examples.html">Examples</a>
-->
<a href="download.html">Download</a>
<a class="current" href="#">Examples</a>
<a href="https://github.com/owenversteeg/min">Github</a>
</div>
</nav>
<button class="btn btn-sm btn-close">×</button>
<div class="container">
<h1>Examples</h1>
<p>
All of these examples are completely free to use, copy, and distribute however you like; they are all MIT licensed.
<br><br>
<a href="example.html"><img class="exampleimg" src="example-1.jpg">Basic Page w/Nav</a>
<br><br>
<a href="example2.html"><img class="exampleimg" src="example-2.jpg">Standard Page w/Hero</a>
<br><br>
<a href="example3.html"><img class="exampleimg" src="example-3.jpg">Page w/More Elements</a>
</p>
</div>
<script src="compiledcss.js" type="text/javascript"></script>
<script src="download.js" type="text/javascript"></script>
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<script src="defer.js"></script>
</body>
</html>

284
h/oldindex.html
View file

@ -1,284 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="google-site-verification" content="6K0jyXHnCKUqFBgxR_CiAo7rvsfLNCXwHPt3zetR_wk" />
<script>
document.createElement("nav"); document.createElement("button");
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>min</title>
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<style>
html {
overflow-x: hidden;
}
</style>
<![endif]-->
<style type="text/css">
/* Min+ plugin*/
message {
display: block;
padding: 2em;
background: #def;
border-left: 5px solid #44e;
}
.warning {
border-color: #e44;
background: #fdd;
}
.great {
border-color: #2d2;
background: #dfd;
}
</style>
<!--[if lte IE 6]>
<style>
.col {
margin: 0.5%;
}
.c12 {
margin: 0.5%;
margin-left: 0.5%;
width: 97%;
}
.container {
width: 90%;
}
</style>
<![endif]-->
<!--[if IE 5]>
<style>
.container {
width: 100%;
}
.btn-close {
display: none;
}
body {
font: 16px Arial;
}
h3 {
font-size: 20px;
}
.nav {
height: 60px;
}
</style>
<![endif]-->
</head>
<body>
<!--[if lt IE 8]>
<style>
.hero {
margin-top: -10px !important;
}
</style>
<![endif]-->
<style type="text/css">
/* Index only styles */
.row {
margin-top: 0;
overflow: hidden;
}
h1.title {
border-bottom: none;
font-size: 90px;
margin-top: 0;
color: white;
}
.hero em {
color: #91D564;
font-style: normal;
}
html {
background: #f0f0f0;
}
.hero {
text-align: center;
background: #333;
background-image: url('congruent_outline.png');
margin: 0;
width: 100%;
padding: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #ddd;
}
.intro {
text-align: center;
}
.intro .c2 {
height: 1px;
}
.intro .c4 {
box-sizing: border-box;
}
.intro .c4:nth-child(2) {
padding-right: 15px;
}
.intro .c4:nth-child(3) {
padding-left: 15px;
}
@media (max-width: 870px) {
.intro .c2 {
width: 16.66%;
}
.intro .c4 {
width: 33.33%;
}
}
@media (max-width: 660px) {
.intro .c2 {
display: none;
}
.intro .c4 {
width: 50%;
padding: 10px;
}
}
.intro .c4 p {
line-height: 1.4;
}
.btn.em {
background: #91D564;
}
.btn.em:hover {
background: #81c554;
}
.btn.em:active, .btn.em:focus {
background: #71c544;
}
/* Otherwise it spills over on iOS */
.download-btn {
font-size: 1.3em;
padding: 8px 19px 9px;
line-height: 2em;
}
.btn {
margin: 7px 9px 7px 0;
}
.hireme {
width: 50%;
margin: auto;
}
@media (max-width: 700px) {
.hireme {
width: 80%;
}
}
.hireme h1 {
margin: 30px 0 0 0;
}
</style>
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<a class="pagename current" href="index.html">Min</a>
<a href="docs.html">Docs</a>
<!--
<a href="bootstrapconverter.html">Bootstrap Converter</a>
<a href="examples.html">Examples</a>
-->
<a href="download.html">Download</a>
<a href="https://github.com/owenversteeg/min">Github</a>
</div>
</nav>
<button class="btn btn-sm btn-close">×</button>
<div class="hero">
<h1 class="title">Min</h1>
<h3>The <em>995 byte</em> CSS framework that supports <em>IE5.5+</em></h3>
</div>
<!--[if IE 5]> <br><br><![endif]-->
<div class="row intro">
<div class="col c2">&nbsp;</div>
<div class="col c4">
<h3>Exceptional browser support</h3>
<p>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.</p>
</div>
<div class="col c4">
<h3>Ridiculously small</h3>
<p>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.)</p>
</div>
<div class="col c2">&nbsp;</div>
</div>
<!--[if lt IE 7]> <br><br><br><![endif]-->
<div class="row intro">
<div class="col c2">&nbsp;</div>
<div class="col c4">
<h3>Unprescriptive</h3>
<p>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.</p>
</div>
<div class="col c4">
<h3>Semantic markup</h3>
<p>Min uses the new HTML5 semantic elements liberally, has clear and short class names, and uses &lt;div&gt;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.</p>
</div>
<div class="col c2">&nbsp;</div>
</div>
<!--[if lt IE 7]> <br><br><br><![endif]-->
<div class="row intro">
<div class="col c2">&nbsp;</div>
<div class="col c4">
<a href="docs.html" class="btn em smooth">Docs</a>
</div>
<div class="col c4">
<a href="download.html" class="btn smooth download-btn">Download</a>
</div>
<div class="col c2">&nbsp;</div>
</div>
<div class="container intro hireme">
<h1>Hire Owen</h1>
<p>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 <b>50% discount to anyone using Min in their project.</b> Use the link below to get a quote at my website.</p>
<a href="http://owenversteeg.com" class="btn smooth download-btn btn-a">Hire Me</a>
<br><br>
</div>
<div class="container">
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
</div>
<!-- Quantcast Tag -->
<noscript>
<div style="display:none;">
<img src="//pixel.quantserve.com/pixel/p-4UQY7SYFeUHE_.gif" border="0" height="1" width="1" alt="Quantcast"/>
</div>
</noscript>
<!-- End Quantcast tag -->
</body>
</html>

1
index.html
View file

@ -12,7 +12,6 @@
<a class="pagename current" href="index.html">BRUT</a>
<a href="h/docs.html">Docs</a>
<a href="h/download.html">Download</a>
<a href="h/examples.html">Examples</a>
<a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a>
</div>
</nav>

2
src/buttons.less
View file

@ -93,3 +93,5 @@
.btn.sm { padding: 0.5rem 1rem; }
.btn.std { width: 12rem; }
.btn.big.std { width: 20rem; }
.btn.huge.std { width: 24rem; }