361 lines
11 KiB
HTML
361 lines
11 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>BRUT - docs</title>
|
||
<link href="../brut.min.css" rel="stylesheet" type="text/css" />
|
||
<style>
|
||
.light { background: var(--bg2); }
|
||
.dark { background: var(--nl); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||
<div class="container">
|
||
<a class="pagename" href="../index.html">BRUT</a>
|
||
<a class="current" href="#">Docs</a>
|
||
<a href="download.html">Download</a>
|
||
<a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a>
|
||
</div>
|
||
</nav>
|
||
<button class="btn sm btn-close">×</button>
|
||
<div class="container">
|
||
<div>
|
||
<h1>Images</h1>
|
||
<h2>Inside Grid</h2>
|
||
<div class="row">
|
||
<div class="c4">
|
||
<div class="block">
|
||
Inside a block.
|
||
<img src="img/brutalism.webp" alt="brutalism"/>
|
||
</div>
|
||
</div>
|
||
<div class="c4">
|
||
Direct in column:
|
||
<img src="img/brutalism.webp" alt="brutalism"/>
|
||
</div>
|
||
<div class="c4">
|
||
<div class="card">
|
||
Inside a card.
|
||
<img src="img/brutalism.webp" alt="brutalism"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h1>Buttons</h1>
|
||
|
||
<h2>Text Buttons</h2>
|
||
|
||
<h3>Classic</h3>
|
||
<a class="tb">tb</a>
|
||
<a class="tb info">tb info</a>
|
||
<a class="tb ok">tb ok</a>
|
||
<a class="tb warn">tb warn</a>
|
||
<a class="tb err">tb err</a>
|
||
<a class="tb fatal">tb fatal</a>
|
||
|
||
<h3>Sizes</h3>
|
||
<a class="tb sm">tb sm</a>
|
||
<a class="tb sm info">tb sm</a>
|
||
<a class="tb ok">tb</a>
|
||
<a class="tb big warn">tb big</a>
|
||
<a class="tb huge err">tb huge</a>
|
||
<a class="tb huge fatal">tb huge</a>
|
||
|
||
<h2>Classic</h2>
|
||
<a class="btn">btn</a>
|
||
<a class="btn info">btn info</a>
|
||
<a class="btn ok">btn ok</a>
|
||
<a class="btn warn">btn warn</a>
|
||
<a class="btn err">btn err</a>
|
||
<a class="btn fatal">btn fatal</a>
|
||
|
||
<pre class="block"><a class="btn btn-b">btn-b</a></pre>
|
||
|
||
<h2>Sizes</h2>
|
||
<a class="btn sm">btn sm</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"><a class="btn sm info">btn sm info</a></pre>
|
||
|
||
<div class="row">
|
||
<div class="col c4">
|
||
<div class="card">
|
||
<h3>Standardized Width <code>btn std</code></h3>
|
||
<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>
|
||
<a class="btn std fatal">btn std fatal</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col c4">
|
||
<div class="card">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col c4">
|
||
<div class="card">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre class="block"><a class="btn btn-b btn-sm">btn-sm</a></pre>
|
||
|
||
<pre class="block"><a class="btn sm info">btn sm info</a></pre>
|
||
</div>
|
||
|
||
<h1>Messages</h1>
|
||
<div class="row">
|
||
<div class="col c6">
|
||
<h2>Basic Messages</h2>
|
||
<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 fatal">
|
||
<strong><i class="ico">☒</i> Fatal</strong>
|
||
This is done by adding <code>fatal</code> to the class.
|
||
</div>
|
||
</div>
|
||
<div class="col c6">
|
||
<h2>Strong Alerts</h2>
|
||
|
||
<div class="msg alert">
|
||
<strong>Alert Message</strong>
|
||
This is a normal message with <code>msg</code>.
|
||
</div>
|
||
<div class="msg alert info">
|
||
<strong><i class="ico">☞</i>Alert Info</strong>
|
||
This is done by adding <code>info</code> to the class.
|
||
</div>
|
||
<div class="msg alert ok">
|
||
<strong><i class="ico">☑</i>Alert OK</strong>
|
||
This is done by adding <code>ok</code> to the class.
|
||
</div>
|
||
<div class="msg alert warn">
|
||
<strong><i class="ico">☣</i>Alert Warning</strong>
|
||
This is done by adding <code>warn</code> to the class.
|
||
</div>
|
||
<div class="msg alert err">
|
||
<strong><i class="ico">☒</i>Alert Error</strong>
|
||
This is done by adding <code>err</code> to the class.
|
||
</div>
|
||
<div class="msg alert fatal">
|
||
<strong><i class="ico">☒</i>Alert Fatal</strong>
|
||
This is done by adding <code>fatal</code> to the class.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<pre><div class="msg">
|
||
<strong>Alert headline!</strong>
|
||
Message text
|
||
</div></pre>
|
||
|
||
<div>
|
||
<h1>Forms</h1>
|
||
<input class="neutral" type="text" placeholder="input type="text"">
|
||
<br/>
|
||
<textarea class="neutral" rows="3" placeholder="textarea"></textarea>
|
||
<br/>
|
||
<span class="addon bg-info">$</span><input type="text" placeholder="span class="addon"">
|
||
<br/>
|
||
<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 sm">×</button>
|
||
<br>
|
||
<pre><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>
|
||
</div>
|
||
</nav>
|
||
<button class="btn-close 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">
|
||
<div class="card">
|
||
<div class="block"><b>Android Safe</b></div>
|
||
<i class="ico block" style="line-height: 1.5rem">
|
||
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||
</i>
|
||
<div class="msg push">
|
||
The "Android Safe" icons work everywhere, tested on hundreds of devices.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col c6">
|
||
<div class="card">
|
||
<div class="block"><b>Total Set</b></div>
|
||
<i class="ico block" style="line-height: 1.5rem">
|
||
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||
</i>
|
||
<div class="msg warn push">
|
||
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>
|
||
</div>
|
||
<pre><i class="ico">Copy and paste icons from above here!</i></pre>
|
||
<h1>Grids</h1>
|
||
<div class="row">
|
||
<div class="dark c12">c12</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="dark c11">c11</div>
|
||
<div class="light c1">c1</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="dark c10">c10</div>
|
||
<div class="light c2">c2</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="dark c9">c9</div>
|
||
<div class="light c3">c3</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="dark c8">c8</div>
|
||
<div class="light c4">c4</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="dark c7">c7</div>
|
||
<div class="light c5">c5</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="dark c6">c6</div>
|
||
<div class="light c6">c6</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="dark c5">c5</div>
|
||
<div class="light c7">c7</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="dark c4">c4</div>
|
||
<div class="light c8">c8</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="dark c3">c3</div>
|
||
<div class="light c9">c9</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="dark c2">c2</div>
|
||
<div class="light c10">c10</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="dark c1">c1</div>
|
||
<div class="light c11">c11</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="light c12">c12</div>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<pre><div class="row"><br> <div class="c12">12</div><br></div>
|
||
<br><div class="row"><br> <div class="c4">4</div><br> <div class="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>
|