275 lines
9.3 KiB
HTML
275 lines
9.3 KiB
HTML
<!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, maximum-scale=1.0, user-scalable=no">
|
||
<title>YOLO - docs</title>
|
||
<link href="../brut.min.css" rel="stylesheet" type="text/css" />
|
||
<style>
|
||
.dark { background: #ddd; }
|
||
.light { background: #eee; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||
<div class="container">
|
||
<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>
|
||
<button class="btn btn-sm btn-close">×</button>
|
||
<div class="container">
|
||
<div>
|
||
<h1>Images</h1>
|
||
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
||
<h2>Inside Grid</h2>
|
||
<div class="row">
|
||
<div class="block c4">
|
||
Inside a block.
|
||
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
||
</div>
|
||
<div class="c4"></div>
|
||
<div class="card c4">
|
||
Inside a card.
|
||
<img src="img/brutalisme.jpg" alt="brutalisme"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h1>Buttons</h1>
|
||
|
||
<h2>Text Buttons</h2>
|
||
<a class="tb">tb</a>
|
||
<a class="tb tb-a">tb tb-a</a>
|
||
<a class="tb tb-b">tb tb-b</a>
|
||
<a class="tb tb-c">tb tb-c</a>
|
||
|
||
<h2>Classic</h2>
|
||
<a class="btn btn-a">btn-a</a>
|
||
<a class="btn-b btn">btn-b</a>
|
||
<a class="btn-c btn">btn-c</a>
|
||
<a class="btn">classless</a>
|
||
|
||
<pre class="block"><a class="btn btn-b">btn-b</a></pre>
|
||
|
||
<h2>Small <code>btn-sm</code></h2>
|
||
<a class="btn btn-a btn-sm">btn-sm btn-a</a>
|
||
<a class="btn btn-b btn-sm">btn-sm btn-b</a>
|
||
<a class="btn btn-c btn-sm">btn-sm btn-c</a>
|
||
<a class="btn btn-sm">btn-sm classless</a>
|
||
|
||
<pre class="block"><a class="btn btn-b btn-sm">btn-sm</a></pre>
|
||
|
||
<h2>Standardized Width <code>btn-std</code></h2>
|
||
<a class="btn btn-a btn-std">btn-std btn-a With a bit too much text</a>
|
||
<a class="btn btn-b btn-std">btn-std btn-b</a>
|
||
<a class="btn btn-c btn-std">btn-std btn-c</a>
|
||
<a class="btn btn-std">btn-sm classless</a>
|
||
|
||
<pre class="block"><a class="btn btn-b btn-sm">btn-sm</a></pre>
|
||
</div>
|
||
|
||
<h1>Messages</h1>
|
||
<div class="messages">
|
||
<div class="msg">
|
||
<strong>Normal Message</strong>
|
||
This is a normal message with <code>msg</code>.
|
||
</div>
|
||
<div class="msg info">
|
||
<strong><i class="ico">☞</i> Info</strong>
|
||
This is done by adding <code>info</code> to the class.
|
||
</div>
|
||
<div class="msg ok">
|
||
<strong><i class="ico">☑</i> OK</strong>
|
||
This is done by adding <code>ok</code> to the class.
|
||
</div>
|
||
<div class="msg warn">
|
||
<strong><i class="ico">☣</i> Warning</strong>
|
||
This is done by adding <code>warn</code> to the class.
|
||
</div>
|
||
<div class="msg err">
|
||
<strong><i class="ico">☒</i> Error</strong>
|
||
This is done by adding <code>err</code> to the class.
|
||
</div>
|
||
<div class="msg attention">
|
||
<strong>Attention</strong>
|
||
This is done by adding <code>attention</code> to the class.
|
||
</div>
|
||
<div class="msg fatal">
|
||
<strong><i class="ico">☣</i> Fatal</strong>
|
||
This is done by adding <code>fatal</code> to the class.
|
||
</div>
|
||
<div class="msg black">
|
||
<strong>Black</strong>
|
||
This is done by adding <code>black</code> to the class.
|
||
</div>
|
||
<pre><div class="msg">
|
||
<strong>Alert headline!</strong>
|
||
Message text
|
||
</div></pre>
|
||
</div>
|
||
|
||
<div>
|
||
<h1>Forms</h1>
|
||
<div class="block">
|
||
<input type="text" placeholder="input type="text"">
|
||
</div>
|
||
<div class="block">
|
||
<textarea rows="3" placeholder="textarea"></textarea>
|
||
</div>
|
||
<div class="block">
|
||
<span class="addon">$</span><input type="text" placeholder="span class="addon"">
|
||
</div>
|
||
<pre><input type="text">
|
||
<br><textarea rows="3">
|
||
<br><span class="addon">$</span><input type="text"></pre>
|
||
<div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code></span></code> and <code><input></code> tags. Example: <pre>... </span> <input ...</pre><span class="addon">$</span> <input type="text" class="smooth"> <pre>... </span><input ...</pre><span class="addon">$</span><input type="text" class="smooth"></div>
|
||
</div>
|
||
|
||
<div class="navbar">
|
||
<h1>Navbars</h1>
|
||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||
<div class="container">
|
||
<a class="pagename current" href="#">BRUT</a>
|
||
<a href="#">One</a>
|
||
<a href="#">Two</a>
|
||
<a href="#">Three</a>
|
||
<a href="#">Four</a>
|
||
</div>
|
||
</nav>
|
||
<button class="btn-close btn btn-sm">×</button>
|
||
<br>
|
||
<pre><nav class="nav" tabindex="-1" onclick="this.focus()"><br> <div class="container"><br> <a class="pagename current" href="#">BRUT</a><br> <a href="#">One</a><br> <a href="#">Two</a> <br> <a href="#">Three</a><br> </div><br></nav><br><button class="btn-close btn btn-sm">×</button></pre>
|
||
</div>
|
||
|
||
<div>
|
||
<h1>Tables</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>
|
||
<br><br>
|
||
<pre><table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>Widgets Sold</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>5</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>10</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>500</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</pre>
|
||
</div>
|
||
|
||
<h1>Icons</h1>
|
||
<div class="icons">
|
||
<div class="row">
|
||
<div class="col c6 card">
|
||
<div class="block"><b>Android Safe</b></div>
|
||
<i class="ico block" style="line-height: 1.5rem">
|
||
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||
</i>
|
||
<div class="block msg" style="line-height: 1.5rem">
|
||
The "Android Safe" icons work everywhere, tested on hundreds of devices.
|
||
</div>
|
||
</div>
|
||
<div class="col c6 card">
|
||
<div class="block"><b>Total Set</b></div>
|
||
<i class="ico block" style="line-height: 1.5rem">
|
||
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||
</i>
|
||
<div class="block msg warn">Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)</div>
|
||
</div>
|
||
</div>
|
||
<pre><i class="ico">Copy and paste icons from above here!</i></pre>
|
||
<h1>Grids</h1>
|
||
<div class="row">
|
||
<div class="col dark c12">12</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col dark c11">11</div>
|
||
<div class="col light c1">1</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col dark c10">10</div>
|
||
<div class="col light c2">2</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col dark c9">9</div>
|
||
<div class="col light c3">3</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col dark c8">8</div>
|
||
<div class="col light c4">4</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col dark c7">7</div>
|
||
<div class="col light c5">5</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col dark c6">6</div>
|
||
<div class="col light c6">6</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col dark c5">5</div>
|
||
<div class="col light c7">7</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col dark c4">4</div>
|
||
<div class="col light c8">8</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col dark c3">3</div>
|
||
<div class="col light c9">9</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col dark c2">2</div>
|
||
<div class="col light c10">10</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col dark c1">1</div>
|
||
<div class="col light c11">11</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col light c12">12</div>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<!--[if lte IE 6]><br><br><br><![endif]-->
|
||
|
||
<pre><div class="row"><br> <div class="col c12">12</div><br></div>
|
||
<br><div class="row"><br> <div class="col c4">4</div><br> <div class="col c8">8</div><br></div>
|
||
</pre>
|
||
</div>
|
||
|
||
<h1>Headings</h1>
|
||
<div class="headings">
|
||
<h1 class="exampleh1">h1</h1>
|
||
<h2>h2</h2>
|
||
<h3>h3</h3>
|
||
<h4>h4</h4>
|
||
<h5>h5</h5>
|
||
<h6>h6</h6>
|
||
<br>
|
||
<pre><h1>Level One Heading</h1></pre>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|