Skip to content

Commit

Permalink
Add style + weight in examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@danklammer
danklammer committed Aug 16, 2016
1 parent 1cff9b7 commit 06c36a8
Showing 1 changed file with 275 additions and 0 deletions.
275 changes: 275 additions & 0 deletions examples/bytesize-styles.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,275 @@
<html>
<head>

<title>Bytesize Icons - Styles + Weights</title>

<style>

body {
color: #3f414e;
font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
text-align: center;
padding: 3em 0;
}

svg {
margin: 0.4em;
overflow: visible;
}

div { margin: 0 auto 2em }

h1 {
font-weight: normal;
line-height: 1;
font-size: 2em;
}

h3 {
font-size: 1em;
margin: 0 0 2em;
font-weight: 600;
}

h5 { margin: 0 0 1em }

hr {
border: 0 solid transparent;
border-bottom: 5px solid #ddd;
height: 0;
max-width: 48em;
margin: 4em auto;
}

table {
margin: 0 auto;
text-align: left;
}

code {
display: block;
font-family: Menlo, Consolas, Monaco, monospace;
font-size: 13px;
line-height: 1.8;
font-weight: normal;
}

th {
background: #f5f5f5;
border: 1px solid #ddd;
}

</style>

</head>

<body>

<div class="header">
<h1>Bytesize Icons</h1>
<h3>A tiny style-controlled SVG iconset</h3>
</div>

<hr />

<div>

<h4>Styles + Weights</h4>

<table cellspacing="10" cellpadding="10">

<tr>
<td></td>

<th>
<h5>Round</h5>
<code>stroke-linecap="round"</code>
<code>stroke-linejoin="round"</code>
</th>
<th>
<h5>Bevel</h5>
<code>stroke-linecap="butt"</code>
<code>stroke-linejoin="bevel"</code>
</th>
<th>
<h5>Miter</h5>
<code>stroke-linecap="butt"</code>
<code>stroke-linejoin="miter"</code>
</th>
</tr>

<tr>
<th>
<h5>Ultra Light</h5>
<code>stroke-width="0.5px"</code>
<code>stroke-width="1.5625%"</code>
</th>

<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5625%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="bevel" stroke-width="1.5625%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1.5625%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
</tr>

<tr>
<th>
<h5>Thin</h5>
<code>stroke-width="1px"</code>
<code>stroke-width="3.125%"</code>
</th>

<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.125%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="bevel" stroke-width="3.125%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="3.125%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
</tr>

<tr>
<th>
<h5>Light</h5>
<code>stroke-width="1.5px"</code>
<code>stroke-width="4.6875%"</code>
</th>

<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.6875%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="bevel" stroke-width="4.6875%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="4.6875%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
</tr>

<tr>
<th>
<h5>Regular</h5>
<code>stroke-width="2px"</code>
<code>stroke-width="6.25%"</code>
</th>

<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="bevel" stroke-width="6.25%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="6.25%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
</tr>


<tr>
<th>
<h5>Medium</h5>
<code>stroke-width="2.5px"</code>
<code>stroke-width="7.8125%"</code>
</th>

<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.8125%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="bevel" stroke-width="7.8125%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="7.8125%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
</tr>

<tr>
<th>
<h5>Bold</h5>
<code>stroke-width="3px"</code>
<code>stroke-width="9.375%"</code>
</th>

<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="9.375%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="bevel" stroke-width="9.375%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.375%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
</tr>

<tr>
<th>
<h5>Heavy</h5>
<code>stroke-width="3.5px"</code>
<code>stroke-width="10.9375%"</code>
</th>

<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.9375%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="bevel" stroke-width="10.9375%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
<td>
<svg viewBox="0 0 32 32" width="128" height="128" fill="none" stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="10.9375%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
</td>
</tr>

</table>

<div>

</body>
</html>

0 comments on commit 06c36a8

Please sign in to comment.