border.css
Version:
Functional CSS border classes
229 lines (227 loc) • 9.53 kB
HTML
<html lang="en-US" class="scheme-0">
<meta charset="utf-8">
<title>border.css // Borders.</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Opensource functional CSS borders">
<link rel="stylesheet" href="border.css">
<style>
* { box-sizing: border-box }
:focus { outline-color: currentColor }
:link { transition: 275ms ease color }
:link, :visited { color: BlueViolet }
:link:hover { color: DarkViolet }
.scheme-0 { background: MintCream; color: Black }
.scheme-1 { background: MediumAquamarine; color: Black; border-color: MediumAquamarine }
html { font: 1.3125em/1.5 sans-serif }
body { margin: auto; padding: 2em; width: 100%; max-width: 50em }
code { font-family: inherit }
button:enabled { cursor: pointer }
td { vertical-align: top; padding: .5em }
td ul { margin: 0; padding-left: 1em }
.bold { font-weight: bold }
.inline-block { display: inline-block }
.block { display: block }
.pad { padding: .25rem 1rem }
.unpad { padding: 0 }
.flush { margin: 0 }
.flow { margin: 0 0 1.5rem }
.flow-compact { margin: 0 0 .75em }
.subhead {
text-transform: uppercase;
font-size: 1em;
font-weight: 500;
}
</style>
<header class="flow pad border-groove border-thick">
<h1 class="flush"><a href="http://ryanve.github.io/border.css/">border.css</a></h1>
<a href="https://github.com/ryanve/border.css">Github</a>
<a href="https://www.npmjs.com/package/border.css">npm</a>
<a href="https://unpkg.com/border.css@0.7.0/">unpkg</a>
</header>
<section>
<figure class="flow pad border-none">
<figcaption><code>border-none</code></figcaption>
</figure>
<figure class="flow pad border-inset">
<figcaption><code>border-inset</code></figcaption>
</figure>
<figure class="flow pad border-groove">
<figcaption><code>border-groove</code></figcaption>
</figure>
<figure class="flow pad border-outset">
<figcaption><code>border-outset</code></figcaption>
</figure>
<figure class="flow pad border-ridge">
<figcaption><code>border-ridge</code></figcaption>
</figure>
<figure class="flow pad border-dotted">
<figcaption><code>border-dotted</code></figcaption>
</figure>
<figure class="flow pad border-dashed">
<figcaption><code>border-dashed</code></figcaption>
</figure>
<figure class="flow pad border-solid">
<figcaption><code>border-solid</code></figcaption>
</figure>
<figure class="flow pad border-double">
<figcaption><code>border-double</code></figcaption>
</figure>
<figure class="flow pad border-hidden">
<figcaption><code>border-hidden</code></figcaption>
</figure>
</section>
<section>
<figure class="flow pad border-thin border-none">
<figcaption><code>border-thin border-none</code></figcaption>
</figure>
<figure class="flow pad border-thin border-inset">
<figcaption><code>border-thin border-inset</code></figcaption>
</figure>
<figure class="flow pad border-thin border-groove">
<figcaption><code>border-thin border-groove</code></figcaption>
</figure>
<figure class="flow pad border-thin border-outset">
<figcaption><code>border-thin border-outset</code></figcaption>
</figure>
<figure class="flow pad border-thin border-ridge">
<figcaption><code>border-thin border-ridge</code></figcaption>
</figure>
<figure class="flow pad border-thin border-dotted">
<figcaption><code>border-thin border-dotted</code></figcaption>
</figure>
<figure class="flow pad border-thin border-dashed">
<figcaption><code>border-thin border-dashed</code></figcaption>
</figure>
<figure class="flow pad border-thin border-solid">
<figcaption><code>border-thin border-solid</code></figcaption>
</figure>
<figure class="flow pad border-thin border-double">
<figcaption><code>border-thin border-double</code></figcaption>
</figure>
<figure class="flow pad border-thin border-hidden">
<figcaption><code>border-thin border-hidden</code></figcaption>
</figure>
</section>
<section>
<figure class="flow pad border-medium border-none">
<figcaption><code>border-medium border-none</code></figcaption>
</figure>
<figure class="flow pad border-medium border-inset">
<figcaption><code>border-medium border-inset</code></figcaption>
</figure>
<figure class="flow pad border-medium border-groove">
<figcaption><code>border-medium border-groove</code></figcaption>
</figure>
<figure class="flow pad border-medium border-outset">
<figcaption><code>border-medium border-outset</code></figcaption>
</figure>
<figure class="flow pad border-medium border-ridge">
<figcaption><code>border-medium border-ridge</code></figcaption>
</figure>
<figure class="flow pad border-medium border-dotted">
<figcaption><code>border-medium border-dotted</code></figcaption>
</figure>
<figure class="flow pad border-medium border-dashed">
<figcaption><code>border-medium border-dashed</code></figcaption>
</figure>
<figure class="flow pad border-medium border-solid">
<figcaption><code>border-medium border-solid</code></figcaption>
</figure>
<figure class="flow pad border-medium border-double">
<figcaption><code>border-medium border-double</code></figcaption>
</figure>
<figure class="flow pad border-medium border-hidden">
<figcaption><code>border-medium border-hidden</code></figcaption>
</figure>
</section>
<section>
<figure class="flow pad border-thick border-none">
<figcaption><code>border-thick border-none</code></figcaption>
</figure>
<figure class="flow pad border-thick border-inset">
<figcaption><code>border-thick border-inset</code></figcaption>
</figure>
<figure class="flow pad border-thick border-groove">
<figcaption><code>border-thick border-groove</code></figcaption>
</figure>
<figure class="flow pad border-thick border-outset">
<figcaption><code>border-thick border-outset</code></figcaption>
</figure>
<figure class="flow pad border-thick border-ridge">
<figcaption><code>border-thick border-ridge</code></figcaption>
</figure>
<figure class="flow pad border-thick border-dotted">
<figcaption><code>border-thick border-dotted</code></figcaption>
</figure>
<figure class="flow pad border-thick border-dashed">
<figcaption><code>border-thick border-dashed</code></figcaption>
</figure>
<figure class="flow pad border-thick border-solid">
<figcaption><code>border-thick border-solid</code></figcaption>
</figure>
<figure class="flow pad border-thick border-double">
<figcaption><code>border-thick border-double</code></figcaption>
</figure>
<figure class="flow pad border-thick border-hidden">
<figcaption><code>border-thick border-hidden</code></figcaption>
</figure>
</section>
<figure class="flow" id="vue">
<figcaption class="subhead flow-compact">Interactive table demo</figcaption>
<div class="flow-compact">
<button class="scheme-1 pad border-outset bold" togg-scope="table" togg-event="click" v-togg>collapse | separate</button>
</div>
<table togg-scope="table" togg-class="border-collapse" class="flow-compact border-solid border-current">
<tr>
<th class="border-solid">Style</th>
<th class="border-solid">Conveys</th>
<th class="border-solid">Use cases</th>
</tr>
<tr>
<td class="border-inset">inset</td>
<td class="border-inset"><ul><li>editability</ul></td>
<td class="border-inset"><ul><li>inputs</ul></td>
</tr>
<tr>
<td class="border-groove">groove</td>
<td class="border-groove"><ul><li>dimension</ul></td>
<td class="border-groove"><ul><li>perspective</ul></td>
</tr>
<tr>
<td class="border-outset">outset</td>
<td class="border-outset"><ul><li>clickability</ul></td>
<td class="border-outset"><ul><li>buttons</ul></td>
</tr>
<tr>
<td class="border-ridge">ridge</td>
<td class="border-ridge"><ul><li>dimension</ul></td>
<td class="border-ridge"><ul><li>windows</ul></td>
</tr>
<tr>
<td class="border-dotted">dotted</td>
<td class="border-dotted"><ul><li>focus<li>fun</ul></td>
<td class="border-dotted"><ul><li>focus state<li>playful tone</ul></td>
</tr>
<tr>
<td class="border-dashed">dashed</td>
<td class="border-dashed"><ul><li>intermittence<li>incomplete<li>caution</ul></td>
<td class="border-dashed"><ul><li>offline status<li>progress<li>warning</ul></td>
</tr>
<tr>
<td class="border-solid">solid</td>
<td class="border-solid"><ul><li>separation<li>attention<li>current</ul></td>
<td class="border-solid"><ul><li>sectioning<li>contrast<li>context</ul></td>
</tr>
<tr>
<td class="border-double">double</td>
<td class="border-double"><ul><li>attention</ul></td>
<td class="border-double"><ul><li>contrast<li>states</ul></td>
</tr>
</table>
<a href="https://github.com/ryanve/border.css">Help edit this on Github</a> :)
</figure>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://unpkg.com/vue@2.2.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/v-togg@0.6.0/togg.js"></script>
<script>console.log(new Vue({ el: '#vue' }))</script>