2015-03-15 21:38:04 +00:00
<!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" / >
2017-02-28 15:07:30 +00:00
< link rel = "icon" href = "favicon.ico" type = "image/x-icon" / >
2015-03-15 21:38:04 +00:00
< 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" >
2015-09-18 19:32:29 +00:00
< iframe src = "https://ghbtns.com/github-btn.html?user=andrewgioia&repo=keyrune&type=star&count=true" frameborder = "0" scrolling = "0" width = "100px" height = "20px" style = "margin-bottom: -4px;" > < / iframe >
2015-03-15 21:38:04 +00:00
< / 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 & 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 > < i> < / code > and < code > < span> < / code > are preferred, but any can be used.< / p >
< blockquote >
2015-03-22 00:52:27 +00:00
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-zen"< / span > > < /< span class = "e" > i< / span > > ss-zen
2015-03-15 21:38:04 +00:00
< / blockquote >
< / div >
< div class = "clear" > < / div >
< / section >
< section class = "content" >
< h4 > Icon Sizes< / h4 >
< div class = "example float-left" >
2015-03-21 22:23:07 +00:00
< span class = "each" > < i class = "ss ss-sth ss-2x" > < / i > ss-2x< / span >
< span class = "each" > < i class = "ss ss-sth ss-3x" > < / i > ss-3x< / span >
< span class = "each" > < i class = "ss ss-sth ss-4x" > < / i > ss-4x< / span >
< span class = "each" > < i class = "ss ss-sth ss-5x" > < / i > ss-5x< / span >
< span class = "each" > < i class = "ss ss-sth ss-6x" > < / i > ss-6x< / span >
2015-03-15 21:38:04 +00:00
< / 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 >
2015-03-22 00:52:27 +00:00
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-sth ss-2x"< / span > > < /< span class = "e" > i< / span > > ss-2x< br / >
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-sth ss-3x"< / span > > < /< span class = "e" > i< / span > > ss-3x< br / >
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-sth ss-4x"< / span > > < /< span class = "e" > i< / span > > ss-4x< br / >
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-sth ss-5x"< / span > > < /< span class = "e" > i< / span > > ss-5x< br / >
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-sth ss-6x"< / span > > < /< span class = "e" > i< / span > > ss-6x
2015-03-15 21:38:04 +00:00
< / blockquote >
< / div >
< div class = "clear" > < / div >
< / section >
2015-03-22 00:04:41 +00:00
< section class = "content" >
< h4 > Fixed Width< / h4 >
< div class = "example float-left" >
< div style = "padding-bottom: 5px;" > Fixed width:< / div >
< span class = "each" > < i class = "ss ss-inv ss-fw" > < / i > Invasion< / span >
< span class = "each" > < i class = "ss ss-nms ss-fw" > < / i > Nemesis< / span >
< div style = "padding: 15px 0 5px;" > Default (to compare):< / div >
< span class = "each" > < i class = "ss ss-inv" > < / i > Invasion< / span >
< span class = "each" > < i class = "ss ss-nms" > < / i > Nemesis< / span >
< / div >
< div class = "explanation" >
< p > All of the set symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width just append the class < code > .ss-fw< / code > and the set symbols will have a constant width and centered icon.< / p >
< blockquote >
2015-03-22 00:52:27 +00:00
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-inv ss-fw"< / span > > < /< span class = "e" > i< / span > > Invasion< br / >
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-nms ss-fw"< / span > > < /< span class = "e" > i< / span > > Nemesis
2015-03-22 00:04:41 +00:00
< / blockquote >
< / div >
< div class = "clear" > < / div >
< / section >
2015-03-15 21:38:04 +00:00
< section class = "content" >
< h4 > Rarity Colors< / h4 >
< div class = "example float-left" >
2017-03-14 13:48:34 +00:00
< span class = "each" > < i class = "ss ss-fw ss-ons ss-common" > < / i > ss-common< / span >
< span class = "each" > < i class = "ss ss-fw ss-ons ss-uncommon" > < / i > ss-uncommon< / span >
< span class = "each" > < i class = "ss ss-fw ss-ons ss-rare" > < / i > ss-rare< / span >
< span class = "each" > < i class = "ss ss-fw ss-ons ss-mythic" > < / i > ss-mythic< / span >
< span class = "each" > < i class = "ss ss-fw ss-tsp ss-timeshifted" > < / i > ss-timeshifted< / span >
2015-03-15 21:38:04 +00:00
< / 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 >
2015-03-22 00:52:27 +00:00
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-ons ss-common"< / span > > < /< span class = "e" > i< / span > > ss-common< br / >
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-ons ss-uncommon"< / span > > < /< span class = "e" > i< / span > > ss-uncommon< br / >
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-ons ss-rare"< / span > > < /< span class = "e" > i< / span > > ss-rare< br / >
2017-03-14 19:24:49 +00:00
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-ons ss-mythic"< / span > > < /< span class = "e" > i< / span > > ss-mythic< br / >
2017-03-14 13:48:34 +00:00
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-tsp ss-timeshifted"< / span > > < /< span class = "e" > i< / span > > ss-timeshifted
2015-03-15 21:38:04 +00:00
< / blockquote >
< / div >
< div class = "clear" > < / div >
2015-03-22 00:52:27 +00:00
< div class = "example float-left" >
< span class = "each" > < i class = "ss ss-mor ss-rare ss-grad ss-3x" > < / i > ss-grad< / span >
2017-03-14 13:48:34 +00:00
< span class = "each" > < i class = "ss ss-tsp ss-timeshifted ss-grad ss-3x" > < / i > ss-grad< / span >
2017-03-14 19:24:49 +00:00
< span class = "each" > < i class = "ss ss-isd ss-foil ss-grad ss-3x" > < / i > ss-foil< / span >
2015-03-22 00:52:27 +00:00
< / div >
< div class = "explanation" >
< p > Webkit browsers suport the < code > background-clip: text< / code > property which opens up some exciting options for rarities: true text gradients! Append the < code > .ss-grad< / code > class to add a modern rarity gradient.< / p >
< blockquote >
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-mor ss-rare ss-grad ss-3x"< / span > > < /< span class = "e" > i< / span > > ss-grad< br / >
2017-03-14 19:24:49 +00:00
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-tsp ss-timeshifted ss-grad ss-3x"< / span > > < /< span class = "e" > i< / span > > ss-grad< br / >
< < span class = "e" > i< / span > < span class = "a" > class< / span > =< span class = "v" > "ss ss-isd ss-foil ss-grad ss-3x"< / span > > < /< span class = "e" > i< / span > > ss-foil< br / >
2015-03-22 00:52:27 +00:00
< / blockquote >
< p > < strong > Note:< / strong > You will only see a gradient while using a Webkit browser (i.e., Chrome or Safari).< / p >
< / div >
2015-03-15 21:38:04 +00:00
< / section >
< / div >
< / main >
< footer >
< div class = "wrapper" >
< div class = "float-left" >
< p > Made with ♥ by < a href = "http://andrewgioia.com" > Andrew Gioia< / a > < / p >
< / div >
< div class = "float-right" style = "text-align: right;" >
< p >
All set images © < 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 >
