Skip to content

Commit

Permalink
Refactor, breadcrumbs
Browse files Browse the repository at this point in the history
  • Loading branch information
@ruslanchek
ruslanchek committed Mar 4, 2015
1 parent 030d9eb commit 590c158
Show file tree
Hide file tree
Showing 47 changed files with 644 additions and 314 deletions.
63 changes: 38 additions & 25 deletions api.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,27 +23,36 @@
</div>
<div class="col-18">
<h1>JavaScript API</h1>
<p>The API will make you happy</p><a name="Animate"></a>
<h2>UI.Animate</h2>
<div class="breadcrumbs"><a href="index.html">Main page</a><a href="api.html">API</a>
</div>
<hr>
<!-- Popup--><a name="Template"></a>
<h2>UI.Template</h2>
<pre class="code-multiline"><code class="javascript">var Template = new UI.Template(templateName);</code></pre><br>
<div class="bullet"><code>Template.render()</code></div>
<hr><a name="Animate"></a>
<h2>UI.Animate</h2>
<pre class="code-multiline"><code class="javascript">var Animate = new UI.Animate({
$element: $('#my-element'),
animationDuration: 300
});</code></pre><br>
<div class="bullet"><code>Animate.play(animationMethod, onDone)</code></div>
<div class="bullet"><code>Animate.play(animationMethod, onDone)</code></div>
<h4>Animation methods</h4>
<div class="bullet bg-mix-light"><code>fadeIn</code></div>
<div class="bullet bg-mix-light"><code>fadeOut</code></div>
<div class="bullet bg-mix-light"><code>appear</code></div>
<div class="bullet bg-mix-light"><code>disappear</code></div><a name="ClickOutside"></a>
<h2>UI.ClickOutside</h2>
<div class="bullet bg-mix-light"><code>fadeIn</code></div>
<div class="bullet bg-mix-light"><code>fadeOut</code></div>
<div class="bullet bg-mix-light"><code>appear</code></div>
<div class="bullet bg-mix-light"><code>disappear</code></div>
<hr><a name="ClickOutside"></a>
<h2>UI.ClickOutside</h2>
<pre class="code-multiline"><code class="javascript">var ClickOutside = new UI.ClickOutside({
selector: '#my-element',
onClickOutside: function($target){}
})</code></pre><br>
<div class="bullet"><code>ClickOutside.bind()</code></div>
<div class="bullet"><code>ClickOutside.unbind()</code></div>
<div class="bullet"><code>ClickOutside.bind()</code></div>
<div class="bullet"><code>ClickOutside.unbind()</code></div>
<hr>
<!-- Popup--><a name="Popup"></a>
<h2>UI.Popup</h2>
<h2>UI.Popup</h2>
<pre class="code-multiline"><code class="javascript">var Popup = new UI.Popup({
width: 500,
modal: false,
Expand All @@ -52,20 +61,27 @@ <h2>UI.Popup</h2>
onShow: function(instance){},
onHide: function(instance){}
});</code></pre><br>
<div class="bullet"><code>Popup.show(title, content)</code></div>
<div class="bullet"><code>Popup.hide()</code></div>
<div class="bullet"><code>Popup.showMessage(type, timeout, content)</code></div>
<div class="bullet"><code>Popup.hideMessage()</code></div>
<div class="bullet"><code>Popup.changeContent(html)</code></div>
<div class="bullet"><code>Popup.changeTitle(html)</code></div>
<div class="bullet"><code>Popup.setWaitingMode(timeout, done)</code></div>
<div class="bullet"><code>Popup.removeWaitingMode()</code></div>
<div class="bullet"><code>Popup.show(title, content)</code></div>
<div class="bullet"><code>Popup.hide()</code></div>
<div class="bullet"><code>Popup.showMessage(type, timeout, content)</code></div>
<div class="bullet"><code>Popup.hideMessage()</code></div>
<div class="bullet"><code>Popup.changeContent(html)</code></div>
<div class="bullet"><code>Popup.changeTitle(html)</code></div>
<div class="bullet"><code>Popup.setWaitingMode(timeout, done)</code></div>
<div class="bullet"><code>Popup.removeWaitingMode()</code></div>
<hr>
<!-- Popup--><a name="Tabs"></a>
<h2>UI.Tabs</h2>
<h2>UI.Tabs</h2>
<pre class="code-multiline"><code class="javascript">var Tabs = new UI.Tabs({
tabsSelector: '.tabs',
tabsContentSelector: '.tabs-content'
tabsSelector: '#tabs',
tabsContentSelector: '#tabs-content',
sliding: true,
onTabOpen: function(name){}
});</code></pre><br>
<div class="bullet"><code>Tabs.openTab(name)</code></div>
<div class="bullet"><code>Tabs.next()</code></div>
<div class="bullet"><code>Tabs.prev()</code></div>
<div class="bullet"><code>Tabs.getActive()</code></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -125,16 +141,13 @@ <h2>UI.Tabs</h2>
<div id="tabs-popup" class="tabs fat"><i class="marker"></i><a href="#about" class="active">About</a><a href="#contacts">Contacts</a><a href="#media">Media</a></div>
<div id="tabs-popup-content" class="tabs-content">
<div data-role="tab-page" data-tab="about" class="page">
<h2>About content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
<div data-role="tab-page" data-tab="contacts" class="page active">
<h2>Contacts content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.</p>
<p>That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
<div data-role="tab-page" data-tab="media" class="page">
<h2>Media content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.</p>
<p>That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
Expand Down
9 changes: 5 additions & 4 deletions breadcrumbs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,12 @@
</div>
<div class="col-18">
<h1>Breadcrumbs</h1>
<div class="breadcrumbs"><a href="index.html">Main page</a><a href="components.html">Components</a><a href="forms.html">Forms</a>
</div>
<hr>
<h2>Default breadcrumbs</h2>
<p>Those little bastards are very useful</p>
<div class="breadcrumbs"><a href="#">Main page</a><a href="#">Navigation</a><a href="#" class="active">Breadcrumbs</a></div><br>
<div class="breadcrumbs"><a href="#">Catalog</a><a href="#">Pillows</a><a href="#">Soft</a><a href="#">Travel</a><a href="#">Children</a><a href="#" class="active">Soft travel pillow for children</a></div>
<div class="grid">
<div class="col-9"><a href="api.html#Popup" class="code"><i class="fa fa-code"></i>&nbsp;The code</a></div>
</div>
Expand Down Expand Up @@ -87,16 +91,13 @@ <h1>Breadcrumbs</h1>
<div id="tabs-popup" class="tabs fat"><i class="marker"></i><a href="#about" class="active">About</a><a href="#contacts">Contacts</a><a href="#media">Media</a></div>
<div id="tabs-popup-content" class="tabs-content">
<div data-role="tab-page" data-tab="about" class="page">
<h2>About content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
<div data-role="tab-page" data-tab="contacts" class="page active">
<h2>Contacts content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.</p>
<p>That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
<div data-role="tab-page" data-tab="media" class="page">
<h2>Media content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.</p>
<p>That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
Expand Down
25 changes: 13 additions & 12 deletions buttons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
</div>
<div class="col-18">
<h1>Buttons</h1>
<div class="breadcrumbs"><a href="index.html">Main page</a><a href="components.html">Components</a><a href="buttons.html">Buttons</a>
</div>
<hr>
<h2>Buttons set</h2>
<p>A beautiful set of buttons, the combinations of styles are awesome</p>
<div class="grid">
<div class="col-6">
Expand Down Expand Up @@ -74,22 +78,22 @@ <h1>Buttons</h1>
<div class="col-4"><a href="#" class="colorable"><i class="fa fa-paint-brush"></i>&nbsp;Colorable</a></div>
<div class="col-4"><a href="#" class="resizeable"><i class="fa fa-arrows"></i>&nbsp;Resizeable</a></div>
</div>
<h1>Button groups</h1>
<hr>
<h2>Button groups</h2>
<p>You can combine a couple of buttons into a group</p>
<div class="grid">
<div class="col-9">
<div class="button-group">
<button class="button fat bg-cold-light volume">Yeah!</button>
<div class="button-group separators">
<button class="button fat volume">Yeah!</button>
<button class="button fat volume">Hmm...</button>
<button class="button fat bg-heat-light volume">Pff, nope!</button>
<button class="button fat volume">Pff, nah!</button>
</div><br>
</div>
<div class="col-9">
<div class="button-group separators">
<button class="button fat volume">Yeah!</button>
<button class="button fat volume">Hmm...</button>
<button class="button fat volume">Pff, nope!</button>
</div>
<div class="button-group">
<button class="button fat bg-cold-light volume">Yeah!</button>
<button class="button fat bg-heat-light volume">Pff, nope!</button>
</div><br>
</div>
</div>
<div class="grid">
Expand Down Expand Up @@ -156,16 +160,13 @@ <h1>Button groups</h1>
<div id="tabs-popup" class="tabs fat"><i class="marker"></i><a href="#about" class="active">About</a><a href="#contacts">Contacts</a><a href="#media">Media</a></div>
<div id="tabs-popup-content" class="tabs-content">
<div data-role="tab-page" data-tab="about" class="page">
<h2>About content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
<div data-role="tab-page" data-tab="contacts" class="page active">
<h2>Contacts content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.</p>
<p>That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
<div data-role="tab-page" data-tab="media" class="page">
<h2>Media content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.</p>
<p>That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
Expand Down
11 changes: 6 additions & 5 deletions catalog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@
</div>
<div class="col-18">
<h1>Catalog bricks</h1>
<p>A best way to use Font Awesome icons</p>
<div class="breadcrumbs"><a href="index.html">Main page</a><a href="components.html">Components</a><a href="catalog.html">Catalog</a>
</div>
<hr>
<h2>Coloured bricks</h2>
<p>The best way to use Font Awesome icons</p>
<div class="nav-bricks">
<div class="grid">
<div class="col-6"><a href="#stayhere" class="item"><span class="icon bg-dark-gray-dark"><i class="fa fa-globe color-cold-light"></i></span><span class="text">Travel worldwide</span></a></div>
Expand All @@ -37,7 +41,7 @@ <h1>Catalog bricks</h1>
<div class="col-4"><a href="#" class="colorable"><i class="fa fa-paint-brush"></i>&nbsp;Colorable</a></div>
</div>
<hr>
<h1>How about transparent?</h1>
<h2>How about transparent?</h2>
<p>They are so nice, really</p>
<div class="nav-bricks">
<div class="grid">
Expand Down Expand Up @@ -111,16 +115,13 @@ <h1>How about transparent?</h1>
<div id="tabs-popup" class="tabs fat"><i class="marker"></i><a href="#about" class="active">About</a><a href="#contacts">Contacts</a><a href="#media">Media</a></div>
<div id="tabs-popup-content" class="tabs-content">
<div data-role="tab-page" data-tab="about" class="page">
<h2>About content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
<div data-role="tab-page" data-tab="contacts" class="page active">
<h2>Contacts content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.</p>
<p>That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
<div data-role="tab-page" data-tab="media" class="page">
<h2>Media content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.</p>
<p>That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
Expand Down
9 changes: 5 additions & 4 deletions checkers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@
</div>
<div class="col-18">
<h1>Checkers</h1>
<p>Everybody loves checkboxes, but needs some other things too</p>
<div class="breadcrumbs"><a href="index.html">Main page</a><a href="components.html">Components</a><a href="checkers.html">Checkers</a>
</div>
<hr>
<h2>Useful checkers</h2>
<p>Everybody loves checkboxes, but everybody wants some other thing</p>
<div id="sample-checker" class="checker"><a href="#" class="active">Activated checker</a><a href="#" data-active-class="bg-mid-dark" class="text-center"><i class="fa fa-facebook"></i></a><a href="#" data-active-class="bg-heat-light" class="text-center"><i class="fa fa-google-plus"></i></a><a href="#" data-active-class="bg-cold-dark" class="text-center"><i class="fa fa-twitter"></i></a><a href="#" data-active-class="bg-mid-light" class="text-center"><i class="fa fa-vk"></i></a><a href="#" data-active-class="bg-heat-dark" class="text-center"><i class="fa fa-youtube"></i></a><a href="#" data-toggled-content="On">Off</a></div>
<div class="grid">
<div class="col-4"><a href="#" class="code"><i class="fa fa-code"></i>&nbsp;The code</a></div>
Expand Down Expand Up @@ -88,16 +92,13 @@ <h1>Checkers</h1>
<div id="tabs-popup" class="tabs fat"><i class="marker"></i><a href="#about" class="active">About</a><a href="#contacts">Contacts</a><a href="#media">Media</a></div>
<div id="tabs-popup-content" class="tabs-content">
<div data-role="tab-page" data-tab="about" class="page">
<h2>About content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
<div data-role="tab-page" data-tab="contacts" class="page active">
<h2>Contacts content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.</p>
<p>That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
<div data-role="tab-page" data-tab="media" class="page">
<h2>Media content</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.</p>
<p>That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
Expand Down
Loading

0 comments on commit 590c158

Please sign in to comment.