Skip to content

Commit

Permalink
Update documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@softwaretailoring
softwaretailoring committed Dec 15, 2015
1 parent 5044174 commit 34dec99
Show file tree
Hide file tree
Showing 15 changed files with 138 additions and 46 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ $ bower install hybicon
or CDN by [jsDelivr][jsdelivr]

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/hybicon/1.1.0/hybicon.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/hybicon/1.2.0/hybicon.min.js"></script>
```

## Author
Expand Down
44 changes: 32 additions & 12 deletions documentation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ <h5 class="fontface">Hybicon is based on SVG and works with <a href="http://raph
<div class="row" style="margin-top: 10px; margin-bottom: 15px;">
<div class="hidden-xs col-sm-2"></div>
<div class="col-xs-6 col-sm-2">
<a href="https://github.com/softwaretailoring/hybicon/releases/download/v1.1.0/hybicon.js-1.1.0.zip">
<a href="https://github.com/softwaretailoring/hybicon/releases/download/v1.2.0/hybicon.js-1.2.0.zip">
<div data-hybicon="download-code" data-hybicon-size="66" data-hybicon-hovermode="switch" data-hybicon-positioning="center"
data-hybicon-background="#EAFDF8" data-hybicon-color="#604c3b" data-hybicon-borderradius="50%"
title="Download files"></div>
Expand Down Expand Up @@ -247,11 +247,11 @@ <h3 class="fontface">Info mode</h3>
</div>
<div class="row">
<div class="col-sm-4">
<div data-hybicon="download-code" data-hybicon-size="60" data-hybicon-infomode data-hybicon-infotext="v1.1"></div>
<div data-hybicon="download-code" data-hybicon-size="60" data-hybicon-infomode data-hybicon-infotext="v1.2"></div>
<div class="smalltitle">default</div>
</div>
<div class="col-sm-4">
<div data-hybicon="download-code" data-hybicon-size="60" data-hybicon-infomode="right" data-hybicon-infotext="v1.1.0"></div>
<div data-hybicon="download-code" data-hybicon-size="60" data-hybicon-infomode="right" data-hybicon-infotext="v1.2.0"></div>
<div class="smalltitle">right</div>
</div>
<div class="col-sm-4">
Expand Down Expand Up @@ -281,25 +281,45 @@ <h3 class="fontface">JavaScript disabled</h3>
</div>
<div class="sourceResult">
<pre>&lt;div data-hybicon="github-star" data-hybicon-hovermode="switch" style="text-align:center;"&gt;
<strong class="usingpre">&lt;img src="hybicon.sample.png" /&gt;</strong>
<strong class="usingpre">&lt;img src="hybicon.sample.png" alt="GitHub stargazers" /&gt;</strong>
&lt;/div&gt;</pre>
</div>
<div class="row">
<div class="col-xs-12">
<a href="https://github.com/softwaretailoring/hybicon/stargazers" target="_blank">
<div data-hybicon="github-star" data-hybicon-hovermode="switch" style="text-align:center;">
<img src="hybicon.sample.png" />
<img src="hybicon.sample.png" alt="GitHub stargazers" />
</div>
</a>
<div class="smalltitle">try it without JS</div>
</div>
</div>
<hr id="accessibility" />
<h3 class="fontface">Accessibility</h3>
<div class="usingtext">
SVG may be <a href="http://www.sitepoint.com/tips-accessible-svg/" target="_blank">accessible</a> with <strong>data-hybicon-alt</strong> attribute.
<br /> It provides an alternative text to SVG and hybicon will be read out by <a href="https://en.wikipedia.org/wiki/Assistive_technology" target="_blank">assistive technologies</a>.
</div>
<div class="sourceResult">
<pre>&lt;div data-hybicon="noview-view"
data-hybicon-hovermode="switch"
<strong class="usingpre">data-hybicon-alt</strong>="Go to The Accessibility Project"&gt;
&lt;/div&gt;</pre>
</div>
<div class="row">
<div class="col-xs-12">
<a href="http://a11yproject.com/" target="_blank">
<div data-hybicon="noview-view" data-hybicon-hovermode="switch" data-hybicon-alt="Go to The Accessibility Project"></div>
</a>
<div class="smalltitle">try it with screen reader</div>
</div>
</div>
<hr id="animation" />
<h3 class="fontface">Advanced mode</h3>
<div class="usingtext">
Hybicon works on a 100x100 matrix. Positioning and animation are based on the following formula:<br /><strong>"centerX, centerY, size, rotate"</strong>
<br />You can also set the time and <a href="http://raphaeljs.com/easing.html" target="_blank">easing</a> of animation.
</div>
</div>
<div class="sourceResult">
<pre>&lt;div data-hybicon="arrowright-arrowright"
<strong class="usingpre">data-hybicon-icon1init</strong>="20,50,25,0" &lt;!-- default: "45,55,77,0" --&gt;
Expand Down Expand Up @@ -463,7 +483,7 @@ <h3 class="fontface">Style</h3>
</div>
<div class="row">
<div class="col-sm-3">
<div data-hybicon="github-star" ></div>
<div data-hybicon="github-star"></div>
<div class="smalltitle">default</div>
</div>
<div class="col-sm-3">
Expand All @@ -475,7 +495,7 @@ <h3 class="fontface">Style</h3>
<div class="smalltitle">fill-stroke</div>
</div>
<div class="col-sm-3">
<div data-hybicon="github-star" data-hybicon-style="stroke-fill"></div>
<div data-hybicon="github-star" data-hybicon-style="stroke-fill"></div>
<div class="smalltitle">stroke-fill</div>
</div>
</div>
Expand Down Expand Up @@ -534,19 +554,19 @@ <h2 class="fontface">How to spread?</h2>
<div class="col-sm-4">
<div class="smalltitletop">Tweet for it</div>
<a href="https://twitter.com/intent/tweet?url=http://hybicon.softwaretailoring.net/&hashtags=hybicon&text=SVG based hybrid icons - Better together!" target="_blank">
<div id="iconTwitter" data-hybicon="twitter-bubble" data-hybicon-hovermode data-hybicon-size="150"></div>
<div id="iconTwitter" data-hybicon="twitter-bubble" data-hybicon-hovermode data-hybicon-size="150" data-hybicon-alt="Tweet about it"></div>
</a>
</div>
<div class="col-sm-4">
<div class="smalltitletop">Beer for it</div>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BQE2NCJ5R5QP4" target="_blank">
<div id="iconDonate" data-hybicon="beer-pizza" data-hybicon-hovermode data-hybicon-size="150"></div>
<div id="iconDonate" data-hybicon="beer-pizza" data-hybicon-hovermode data-hybicon-size="150" data-hybicon-alt="Go to PayPal for donation"></div>
</a>
</div>
<div class="col-sm-4">
<div class="smalltitletop">Star for it</div>
<a href="https://github.com/softwaretailoring/hybicon/stargazers" target="_blank">
<div id="iconGitHub" data-hybicon="github-star" data-hybicon-hovermode data-hybicon-size="150"></div>
<div id="iconGitHub" data-hybicon="github-star" data-hybicon-hovermode data-hybicon-size="150" data-hybicon-alt="Go to GitHub stargazers"></div>
</a>
</div>
</div>
Expand All @@ -557,7 +577,7 @@ <h2 class="fontface">How to spread?</h2>
<footer>
<table style="margin:auto;">
<tr>
<td>HYBICON v1.1&nbsp;&nbsp;</td>
<td>HYBICON v1.2&nbsp;&nbsp;</td>
<td><a href="mailto:gabor.berkesi@softwaretailoring.net?subject=HYBICON"><div id="iconMailFooter" data-hybicon-size="25" data-hybicon="mail" data-hybicon-hovermode></div></a></td>
<td>&nbsp;&nbsp;&copy; 2015 <a href='http://softwaretailoring.net' target='_blank'>softwaretailoring.net</a></td>
</tr>
Expand Down
42 changes: 36 additions & 6 deletions github.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ <h2 class="fontface" id="iconname">GitHub plugin</h2>
<strong class="usingpre">data-hybicon-github-repotag</strong>="tagname"&gt; &lt;!--For releases. Without this all of the downloads count.--&gt;
&lt;/div&gt;
&lt;script src="https://cdn.jsdelivr.net/raphael/2.1.4/raphael-min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/hybicon/1.1.0/hybicon.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/hybicon/1.2.0/hybicon.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;</pre>
</div>
<hr />
Expand All @@ -95,24 +95,54 @@ <h3 class="fontface" id="iconname">For more customization</h3>
<div class="col-sm-2 hidden-xs"></div>
<div class="col-xs-6 col-sm-2">
<a href="icons.html">
<div data-hybicon="idea-icons" data-hybicon-hovermode="switch" data-hybicon-positioning="center" data-hybicon-size="75" data-hybicon-background="#116944" data-hybicon-color="#fff" data-hybicon-borderradius="50%" title="Check more icons"></div>
<div data-hybicon="idea-icons"
data-hybicon-hovermode="switch"
data-hybicon-positioning="center"
data-hybicon-size="75"
data-hybicon-background="#116944"
data-hybicon-color="#fff"
data-hybicon-borderradius="50%"
title="Check more icons"
data-hybicon-alt="Go to icons"></div>
</a>
<br class="visible-xs" />
</div>
<div class="col-xs-6 col-sm-2">
<a href="documentation.html">
<div data-hybicon="book-search" data-hybicon-hovermode="switch" data-hybicon-positioning="center" data-hybicon-size="75" data-hybicon-background="#8c3d2f" data-hybicon-color="#fff" data-hybicon-borderradius="50%" title="See documentation"></div>
<div data-hybicon="book-search"
data-hybicon-hovermode="switch"
data-hybicon-positioning="center"
data-hybicon-size="75"
data-hybicon-background="#8c3d2f"
data-hybicon-color="#fff"
data-hybicon-borderradius="50%"
title="See documentation"
data-hybicon-alt="Go to documentation"></div>
</a>
<br class="visible-xs" />
</div>
<div class="col-xs-6 col-sm-2">
<a href="https://twitter.com/intent/tweet?url=http://hybicon.softwaretailoring.net/github.html&hashtags=hybicon&text=SVG based hybrid icons - Better together with GitHub!&nbsp;" target="_blank">
<div data-hybicon="twitter" data-hybicon-hovermode="rotate" data-hybicon-size="75" data-hybicon-background="#55ACEE" data-hybicon-color="#fff" data-hybicon-borderradius="50%" title="Tweet for it"></div>
<div data-hybicon="twitter"
data-hybicon-hovermode="rotate"
data-hybicon-size="75"
data-hybicon-background="#55ACEE"
data-hybicon-color="#fff"
data-hybicon-borderradius="50%"
title="Tweet for it"
data-hybicon-alt="Tweet about it"></div>
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BQE2NCJ5R5QP4" target="_blank">
<div data-hybicon="beer" data-hybicon-hovermode data-hybicon-size="75" data-hybicon-background="#F6921E" data-hybicon-color="#fff" data-hybicon-borderradius="50%" title="Beer for it"></div>
<div data-hybicon="beer"
data-hybicon-hovermode
data-hybicon-size="75"
data-hybicon-background="#F6921E"
data-hybicon-color="#fff"
data-hybicon-borderradius="50%"
title="Beer for it"
data-hybicon-alt="Go to PayPal for donation"></div>
</a>
</div>
<div class="col-sm-2 hidden-xs"></div>
Expand All @@ -125,7 +155,7 @@ <h3 class="fontface" id="iconname">For more customization</h3>
<footer>
<table style="margin:auto;">
<tr>
<td>HYBICON v1.1&nbsp;&nbsp;</td>
<td>HYBICON v1.2&nbsp;&nbsp;</td>
<td><a href="mailto:gabor.berkesi@softwaretailoring.net?subject=HYBICON"><div id="iconMailFooter" data-hybicon-size="25" data-hybicon="mail" data-hybicon-hovermode></div></a></td>
<td>&nbsp;&nbsp;&copy; 2015 <a href='http://softwaretailoring.net' target='_blank'>softwaretailoring.net</a></td>
</tr>
Expand Down
10 changes: 6 additions & 4 deletions icons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,12 +207,13 @@ <h2 class="fontface">Do you have an idea?</h2>
data-hybicon-icon1init="50,50,40" data-hybicon-icon2init="20,50,15,180"
data-hybicon-icon1anim="50,50,40" data-hybicon-icon2anim="15,50,15"
data-hybicon-hovermode
title="See documentation"></div>
title="See documentation"
data-hybicon-alt="Go to documentation"></div>
</a>
</div>
<div class="col-xs-12 col-sm-4">
<a href="https://github.com/softwaretailoring/hybicon">
<div data-hybicon="githubalt-fork" data-hybicon-size="200" data-hybicon-hovermode="switch" title="Fork it"></div>
<div data-hybicon="githubalt-fork" data-hybicon-size="200" data-hybicon-hovermode="switch" title="Fork it" data-hybicon-alt="Go to GitHub repository"></div>
</a>
</div>
<div class="col-xs-12 col-sm-4">
Expand All @@ -221,7 +222,8 @@ <h2 class="fontface">Do you have an idea?</h2>
data-hybicon-icon1init="50,50,40" data-hybicon-icon2init="80,50,15"
data-hybicon-icon1anim="50,50,40" data-hybicon-icon2anim="85,50,15"
data-hybicon-hovermode
title="Check GitHub plugin"></div>
title="Check GitHub plugin"
data-hybicon-alt="Go to GitHub plugin"></div>
</a>
</div>
</div>
Expand All @@ -232,7 +234,7 @@ <h2 class="fontface">Do you have an idea?</h2>
<footer>
<table style="margin:auto;">
<tr>
<td>HYBICON v1.1&nbsp;&nbsp;</td>
<td>HYBICON v1.2&nbsp;&nbsp;</td>
<td><a href="mailto:gabor.berkesi@softwaretailoring.net?subject=HYBICON"><div id="iconMailFooter" data-hybicon-size="25" data-hybicon="mail" data-hybicon-hovermode></div></a></td>
<td>&nbsp;&nbsp;&copy; 2015 <a href='http://softwaretailoring.net' target='_blank'>softwaretailoring.net</a></td>
</tr>
Expand Down
12 changes: 6 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ <h5 class="fontface" style="text-align:center;"><span class="inverse">&nbsp;&nbs
</div>
<div class="col-sm-4">
<div class="smalltitletop">Click</div>
<div id="iconBrightness" data-hybicon="switch-circle" data-hybicon-size="200" data-hybicon-clickmode onclick="setStyle(); setDetails('click');"></div>
<div id="iconBrightness" data-hybicon="switch-circle" data-hybicon-size="200" data-hybicon-clickmode onclick="setDetails('click');"></div>
</div>
<div class="col-sm-4">
<div class="smalltitletop">Info</div>
Expand All @@ -65,19 +65,19 @@ <h3 id="details" class="fontface"></h3>
<div class="col-sm-3">
<div class="smalltitletop">Documentation</div>
<a href="documentation.html">
<div id="iconDocumentation" data-hybicon="book-search" data-hybicon-size="100" data-hybicon-hovermode></div>
<div id="iconDocumentation" data-hybicon="book-search" data-hybicon-size="100" data-hybicon-hovermode data-hybicon-alt="Go to documentation"></div>
</a>
</div>
<div class="col-sm-2">
<div class="smalltitletop">Icons</div>
<a href="icons.html">
<div id="iconIcons" data-hybicon="idea-icons" data-hybicon-size="100" data-hybicon-hovermode></div>
<div id="iconIcons" data-hybicon="idea-icons" data-hybicon-size="100" data-hybicon-hovermode data-hybicon-alt="Go to icons"></div>
</a>
</div>
<div class="col-sm-3">
<div class="smalltitletop">Download</div>
<a href="https://github.com/softwaretailoring/hybicon/releases/download/v1.1.0/hybicon.js-1.1.0.zip">
<div id="iconDownload" data-hybicon="download-code" data-hybicon-size="100" data-hybicon-hovermode></div>
<a href="https://github.com/softwaretailoring/hybicon/releases/download/v1.2.0/hybicon.js-1.2.0.zip">
<div id="iconDownload" data-hybicon="download-code" data-hybicon-size="100" data-hybicon-hovermode data-hybicon-alt="Download files"></div>
</a>
</div>
<div class="col-sm-2"></div>
Expand All @@ -89,7 +89,7 @@ <h3 id="details" class="fontface"></h3>
<footer id="footer" class="styledark">
<table style="margin:auto;">
<tr>
<td>HYBICON v1.1&nbsp;&nbsp;</td>
<td>HYBICON v1.2&nbsp;&nbsp;</td>
<td><a href="mailto:gabor.berkesi@softwaretailoring.net?subject=HYBICON"><div id="iconMailFooter" data-hybicon-size="25" data-hybicon="mail" data-hybicon-hovermode></div></a></td>
<td>&nbsp;&nbsp;&copy; 2015 <a href='http://softwaretailoring.net' target='_blank'>softwaretailoring.net</a></td>
</tr>
Expand Down
1 change: 1 addition & 0 deletions js/for-doc/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ var setDetails = function (mode) {
break;
case "click":
details = "Click mode is fine for toggles to call a method in the page.";
setStyle();
break;
case "info":
details = "When you want to show more. Psst... There is a <a href='github.html'>GitHub plugin</a>";
Expand Down
Loading

0 comments on commit 34dec99

Please sign in to comment.