yogsototh/brutcss
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity
brutcss/h/g-docs.html
Yann Esposito (Yogsototh) 44c4d11c58
improved site gen
2022-10-10 13:51:07 +02:00

155 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT - documentation</title><link href="../brut.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="../index.html">BRUT</a><a href="../h/docs.html">Docs</a><a href="../h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="container"><div><h2>Textual content</h2><div class="col"><div class="card"><div id="text"><h1>title in h1</h1><p>Some text in &lt;p&gt; 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 <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><details><summary>code</summary><pre>
&lt;div id=&quot;text&quot;&gt;
&lt;h1&gt;title in h1&lt;/h1&gt;
&lt;p&gt;Some text in &amp;lt;p&amp;gt; with different styles; &lt;b&gt;bold&lt;/b&gt;,
&lt;strong&gt;strong&lt;/strong&gt;, &lt;i&gt;italic&lt;/i&gt;, &lt;em&gt;emphasis&lt;/em&gt;,
&lt;code&gt;code&lt;/code&gt;, and if you really want something to be
extremly visible use the class &lt;code class=&quot;hl&quot;&gt;hl&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;The text should be &lt;strong class=&quot;hl&quot;&gt;very dense&lt;/strong&gt; on
purpose. Forget your lessons about nice space in design here.
The goal of this design is to produce &lt;em&gt;professional&lt;/em&gt; UI
applications. So no time to make it breathes. We want to make
it compact and efficient.&lt;/p&gt;
&lt;p&gt;Note we still try to keep a coherent and nice vertical
rythm.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Here is some blockquote. This can give you an idea about
the look and feel for them.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/div&gt;
</pre></details></div><div class="card"><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 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><p>Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum. Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum sagittis, enim et magna sit inceptos sodales parturient pharetra mollis, aenean vel nostra tellus commodo pretium sapien sociosqu.</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><blockquote>Some blockquote</blockquote></div><details><summary>code</summary><pre>
&lt;div id=&quot;doc&quot;&gt;
&lt;p&gt;Remark if you need to present a long text to read you can
still use the class &lt;code&gt;doc&lt;/code&gt;. Take a look at the next
paragraph for example:&lt;/p&gt;
&lt;div class=&quot;doc&quot;&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Mollis pretium lorem primis senectus habitasse lectus
scelerisque donec, ultricies tortor suspendisse adipiscing
fusce morbi volutpat pellentesque, consectetur mi risus
molestie curae malesuada cum. Dignissim lacus convallis massa
mauris enim ad mattis magnis senectus montes, mollis taciti
phasellus accumsan bibendum semper blandit suspendisse
faucibus nibh est, metus lobortis morbi cras magna vivamus
per risus fermentum. Dapibus imperdiet praesent magnis
ridiculus congue gravida curabitur dictum sagittis, enim et
magna sit inceptos sodales parturient pharetra mollis, aenean
vel nostra tellus commodo pretium sapien sociosqu.&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;The &lt;code&gt;doc&lt;/code&gt; class ensure the width of the text is
not too wide and use a very legible font.&lt;/p&gt;
&lt;blockquote&gt;
Some blockquote
&lt;/blockquote&gt;
&lt;/div&gt;
</pre></details></div><div class="card"><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&apos;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>
&lt;div id=&quot;itemize&quot;&gt;
&lt;h2&gt;itemization&lt;/h2&gt;
&lt;h3&gt;ul&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;item 1&lt;/li&gt;
&lt;li&gt;item 2&lt;/li&gt;
&lt;li&gt;item 3; with a very long text that should wrap to the
next line in any browser. We&apos;ll see that the wrapped text
should be aligned with the text of the other items. This is
due to the &lt;code&gt;list-style-position: outside&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;item 4&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;ol&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;item 1&lt;/li&gt;
&lt;li&gt;item 2&lt;/li&gt;
&lt;li&gt;item 3&lt;/li&gt;
&lt;li&gt;item 4&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
</pre></details></div></div></div><div><h2>Images</h2><div class="col"><div class="card"><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" /></div><div><p>Directly a card</p><img src="../h/img/brutalism.webp" /></div><div class="block"><p>In a block</p><img src="../h/img/brutalism.webp" /></div></div></div><details><summary>code</summary><pre>
&lt;div id=&quot;images&quot;&gt;
&lt;h1&gt;Images&lt;/h1&gt;
&lt;h2&gt;Inside a grid&lt;/h2&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;card&quot;&gt;
&lt;p&gt;Inside a card&lt;/p&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;Directly a card&lt;/p&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt;
&lt;div class=&quot;block&quot;&gt;
&lt;p&gt;In a block&lt;/p&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div></div><div><h2>Buttons</h2><div class="col"><div class="card"><div id="buttons"><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><div class="block">Text<a class="tb sm">small</a><a class="tb">normal</a><a class="tb big">Big</a><a class="tb huge">HUGE</a></div><div class="row"><div class="col c2 gapless"><span> Text <a class="tb sm">tb sm</a> </span><a class="tb sm info">tb sm</a><a class="tb sm ok">tb sm</a><a class="tb sm warn">tb sm</a></div><div class="col c2 gapless"><a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a></div><div class="col c3 gapless"><a class="tb big warn">tb big</a><a class="tb big err">tb big</a><a class="tb big fatal">tb big</a></div><div class="col c5 gapless"><a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a></div></div><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">&amp;lt;a class=&amp;quot;btn btn-b&amp;quot;&amp;gt;btn-b&amp;lt;/a&amp;gt;</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">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;gt;</pre><div class="row"><div class="col c4 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 class="col c4 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 class="col c4 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></div><details><summary>code</summary><pre>
&lt;div id=&quot;buttons&quot;&gt;
&lt;h1&gt;Buttons&lt;/h1&gt;
&lt;h2&gt;Text Buttons&lt;/h2&gt;
&lt;h3&gt;Classic&lt;/h3&gt;&lt;a class=&quot;tb&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb info&quot;&gt;tb
info&lt;/a&gt;&lt;a class=&quot;tb ok&quot;&gt;tb ok&lt;/a&gt;&lt;a class=&quot;tb warn&quot;&gt;tb
warn&lt;/a&gt;&lt;a class=&quot;tb err&quot;&gt;tb err&lt;/a&gt;&lt;a class=&quot;tb fatal&quot;&gt;tb
fatal&lt;/a&gt;
&lt;h3&gt;Sizes&lt;/h3&gt;
&lt;div class=&quot;block&quot;&gt;
Text&lt;a class=&quot;tb sm&quot;&gt;small&lt;/a&gt;&lt;a class=&quot;tb&quot;&gt;normal&lt;/a&gt;&lt;a class=&quot;tb big&quot;&gt;Big&lt;/a&gt;&lt;a class=&quot;tb huge&quot;&gt;HUGE&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col c2 gapless&quot;&gt;
&lt;span&gt;Text &lt;a class=&quot;tb sm&quot;&gt;tb sm&lt;/a&gt;&lt;/span&gt; &lt;a class=&quot;tb sm info&quot;&gt;tb sm&lt;/a&gt;&lt;a class=&quot;tb sm ok&quot;&gt;tb
sm&lt;/a&gt;&lt;a class=&quot;tb sm warn&quot;&gt;tb sm&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;col c2 gapless&quot;&gt;
&lt;a class=&quot;tb&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb info&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb ok&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb warn&quot;&gt;tb&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;col c3 gapless&quot;&gt;
&lt;a class=&quot;tb big warn&quot;&gt;tb big&lt;/a&gt;&lt;a class=&quot;tb big err&quot;&gt;tb
big&lt;/a&gt;&lt;a class=&quot;tb big fatal&quot;&gt;tb big&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;col c5 gapless&quot;&gt;
&lt;a class=&quot;tb huge err&quot;&gt;tb huge&lt;/a&gt;&lt;a class=&quot;tb huge fatal&quot;&gt;tb huge&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2&gt;Classic&lt;/h2&gt;&lt;a class=&quot;btn&quot;&gt;btn&lt;/a&gt;&lt;a class=&quot;btn info&quot;&gt;btn
info&lt;/a&gt;&lt;a class=&quot;btn ok&quot;&gt;btn ok&lt;/a&gt;&lt;a class=&quot;btn warn&quot;&gt;btn
warn&lt;/a&gt;&lt;a class=&quot;btn err&quot;&gt;btn err&lt;/a&gt;&lt;a class=&quot;btn fatal&quot;&gt;btn
fatal&lt;/a&gt;
&lt;pre class=&quot;block&quot;&gt;&amp;amp;lt;a class=&amp;amp;quot;btn btn-b&amp;amp;quot;&amp;amp;gt;btn-b&amp;amp;lt;/a&amp;amp;gt;&lt;/pre&gt;
&lt;h2&gt;Sizes&lt;/h2&gt;&lt;a class=&quot;btn sm&quot;&gt;btn sm&lt;/a&gt;&lt;a class=&quot;btn info&quot;&gt;btn info&lt;/a&gt;&lt;a class=&quot;btn big warn&quot;&gt;btn big
warn&lt;/a&gt;&lt;a class=&quot;btn huge err&quot;&gt;btn huge err&lt;/a&gt;
&lt;pre class=&quot;block&quot;&gt;&amp;amp;lt;a class=&amp;amp;quot;btn sm info&amp;amp;quot;&amp;amp;gt;btn sm info&amp;amp;lt;/a&amp;amp;gt;&lt;/pre&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col c4 card&quot;&gt;
&lt;h3&gt;Standardized Width &lt;code&gt;btn std&lt;/code&gt;&lt;/h3&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std info&quot;&gt;btn
std info&lt;/a&gt;&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt;&lt;a class=&quot;btn std err&quot;&gt;btn
std err&lt;/a&gt;&lt;a class=&quot;btn std fatal&quot;&gt;btn std fatal&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col c4 card&quot;&gt;
&lt;h3&gt;Big&lt;/h3&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;a class=&quot;btn std big&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std big info&quot;&gt;btn std info&lt;/a&gt;&lt;a class=&quot;btn std big ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=&quot;btn std big warn&quot;&gt;btn std warn&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col c4 card&quot;&gt;
&lt;h3&gt;Huge&lt;/h3&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;a class=&quot;btn std huge&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std huge info&quot;&gt;btn std info&lt;/a&gt;&lt;a class=&quot;btn std huge ok&quot;&gt;btn std ok&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>
Reference in a new issue View git blame Copy permalink