keyrune/examples.html

120 lines
6.1 KiB
HTML
Raw Normal View History

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Examples | Keyrune</title>
<link rel="stylesheet" href="bower_components/keyrune/css/keyrune.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
</head>
<body>
<section id="banner">
<div class="wrapper">
<a href="index.html" class="logo"><i class="ss ss-leg"></i> Keyrune</a>
<a href="index.html" class="item">Home</a>
<a href="icons.html" class="item">Set Icons</a>
<a href="examples.html" class="item">Examples</a>
<a href="http://github.com/andrewgioia/Keyrune" class="item">GitHub Project</a>
<span class="item">
<iframe src="https://ghbtns.com/github-btn.html?user=andrewgioia&repo=keyrune&type=star&count=true" frameborder="0" scrolling="0" width="75px" height="20px" style="margin-bottom: -4px;"></iframe>
</span>
<span class="item">
Created by
<a href="http://andrewgioia.com">Andrew Gioia</a>
</span>
</div>
</section>
<header>
<div class="wrapper">
<h1 class="sub">Options &amp; Examples</h1>
<a class="dl button float-right" href="https://github.com/andrewgioia/Keyrune/archive/master.zip">
<i class="ss ss-pmtg2"></i>
Download
</a>
<h2 class="sub">Built-in size, position, and rarity options</h2>
</div>
</header>
<main>
<div class="wrapper">
<section>
<h3><strong>Keyrune</strong> has some built in icon options to easily change the <strong>size, position, and rarity color</strong> of the set symbols. Take a look below at examples of each option with the class names to implement them.</h3>
</section>
<section class="content">
<h4>Displaying a Set Icon</h4>
<div class="example float-left">
<i class="ss ss-zen"></i> ss-zen
</div>
<div class="explanation">
<p>You can place Keyrune icons anywhere using the CSS classname prefix <code>ss</code> (for set symbol) and then the set icon's code. Inline elements like <code>&lt;i&gt;</code> and <code>&lt;span&gt;</code> are preferred, but any can be used.</p>
<blockquote>
&lt;i class="ss ss-zen"&gt;&lt/i&gt; ss-zen
</blockquote>
</div>
<div class="clear"></div>
</section>
<section class="content">
<h4>Icon Sizes</h4>
<div class="example float-left">
<span class="each"><i class="ss ss-wth ss-2x"></i> ss-2x</span>
<span class="each"><i class="ss ss-wth ss-3x"></i> ss-3x</span>
<span class="each"><i class="ss ss-wth ss-4x"></i> ss-4x</span>
<span class="each"><i class="ss ss-wth ss-5x"></i> ss-5x</span>
<span class="each"><i class="ss ss-wth ss-6x"></i> ss-6x</span>
</div>
<div class="explanation">
<p>To conveniently increase the size of a set symbol you can append the classes <code>ss-2x</code>, <code>ss-3x</code>, <code>ss-4x</code>, <code>ss-4x</code>, and <code>ss-6x</code>. These classes increase the size by a factor equal to class name number.</p>
<blockquote>
&lt;i class="ss ss-zen ss-2x"&gt;&lt/i&gt; ss-2x<br />
&lt;i class="ss ss-zen ss-3x"&gt;&lt/i&gt; ss-3x<br />
&lt;i class="ss ss-zen ss-4x"&gt;&lt/i&gt; ss-4x<br />
&lt;i class="ss ss-zen ss-5x"&gt;&lt/i&gt; ss-5x<br />
&lt;i class="ss ss-zen ss-6x"&gt;&lt/i&gt; ss-6x
</blockquote>
</div>
<div class="clear"></div>
</section>
<section class="content">
<h4>Rarity Colors</h4>
<div class="example float-left">
<span class="each"><i class="ss ss-ons ss-common"></i> ss-common</span>
<span class="each"><i class="ss ss-ons ss-uncommon"></i> ss-uncommon</span>
<span class="each"><i class="ss ss-ons ss-rare"></i> ss-rare</span>
<span class="each"><i class="ss ss-ons ss-mythic"></i> ss-mythic</span>
</div>
<div class="explanation">
<p>You can add a rarity color to each set symbol by appending the classes <code>ss-common</code>, <code>ss-uncommon</code>, <code>ss-rare</code>, and <code>ss-mythic</code>.</p>
<blockquote>
&lt;i class="ss ss-ons ss-common"&gt;&lt/i&gt; ss-common<br />
&lt;i class="ss ss-ons ss-uncommon"&gt;&lt/i&gt; ss-uncommon<br />
&lt;i class="ss ss-ons ss-rare"&gt;&lt/i&gt; ss-rare<br />
&lt;i class="ss ss-ons ss-mythic"&gt;&lt/i&gt; ss-mythic
</blockquote>
</div>
<div class="clear"></div>
</section>
</div>
</main>
<footer>
<div class="wrapper">
<div class="float-left">
<p>Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a></p>
</div>
<div class="float-right" style="text-align: right;">
<p>
All set images &copy; <a href="http://magicthegathering.com">Wizards of the Coast</a><br />
The Keyrune font is licensed under the the <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a><br />
Keyrune CSS, LESS, and Sass files are licensed under the <a href="http://opensource.org/licenses/mit-license.html">MIT License</a><br />
</p>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>