Public-Mirrors
/
classless-css
mirror of https://github.com/dbohdan/classless-css.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(tacit): add tacit

pull/9/head
dbohdan 5 years ago
parent
2962027dc9
commit
3b81feff3c
4 changed files with 100 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      README.md
  2. 182
      screenshot-page.html
  3. BIN
      screenshot/tacit.png
  4. BIN
      thumbnail/tacit.png

8
README.md
View File

@ -42,6 +42,14 @@ This is a list of CSS frameworks/themes that do not require you add classes spec
* [Demo](https://oxal.org/projects/sakura/demo/)
## tacit
[![tacit.png](thumbnail/tacit.png)](screenshot/tacit.png)
* [Repository](https://github.com/yegor256/tacit)
* [Demo](https://yegor256.github.io/tacit/)
## water.css
[![water.css-0-dark.png](thumbnail/water.css-0-dark.png)](screenshot/water.css-0-dark.png)

182
screenshot-page.html
View File

@ -17,106 +17,108 @@
<main>
<section id="content" container>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Element demos</h2>
<p>
This is supposed to be a demo page so we need more elements!
</p>
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Element demos</h2>
<p>
This is supposed to be a demo page so we need more elements!
</p>
<h3>Form elements</h3>
<form>
<div>
<label for='email'>Email</label>
<input type='email' name='email' id='email' placeholder='john.doe@gmail.com'>
</div>
<h3>Form elements</h3>
<form>
<div>
<label for='email'>Email</label>
<input type='email' name='email' id='email' placeholder='john.doe@gmail.com'>
</div>
<div>
<label for='id'>User id (read only)</label>
<input readonly name='id' id='id' value='04D6H89Z'>
</div>
<div>
<label for='id'>User id (read only)</label>
<input readonly name='id' id='id' value='04D6H89Z'>
</div>
<div>
<label for='disabled'>Random disabled input</label>
<input disabled name='disabled' id='disabled' placeholder='Because why not?'>
</div>
<div>
<label for='disabled'>Random disabled input</label>
<input disabled name='disabled' id='disabled' placeholder='Because why not?'>
</div>
<div>
<label for='about'>About me</label>
<textarea name='about' id='about' placeholder='I am a textarea...'></textarea>
</div>
<div>
<label for='about'>About me</label>
<textarea name='about' id='about' placeholder='I am a textarea...'></textarea>
</div>
<div>
<input type='checkbox' name='remember' id='remember' checked>
<label for='remember'>Remember me</label>
</div>
<div>
<input type='checkbox' name='remember' id='remember' checked>
<label for='remember'>Remember me</label>
</div>
<input type='submit'>
</form>
<input type='submit'>
</form>
<h3>Code</h3>
<p>
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
</p>
<pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>
<h3>Code</h3>
<p>
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
</p>
<pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>
<h3>Other</h3>
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
<img src='http://via.placeholder.com/408x287' alt='Example image'>
<hr>
<h3>Other</h3>
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
<img src='http://via.placeholder.com/408x287' alt='Example image'>
<hr>
<p>And here's a nicely marked up table!</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Godzilla</td>
<td>2</td>
<td>$299.99</td>
</tr>
<tr>
<td>Mozilla</td>
<td>10</td>
<td>$100,000.00</td>
</tr>
<tr>
<td>Quesadilla</td>
<td>1</td>
<td>$2.22</td>
</tr>
</tbody>
</table>
<p>And here's a nicely marked up table!</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Godzilla</td>
<td>2</td>
<td>$299.99</td>
</tr>
<tr>
<td>Mozilla</td>
<td>10</td>
<td>$100,000.00</td>
</tr>
<tr>
<td>Quesadilla</td>
<td>1</td>
<td>$2.22</td>
</tr>
</tbody>
</table>
<h3>Typography</h3>
<blockquote>
This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique.
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href='/'>here</a>'s a link.
</p>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h3>Typography</h3>
<blockquote>
This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique.
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href='/'>here</a>'s a link.
</p>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</article>
</section>
</main>
</body>

BIN
screenshot/tacit.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
thumbnail/tacit.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

Write Preview
Loading…
Cancel
Save