<head><metacontent="text/html; charset=UTF-8"http-equiv="Content-Type"/><metacontent="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"name="viewport"/><title>BRUT - documentation</title><linkhref="../brut.min.css"rel="stylesheet"type="text/css"/></head><bodyclass="col"><div><navclass="nav"onclick="this.focus()"tabindex="-1"><divclass="container"><aclass="pagename"href="../index.html">BRUT</a><ahref="../h/docs.html">Docs</a><ahref="../h/download.html">Download</a><ahref="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><buttonclass="btn sn btn-close">×</button></div><divclass="container"><divclass="col"><h2>Textual content</h2><divclass="row"><divclass="card c6"><divid="text"><h1>title in h1</h1><p>Some text in <p> with different styles; <b>bold</b>, <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>, <code>code</code>, and if you really want something to be extremly visible use the class <codeclass="hl">hl</code>.</p><p>The text should be <strongclass="hl">very dense</strong> on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce <em>professional</em> UI applications. So no time to make it breathes. We want to make it compact and efficient.</p><p>Note we still try to keep a coherent and nice vertical rythm.</p><blockquote><p>Here is some blockquote. This can give you an idea about the look and feel for them.</p></blockquote></div><details><summary>code</summary><pre>
<div id="text">
<h1>title in h1</h1>
<p>Some text in &lt;p&gt; with different styles; <b>bold</b>,
<code>code</code>, and if you really want something to be
extremly visible use the class <code class="hl">hl</code>.</p>
<p>The text should be <strong class="hl">very dense</strong> on
purpose. Forget your lessons about nice space in design here.
The goal of this design is to produce <em>professional</em> UI
applications. So no time to make it breathes. We want to make
it compact and efficient.</p>
<p>Note we still try to keep a coherent and nice vertical
rythm.</p>
<blockquote>
<p>Here is some blockquote. This can give you an idea about
the look and feel for them.</p>
</blockquote>
</div>
</pre></details></div><divclass="card c6"><divid="doc"><p>Remark if you need to present a long text to read you can still use the class <code>doc</code>. Take a look at the next paragraph for example: </p><divclass="doc"><p>Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus ligula porttitor metus.</p><p>Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat posuere hac. Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, etiam ultricies proin quisque lectus sociis id tristique, integer phasellus taciti pretium adipiscing tortor sagittis ligula.</p></div><p>The <code>doc</code> class ensure the width of the text is not too wide and use a very legible font.</p></div><details><summary>code</summary><pre>
<div id="doc">
<p>Remark if you need to present a long text to read you can
still use the class <code>doc</code>. Take a look at the next
paragraph for example:</p>
<div class="doc">
<p>Lorem ipsum with pretty Lorem ipsum dolor sit amet
<p>The <code>doc</code> class ensure the width of the text is
not too wide and use a very legible font.</p>
</div>
</pre></details></div></div><divclass="row"><divclass="card c6"><div><h3>headings</h3><p>By default there is some space before and after any heading:</p><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><h3>tight headings</h3><p>You can remove the space by using the class <code>tight</code> to the heading:</p><h1class="tight">h1 tight</h1><h2class="tight">h2 tight</h2><h3class="tight">h3 tight</h3><h4class="tight">h4 tight</h4><h5class="tight">h5 tight</h5><h6class="tight">h6 tight</h6></div><details><summary>code</summary><pre>
<div>
<h3>headings</h3>
<p>By default there is some space before and after any
heading:</p>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<h3>tight headings</h3>
<p>You can remove the space by using the class
<code>tight</code> to the heading:</p>
</pre></details></div><divclass="card c6"><divid="itemize"><h2>itemization</h2><h3>ul</h3><ul><li>item 1</li><li>item 2</li><li>item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the <code>list-style-position: outside</code>.</li><li>item 4</li></ul><h3>ol</h3><ol><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ol></div><details><summary>code</summary><pre>
<div id="itemize">
<h2>itemization</h2>
<h3>ul</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3; with a very long text that should wrap to the
next line in any browser. We'll see that the wrapped text
should be aligned with the text of the other items. This is
due to the <code>list-style-position: outside</code>.</li>
</pre></details></div></div></div><divclass="col"><h2>Images</h2><divclass="row"><divclass="card c6"><divid="images"><h1>Images</h1><h2>Inside a grid</h2><divclass="row"><divclass="card"><p>Inside a card</p><imgsrc="../h/img/brutalism.webp"/></div><div><p>Directly a card</p><imgsrc="../h/img/brutalism.webp"/></div><divclass="block"><p>In a block</p><imgsrc="../h/img/brutalism.webp"/></div></div></div><details><summary>code</summary><pre>
<div id="images">
<h1>Images</h1>
<h2>Inside a grid</h2>
<div class="row">
<div class="card">
<p>Inside a card</p><img src="../h/img/brutalism.webp"></img></div>
<div>
<p>Directly a card</p><img src="../h/img/brutalism.webp"></img></div>
<div class="block">
<p>In a block</p><img src="../h/img/brutalism.webp"></img></div>
Although over 75% of Android devices we tested support all
&amp;quot;Total Set&amp;quot; icons, if a substantial portion
of your users use old Android devices you should stick to the
&amp;quot;Android Safe&amp;quot; set. (The &amp;quot;Total
Set&amp;quot; does not include icons from the
&amp;quot;Android Safe&amp;quot; set.)
</div>
</div>
</pre></details></div></div></div><divclass="col"><h2>Forms</h2><divclass="row"><divclass="card c6"><div><inputclass="neutral"placeholder="input"type="text"/><br/><textareaclass="neutral"placeholder="textarea"rows="3"></textarea><br/><spanclass="addon bg-info">$</span><inputtype="text"/><divclass="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><spanclass="hl"></span><input ...</pre><spanclass="addon">$</span><inputclass="smooth"type="text"/><pre>... </span><input ...</pre><spanclass="addon">$</span><inputclass="smooth"type="text"/></div></div><details><summary>code</summary><pre>
<pre class="block">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;gt;</pre>
</pre></details></div></div></div><divclass="col"><h2>Messages</h2><divclass="row"><divclass="card c6"><divclass="row"><divclass="col c6 gapless"><h2>Basic Messages</h2><br/><divclass="msg"><strong>Normal Message</strong> This is a normal message with <code>msg</code>.</div><divclass="msg info"><strong><iclass="ico">☞</i> Info</strong> This is done by adding <code>info</code> to the class.
</div><divclass="msg ok"><strong><iclass="ico">☑</i> OK</strong> This is done by adding <code>ok</code> to the class.
</div><divclass="msg warn"><strong><iclass="ico">☣</i> Warning</strong> This is done by adding <code>warn</code> to the class.
</div><divclass="msg err"><strong><iclass="ico">☒</i> Error</strong> This is done by adding <code>err</code> to the class.
</div><divclass="msg fatal"><strong><iclass="ico">☒</i> Fatal</strong> This is done by adding <code>fatal</code> to the class.
</div></div><divclass="col c6 gapless"><h2>Strong Alerts</h2><br/><divclass="msg alert"><strong>Alert Message</strong>This is a normal message with <code>msg</code>.
</div><divclass="msg alert info"><strong><iclass="ico">☞</i> Alert Info</strong>This is done by adding <code>info</code> to the class.
</div><divclass="msg alert ok"><strong><iclass="ico">☑</i> Alert OK</strong>This is done by adding <code>ok</code> to the class.
</div><divclass="msg alert warn"><strong><iclass="ico">☣</i> Alert Warning</strong>This is done by adding <code>warn</code> to the class.
</div><divclass="msg alert err"><strong><iclass="ico">☒</i> Alert Error</strong>This is done by adding <code>err</code> to the class.
</div><divclass="msg alert fatal"><strong><iclass="ico">☒</i> Alert Fatal</strong>This is done by adding <code>fatal</code> to the class.