-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (84 loc) · 17.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>🎍 Ukrop.css</title><link rel="stylesheet" href="./dist/ukrop.min.css"></head><body><header><h1>🎍 Ukrop.css</h1><nav><ul><li><a href="https://github.com/CosmoMyzrailGorynych/ukrop">View on GitHub 🥒</a></li><li><a href="https://github.com/CosmoMyzrailGorynych/shaverma">Shaverma.css 🌯</a></li><li><a href="https://ctjs.rocks/">ct.js game editor 😺 🎮</a></li></ul></nav></header><main><article><aside><h2>Get Ukrop.css</h2><nav><ul><li><a href="https://raw.githubusercontent.com/CosmoMyzrailGorynych/ukrop/master/dist/ukrop.min.css">Download minified CSS</a></li><li><a href="https://github.com/CosmoMyzrailGorynych/ukrop">Fork/clone the project</a></li></ul></nav></aside><p>🎍 Ukrop.css is an instant solution to styling web pages. It does not aim to be the most slim solution, but to be a complete one, which you can reliably use for any project. It is also an attempt to show that using css classes everywhere is a signal of bad atomic design in layouts — meaning that <em>you don't need to use css classes for most of the content</em>.</p>
<ul>
<li>No classes required, just your semantic HTML code;</li>
<li>Responsive and <code>em</code>/<code>rem</code>-driven;</li>
<li>Predictable layout thanks to consistent use of <code>padding</code> and <code>margin-bottom</code>;</li>
<li>Looks cool with 0 effort;</li>
<li>Has callouts for your quotes, links and forms;</li>
<li>Custom radio and checkbox elements with 0 extra elements;</li>
<li>Configurable via <a href="http://stylus-lang.com/">Stylus</a> and CSS variables. See <a href="https://github.com/CosmoMyzrailGorynych/ukrop/blob/master/lib/_vars.styl">_vars.styl</a>!</li>
<li>Easy to build upon due to its modularity and exposed color variables;</li>
<li>Automagically turns to black if a user has a dark UI theme (<a href="https://caniuse.com/#feat=prefers-color-scheme">and if a browser supports it</a>).</li>
</ul>
<h1>Install</h1>
<p>Ukrop can be used as a plain css file or as a collection of stylus files.</p>
<h2>Plain CSS</h2>
<p>Download <a href="https://raw.githubusercontent.com/CosmoMyzrailGorynych/ukrop/master/dist/ukrop.min.css">the minified CSS file</a> and put it to your site's <code>/css</code> folder. Then, add this tag to your html's <code>head</code> section:</p>
<pre><code class="language-html"><link rel="stylesheet" href="/css/ukrop.min.css"></link>
</code></pre>
<h2>Stylus</h2>
<p><a href="https://github.com/CosmoMyzrailGorynych/ukrop/archive/master.zip">Download the repo's folder</a> or install it to your project as a git submodule (assuming you have a <code>stylus</code> folder):</p>
<pre><code class="language-sh">git submodule add https://github.com/CosmoMyzrailGorynych/ukrop.git ./stylus/ukrop
</code></pre>
<p>Then, e.g. in your <code>./styl/index.styl</code>, add this line:</p>
<pre><code class="language-css">@require './ukrop/index.styl'
</code></pre>
<p>Or use individual files:</p>
<pre><code class="language-css">@require './ukrop/lib/forms.styl'
</code></pre>
<hr><section><aside><h3>Try it out!</h3><button id="thePartyMode">Toggle color</button><button id="theRoundMode">Make it round</button><button id="theDefaultMode">Reset borders to default</button><button id="theSquareMode">Make it square</button></aside><h2>Theming</h2><p>Ukrop.css uses a number of variables that define its look and feel:</p><ul><li><code>--accent</code></li><li><code>--accent12</code></li><li><code>--accent25</code></li><li><code>--contrast</code></li><li><code>--error-color</code></li><li><code>--text-color-light</code></li><li><code>--text-color-dark</code></li><li><code>--bg-light</code></li><li><code>--bg-dark</code></li><li><code>--border-radius</code></li><li><code>--border-width</code></li></ul></section><section><h2>Example: Generic blog post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <em>sed do eiusmod tempor incididunt</em> ut labore et dolore magna aliqua.</p>
<p>Pellentesque habitant <strong>morbi tristique</strong> senectus et netus et malesuada. Quam viverra orci sagittis eu volutpat odio.
Sed cras ornare arcu dui vivamus arcu felis bibendum. Amet consectetur adipiscing elit ut aliquam <code>purus</code> sit.</p>
<figure><img src="https://picsum.photos/1280/480" alt="A long, responsive image!"><figcaption>A long, responsive image!</figcaption></figure><h3>Interdum posuere lorem</h3>
<p>Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. At varius vel pharetra vel turpis nunc eget lorem dolor.
Pretium quam vulputate <em>dignissim suspendisse</em> in est ante <a href="https://github.com/CosmoMyzrailGorynych/ukrop">in nibh</a>. Pharetra vel turpis nunc eget <strong>lorem dolor</strong> sed <strong>viverra ipsum</strong>.
Faucibus vitae aliquet nec ullamcorper sit amet risus. Habitasse platea dictumst quisque sagittis. Pellentesque id nibh tortor
id aliquet <b>lectus proin</b> <i>nibh nisl</i>. Convallis <code>convallis</code> tellus id interdum velit laoreet id donec.</p>
<blockquote>
<p>Morbi blandit cursus risus at. Amet aliquam id diam maecenas ultricies mi.
Faucibus vitae aliquet nec ullamcorper sit amet risus.</p>
<p><cite>Julius Caesar</cite></p>
</blockquote>
<aside><h3>Subscriiibe!</h3><form><label><input type="email" placeholder="[email protected]"></label><label><input type="checkbox">Every subscription form must have a link to a privacy policy</label><button>Submit</button></form></aside><aside><h3>Oh wow, another <code><aside></code> element!</h3><p>And they don't break layout and look nicely on mobile!</p><p>Finally, an appropriate use of <code>float</code>s!</p></aside><p>Turpis egestas sed tempus urna et pharetra pharetra massa massa.</p>
<pre><code class="language-styl">/* If it fits, it sits. If it sits, it fits. If it fits, it sits. If it sits, it fits.*/
h1, h2, h3, h4, h5, h6
margin $outerSpacing 0 $innerSpacing
&:first-child, aside:first-child + &
margin-top 0
</code></pre>
<p>Sollicitudin tempor id eu nisl. Leo urna molestie at elementum eu facilisis sed. Consequat id porta nibh venenatis cras.
Elementum sagittis vitae et leo duis ut. Felis bibendum ut tristique et.</p>
<figure><img src="https://picsum.photos/480/240"><figcaption>Images by <a href="https://picsum.photos/" target="_blank">Lorem Picsum</a></figcaption></figure><h3>Nisi scelerisque eu</h3>
<p>Nisi scelerisque eu ultrices vitae auctor eu augue ut. At quis risus sed vulputate.</p>
<p>Blandit cursus risus at ultrices. Aliquam <a href="https://github.com/CosmoMyzrailGorynych/ukrop">nulla facilisi cras</a> fermentum odio eu feugiat pretium nibh.
Nisl tincidunt eget nullam non nisi. Arcu cursus vitae congue mauris rhoncus aenean vel.
Malesuada fames ac turpis egestas integer. Arcu non odio euismod lacinia at quis risus sed vulputate.</p>
<p>Faucibus vitae aliquet nec ullamcorper sit amet risus. Habitasse platea dictumst quisque sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section><section><h2>Example: Form elements</h2><form method="GET"><fieldset><legend>Login information</legend><label>Login:<input type="text" placeholder="Login"></label><label>Email:<input type="email" placeholder="[email protected]" value="definitelyNotAnEmail"></label><label>Password:<input type="password" placeholder="Password"></label></fieldset><fieldset><legend>Personal information</legend><label>Bio:<textarea>:b</textarea></label><label>Favourite color:<select><option>Red</option><option>Yellow</option><option>Green</option><option>Cyan</option><option>Blue</option><option>Magenta</option><option>Other</option></select></label></fieldset><fieldset><legend>Idk how to name it really 🤷</legend><label>Years of experience:<input type="number" min="0" value="5"></label><p>I am a…</p><label><input type="radio" name="stateoflife">Student</label><label><input type="radio" name="stateoflife" selected>Hobbyist</label><label><input type="radio" name="stateoflife">Professional</label></fieldset><fieldset><legend>Disabled fields</legend><label>A disabled input<input type="text" disabled value="A sample value"></label><label>A disabled select<select disabled><option>Can't touch me</option><option>Toodododoo</option><option>Doodoo</option><option>Doodoo</option></select></label><p>Other stuff</p><label><input type="radio" name="stateoflife" disabled>Student</label><label><input type="radio" name="stateoflife" checked disabled>Hobbyist</label><label><input type="radio" name="stateoflife" disabled>Professional</label><button disabled>A disabled button</button></fieldset><label><input type="checkbox" checked>I want to sell my soul to a devil and get the latest news from The Underground to my inbox</label><label><input type="checkbox" required>I agree to the <a href="https://policies.google.com/terms?hl=en" target="_blank">Terms of Service</a> of Google</label><button type="reset">Cancel</button><button type="submit">Submit</button></form></section><section><h2>Example: Table</h2><table><caption>IP table</caption><thead><tr><th>IP</th><th>Status</th><th>Notes</th></tr></thead><tr><td>10.10.10.1</td><td>Active</td><td>Lorem ipsum dolor dolor dolor </td></tr><tr><td>10.10.10.2</td><td>Active</td><td>Lorem ipsum dolor </td></tr><tr><td>10.10.10.3</td><td>Disabled</td><td>Lorem ipsum dolor dolor dolor </td></tr><tr><td>10.10.10.4</td><td>Active</td><td>Lorem ipsum </td></tr><tr><td>10.10.10.5</td><td>Active</td><td>Lorem ipsum dolor dolor dolor dolor </td></tr><tr><td>10.10.10.6</td><td>Active</td><td>Lorem ipsum dolor dolor dolor dolor </td></tr><tr><td>10.10.10.7</td><td>Active</td><td>Lorem ipsum </td></tr><tr><td>10.10.10.8</td><td>Disabled</td><td>Lorem ipsum dolor </td></tr><tr><td>10.10.10.9</td><td>Active</td><td>Lorem ipsum </td></tr><tr><td>10.10.10.10</td><td>Active</td><td>Lorem ipsum dolor dolor dolor dolor </td></tr></table><p>A little label at the top of the table is made by the <code>caption</code> tag.</p></section><section><h2>Example: A very long table + <code>section</code></h2><p>Tables are not that easy to wrap or to constrain to specific size without an additional markup.
If you are using semantic html only, the best way is putting it to a separate <code>section</code>.
Still quite semant-y, and <code>section</code>s will show a scrolllbar underneath tables.</p><table><thead><tr><th>accusamus</th><th>natus</th><th>corrupti</th><th>assumenda</th><th>quae</th><th>quae</th><th>accusamus</th><th>assumenda</th><th>perspiciatis</th><th>nulla</th><th>voluptatibus</th><th>consectetur</th><th>assumenda</th><th>nobis</th><th>ipsum</th></tr></thead><tr><td>modi</td><td>quae</td><td>elit</td><td>odio</td><td>necessitatibus</td><td>corrupti</td><td>necessitatibus</td><td>doloribus</td><td>aperiam</td><td>natus</td><td>corrupti</td><td>perspiciatis</td><td>quae</td><td>corporis</td><td>dolor</td></tr><tr><td>doloribus</td><td>natus</td><td>modi</td><td>aperiam</td><td>ipsum</td><td>aperiam</td><td>consectetur</td><td>accusamus</td><td>consectetur</td><td>adipisicing</td><td>corporis</td><td>nesciunt</td><td>quae</td><td>modi</td><td>consectetur</td></tr><tr><td>sit</td><td>nulla</td><td>nulla</td><td>corrupti</td><td>odio</td><td>lorem</td><td>consectetur</td><td>corrupti</td><td>consectetur</td><td>perspiciatis</td><td>assumenda</td><td>doloribus</td><td>odio</td><td>assumenda</td><td>nobis</td></tr><tr><td>nulla</td><td>modi</td><td>adipisicing</td><td>perspiciatis</td><td>corrupti</td><td>amet</td><td>aperiam</td><td>odio</td><td>voluptatibus</td><td>ipsum</td><td>nobis</td><td>alias</td><td>necessitatibus</td><td>natus</td><td>voluptatibus</td></tr><tr><td>accusamus</td><td>quae</td><td>perspiciatis</td><td>corrupti</td><td>accusamus</td><td>corrupti</td><td>assumenda</td><td>enim</td><td>corporis</td><td>amet</td><td>consectetur</td><td>quisquam</td><td>nulla</td><td>corporis</td><td>doloribus</td></tr><tr><td>nobis</td><td>enim</td><td>amet</td><td>accusamus</td><td>perspiciatis</td><td>aperiam</td><td>suscipit</td><td>consectetur</td><td>suscipit</td><td>nobis</td><td>nulla</td><td>lorem</td><td>odio</td><td>corporis</td><td>suscipit</td></tr><tr><td>nobis</td><td>quisquam</td><td>dolor</td><td>lorem</td><td>odio</td><td>dolor</td><td>alias</td><td>consectetur</td><td>amet</td><td>perspiciatis</td><td>nobis</td><td>doloribus</td><td>sit</td><td>amet</td><td>ipsum</td></tr><tr><td>doloribus</td><td>lorem</td><td>corrupti</td><td>lorem</td><td>accusamus</td><td>aperiam</td><td>enim</td><td>quisquam</td><td>nobis</td><td>nulla</td><td>elit</td><td>corporis</td><td>enim</td><td>nobis</td><td>assumenda</td></tr><tr><td>natus</td><td>nesciunt</td><td>perspiciatis</td><td>corporis</td><td>corrupti</td><td>corporis</td><td>nesciunt</td><td>corrupti</td><td>nesciunt</td><td>corporis</td><td>voluptatibus</td><td>ipsum</td><td>lorem</td><td>nobis</td><td>ipsum</td></tr><tr><td>necessitatibus</td><td>quisquam</td><td>consectetur</td><td>assumenda</td><td>accusamus</td><td>amet</td><td>quisquam</td><td>corrupti</td><td>sit</td><td>perspiciatis</td><td>corrupti</td><td>modi</td><td>suscipit</td><td>elit</td><td>amet</td></tr></table></section><section><h2>Example: A very long table + breaking rules</h2><p>With a little aid of CSS + one <code>div</code>, you can make a table scrollable. This is not the semantic way™, but whatever:</p><pre><code><div style="overflow-x: auto;">
<table>
…
</table>
</div></code></pre><p>Result:</p><div style="overflow-x: auto;"><table><thead><tr><th>sit</th><th>ipsum</th><th>natus</th><th>nobis</th><th>sit</th><th>sit</th><th>consectetur</th><th>nulla</th><th>corrupti</th><th>perspiciatis</th><th>natus</th><th>dolor</th><th>quae</th><th>nesciunt</th><th>voluptatibus</th></tr></thead><tr><td>assumenda</td><td>alias</td><td>aperiam</td><td>quisquam</td><td>amet</td><td>enim</td><td>nulla</td><td>quae</td><td>corrupti</td><td>quae</td><td>alias</td><td>sit</td><td>accusamus</td><td>aperiam</td><td>sit</td></tr><tr><td>assumenda</td><td>aperiam</td><td>nulla</td><td>elit</td><td>doloribus</td><td>odio</td><td>quisquam</td><td>sit</td><td>consectetur</td><td>quisquam</td><td>accusamus</td><td>corporis</td><td>adipisicing</td><td>elit</td><td>quae</td></tr><tr><td>suscipit</td><td>nesciunt</td><td>quae</td><td>consectetur</td><td>corrupti</td><td>nulla</td><td>elit</td><td>dolor</td><td>voluptatibus</td><td>aperiam</td><td>amet</td><td>assumenda</td><td>odio</td><td>adipisicing</td><td>enim</td></tr><tr><td>aperiam</td><td>doloribus</td><td>dolor</td><td>perspiciatis</td><td>aperiam</td><td>adipisicing</td><td>nulla</td><td>assumenda</td><td>alias</td><td>dolor</td><td>quae</td><td>nulla</td><td>adipisicing</td><td>consectetur</td><td>alias</td></tr><tr><td>assumenda</td><td>amet</td><td>doloribus</td><td>natus</td><td>voluptatibus</td><td>modi</td><td>consectetur</td><td>suscipit</td><td>nulla</td><td>quae</td><td>nobis</td><td>aperiam</td><td>odio</td><td>enim</td><td>corporis</td></tr><tr><td>natus</td><td>amet</td><td>quisquam</td><td>perspiciatis</td><td>dolor</td><td>odio</td><td>voluptatibus</td><td>quae</td><td>elit</td><td>odio</td><td>ipsum</td><td>corporis</td><td>quae</td><td>odio</td><td>necessitatibus</td></tr><tr><td>necessitatibus</td><td>amet</td><td>assumenda</td><td>lorem</td><td>nesciunt</td><td>sit</td><td>nulla</td><td>nulla</td><td>corporis</td><td>corporis</td><td>quisquam</td><td>dolor</td><td>aperiam</td><td>dolor</td><td>sit</td></tr><tr><td>necessitatibus</td><td>ipsum</td><td>dolor</td><td>aperiam</td><td>necessitatibus</td><td>corrupti</td><td>accusamus</td><td>ipsum</td><td>alias</td><td>perspiciatis</td><td>alias</td><td>quae</td><td>odio</td><td>nulla</td><td>corrupti</td></tr><tr><td>amet</td><td>accusamus</td><td>amet</td><td>sit</td><td>odio</td><td>accusamus</td><td>lorem</td><td>accusamus</td><td>suscipit</td><td>ipsum</td><td>alias</td><td>lorem</td><td>ipsum</td><td>assumenda</td><td>aperiam</td></tr><tr><td>suscipit</td><td>nulla</td><td>modi</td><td>enim</td><td>sit</td><td>consectetur</td><td>assumenda</td><td>adipisicing</td><td>voluptatibus</td><td>natus</td><td>enim</td><td>doloribus</td><td>quisquam</td><td>necessitatibus</td><td>natus</td></tr></table></div></section></article></main><footer><p>Created by Cosmo Myzrail Gorynych. Licensed under MIT.</p></footer><script>var colors = ['#03b25f', '#0356b2', '#5f03b2', '#b20356', '#b25f03', '#56b203'];
var currentColor = 0;
document.querySelector('#thePartyMode').addEventListener('click', function () {
currentColor++;
if (currentColor > colors.length -1) {
currentColor = 0;
}
document.body.style.setProperty('--accent', colors[currentColor]);
document.body.style.setProperty('--accent12', colors[currentColor] + '20');
document.body.style.setProperty('--accent25', colors[currentColor] + '40');
});
document.querySelector('#theRoundMode').addEventListener('click', function () {
document.body.style.setProperty('--border-radius', '1rem');
});
document.querySelector('#theDefaultMode').addEventListener('click', function () {
document.body.style.setProperty('--border-radius', '');
});
document.querySelector('#theSquareMode').addEventListener('click', function () {
document.body.style.setProperty('--border-radius', '0');
});</script></body></html>