geoff
/
stylelite
mirror of https://github.com/n2geoff/stylelite.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

reduce util classes

This commit is contained in:
Geoff Doty 2024-05-11 13:57:31 -04:00
parent b8255a73bd
commit e24aece5f7
4 changed files with 22 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/stylelite.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/stylelite.min.css vendored
View File

File diff suppressed because one or more lines are too long

68
examples/overview.html
View File

@ -30,7 +30,7 @@
<div class="grid space"> <div class="grid space">
<div style="background: var(--theme);">&nbsp;</div> <div style="background: var(--theme);">&nbsp;</div>
<div style="background: var(--gray);">&nbsp;</div> <div style="background: var(--gray);">&nbsp;</div>
<div class="outline">&nbsp;</div> <div class="border">&nbsp;</div>
</div> </div>
</p> </p>
</section> </section>
@ -304,33 +304,17 @@
</div> </div>
</section> </section>
</section> </section>
<section>
<a name="components"></a>
<h2>Components</h2>
<div class="grid center">
<div>
<article>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</article>
</div>
<div>
<button>Modal</button>
</div>
<div>
Something
</div>
</div>
</section>
<section> <section>
<a name="utilities"></a> <a name="utilities"></a>
<h2>Utility</h2> <h2>Utility</h2>
<table> <table>
<tr> <tr>
<th><code>.content</code></th> <th><code>.grid</code></th>
<td>adds uniform padding</td> <td>dynamic grid layout helper</td>
</tr>
<tr>
<th><code>.group</code></th>
<td>treats content as flex</td>
</tr> </tr>
<tr> <tr>
<th><code>.left</code></th> <th><code>.left</code></th>
@ -345,40 +329,18 @@
<td>text aligns content center</td> <td>text aligns content center</td>
</tr> </tr>
<tr> <tr>
<th><code>.grid</code></th> <th><code>.no-space</code></th>
<td>dynamic grid layout helper</td> <td>removes padding & margin</td>
</tr> </tr>
<tr> <tr>
<th><code>.sm</code></th> <th><code>.no-border</code></th>
<td>reduces component size by half</td> <td>removes borders</td>
</tr> </tr>
<tr> <tr>
<th><code>.lg</code></th> <th><code>.no-theme</code></th>
<td>increase component size by 75%</td> <td>
</tr> removes theme flair
<tr> </td>
<th><code>.outline</code></th>
<td></td>
</tr>
<tr>
<th><code>.underline</code></th>
<td></td>
</tr>
<tr>
<th><code>.border</code></th>
<td></td>
</tr>
<tr>
<th><code>.spaceless</code></th>
<td></td>
</tr>
<tr>
<th><code>.subtitle</code></th>
<td>designed for tighter fit under headings</td>
</tr>
<tr>
<th><code>.fill</code></th>
<td>fills all available space</td>
</tr> </tr>
<tr> <tr>
<th><code>.clear</code></th> <th><code>.clear</code></th>

12
src/stylelite.css
View File

@ -337,6 +337,8 @@ textarea {
color: var(--fg); color: var(--fg);
} }
*:disabled, .disable, .disable {pointer-events: none;}
/* Navigation */ /* Navigation */
nav { nav {
@ -358,6 +360,8 @@ nav.navbar {
nav.navbar a {color: var(--white)} nav.navbar a {color: var(--white)}
/* Grid System */ /* Grid System */
.grid { .grid {
@ -394,18 +398,12 @@ nav.navbar a {color: var(--white)}
/* Utilities */ /* Utilities */
.group {display: flex;} .group {display: flex;}
.pointer {cursor: pointer;}
.right {float:right} .right {float:right}
.left {float:left} .left {float:left}
.center {text-align: center;} .center {text-align: center;}
.clear {content:'';display: table;clear:both} .clear {content:'';display: table;clear:both}
.outline {background: transparent; color: var(--theme); border: 1px solid var(--theme)}
.underline {border-bottom: 1px solid var(--mg)}
.rounded {border-radius: calc(var(--size) / 4);} .rounded {border-radius: calc(var(--size) / 4);}
.border {border: 1px solid var(--theme)} .border {border: 1px solid var(--theme)}
.no-space {margin: 0; padding:0;}
.no-border {border: none} .no-border {border: none}
.no-padding {padding: 0} .no-space {margin: 0; padding:0;}
.no-margin {margin: 0}
.no-theme {--theme: var(--fg)} .no-theme {--theme: var(--fg)}
*:disabled, .disable, .disable {pointer-events: none;}