diff options
| author | Mohamed <jeblister@gmail.com> | 2017-04-13 20:40:58 +0300 |
|---|---|---|
| committer | Mohamed <jeblister@gmail.com> | 2017-04-13 20:40:58 +0300 |
| commit | bae833e6f8d24c6f1fe0f2be3c2465924357258a (patch) | |
| tree | 2024775d3a7ceaf0728bf9ddfe061416655b513f | |
| parent | 37b4182fe4587f456a2ac9bfbf420cb29b273552 (diff) | |
fix name and a data structure of contentsv1.0.1
66 files changed, 7 insertions, 10981 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index bc13ec9..280e9e4 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -1,7 +1,7 @@ baseURL = "/" languageCode = "en-us" title = "Kube for Hugo" -theme = "kube-hugo" +theme = "kube" description = "Kube is a professional and a responsive Hugo theme for developers and designers that offers a documentation section mixed with a landing page and a blog" Paginate = 4 [Params] diff --git a/exampleSite/content/blog/collapse.md b/exampleSite/content/blog/collapse.md index cf4c18a..55e431b 100644 --- a/exampleSite/content/blog/collapse.md +++ b/exampleSite/content/blog/collapse.md @@ -4,7 +4,8 @@ draft = false weight = 180 description = "Smoothly and reliably collapse elements for extra convenience" title = "Collapse" -bref="A demo to collapsable elements" +bref = "A demo to collapsable elements" + +++ <h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> diff --git a/exampleSite/content/blog/content/account.md b/exampleSite/content/blog/content/account.md deleted file mode 100644 index ad1f583..0000000 --- a/exampleSite/content/blog/content/account.md +++ /dev/null @@ -1,20 +0,0 @@ -+++
-title = "Sign In"
-+++
-<form action="" data-component="validate" method="post" class="form form-centered"><input type="hidden" name="authorize-token" value="">
-
- <div class="form-item">
- <label>Email <span id="user-email-validation-error"></span></label>
- <input type="email" name="user-email" autofocus="true" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
- </div>
-
- <div class="form-item">
- <label>Password <span id="user-password-validation-error"></span></label>
- <input type="password" name="user-password" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
- </div>
-
- <p><button class="button primary width-100">Log in</button></p>
- <p><a href="/password-recovery/" class="small muted">Forgot password?</a></p>
- <p class="small">If you have any questions about authorization or you're our customer but haven't receive your login credentials, just send us a short email at <b>support@company.com</b> and we'll fix it right away.</p>
-
-</form>
diff --git a/exampleSite/content/blog/content/blog/collapse.md b/exampleSite/content/blog/content/blog/collapse.md deleted file mode 100644 index 3f80b38..0000000 --- a/exampleSite/content/blog/content/blog/collapse.md +++ /dev/null @@ -1,207 +0,0 @@ -+++ -++ -date = "2017-04-10T16:42:50+01:00" -draft = false -weight = 180 -description = "Smoothly and reliably collapse elements for extra convenience" -title = "Collapse" -bref="A demo to collapsable elements" -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <div class="my-collapse" data-component="collapse" id="my-collapse"> - <h4><a class="collapse-toggle" href="#collapse-box-1">Item 1</a></h4> - <div class="collapse-box hide" id="collapse-box-1"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#collapse-box-2">Item 2</a></h4> - <div class="collapse-box" id="collapse-box-2"> - <p>I look active on load.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#collapse-box-3">Item 3</a></h4> - <div class="collapse-box hide" id="collapse-box-3"> - <h6>Important Heading</h6> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - </div> - -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-collapse"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-navigation-example"><a href="#h-navigation-example">Navigation Example</a></h3> -<p>Here you can see a list of items forming a navigation menu, with a nested list which acts as a collapsable element</p> -<div class="example"> - <ul id="demo-nav-collapse"> - <li> - <a href="#">Installation</a> - </li> - <li> - <a href="#">Configuration</a> - </li> - <li> - <a href="#">Adding Content</a> - </li> - <li> - <a href="#">Templates</a> - </li> - <li data-component="collapse"> - <a class="collapse-toggle" href="#languages-box-2">Languages <span class="caret down"></span></a> - <ul class="collapse-box" id="languages-box-2"> - <li> - <a href="#">Setup</a> - </li> - <li> - <a href="#">Translating content</a> - </li> - <li> - <a href="#">Language variables</a> - </li> - <li> - <a href="#">Supporting RTL</a> - </li> - </ul> - </li> - <li> - <a href="#">Settings</a> - </li> - <li> - <a href="#">Callbacks</a> - </li> - <li> - <a href="#">API</a> - </li> - </ul> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#toggle-box"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span> - Toggle - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"toggle-box"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<p>Settings are pretty straightforward: you can toggle, denote active element, turn animation on and off, and more.</p> -<h5>toggle</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<h5>active</h5> -<ul> - <li>Type: <var>string or boolean</var></li> - <li>Default: <var>false</var></li> -</ul> -<h5>toggleClass</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'collapse-toggle'</var></li> -</ul> -<p>Sets a class of a collapsable object.</p> -<h5>boxClass</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'collapse-box'</var></li> -</ul> -<p>Sets a class for collapsable object's content</p> -<h5>animation</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Turns animation on and off.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'open.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'opened.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'close.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'closed.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h3 class="section-head" id="h-api"><a href="#h-api">API</a></h3> -<p>We love APIs, and for interactive elements such as collapsable elements we offer ways to programmatically open and close individual elements, or all at once.</p> -<div class="example"> - <p><button class="button outline" onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('openAll');">Open All</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button></p><br> - <div class="my-collapse" data-component="collapse" id="my-collapse-api"> - <h4><a class="collapse-toggle" href="#box-1">Item 1</a></h4> - <div class="collapse-box hide" id="box-1"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#box-2">Item 2</a></h4> - <div class="collapse-box hide" id="box-2"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#box-3">Item 3</a></h4> - <div class="collapse-box hide" id="box-3"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('open', '#box-2');"</span>></span>Open<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('close', '#box-2');"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('openAll');"</span>></span>Open All<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('closeAll');"</span>></span>Close All<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-collapse-api"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h5>open</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'open'</span>); -</pre> -<h5>close</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'close'</span>); -</pre> -<h5>openAll</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'openAll'</span>); -</pre> -<h5>closeAll</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'closeAll'</span>); -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/account.md b/exampleSite/content/blog/content/blog/content/account.md deleted file mode 100644 index ad1f583..0000000 --- a/exampleSite/content/blog/content/blog/content/account.md +++ /dev/null @@ -1,20 +0,0 @@ -+++
-title = "Sign In"
-+++
-<form action="" data-component="validate" method="post" class="form form-centered"><input type="hidden" name="authorize-token" value="">
-
- <div class="form-item">
- <label>Email <span id="user-email-validation-error"></span></label>
- <input type="email" name="user-email" autofocus="true" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
- </div>
-
- <div class="form-item">
- <label>Password <span id="user-password-validation-error"></span></label>
- <input type="password" name="user-password" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
- </div>
-
- <p><button class="button primary width-100">Log in</button></p>
- <p><a href="/password-recovery/" class="small muted">Forgot password?</a></p>
- <p class="small">If you have any questions about authorization or you're our customer but haven't receive your login credentials, just send us a short email at <b>support@company.com</b> and we'll fix it right away.</p>
-
-</form>
diff --git a/exampleSite/content/blog/content/blog/content/blog/collapse.md b/exampleSite/content/blog/content/blog/content/blog/collapse.md deleted file mode 100644 index cf4c18a..0000000 --- a/exampleSite/content/blog/content/blog/content/blog/collapse.md +++ /dev/null @@ -1,206 +0,0 @@ -+++ -date = "2017-04-10T16:42:50+01:00" -draft = false -weight = 180 -description = "Smoothly and reliably collapse elements for extra convenience" -title = "Collapse" -bref="A demo to collapsable elements" -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <div class="my-collapse" data-component="collapse" id="my-collapse"> - <h4><a class="collapse-toggle" href="#collapse-box-1">Item 1</a></h4> - <div class="collapse-box hide" id="collapse-box-1"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#collapse-box-2">Item 2</a></h4> - <div class="collapse-box" id="collapse-box-2"> - <p>I look active on load.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#collapse-box-3">Item 3</a></h4> - <div class="collapse-box hide" id="collapse-box-3"> - <h6>Important Heading</h6> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - </div> - -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-collapse"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-navigation-example"><a href="#h-navigation-example">Navigation Example</a></h3> -<p>Here you can see a list of items forming a navigation menu, with a nested list which acts as a collapsable element</p> -<div class="example"> - <ul id="demo-nav-collapse"> - <li> - <a href="#">Installation</a> - </li> - <li> - <a href="#">Configuration</a> - </li> - <li> - <a href="#">Adding Content</a> - </li> - <li> - <a href="#">Templates</a> - </li> - <li data-component="collapse"> - <a class="collapse-toggle" href="#languages-box-2">Languages <span class="caret down"></span></a> - <ul class="collapse-box" id="languages-box-2"> - <li> - <a href="#">Setup</a> - </li> - <li> - <a href="#">Translating content</a> - </li> - <li> - <a href="#">Language variables</a> - </li> - <li> - <a href="#">Supporting RTL</a> - </li> - </ul> - </li> - <li> - <a href="#">Settings</a> - </li> - <li> - <a href="#">Callbacks</a> - </li> - <li> - <a href="#">API</a> - </li> - </ul> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#toggle-box"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span> - Toggle - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"toggle-box"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<p>Settings are pretty straightforward: you can toggle, denote active element, turn animation on and off, and more.</p> -<h5>toggle</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<h5>active</h5> -<ul> - <li>Type: <var>string or boolean</var></li> - <li>Default: <var>false</var></li> -</ul> -<h5>toggleClass</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'collapse-toggle'</var></li> -</ul> -<p>Sets a class of a collapsable object.</p> -<h5>boxClass</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'collapse-box'</var></li> -</ul> -<p>Sets a class for collapsable object's content</p> -<h5>animation</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Turns animation on and off.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'open.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'opened.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'close.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'closed.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h3 class="section-head" id="h-api"><a href="#h-api">API</a></h3> -<p>We love APIs, and for interactive elements such as collapsable elements we offer ways to programmatically open and close individual elements, or all at once.</p> -<div class="example"> - <p><button class="button outline" onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('openAll');">Open All</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button></p><br> - <div class="my-collapse" data-component="collapse" id="my-collapse-api"> - <h4><a class="collapse-toggle" href="#box-1">Item 1</a></h4> - <div class="collapse-box hide" id="box-1"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#box-2">Item 2</a></h4> - <div class="collapse-box hide" id="box-2"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#box-3">Item 3</a></h4> - <div class="collapse-box hide" id="box-3"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('open', '#box-2');"</span>></span>Open<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('close', '#box-2');"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('openAll');"</span>></span>Open All<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('closeAll');"</span>></span>Close All<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-collapse-api"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h5>open</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'open'</span>); -</pre> -<h5>close</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'close'</span>); -</pre> -<h5>openAll</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'openAll'</span>); -</pre> -<h5>closeAll</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'closeAll'</span>); -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/blog/inline-style.md b/exampleSite/content/blog/content/blog/content/blog/inline-style.md deleted file mode 100644 index 02623be..0000000 --- a/exampleSite/content/blog/content/blog/content/blog/inline-style.md +++ /dev/null @@ -1,10 +0,0 @@ -+++ -date = "2017-04-02T21:56:55+01:00" -title = "Inline 🐣Text Styles" -tags = ["markdown","example"] -categories = ["general"] -draft = false -description = "This article is just a demo." -+++ - -Chocolate tiramisu pastry a link cotton candy sesame snaps. Dessert cake chocolate bar a bold part sugar plum bonbon marshmallow lollipop toffee soufflé. Donut caramels chocolate bar. Oat cake cookie a marked part cheesecake donut. Jelly-o <some> $code marzipan cake. Bonbon sesame snaps chocolate an italic part oat cake pudding sweet roll caramels bonbon. Soufflé muffin 👻 gummies sugar plum dessert bonbon bear claw. Sweet ice cream jujubes. Marzipan sugar plum pastry chocolate ⌘+A bar fruitcake. Lollipop lollipop brownie.
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/blog/messages.md b/exampleSite/content/blog/content/blog/content/blog/messages.md deleted file mode 100644 index 5b884b7..0000000 --- a/exampleSite/content/blog/content/blog/content/blog/messages.md +++ /dev/null @@ -1,158 +0,0 @@ -+++ -date = "2017-04-10T16:41:34+01:00" -draft = false -weight = 90 -description = "Versatile and refined messages, ideal for daily use" -title = "Messages" -bref = "Messages are an essential part of modern web and messages in Kube look nice" -+++ - -<h3 class="section-head" id="h-usage"><a href="#h-usage">Usage</a></h3> -<div class="example"> - <div class="message open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="#install">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message error open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message error"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message success open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message success"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message warning open" data-component="message" data-loaded="true"> - <h5>Warning!</h5>You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"message warning"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"message"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h5</span>></span> - ... - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close small"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<div class="example"> - <div class="message focus open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message focus"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message black open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small white"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message black"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message inverted open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message inverted"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<h3 class="section-head" id="h-options"><a href="#h-options">Options</a></h3> -<table> - <thead> - <tr> - <th class="w30">Name</th> - <th class="w30">Type</th> - <th class="w40">Default</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>closeSelector</code></td> - <td><var>string</var></td> - <td>.close</td> - </tr> - <tr> - <td><code>closeEvent</code></td> - <td><var>string</var></td> - <td>click</td> - </tr> - <tr> - <td><code>animationOpen</code></td> - <td><var>string</var></td> - <td>fadeIn</td> - </tr> - <tr> - <td><code>animationClose</code></td> - <td><var>string</var></td> - <td>fadeOut</td> - </tr> - </tbody> -</table> -<h4>Set an option</h4> -<p>Via data attribute:</p> -<pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"message"</span> data-component=<span class="hljs-string">"message"</span> data-close-selector=<span class="hljs-string">".my-custom-close"</span>> - ... <span <span class="hljs-built_in">class</span>=<span class="hljs-string">"my-custom-close small"</span>></span> -</<span class="hljs-keyword">div</span>> -</pre> -<p>Via Javascript:</p> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-message'</span>).message({ - <span class="hljs-symbol">closeSelector:</span> <span class="hljs-string">'.my-custom-close'</span> -}); -</pre> -<h3 class="section-head" id="h-methods"><a href="#h-methods">Methods</a></h3> -<p><button onclick="$('#message-1').message('open')">Open</button> <button onclick="$('#message-1').message('close')">Close</button></p> -<div class="message open" data-component="message" data-loaded="true" id="message-1"> - You have 2 modules waiting to installation. <a href="#install">Install</a> <span class="close small"></span> -</div> -<table> - <thead> - <tr> - <th>Method</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>close</code></td> - <td>Manually closes a message.</td> - </tr> - <tr> - <td><code>open</code></td> - <td>Opens a message if it has been closed.</td> - </tr> - </tbody> -</table> -<h4>Example</h4> -<pre class="code">$(<span class="hljs-string">'#my-message'</span>).<span class="hljs-keyword">message</span>(<span class="hljs-string">'close'</span>);</pre> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<table> - <thead> - <tr> - <th>Callback</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>open</code></td> - <td>This event fires immediately when the open instance method is called.</td> - </tr> - <tr> - <td><code>opened</code></td> - <td>This event is fired when the message has been opened, will wait for CSS animation to complete.</td> - </tr> - <tr> - <td><code>close</code></td> - <td>This event fires immediately when the close instance method is called.</td> - </tr> - <tr> - <td><code>closed</code></td> - <td>This event is fired when the message has been closed, will wait for CSS animation to complete.</td> - </tr> - </tbody> -</table> -<h4>Example</h4> -<pre class="code skip">$(<span class="hljs-string">'#my-message'</span>).on(<span class="hljs-string">'closed.message'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something</span> -}) -</pre> diff --git a/exampleSite/content/blog/content/blog/content/blog/prototyping.md b/exampleSite/content/blog/content/blog/content/blog/prototyping.md deleted file mode 100644 index f55d46a..0000000 --- a/exampleSite/content/blog/content/blog/content/blog/prototyping.md +++ /dev/null @@ -1,23 +0,0 @@ -+++ -date = "2017-04-02T22:01:15+01:00" -title = "Prototyping with markdown" -tags = ["markdown","prototype", "hugo"] -categories = ["design"] -description = "An idea to make website protoype with markdown" -draft = false -weight = 30 -+++ - -<img data-src="https://cldup.com/3tov0aCFh8.png" class="lazyload"> - -I have been working on a large set of documentation for a prototype that will eventually make it into a product. One issue with the publishing system at my company is that it makes doing prototypes, or really anything not within the rigidly and narrowly scoped model, difficult to set up. It takes a lot of work just to get to the point where you can begin writing. - -Since time was of the essence and writing is expensive, I decided to do the prototype outside of the publishing system. I also decided to avoid using the rigid DocBook variant we use. Instead, **I figured I do the prototype in Markdown using Hugo generator**. It gives me reasonably ~full featured Markdown support, flexibility to work wherever I want, easy HTML~ ,nd the stack/sheet metaphor fits nicely with topic based writing. - - -I wasn't sure how well the experiment was going to work when I started, but a few weeks in I think it is great. ~I was able to rapidly prototype fifteen topics in about ten days.~ The prototype pages look fairly close to what our actual system generates. ~I can quickly make changes to the content as needed and republish.~ ~The fact that I can work multi-platform is great. I am not chained to my desk. I can demo changes easily.~ - - -~The fact that I am working in text that doesn't have to be structured in a rigid format makes the work flow faster~. It provides flexibility for quick changes, yet also allows for topic orientation. -For final production and long term maintenance, unstructured Markdown is not a great solution. There the benefits of the rigidity outweigh the cost. The rigidity enforces uniformity that large groups of variously skilled writers need to create and maintain content at scale. -> For small, fast projects or prototyping Markdown, with Hugo, have proven to be an excellent solution.
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/blog/typography.md b/exampleSite/content/blog/content/blog/content/blog/typography.md deleted file mode 100644 index 0ba5e39..0000000 --- a/exampleSite/content/blog/content/blog/content/blog/typography.md +++ /dev/null @@ -1,452 +0,0 @@ -+++ -title = "Typography with kube" -weight = 25 -draft = false -description = "Always precise spacing and perfect font size" -bref = "Typography is perhaps one of the most important and most visible things on a web page. Even slightest imperfection can ruin otherwise perfect website. With Kube, you will have perfect typography with ideal spacing, font sizes and proportions, regardless of the exact style or font you choose for your site." -weight = 20 -+++ - -<h3 class="section-head" id="h-get-started"><a href="#h-get-started">Get Started</a></h3> -<p>Typography of Kube based on the 4px horizontal grid, it means that for the headers, paragraphs, quotes and any other texts chosen are a combination of line-height, that fit into the 4px grid and help set the horizontal rhythm of design by default.</p> -<figure> - <img alt="4px horizontal rhythm" height="180" src="/img/kube/typography/01.png" width="676"> - <figcaption> - 4px grid for typography - the magic of the horizontal rhythm - </figcaption> -</figure> -<p>With this feature, you can quickly and easily make a solid and harmonious-looking website and UI design. You do not need to do complicated calculations to find the size and proportions of the text baseline, no need to look for the magic formula to build a horizontal rhythm. Magic is already in Kube.</p> -<p>You can use all the default settings of typography and it will always look balanced. But also you can easily change any font sizes, just try to set the value of line-height fold for 4px and your texts will still look great.</p> -<p>Additional balance and harmony, creates a classic typography scale, used in Kube.</p> -<figure> - <img alt="the typography scale" height="140" src="/img/kube/typography/02.png" width="520"> - <figcaption> - The typography scale helps to build a balance between the size of headings and text elements - </figcaption> -</figure> -<h3 class="section-head" id="h-headings"><a href="#h-headings">Headings</a></h3> -<p>Use h1-h6 tags or <code>.h1-.h6</code> classes to define headers and <code>class="title"</code> for the title, which is suitable for the most important inscriptions, for example, in the hero or covers.</p> -<div class="example"> - <h1 class="title">Title</h1> - <h1>Heading 1</h1> - <h2>Heading 2</h2> - <h3>Heading 3</h3> - <h4>Heading 4</h4> - <h5>Heading 5</h5> - <h6>Heading 6</h6> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> -<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> -... -<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></pre> -</div> -<h3 class="section-head" id="h-paragraphs"><a href="#h-paragraphs">Paragraphs</a></h3> -<p>The base pragraph has an ideal ratio of font size and baseline. This text is easy to read in most cases.</p> -<div class="example"> - <p class="section-item-desc">16px/24px</p> - <p>By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<p>In special cases, you can use modifiers which increase or decrease the text size. It is useful for building a variety of websites and UI, when you need to make a lead text or signatures with a small font size .</p> -<div class="example"> - <p class="section-item-desc">20px/32px</p> - <p class="large">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<div class="example"> - <p class="section-item-desc">18px/28px</p> - <p class="big">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"big"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<div class="example"> - <p class="section-item-desc">14px/20px</p> - <p class="small">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<div class="example"> - <p class="section-item-desc">12px/20px</p> - <p class="smaller">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"smaller"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<h3 class="section-head" id="h-columns"><a href="#h-columns">Columns</a></h3> -<p>Kube has three classes of <code>.columns-2</code> through <code>.columns-4</code> to create a multi-column layout. All multi-column layouts will be in a single column on mobile.</p> -<div class="example"> - <p class="section-item-desc">2 columns</p> - <div class="columns-2"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns-2"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<div class="example"> - <p class="section-item-desc">3 columns</p> - <div class="columns-3"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns-3"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<div class="example"> - <p class="section-item-desc">4 columns</p> - <div class="columns-4"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns-4"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-quotes"><a href="#h-quotes">Quotes</a></h3> -<p>Quotes in the text stand out for contrast and added variety to the text. In the quotes you can mark text as a paragraph tag and without it.</p> -<div class="example"> - <blockquote> - <p>No, she'll probably make me do it. Goodbye, friends. I never thought I'd die like this. But I always really hoped. I saw you with those two "ladies of the evening" at Elzars. Explain that. I never loved you.</p> - </blockquote> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span>...<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span></pre> -</div> -<p>Use <code>small</code> tag for attribution. It's a prefer way for semantic code.</p> -<div class="example"> - <blockquote> - <p>Who's brave enough to fly into something we all keep calling a death sphere? Yes. You gave me a dollar and some candy. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.</p><small>— Bender</small> - </blockquote> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Quotation content<span class="hljs-tag"></<span class="hljs-name">p</span>></span> - <span class="hljs-tag"><<span class="hljs-name">small</span>></span>Author attribution<span class="hljs-tag"></<span class="hljs-name">small</span>></span> -<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-pre-formatted"><a href="#h-pre-formatted">Pre-formatted</a></h3> -<p>Pre-formatted text most often used to display code snippets or other text elements, for which you wish to preserve the exact formatting they've got.</p> -<div class="example"> - <pre>Function.prototype.inherits = function(parent) -{ - for (var key in parent.prototype) - { - this.prototype[key] = parent.prototype[key]; - } -}; -</pre> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">pre</span>></span>...<span class="hljs-tag"></<span class="hljs-name">pre</span>></span></pre> -</div> -<p>You feel free to use <code>code</code> tag inside <code>pre</code>.</p> -<div class="example"> - <pre class="demo-pre"><code>Function.prototype.inherits = function(parent) -{ - for (var key in parent.prototype) - { - this.prototype[key] = parent.prototype[key]; - } -}; -</code></pre> - <pre class="code"><pre><span class="xml"><span class="hljs-tag"><<span class="hljs-name">code</span>></span>...<span class="hljs-tag"></<span class="hljs-name">code</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">pre</span>></span></span></pre> -</div> -<h3 class="section-head" id="h-inline-elements"><a href="#h-inline-elements">Inline Elements</a></h3> -<p>Kube features various inline formatting elements. They all have their own semantic meaning, but you're free to use them just for their style.</p> -<table> - <thead> - <tr> - <th>Example</th> - <th>Tag</th> - <th>Example</th> - <th>Tag</th> - </tr> - </thead> - <tbody> - <tr> - <td><abbr title="Cascading Style Sheets">CSS</abbr></td> - <td class="col-6"><code><abbr></code></td> - <td><cite>Cite</cite></td> - <td class="col-6"><code><cite></code></td> - </tr> - <tr> - <td><code>Code</code></td> - <td><code><code></code></td> - <td><samp>Sample</samp></td> - <td><code><samp></code></td> - </tr> - <tr> - <td><var>Variable</var></td> - <td><code><var></code></td> - <td><mark>Mark</mark></td> - <td><code><mark></code></td> - </tr> - <tr> - <td><kbd>Shortcut</kbd></td> - <td><code><kbd></code></td> - <td> - <del>Deleted</del> - </td> - <td><code><del></code></td> - </tr> - <tr> - <td><i>Italic</i></td> - <td><code><i></code></td> - <td><em>Emphasis</em></td> - <td><code><em></code></td> - </tr> - <tr> - <td><strong>Highlighted</strong></td> - <td><code><strong></code></td> - <td><b>Bold</b></td> - <td><code><b></code></td> - </tr> - <tr> - <td>x<sup>superscript</sup></td> - <td><code><sup></code></td> - <td>x<sub>subscript</sub></td> - <td><code><sub></code></td> - </tr> - <tr> - <td><small>Small</small></td> - <td><code><small></code></td> - <td> - <ins>Inserted</ins> - </td> - <td><code><ins></code></td> - </tr> - </tbody> -</table> -<h3 class="section-head" id="h-modifiers"><a href="#h-modifiers">Modifiers</a></h3> -<p>Modifiers - a set of helper classes for creating accents in the text and for the solution of useful tasks without writing CSS code, for example, the alignment of the text in the center.</p> -<p>Modifiers can be applied to any tags as inline elements, links or block tags.</p> -<table> - <thead> - <tr> - <th>Example</th> - <th>Modifier</th> - </tr> - </thead> - <tbody> - <tr> - <td><span class="muted">Muted</span></td> - <td class="col-12"><code>.muted</code></td> - </tr> - <tr> - <td> - <a class="muted" href="#">Muted link</a> - </td> - <td><code>.muted</code></td> - </tr> - <tr> - <td> - <a class="black" href="#">Black link</a> - </td> - <td><code>.black</code></td> - </tr> - <tr> - <td><span class="highlight">Highlight</span></td> - <td><code>.highlight</code></td> - </tr> - <tr> - <td><span class="upper">upper</span></td> - <td><code>.upper</code></td> - </tr> - <tr> - <td><span class="lower">LOWER</span></td> - <td><code>.lower</code></td> - </tr> - <tr> - <td><span class="italic">Italic</span></td> - <td><code>.italic</code></td> - </tr> - <tr> - <td><span class="strong">Strong</span></td> - <td><code>.strong</code></td> - </tr> - <tr> - <td><strong class="normal">Not strong</strong></td> - <td><code>.normal</code></td> - </tr> - <tr> - <td><span class="monospace">Monospace</span></td> - <td><code>.monospace</code></td> - </tr> - <tr> - <td><span class="nowrap">Nowrap</span></td> - <td><code>.nowrap</code></td> - </tr> - <tr> - <td class="nowrap">Remove margin bottom</td> - <td><code>.end</code></td> - </tr> - <tr> - <td><span class="highlight">Highlight</span></td> - <td><code>.highlight</code></td> - </tr> - <tr> - <td><span class="small">Small</span></td> - <td><code>.small</code></td> - </tr> - <tr> - <td><span class="smaller">Smaller</span></td> - <td><code>.smaller</code></td> - </tr> - <tr> - <td><span class="large">Large</span></td> - <td><code>.large</code></td> - </tr> - <tr> - <td><span class="big">Big</span></td> - <td><code>.big</code></td> - </tr> - <tr> - <td class="text-left">Text left</td> - <td><code>.text-left</code></td> - </tr> - <tr> - <td class="text-center">Text center</td> - <td><code>.text-center</code></td> - </tr> - <tr> - <td class="text-right">Text right</td> - <td><code>.text-right</code></td> - </tr> - </tbody> -</table> -<h3 class="section-head" id="h-figure"><a href="#h-figure">Figure</a></h3> -<p>A figure tag features an image, a video or a code plus a caption. It is a good accessibility practice. It also helps serve responsive video to various devices when you wrap video into <code>.video-container</code> class.</p> -<h5>Images</h5> -<figure> - <img alt="Image" height="533" src="/img/favicons/logo-384x384.png" width="800"> - <figcaption> - Lorem ipsum dolor sit amet, consectetur adipisicing elit... - </figcaption> -</figure> -<p class="end"><var>HTML</var></p> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -</pre> -<h5>Video</h5> -<figure> - <div class="video-container"> - <iframe allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/nywsA8wCCfY" width="560"></iframe> - </div> - <figcaption> - Journey Through The Ice | National Geographic - </figcaption> -</figure> -<p class="end"><var>HTML</var></p> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">iframe</span>></span>...<span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -</pre> -<h5>Code</h5> -<figure> - <pre>Function.prototype.inherits = function(parent) -{ - for (var key in parent.prototype) - { - this.prototype[key] = parent.prototype[key]; - } -}; -</pre> - <figcaption> - One of the implementations of inheritance - </figcaption> -</figure> -<p class="end"><var>HTML</var></p> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">pre</span>></span>...<span class="hljs-tag"></<span class="hljs-name">pre</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -</pre> -<h3 class="section-head" id="h-lists"><a href="#h-lists">Lists</a></h3> -<p>Although you most likely will not ever need to do so, you can still nest as many list levels as you like.</p> -<div class="row gutters"> - <div class="col col-6"> - <div class="example"> - <ul> - <li>list item 1</li> - <li>list item 2 - <ul> - <li>list item 2.1</li> - <li>list item 2.2 - <ul> - <li>list item 2.2.1</li> - <li>list item 2.2.2</li> - </ul> - </li> - <li>list item 2.3</li> - <li>list item 2.4</li> - </ul> - </li> - <li>list item 3</li> - <li>list item 4</li> - </ul> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</pre> - </div> - </div> - <div class="col col-6"> - <div class="example"> - <ol> - <li>list item 1</li> - <li>list item 2 - <ol> - <li>list item 2.1</li> - <li>list item 2.2 - <ol> - <li>list item 2.2.1</li> - <li>list item 2.2.2</li> - </ol> - </li> - <li>list item 2.3</li> - <li>list item 2.4</li> - </ol> - </li> - <li>list item 3</li> - <li>list item 4</li> - </ol> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ol</span>></span> -</pre> - </div> - </div> -</div> -<h5>Unstyled List</h5> -<p>To remove default list styling, use <code>.unstyled</code>.</p> -<div class="example"> - <ul class="unstyled"> - <li>list item 1</li> - <li>list item 2 - <ul> - <li>list item 2.1</li> - <li>list item 2.2</li> - </ul> - </li> - <li>list item 3</li> - <li>list item 4</li> - </ul> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"unstyled"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</pre> -</div> -<h5>Definition List</h5> -<p>From time to time, you may need to produce a list of definitions, and there's one nicely built-in into Kube. We love semantic things. And lists. We love lists.</p> -<div class="example"> - <dl> - <dt>Term 1</dt> - <dd>Description 1</dd> - <dt>Term 2</dt> - <dd>Description 2</dd> - <dt>Term 3</dt> - <dd>Description 3</dd> - </dl> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">dl</span>></span> - <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>Term<span class="hljs-tag"></<span class="hljs-name">dt</span>></span> - <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>Description<span class="hljs-tag"></<span class="hljs-name">dd</span>></span> -<span class="hljs-tag"></<span class="hljs-name">dl</span>></span> -</pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/blog/welcome.md b/exampleSite/content/blog/content/blog/content/blog/welcome.md deleted file mode 100644 index 9d8217f..0000000 --- a/exampleSite/content/blog/content/blog/content/blog/welcome.md +++ /dev/null @@ -1,85 +0,0 @@ -+++ -date = "2017-03-02T21:56:55+01:00" -title = "Welcome to Kube" -tags = ["markdown","example"] -categories = ["general"] -draft = false -description = "This article is just a demo post and shows you the style of common used elements writing in pure markdown without HTML code." -weight = 10 -+++ - -# Welcome to Kube – an open source documentation like theme for Hugo - -Hi there and welcome to kube - my two theme for the static site generator [hugo](https://gohugo.io/). kube is open source and can be found on [kube](https://kube.elemnts.org/). This article is just a demo post and shows you the style of common used elements. - -Bear claw danish chocolate lollipop soufflé jelly. Apple pie chocolate cake -jelly-o icing bonbon. Gingerbread pastry fruitcake muffin chocolate bar -cheesecake. Sugar plum bonbon bonbon lemon drops gummies. - -## Inline 🦄 Text Styles [a link](http://kube.elemnts.org) - -Chocolate tiramisu pastry [a link](http://zutrinken.com) cotton candy sesame snaps. Dessert cake chocolate bar **a bold part** sugar plum bonbon 🐓💨 marshmallow lollipop toffee soufflé. Donut caramels chocolate bar. Oat cake cookie <mark>a marked part</mark> cheesecake donut. Jelly-o `<some> $code` marzipan cake. Bonbon sesame snaps chocolate _an italic part_ oat cake pudding sweet roll caramels bonbon. Soufflé muffin 👻 gummies sugar plum dessert bonbon bear claw. Sweet ice cream jujubes. Marzipan sugar plum pastry chocolate <kbd>⌘</kbd>+<kbd>A</kbd> bar fruitcake. Lollipop lollipop brownie. - -## Ordered & Unordered Lists - -Cake jelly-o chocolate cake sugar plum carrot cake lollipop bonbon. Jelly beans pudding oat cake pie. - -* Jelly beans pudding oat cake pie. -* Cupcake cupcake oat cake candy lemon -* Drops marzipan icing. Dessert topping croissant fruitcake sesame snaps cotton candy sweet danish -* Sweet roll sweet sugar plum donut - * Bear claw gingerbread cake donut chocolate bar - * Topping cake fruitcake fruitcake -* Ice cream icing chupa chups cupcake jelly-o candy -* Croissant jujubes topping tart soufflé pudding - * Cheesecake caramels icing - * Cake jelly-o chocolate cake sugar plum carrot cake lollipop bonbon - -Ice cream icing chupa chups cupcake jelly-o candy. Croissant jujubes topping tart soufflé pudding. Cheesecake caramels icing. - -1. Drops marzipan icing. Dessert topping croissant fruitcake sesame snaps cotton candy sweet danish -* Sweet roll sweet sugar plum donut - * Bear claw gingerbread cake donut chocolate bar - * Topping cake fruitcake fruitcake -3. Ice cream icing chupa chups cupcake jelly-o candy - -Liquorice marshmallow sweet macaroon. Cotton candy pastry ice cream fruitcake tiramisu jelly beans dragée. - -<dl><dt>Ice cream</dt><dd>icing chupa chups cupcake jelly-o candy. Croissant jujubes topping tart soufflé pudding</dd><dt>Cake</dt><dd>Jelly beans pudding oat cake pie</dd><dt>Drops marzipan icing</dt><dd>Cake jelly-o chocolate cake sugar plum carrot cake lollipop</dd></dl> - -Soufflé tart topping gummi bears jujubes lollipop ice cream pudding. Apple pie jelly-o powder powder sweet. - -Cake soufflé icing gingerbread topping jujubes. Chocolate cake pudding sweet biscuit cake. Soufflé tart topping gummi bears jujubes lollipop ice cream pudding. Apple pie jelly-o powder powder sweet. Halvah chocolate bar cotton candy sugar plum cake. - -## Tables, Blockquotes and Codeblocks - -Apple pie chocolate cake jelly-o icing bonbon. Gingerbread pastry fruitcake muffin chocolate bar cheesecake. Sugar plum bonbon bonbon lemon drops gummies. - -| RGB | WMYN | -|---|---| -| Red | Cyan | -| Green | Magenta | -| Yellow | Black | - - -Brownie oat cake tart caramels croissant lollipop pastry soufflé lemon drops. Cotton candy pastry ice cream fruitcake tiramisu jelly beans dragée. - -> Jelly beans dessert toffee caramels brownie ice cream croissant chupa chups liquorice. Danish sweet roll croissant. Powder sugar plum powder danish wafer cake. -> -> Candy jelly beans jujubes muffin. Bear claw danish chocolate lollipop soufflé jelly. - -Cake soufflé icing gingerbread topping jujubes. Chocolate cake pudding sweet biscuit cake. Soufflé tart topping gummi bears jujubes lollipop ice cream pudding. - -Apple pie jelly-o powder powder sweet. Halvah chocolate bar cotton candy sugar plum cake. Liquorice marshmallow sweet macaroon. - - <blockquote> - <p>For example.</p> - </blockquote> - -Macaroon jelly toffee cheesecake muffin lollipop dragée cake gummies. Cotton candy biscuit cupcake. Cupcake chupa chups carrot cake. Chocolate bar donut gummies wafer pastry sesame snaps oat cake. - -* * * - -Apple pie chocolate cake jelly-o icing bonbon. Gingerbread pastry fruitcake muffin chocolate bar cheesecake. Sugar plum bonbon bonbon lemon drops gummies. Brownie oat cake tart caramels croissant lollipop pastry soufflé lemon drops. Jelly beans dessert toffee caramels brownie ice cream croissant chupa chups liquorice. Danish sweet roll croissant. Powder sugar plum powder danish wafer cake. Candy jelly beans jujubes muffin. Bear claw danish chocolate lollipop soufflé jelly. - - diff --git a/exampleSite/content/blog/content/blog/content/company.md b/exampleSite/content/blog/content/blog/content/company.md deleted file mode 100644 index bc2cdf2..0000000 --- a/exampleSite/content/blog/content/blog/content/company.md +++ /dev/null @@ -1,4 +0,0 @@ -+++
-title = "Company"
-description = "We create apps and websites since 2009. We aim for minimalism and efficiency in everything we do. Our products are simple yet beautiful. They help you focus on your goals, not on your tools."
-+++
diff --git a/exampleSite/content/blog/content/blog/content/docs/animation.md b/exampleSite/content/blog/content/blog/content/docs/animation.md deleted file mode 100644 index 3ff71e4..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/animation.md +++ /dev/null @@ -1,163 +0,0 @@ -+++ -description = "Add some motion, shaking, pulsing, sliding and more" -title = "Animation" -date = "2017-04-10T16:43:08+01:00" -draft = false -weight = 200 -bref="Although it is quite easy to overuse animation effects, Kube makes it pretty easy to create meaningful, smooth and overall nice looking animation. Feel free to click every button below to see what it does, and then only use those effects that are essential to your project" -toc = true -script = 'animation' -+++ - -<h3 class="section-head" id="h-slide"><a href="#h-slide">Slide</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div id="animation-box-slide-up"> - slideUp - </div> - </div> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-slide-down"> - slideDown - </div> - </div> - </div><a class="demo-animation-btn" data-back="slideDown" data-el="#animation-box-slide-up" data-to="slideUp" href="#" id="slide-up-btn">Slide Up</a> <a class="demo-animation-btn" data-back="slideUp" data-el="#animation-box-slide-down" data-to="slideDown" href="#" id="slide-down-btn">Slide Down</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideUp'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideDown'</span>);</pre> -</div> -<h3 class="section-head" id="h-fade"><a href="#h-fade">Fade</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-fade-in"> - fadeIn - </div> - </div> - <div class="demo-animation-box"> - <div id="animation-box-fade-out"> - fadeOut - </div> - </div> - </div><a class="demo-animation-btn" data-back="fadeOut" data-el="#animation-box-fade-in" data-to="fadeIn" href="#" id="fade-in-btn">Fade In</a> <a class="demo-animation-btn" data-back="fadeIn" data-el="#animation-box-fade-out" data-to="fadeOut" href="#" id="fade-out-btn">Fade Out</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'fadeIn'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'fadeOut'</span>);</pre> -</div> -<h3 class="section-head" id="h-flip"><a href="#h-flip">Flip</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-flip-in"> - flipIn - </div> - </div> - <div class="demo-animation-box"> - <div id="animation-box-flip-out"> - flipOut - </div> - </div> - </div><a class="demo-animation-btn" data-back="flipOut" data-el="#animation-box-flip-in" data-to="flipIn" href="#" id="flip-in-btn">Flip In</a> <a class="demo-animation-btn" data-back="flipIn" data-el="#animation-box-flip-out" data-to="flipOut" href="#" id="flip-out-btn">Flip Out</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'flipIn'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'flipOut'</span>);</pre> -</div> -<h3 class="section-head" id="h-zoom"><a href="#h-zoom">Zoom</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-zoom-in"> - zoomIn - </div> - </div> - <div class="demo-animation-box"> - <div id="animation-box-zoom-out"> - zoomOut - </div> - </div> - </div><a class="demo-animation-btn" data-back="zoomOut" data-el="#animation-box-zoom-in" data-to="zoomIn" href="#" id="zoom-in-btn">Zoom In</a> <a class="demo-animation-btn" data-back="zoomIn" data-el="#animation-box-zoom-out" data-to="zoomOut" href="#" id="zoom-out-btn">Zoom Out</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'zoomIn'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'zoomOut'</span>);</pre> -</div> -<h3 class="section-head" id="h-rotate"><a href="#h-rotate">Rotate</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div id="animation-box-rotate"> - rotate - </div> - </div> - </div><a class="demo-animation-btn" href="#" id="rotate-btn">Rotate</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'rotate'</span>);</pre> -</div> -<h3 class="section-head" id="h-shake"><a href="#h-shake">Shake</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div id="animation-box-shake"> - shake - </div> - </div> - </div><a class="demo-animation-btn" href="#" id="shake-btn">Shake</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'shake'</span>);</pre> -</div> -<h3 class="section-head" id="h-pulse"><a href="#h-pulse">Pulse</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div id="animation-box-pulse"> - pulse - </div> - </div> - </div><a class="demo-animation-btn" href="#" id="pulse-btn">Pulse</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'pulse'</span>);</pre> -</div> -<h3 class="section-head" id="h-slide-in"><a href="#h-slide-in">Slide In</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-slide-in-right"> - slideInRight - </div> - </div> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-slide-in-left"> - slideInLeft - </div> - </div> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-slide-in-down"> - slideInDown - </div> - </div> - </div><a class="demo-animation-btn" data-back="slideOutRight" data-el="#animation-box-slide-in-right" data-to="slideInRight" href="#" id="slide-in-right-btn">Slide In Right</a> <a class="demo-animation-btn" data-back="slideOutLeft" data-el="#animation-box-slide-in-left" data-to="slideInLeft" href="#" id="slide-in-left-btn">Slide In Left</a> <a class="demo-animation-btn" data-back="slideOutUp" data-el="#animation-box-slide-in-down" data-to="slideInDown" href="#" id="slide-in-down-btn">Slide In Down</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideInRight'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideInLeft'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideInDown'</span>);</pre> -</div> -<h3 class="section-head" id="h-slide-out"><a href="#h-slide-out">Slide Out</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div id="animation-box-slide-out-right"> - slideOutRight - </div> - </div> - <div class="demo-animation-box"> - <div id="animation-box-slide-out-left"> - slideOutLeft - </div> - </div> - <div class="demo-animation-box"> - <div id="animation-box-slide-out-up"> - slideOutUp - </div> - </div> - </div><a class="demo-animation-btn" data-back="slideInRight" data-el="#animation-box-slide-out-right" data-to="slideOutRight" href="#" id="slide-out-right-btn">Slide Out Right</a> <a class="demo-animation-btn" data-back="slideInLeft" data-el="#animation-box-slide-out-left" data-to="slideOutLeft" href="#" id="slide-out-left-btn">Slide Out Left</a> <a class="demo-animation-btn" data-back="slideInDown" data-el="#animation-box-slide-out-up" data-to="slideOutUp" href="#" id="slide-out-up-btn">Slide Out Up</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideOutRight'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideOutLeft'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideOutUp'</span>);</pre> -</div> -<h3 class="section-head" id="h-callback"><a href="#h-callback">Callback</a></h3> -<pre class="code">$(<span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'fadeIn'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// code ...</span> -});</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/breadcrumbs.md b/exampleSite/content/blog/content/blog/content/docs/breadcrumbs.md deleted file mode 100644 index b195c9e..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/breadcrumbs.md +++ /dev/null @@ -1,99 +0,0 @@ -+++ -date = "2017-04-10T16:41:54+01:00" -weight = 110 -description = "Traces for the users so they won't get lost" -title = "Breadcrumbs" -draft = false -bref= "Breadcrumbs in Kube are formed as lists with default separator. This separator can be customized with ease by simply changing a single CSS line" -toc = true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <nav class="breadcrumbs"> - <ul> - <li> - <a href="#">Home</a> - </li> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">Catalog</a> - </li> - <li> - <a href="#">T-Shirts</a> - </li> - <li><span>Brand</span></li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumbs"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-centered"><a href="#h-centered">Centered</a></h3> -<div class="example"> - <nav class="breadcrumbs push-center"> - <ul> - <li> - <a href="#">Home</a> - </li> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">Catalog</a> - </li> - <li> - <a href="#">T-Shirts</a> - </li> - <li class="active"> - <a href="">Brand</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumbs push-center"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-custom-separator"><a href="#h-custom-separator">Custom Separator</a></h3> -<div class="example"> - <nav class="breadcrumbs" id="breadcrumbs-custom-separator"> - <ul> - <li> - <a href="#">Home</a> - </li> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">Catalog</a> - </li> - <li> - <a href="#">T-Shirts</a> - </li> - <li><span>Brand</span></li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-comment">// css</span> -<span class="hljs-meta">#breadcrumbs-custom-separator li:after {</span> -<span class="hljs-symbol"> content:</span> <span class="hljs-string">'>'</span>; -} - -<span class="hljs-comment">// html</span> -<span class="hljs-params"><nav id="breadcrumbs-custom-separator" class="breadcrumbs"></span> - <span class="hljs-params"><ul></span> - <span class="hljs-params"><li></span><span class="hljs-params"><a href=""></span>...<span class="hljs-params"></a></span><span class="hljs-params"></li></span> - <span class="hljs-params"><li></span><span class="hljs-params"><span></span>...<span class="hljs-params"></span></span><span class="hljs-params"></li></span> - <span class="hljs-params"></ul></span> -<span class="hljs-params"></nav></span> -</pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/buttons.md b/exampleSite/content/blog/content/blog/content/docs/buttons.md deleted file mode 100644 index 3027dc7..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/buttons.md +++ /dev/null @@ -1,108 +0,0 @@ -+++ -date = "2017-04-10T16:41:16+01:00" -weight = 70 -description = "Full variety of pressible, clickable and pushable buttons" -title = "Buttons" -draft = false -bref = "Buttons in Kube are minimalistic, designed for instant and convenient customization, and are ready to be pushed, pressed, clicked and manipulated in whichever ways. A lot of interactive components use buttons, and you should too!" -toc = true -+++ - -<h3 class="section-head" id="h-primary"><a href="#h-primary">Primary</a></h3> -<div class="example"> - <button class="button">Button</button> <a class="button" href="#">Button</a> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">a</span>></span></pre> -</div> -<h3 class="section-head" id="h-secondary"><a href="#h-secondary">Secondary</a></h3> -<div class="example"> - <button class="button secondary">Button</button> <a class="button secondary" href="#">Button</a> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">a</span>></span></pre> -</div> -<h3 class="section-head" id="h-outline"><a href="#h-outline">Outline</a></h3> -<p>Outline class does exactly what it is supposed to do: styles a button with an outline with no fill color.</p> -<div class="example"> - <button class="button outline">Button</button> <button class="button secondary outline">Button</button> - <pre class="code"><<span class="hljs-keyword">button</span> class=<span class="hljs-string">"button outline"</span>><span class="hljs-keyword">Button</span></<span class="hljs-keyword">button</span>> -<<span class="hljs-keyword">button</span> class=<span class="hljs-string">"button secondary outline"</span>><span class="hljs-keyword">Button</span></<span class="hljs-keyword">button</span>></pre> -</div> -<h3 class="section-head" id="h-disabled"><a href="#h-disabled">Disabled</a></h3> -<p>Disabled buttons are automatically styles with muted colors, inactive and not clickable. As you can see, there's no need to set disabled class for the button element, and disabled argument is enough. Having this said, both a link and a button input require disabled class.</p> -<div class="example"> - <a class="button disabled" href="#" role="button">Link</a> <button class="button secondary" disabled>Button</button> <button class="button outline" disabled>Button</button> <button class="button secondary outline" disabled>Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button disabled"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary"</span> <span class="hljs-attr">disabled</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-small"><a href="#h-small">Small</a></h3> -<p>Buttons come in all sizes and shapes.</p> -<div class="example"> - <a class="button small" href="#" role="button">Link</a> <button class="button secondary small">Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button small"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary small"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-big"><a href="#h-big">Big</a></h3> -<div class="example"> - <a class="button big" href="#" role="button">Link</a> <button class="button secondary big">Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button big"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary big"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-large"><a href="#h-large">Large</a></h3> -<div class="example"> - <a class="button large" href="#" role="button">Link</a> <button class="button secondary large">Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button large"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary large"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-upper"><a href="#h-upper">Upper</a></h3> -<div class="example"> - <a class="button upper" href="#" role="button">Link</a> <button class="button secondary upper">Button</button> <a class="button upper outline" href="#" role="button">Link</a> <button class="button secondary upper outline">Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button upper"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary upper"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button upper outline"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary upper outline"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-round"><a href="#h-round">Round</a></h3> -<div class="example"> - <a class="button round" href="#" role="button">Link</a> <button class="button secondary round">Button</button> <a class="button round outline" href="#" role="button">Link</a> <button class="button secondary round outline">Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button round"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary round"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button round outline"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary round outline"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-inverted"><a href="#h-inverted">Inverted</a></h3> -<p>For use on darker backgrounds, you can just introduce inverted class to have your button flip its color to the opposite one.</p> -<div class="example bg-darkgray"> - <a class="button inverted" href="#" role="button">Link</a> <button class="button inverted outline">Button</button> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button inverted"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button inverted outline"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -</div> -<h3 class="section-head" id="h-width"><a href="#h-width">Width</a></h3> -<div class="example"> - <p><button class="button w100">100%</button></p> - <p><button class="button secondary w50">50%</button></p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button w100"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary w50"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -</div> -<h3 class="section-head" id="h-icons"><a href="#h-icons">Icons</a></h3> -<div class="example"> - <button class="button"><i class="kube-calendar"></i></button> <button class="button secondary"><i class="kube-calendar"></i> Change</button> <button class="button outline"><i class="kube-search"></i></button> <button class="button secondary outline"><i class="kube-search"></i> Search</button> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kube-calendar"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kube-calendar"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Change<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button outline"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kube-search"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary outline"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kube-search"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -</div> -<h3 class="section-head" id="h-custom"><a href="#h-custom">Custom</a></h3> -<p>With some Sass magic, you can customize your buttons in a snap. Just include a color class declaration and set the color itself, and you're done.</p> -<div class="example"> - <button class="button red">Button</button> <button class="button red outline">Button</button> - <pre class="code"><span class="hljs-comment">// scss</span> -.button.red { - <span class="hljs-comment">// $text-color, $back-color</span> - @include <span class="hljs-keyword">button</span>(<span class="hljs-meta">#fff, #ff3366);</span> -} - -<span class="hljs-comment">// html</span> -<<span class="hljs-keyword">button</span> class=<span class="hljs-string">"button red"</span>><span class="hljs-keyword">Button</span></<span class="hljs-keyword">button</span>> -<<span class="hljs-keyword">button</span> class=<span class="hljs-string">"button red outline"</span>><span class="hljs-keyword">Button</span></<span class="hljs-keyword">button</span>></pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/collapse.md b/exampleSite/content/blog/content/blog/content/docs/collapse.md deleted file mode 100644 index fdc4029..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/collapse.md +++ /dev/null @@ -1,207 +0,0 @@ -+++ -date = "2017-04-10T16:42:50+01:00" -draft = false -weight = 180 -description = "Smoothly and reliably collapse elements for extra convenience" -title = "Collapse" -bref="Collapsable elements are horizontally aligned tabs, in a way. Jokes aside, collapsable elements are useful and easy to setup, both for direct purpose of switching between content while collapsing everything else, and for navigation use cases" -toc = true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <div class="my-collapse" data-component="collapse" id="my-collapse"> - <h4><a class="collapse-toggle" href="#collapse-box-1">Item 1</a></h4> - <div class="collapse-box hide" id="collapse-box-1"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#collapse-box-2">Item 2</a></h4> - <div class="collapse-box" id="collapse-box-2"> - <p>I look active on load.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#collapse-box-3">Item 3</a></h4> - <div class="collapse-box hide" id="collapse-box-3"> - <h6>Important Heading</h6> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - </div> - -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-collapse"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-navigation-example"><a href="#h-navigation-example">Navigation Example</a></h3> -<p>Here you can see a list of items forming a navigation menu, with a nested list which acts as a collapsable element</p> -<div class="example"> - <ul id="demo-nav-collapse"> - <li> - <a href="#">Installation</a> - </li> - <li> - <a href="#">Configuration</a> - </li> - <li> - <a href="#">Adding Content</a> - </li> - <li> - <a href="#">Templates</a> - </li> - <li data-component="collapse"> - <a class="collapse-toggle" href="#languages-box-2">Languages <span class="caret down"></span></a> - <ul class="collapse-box" id="languages-box-2"> - <li> - <a href="#">Setup</a> - </li> - <li> - <a href="#">Translating content</a> - </li> - <li> - <a href="#">Language variables</a> - </li> - <li> - <a href="#">Supporting RTL</a> - </li> - </ul> - </li> - <li> - <a href="#">Settings</a> - </li> - <li> - <a href="#">Callbacks</a> - </li> - <li> - <a href="#">API</a> - </li> - </ul> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#toggle-box"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span> - Toggle - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"toggle-box"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<p>Settings are pretty straightforward: you can toggle, denote active element, turn animation on and off, and more.</p> -<h5>toggle</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<h5>active</h5> -<ul> - <li>Type: <var>string or boolean</var></li> - <li>Default: <var>false</var></li> -</ul> -<h5>toggleClass</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'collapse-toggle'</var></li> -</ul> -<p>Sets a class of a collapsable object.</p> -<h5>boxClass</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'collapse-box'</var></li> -</ul> -<p>Sets a class for collapsable object's content</p> -<h5>animation</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Turns animation on and off.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'open.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'opened.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'close.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'closed.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h3 class="section-head" id="h-api"><a href="#h-api">API</a></h3> -<p>We love APIs, and for interactive elements such as collapsable elements we offer ways to programmatically open and close individual elements, or all at once.</p> -<div class="example"> - <p><button class="button outline" onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('openAll');">Open All</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button></p><br> - <div class="my-collapse" data-component="collapse" id="my-collapse-api"> - <h4><a class="collapse-toggle" href="#box-1">Item 1</a></h4> - <div class="collapse-box hide" id="box-1"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#box-2">Item 2</a></h4> - <div class="collapse-box hide" id="box-2"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#box-3">Item 3</a></h4> - <div class="collapse-box hide" id="box-3"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('open', '#box-2');"</span>></span>Open<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('close', '#box-2');"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('openAll');"</span>></span>Open All<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('closeAll');"</span>></span>Close All<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-collapse-api"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h5>open</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'open'</span>); -</pre> -<h5>close</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'close'</span>); -</pre> -<h5>openAll</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'openAll'</span>); -</pre> -<h5>closeAll</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'closeAll'</span>); -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/colors.md b/exampleSite/content/blog/content/blog/content/docs/colors.md deleted file mode 100644 index d59e0fc..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/colors.md +++ /dev/null @@ -1,141 +0,0 @@ -+++ -date = "2017-04-10T16:43:14+01:00" -draft = false -weight = 210 -description = "The basic set of colors" -title = "Colors" -bref="Kube has a basic set of colors for text, links, buttons, states and gray palette. These colors help to create uniformity and harmony in the look of UI elements. All colors are carefully selected and combined with each other. Of course, you can change the color scheme to your choice in the framework settings." -toc = true -+++ - -<h3 class="section-head">Text</h3> -<p>Contrasting black color for headings and less intense dark gray for the text helps to improve readability.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch swatch-bg-headings"></span> - <h5>Headings</h5> - <p>$color-headings</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-text"></span> - <h5>Text</h5> - <p>$color-text</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-links"><a href="#h-links">Links</a></h3> -<p>Classic blue links and soft red for the hover state makes links visible and predictable.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch swatch-bg-link"></span> - <h5>Link</h5> - <p>$color-link</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-link-hover"></span> - <h5>Hover</h5> - <p>$color-link-hover</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-buttons"><a href="#h-buttons">Buttons</a></h3> -<p>Blue color for primary buttons for greater consistency with links. Black color for secondary buttons allows you build a variety of UI.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch swatch-bg-button-primary"></span> - <h5>Primary</h5> - <p>$color-button-primary</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-button-secondary"></span> - <h5>Secondary</h5> - <p>$color-button-secondary</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-states"><a href="#h-states">States</a></h3> -<p>All possible states of the UI are in the simple and intuitive color scheme helps to focus the user's attention when creating an interactive UI.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch bg-error"></span> - <h5>Error</h5> - <p>$color-error</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-focus"></span> - <h5>Focus</h5> - <p>$color-focus</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-success"></span> - <h5>Success</h5> - <p>$color-success</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-warning"></span> - <h5>Warning</h5> - <p>$color-warning</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-extra"><a href="#h-extra">Extra</a></h3> -<p>Special color to highlight areas of interaction with the interface. And the white color for all cases.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch bg-highlight"></span> - <h5>Highlight</h5> - <p>$color-highlight</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-inverted"></span> - <h5>Inverted</h5> - <p>$color-inverted</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-grayscale"><a href="#h-grayscale">Grayscale</a></h3> -<p>Harmonious and well-thought-out scheme of gray for a broad range of tasks in the designing of the interface from controls to backgrounds.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch bg-black"></span> - <h5>Black</h5> - <p>$color-black</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-darkgray"></span> - <h5>Darkgray</h5> - <p>$color-darkgray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-midgray"></span> - <h5>Midgray</h5> - <p>$color-midgray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-gray"></span> - <h5>Gray</h5> - <p>$color-gray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-lightgray"></span> - <h5>Lightgray</h5> - <p>$color-lightgray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-silver"></span> - <h5>Silver</h5> - <p>$color-silver</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-aluminum"></span> - <h5>Aluminum</h5> - <p>$color-aluminum</p> - </div> - </div> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/custom-plugins.md b/exampleSite/content/blog/content/blog/content/docs/custom-plugins.md deleted file mode 100644 index 49e0b67..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/custom-plugins.md +++ /dev/null @@ -1,96 +0,0 @@ -+++
-title = "Custom Plugins"
-description = "Flexible and extensible way to add custom features"
-weight = 20
-draft = false
-toc = true
-bref = "Kube has a lot to offer in terms of extensibility and flexibility, and plugins are the way of doing incredible things without bloating the core. With plugins, you can extend existing features, make them more interactive, or you can crate completely new functionality."
-+++
-
-<h3 class="section-head" id="h-plugin"><a href="#h-plugin">Plugin Template</a></h3>
-<p>Here's what a generic plugin looks like. This template gives an overall idea of what you can do with plugins in Kube. Feel free to use this one as a boilerplate for your custom plugins.</p>
-<pre class="code skip">(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">Kube</span>)
-</span>{
- Kube.Myplugin = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">element, options</span>)
- </span>{
- <span class="hljs-keyword">this</span>.namespace = <span class="hljs-string">'myplugin'</span>;
-
- <span class="hljs-comment">// default settings</span>
- <span class="hljs-keyword">this</span>.defaults = {
- mysetting: <span class="hljs-literal">true</span>
- };
-
- <span class="hljs-comment">// Parent Constructor</span>
- Kube.apply(<span class="hljs-keyword">this</span>, <span class="hljs-built_in">arguments</span>);
-
- <span class="hljs-comment">// Initialization</span>
- <span class="hljs-keyword">this</span>.start();
- };
-
- <span class="hljs-comment">// Functionality</span>
- Kube.Myplugin.prototype = {
- start: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
- </span>{
- <span class="hljs-comment">// plugin element</span>
- <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$element);
-
- <span class="hljs-comment">// call options</span>
- <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.opts.mysetting);
-
- <span class="hljs-comment">// call methods</span>
- <span class="hljs-keyword">this</span>.method();
- },
- method: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
- </span>{
- <span class="hljs-comment">// do something...</span>
-
- <span class="hljs-comment">// callback</span>
- <span class="hljs-keyword">this</span>.callback(<span class="hljs-string">'show'</span>);
-
- <span class="hljs-comment">// callback with arguments</span>
- <span class="hljs-keyword">this</span>.callback(<span class="hljs-string">'show'</span>, value1, value2);
- }
- };
-
- <span class="hljs-comment">// Inheritance</span>
- Kube.Myplugin.inherits(Kube);
-
- <span class="hljs-comment">// Plugin</span>
- Kube.Plugin.create(<span class="hljs-string">'Myplugin'</span>);
- Kube.Plugin.autoload(<span class="hljs-string">'Myplugin'</span>);
-
-}(Kube));
-</pre>
-<h3 class="section-head" id="h-call"><a href="#h-call">Call</a></h3>
-<p>Calling a plugin is very easy, just add the <code>data-component</code> with the name of your plugin and it will start automatic.</p>
-<pre class="code"><<span class="hljs-keyword">div</span> data-component=<span class="hljs-string">"myplugin"</span>></<span class="hljs-keyword">div</span>></pre>
-<p>Or call manually</p>
-<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-element"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
- $(<span class="hljs-string">'#my-element'</span>).myplugin();
-</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-</pre>
-<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3>
-<p>Kube plugins can react on events with callbacks. Whenever you need your plugin to do something in response to an action or an event, just use a callback.</p>
-<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myplugin"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"myplugin"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
-$(<span class="hljs-string">'#myplugin'</span>).on(<span class="hljs-string">'show.myplugin'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
-</span>{
- <span class="hljs-comment">// do something...</span>
-});
-</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-</pre>
-<p>All plugin methods and variables are available within the plugin via <var>this</var>:</p>
-<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
-$(<span class="hljs-string">'#myplugin'</span>).on(<span class="hljs-string">'show.myplugin'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
-</span>{
- <span class="hljs-comment">// plugin element</span>
- <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$element);
-
- <span class="hljs-comment">// call plugin method</span>
- <span class="hljs-keyword">this</span>.method();
-});
-</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/dropdown.md b/exampleSite/content/blog/content/blog/content/docs/dropdown.md deleted file mode 100644 index 2c2eaf5..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/dropdown.md +++ /dev/null @@ -1,172 +0,0 @@ -+++ -date = "2017-04-10T16:42:12+01:00" -draft = false -weight = 140 -description = "Popular and adjustable menu and navigation option" -title = "Dropdown" -bref= "Dropdown menus in Kube are simple and intuitive. You've got a link with <code>data-component='dropdown'</code> and a <code>div</code> with some kind of HTML content. Clicking outside of the dropdown or hitting <kbd>Esc</kbd> closes dropdown" -toc = true -+++ - -<h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> -<div class="example"> - <p><a data-component="dropdown" data-loaded="true" data-target="#dropdown1" href="#">Show Dropdown <span class="caret down"></span></a></p> - <div class="dropdown hide" id="dropdown1"> - <a class="close show-sm" href=""></a> - <ul> - <li> - <a href="">Item 1</a> - </li> - <li> - <a href="">Item 2</a> - </li> - <li class="active"> - <a href="">Item 3</a> - </li> - <li> - <a href="">Item 4</a> - </li> - <li> - <a href=""><span class="label primary">Item 5</span></a> - </li> - <li> - <a href=""><span class="label error">Item 6</span></a> - </li> - </ul> - </div> - <pre class="code skip">// Toggle -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"dropdown"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#my-dropdown"</span>></span>Show <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> - -// Dropdown -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-dropdown"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close show-sm"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<div class="example"> - <p><button class="button outline" data-component="dropdown" data-loaded="true" data-target="#dropdown2">Show Dropdown <span class="caret down"></span></button></p> - <div class="dropdown hide" id="dropdown2"> - <div style="padding: 24px;"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a data-action="dropdown-close" href="#">Close</a> - </div> - </div> - <pre class="code skip">// Toggle -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"dropdown"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#my-dropdown"</span>></span>Show Dropdown <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> - -// Dropdown -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-dropdown"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-action</span>=<span class="hljs-string">"dropdown-close"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head">Navigation Fixed</h3> -<p>Scroll down a bit to make a fixed navigation bar appear at the top of the page, and then try out "Account" dropdown.</p> -<div class="example"> - <div data-component="sticky" data-loaded="true" id="navbar-demo"> - <div id="navbar-brand"> - <a href=""><img alt="Brand" src="/img/kube/brand.png"></a> - </div> - <nav id="navbar-main"> - <ul> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">News</a> - </li> - <li> - <a href="#">Contact</a> - </li> - <li> - <a href="#">Blog</a> - </li> - <li> - <a data-component="dropdown" data-loaded="true" data-target="#dropdown-fixed" href="">Account <span class="caret down"></span></a> - </li> - </ul> - </nav> - </div> - <div class="dropdown hide" id="dropdown-fixed"> - <ul> - <li> - <a href="">Billing</a> - </li> - <li> - <a href="">Log Out</a> - </li> - </ul> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navbar-demo"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"sticky"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">nav</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"dropdown"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#dropdown-fixed"</span>></span> - Account - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -// Dropdown -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-fixed"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>target</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>null</var></li> -</ul> -<p>Sets an ID of a target dropdown layer.</p> -<h5>height</h5> -<ul> - <li>Type: <var>int</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Sets dropdown height.</p> -<h5>width</h5> -<ul> - <li>Type: <var>int</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Sets dropdown width.</p> -<h5>animation</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Turns opening and closing animation on and off.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code">$(<span class="hljs-string">'#my-dropdown'</span>).on(<span class="hljs-string">'open.dropdown'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -});</pre> -<h5>opened</h5> -<pre class="code">$(<span class="hljs-string">'#my-dropdown'</span>).on(<span class="hljs-string">'opened.dropdown'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -});</pre> -<h5>close</h5> -<pre class="code">$(<span class="hljs-string">'#my-dropdown'</span>).on(<span class="hljs-string">'close.dropdown'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -});</pre> -<h5>closed</h5> -<pre class="code">$(<span class="hljs-string">'#my-dropdown'</span>).on(<span class="hljs-string">'closed.dropdown'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -});</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/forms.md b/exampleSite/content/blog/content/blog/content/docs/forms.md deleted file mode 100644 index 2055793..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/forms.md +++ /dev/null @@ -1,800 +0,0 @@ -+++ -date = "2017-04-10T16:40:50+01:00" -title = "Forms" -draft = false -weight = 60 -description = "Rows and columns for all sorts of tables" -bref = 'Forms come in all forms and shapes in Kube, and you can do all sorts of things with them, especially when combining with <a href="/docs/custom-plugins/">custom plugins</a> for extra interactivity. These forms are ideal building material for your awesome projects!' -toc = true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<p>This is the most basic form with all the basic inputs.</p> -<div class="example"> - <form action="" autocomplete="off" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> <input id="fake_user_name" name="fake_user[name]" style="position:absolute; top:-10000px;" type="text" value="Safari Autofill Me"> - <div class="form-item"> - <label>Email</label> <input class="w50" name="email" type="email"> - </div> - <div class="form-item"> - <label>Country</label> <select> - <option value=""> - --- - </option> - </select> - </div> - <div class="form-item"> - <label class="checkbox"><input type="checkbox"> Check me</label> <label class="checkbox"><input type="radio"> Radio me</label> - </div> - <div class="form-item"> - <textarea rows="6"></textarea> - </div> - <div class="form-item form-buttons"> - <button>Log in</button> <button class="button secondary outline">Cancel</button> - </div> - </form> - -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w50"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Country<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>></span>---<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> Check me<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>></span> Radio me<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"6"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span>></span>Log in<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary outline"</span>></span>Cancel<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</pre> - -</div> - -<h3 class="section-head" id="h-inputs"><a href="#h-inputs">Inputs</a></h3> -<p>Here's a standard input field with type set as text. Label serves as input's label, and the following div with class desc serves as an optional description.</p> -<div class="example"> - <form class="form"> - <div class="form-item"> - <label>City</label> <input type="text"> - <div class="desc"> - This information helps us deliver orders on time. - </div> - </div> - </form> - <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>City<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<p>Here are two text input fields, one with a placeholder and another one disabled, both set to be 6 grid columns wide.</p> -<div class="example"> - <form class="form"> - <div class="row gutters"> - <div class="col col-6"> - <div class="form-item"> - <input placeholder="Email" type="text"> - </div> - </div> - <div class="col col-6"> - <div class="form-item"> - <input disabled="true" type="text" value="Disabled"> - </div> - </div> - </div> - </form> - <pre class="code skip"><form <span class="hljs-built_in">class</span>=<span class="hljs-string">"form"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row gutters"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"form-item"</span>> - <input type=<span class="hljs-string">"text"</span> placeholder=<span class="hljs-string">"Email"</span>> - </<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"form-item"</span>> - <input type=<span class="hljs-string">"text"</span> disabled=<span class="hljs-string">"true"</span> value=<span class="hljs-string">"Disabled"</span>> - </<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> -</form> -</pre> -</div> -<p>Here's how you denote required fields with req class, and add descriptions to labels using span with class desc.</p> -<div class="example"> - <form class="form"> - <div class="row gutters"> - <div class="col col-6"> - <div class="form-item"> - <label>City <span class="req">*</span></label> <input type="text"> - </div> - </div> - <div class="col col-6"> - <div class="form-item"> - <label>City <span class="desc">Just curious.</span></label> <input type="text"> - <div class="desc"> - This information helps us deliver orders on time. - </div> - </div> - </div> - </div> - </form> - <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row gutters"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>City <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"req"</span>></span>*<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>City <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</span></pre> -</div> -<h3 class="section-head" id="h-search"><a href="#h-search">Search</a></h3> -<div class="example"> - <form class="form"> - <div class="form-item"> - <input class="search" type="text"> - </div> - </form> - <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"search"</span>> - </div> -</form> -</pre> -</div> -<h3 class="section-head" id="h-checkboxes"><a href="#h-checkboxes">Checkboxes & Radio</a></h3> -<p>Kube features full variety of stylish checkboxes and radio buttons. You can feature them on your pages by defining input type as checkbox or radio. There's also a neat option to place checkboxes inline by adding <code>form-checkboxes</code> class to the container (works for both checkboxes and radio buttons)</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item form-checkboxes"> - <label class="checkbox"><input type="checkbox"> Check 1</label> <label class="checkbox"><input type="checkbox"> Check 2</label> <label class="checkbox"><input type="checkbox"> Check 3</label> <label class="checkbox"><input type="checkbox"> Check 4</label> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item form-checkboxes"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label class="checkbox"><input type="checkbox"> Check 1</label> <label class="checkbox"><input type="checkbox"> Check 2</label> <label class="checkbox"><input type="checkbox"> Check 3</label> <label class="checkbox"><input type="checkbox"> Check 4</label> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item form-checkboxes"> - <label class="checkbox"><input name="check" type="radio"> Check 1</label> <label class="checkbox"><input name="check" type="radio"> Check 2</label> <label class="checkbox"><input name="check" type="radio"> Check 3</label> <label class="checkbox"><input name="check" type="radio"> Check 4</label> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item form-checkboxes"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>></span> Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label class="checkbox"><input name="check" type="radio"> Check 1</label> <label class="checkbox"><input name="check" type="radio"> Check 2</label> <label class="checkbox"><input name="check" type="radio"> Check 3</label> <label class="checkbox"><input name="check" type="radio"> Check 4</label> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>></span> Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-fieldset"><a href="#h-fieldset">Fieldset</a></h3> -<p>Fieldsets in Kube are nicely pre-formatted and ready to go. Just wrap your form in a fieldset tag and you're good to go.</p> -<form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <fieldset> - <legend>Login data</legend> - <div class="form-item"> - <label>Email</label> <input class="w50" name="user-email" type="email"> - </div> - <div class="form-item"> - <label>Password</label> <input class="w50" name="user-password" type="password"> - </div> - </fieldset> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span> - <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Login data<span class="hljs-tag"></<span class="hljs-name">legend</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w50"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Password<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-password"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w50"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span> -</pre> - <fieldset> - <legend>About</legend> - <div class="form-item"> - <textarea name="user-about" rows="5"></textarea> - </div> - <div class="form-item"> - <button>Submit</button> - </div> - </fieldset> -</form> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span> - <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>About<span class="hljs-tag"></<span class="hljs-name">legend</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-about"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"5"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span> -</pre> -<h3 class="section-head" id="h-small"><a href="#h-small">Small</a></h3> -<p>Simple class <code>.small</code> makes your selects and fields, well, smaller.</p> -<div class="example"> - <form class="form"> - <div class="form-item"> - <input class="small" placeholder="Title" type="text"> - </div> - <div class="form-item"> - <select class="small"> - <option> - Choose me - </option> - </select> - </div> - </form> - <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Title"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-big"><a href="#h-big">Big</a></h3> -<p>Simple class <code>.big</code> makes your selects and fields, well, bigger.</p> -<div class="example"> - <form class="form"> - <div class="form-item"> - <input class="big" placeholder="Title" type="text"> - </div> - <div class="form-item"> - <select class="big"> - <option> - Choose me - </option> - </select> - </div> - </form> - <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"big"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Title"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"big"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-width"><a href="#h-width">Width</a></h3> -<p>Following framework-wide rules, it is very easy to manipulate form fields sizes. Just use <code>w50</code> class to make a field 50% wide or <code>w25</code> to a 25% wide.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <input class="w25" type="text" value=".w25"> - </div> - <div class="form-item"> - <input class="w50" type="text" value=".w50"> - </div> - <div class="form-item"> - <input class="w75" type="text" value=".w75"> - </div> - <div class="form-item"> - <input type="text" value="100% by default"> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"w25"</span>> - </div> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"w50"</span>> - </div> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"w75"</span>> - </div> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> value=<span class="hljs-string">"100% by default"</span>> - </div> -</form> -</pre> -</div> -<h3 class="section-head" id="h-states"><a href="#h-states">States</a></h3> -<p>By default, Kube features two different states: success and failure.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Your height <span class="success">Looks like a valid value</span></label> <input class="success" type="text"> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Your height <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Enter your weight <span class="error">No negative numbers, please</span></label> <input class="error" type="text"> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Enter your weight <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"error"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"error"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-required"><a href="#h-required">Required</a></h3> -<p>Along with making a field actually required, you can add a visual clue for the users using a span with req class.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Email <span class="req">*</span></label> <input name="user-email" type="email"> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"req"</span>></span>*<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-email"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-descriptions"><a href="#h-descriptions">Descriptions</a></h3> -<p>Descriptions are simple: as long as form's element has desc class, Kube will treat it as a description.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Name <span class="desc">Always nice to feel important.</span></label> <input name="user-name" type="text"> - </div> - <div class="form-item"> - <label>Email</label> <input name="user-email" type="email"> - <div class="desc"> - Please enter your email. - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Name <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-name"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-email"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</span></pre> -</div> -<h3 class="section-head" id="h-disabled"><a href="#h-disabled">Disabled</a></h3> -<p>Not only text inputs can be disabled, but checkboxes and radio buttons as well. Just add <code>disabled</code> attribute or <code>.disabled</code> class to the input.</p> -<div class="example"> - <p><input disabled type="text" value="Text"></p> - <p><input class="disabled" type="checkbox"></p> - <p><input disabled type="radio"></p> - <p> - <textarea disabled>Text</textarea></p> - <p><select disabled> - <option> - Item - </option> - </select></p> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> <span class="hljs-attr">disabled</span>></span> -<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"disabled"</span>></span> -<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">disabled</span>></span> -<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">disabled</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> -<span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">disabled</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> -<span class="hljs-tag"></<span class="hljs-name">select</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-append"><a href="#h-append">Append & Prepend</a></h3> -<p>You can prepend or append certain elements within your input fields, such as currency characters.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>How much is it?</label> - <div class="prepend w50"> - <span>$</span> <input type="text"> - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>How much is it?<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prepend w50"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">span</span>></span>$<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>It is much how?</label> - <div class="append"> - <input type="text"><span>$</span> - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>It is much how?<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"append"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>$<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-append-button"><a href="#h-append-button">Button Append</a></h3> -<p>Appending works for buttons as well. Here you can see a button that has been appended and included withing a text input field.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Label</label> - <div class="append w50"> - <input name="search" placeholder="Search" type="text"> <button class="button outline">Go</button> - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Label<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"append w50"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Search"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button outline"</span>></span>Go<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-more-examples"><a href="#h-more-examples">More Examples</a></h3> -<p>The examples below are quite self explanatory and they cover multiple selections, selecting dates, filling in phone numbers, a ready feedback form template and more. Feel free to use any of these examples as templates for your sites.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Select multiple</label> <select class="w50" multiple="multiple" size="10"> - <optgroup label="Group 1"> - <option value="1"> - Some text goes here - </option> - <option value="2"> - Another choice could be here - </option> - <option value="3"> - Yet another item to be chosen - </option> - </optgroup> - <optgroup label="Group 2"> - <option value="4"> - Some text goes here - </option> - <option value="5"> - Another choice could be here - </option> - <option value="6"> - Yet another item to be chosen - </option> - </optgroup> - <optgroup label="Group 3"> - <option value="7"> - Some text goes here - </option> - <option value="8"> - Another choice could be here - </option> - <option value="9"> - Yet another item to be chosen - </option> - </optgroup> - </select> - </div> - </form> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Select multiple<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w50"</span> <span class="hljs-attr">multiple</span>=<span class="hljs-string">"multiple"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"10"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">optgroup</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Group 1"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">optgroup</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> <label>Choose date</label> - <div class="row gutters"> - <div class="col col-3"> - <div class="form-item"> - <select> - <option> - --- - </option> - </select> - <div class="desc"> - Month - </div> - </div> - </div> - <div class="col col-3"> - <div class="form-item"> - <select> - <option> - --- - </option> - </select> - <div class="desc"> - Day - </div> - </div> - </div> - <div class="col col-6"> - <div class="form-item"> - <select> - <option> - --- - </option> - </select> - <div class="desc"> - Year - </div> - </div> - </div> - </div> - </form> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Choose date<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row gutters"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-3"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span><span class="hljs-tag"><<span class="hljs-name">option</span>></span>---<span class="hljs-tag"></<span class="hljs-name">option</span>></span><span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>Month<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-3"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span><span class="hljs-tag"><<span class="hljs-name">option</span>></span>---<span class="hljs-tag"></<span class="hljs-name">option</span>></span><span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>Day<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span><span class="hljs-tag"><<span class="hljs-name">option</span>></span>---<span class="hljs-tag"></<span class="hljs-name">option</span>></span><span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>Year<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</pre> -</div> -<div class="example"> - <form action="" class="form form-inline" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Phone number</label> ( <input class="small" name="phone-prefix" size="3" type="text"> ) <input class="small w50" name="phone-number" type="text"> ext: <input class="small" name="phone-ext" size="3" type="text"> - <div class="desc"> - Needed if there are questions about your order - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form form-inline"</span>> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <label><span class="hljs-type">Phone</span> number</label> - ( <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> name=<span class="hljs-string">"phone-prefix"</span> size=<span class="hljs-string">"3"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"small"</span>> ) - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> name=<span class="hljs-string">"phone-number"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"small w50"</span>> - &nbsp;ext: <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> name=<span class="hljs-string">"phone-ext"</span> size=<span class="hljs-string">"3"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"small"</span>> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"desc"</span>>...</div> - </div> -</form> -</pre> -</div> -<div class="example"> - <form class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="row gutters"> - <div class="col col-6"> - <div class="form-item"> - <label>Email</label> <input type="email"> - </div> - </div> - <div class="col col-6"> - <div class="form-item"> - <label>Topic</label> <select> - <option value=""> - Questions - </option> - </select> - </div> - </div> - </div> - <div class="form-item"> - <label>Message</label> - <textarea rows="6"></textarea> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row gutters"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Topic<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Message<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"6"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="row gutters"> - <div class="col col-6"> - <div class="form-item"> - <label>Country</label> <select> - <option> - --- - </option> - </select> - <div class="desc"> - Where are you from? - </div> - </div> - </div> - <div class="col col-6"> - <div class="form-item"> - <label><br></label> <button>Submit</button> - </div> - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row gutters"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Country<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span>></span>---<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Text</label> - <textarea rows="4"></textarea> - </div> - </form> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Text<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"4"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Text</label> - <textarea class="w50" rows="4"></textarea> - </div> - </form> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Text<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w50"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/grid.md b/exampleSite/content/blog/content/blog/content/docs/grid.md deleted file mode 100644 index f750657..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/grid.md +++ /dev/null @@ -1,588 +0,0 @@ -+++ -draft = false -weight = 30 -description = "Flexible, fully responsive and ready to use" -title = "Grid" -bref = "Kube uses fully responsive, flexbox-enabled 12-column grid. You can combine or divide columns, nest them, center them horizontally or vertically, and do all sorts of things. Here are a few examples of what you can do with Kube's grid." -toc = true -+++ - -<div id="main"> - <h3 class="section-head" id="h-columns"><a href="#h-columns">Columns</a></h3> - <p>Columns are building blocks for many websites. Here's how columns are formed in Kube, and here's how you can use them right away.</p> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-1"> - 1 - </div> - <div class="col col-11"> - 11 - </div> - </div> - <div class="row"> - <div class="col col-2"> - 2 - </div> - <div class="col col-10"> - 10 - </div> - </div> - <div class="row"> - <div class="col col-3"> - 3 - </div> - <div class="col col-9"> - 9 - </div> - </div> - <div class="row"> - <div class="col col-4"> - 4 - </div> - <div class="col col-8"> - 8 - </div> - </div> - <div class="row"> - <div class="col col-5"> - 5 - </div> - <div class="col col-7"> - 7 - </div> - </div> - <div class="row"> - <div class="col col-6"> - 6 - </div> - <div class="col col-6"> - 6 - </div> - </div> - <div class="row"> - <div class="col col-7"> - 7 - </div> - <div class="col col-5"> - 5 - </div> - </div> - <div class="row"> - <div class="col col-8"> - 8 - </div> - <div class="col col-4"> - 4 - </div> - </div> - <div class="row"> - <div class="col col-9"> - 9 - </div> - <div class="col col-3"> - 3 - </div> - </div> - <div class="row"> - <div class="col col-10"> - 10 - </div> - <div class="col col-2"> - 2 - </div> - </div> - <div class="row"> - <div class="col col-11"> - 11 - </div> - <div class="col col-1"> - 1 - </div> - </div> - <div class="row"> - <div class="col col-12"> - 12 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-8"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-gutters"><a href="#h-gutters">Gutters</a></h3> - <div class="example demo-grid"> - <div class="row gutters"> - <div class="col col-3"> - 3 - </div> - <div class="col col-9"> - 9 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row gutters"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-9"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-auto-width"><a href="#h-auto-width">Auto Width</a></h3> - <div class="example demo-grid"> - <div class="row auto"> - <div class="col"> - auto - </div> - <div class="col"> - auto - </div> - <div class="col"> - auto - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row auto"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Auto + Gutters</h5> - <div class="example demo-grid"> - <div class="row gutters auto"> - <div class="col"> - auto - </div> - <div class="col"> - auto - </div> - <div class="col"> - auto - </div> - <div class="col"> - auto - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row gutters auto"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-bricks"><a href="#h-bricks">Bricks</a></h3> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-6"> - 50% - </div> - <div class="col col-6"> - 50% - </div> - <div class="col col-6"> - 50% - </div> - <div class="col col-6"> - 50% - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Bricks + Gutters</h5> - <div class="example demo-grid"> - <div class="row gutters"> - <div class="col col-4"> - 33% - </div> - <div class="col col-4"> - 33% - </div> - <div class="col col-4"> - 33% - </div> - <div class="col col-4"> - 33% - </div> - <div class="col col-4"> - 33% - </div> - <div class="col col-4"> - 33% - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row gutters"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-offset"><a href="#h-offset">Offset</a></h3> - <p>Offsetting columns is very simple in Kube. Just use column's class as usual, for example, <code>col col-2</code> and then add the offset value <code>offset-4</code>. This will offset this column and all following columns by 4.</p> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-2"> - 2 - </div> - <div class="col col-6 offset-4"> - 6 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-2"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6 offset-4"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-nested"><a href="#h-nested">Nested</a></h3> - <p>Here's an example of nesting columns within columns. In this example, we have a single row, with two columns .col col-6, a div nested within the second column, with .row end class to denote where to inject nested columns, and the three nested columns.</p> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-6"> - 6 - </div> - <div class="col col-6 demo-col-nested"> - <div class="row"> - <div class="col col-4"> - 4 - </div> - <div class="col col-4"> - 4 - </div> - <div class="col col-4"> - 4 - </div> - </div> - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-equal-height"><a href="#h-equal-height">Equal Height Columns</a></h3> - <p>Columns are equal height by default in Kube</p> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-6"> - 1 - </div> - <div class="col col-6"> - 1<br> - 2<br> - 3 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>> - ... - </<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>> - ... - ... - ... - </<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-reordering"><a href="#h-reordering">Reordering</a></h3> - <h5>First</h5> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-4"> - 4 - </div> - <div class="col col-8 first"> - 8 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-8 first"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Last</h5> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-3 last"> - 3 - </div> - <div class="col col-9"> - 9 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3 last"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-9"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-around"><a href="#h-around">Around</a></h3> - <p>When you want your columns to be surrounded by an even margins on both sides, just use <code>.around</code> class.</p> - <div class="example demo-grid"> - <div class="row around"> - <div class="col col-3"> - 3 - </div> - <div class="col col-3"> - 3 - </div> - <div class="col col-3"> - 3 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row around"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-between"><a href="#h-between">Between</a></h3> - <p>Sometime you just need space between columns, and not around them. Well, there's a class for that: <code>.between</code></p> - <div class="example demo-grid"> - <div class="row between"> - <div class="col col-3"> - 3 - </div> - <div class="col col-3"> - 3 - </div> - <div class="col col-3"> - 3 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row between"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-alignment"><a href="#h-alignment">Alignment</a></h3> - <h5>Align Center</h5> - <div class="example demo-grid"> - <div class="row align-center"> - <div class="col col-6"> - 6 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row align-center"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Align Right</h5> - <div class="example demo-grid"> - <div class="row align-right"> - <div class="col col-3"> - 3 - </div> - <div class="col col-3"> - 3 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row align-right"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Align Middle</h5> - <div class="example demo-grid"> - <div class="row align-middle" style="height: 104px; border: 1px solid #eee;"> - <div class="col col-4" style="height: 36px;"> - 4 - </div> - <div class="col col-4" style="height: 56px;"> - 4 - </div> - <div class="col col-4" style="height: 36px;"> - 4 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row align-middle"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-push"><a href="#h-push">Push</a></h3> - <h5>Push Center</h5> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-4 push-center"> - .push-center - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4 push-center"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Push Right</h5> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-6"> - ... - </div> - <div class="col col-4 push-right"> - .push-right - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4 push-right"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Push Middle</h5> - <div class="example demo-grid"> - <div class="row" style="height: 104px;"> - <div class="col col-8 push-middle"> - .push-middle - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-8 push-middle"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Push Mixed</h5> - <div class="example demo-grid"> - <div class="row" style="height: 104px;"> - <div class="col col-8 push-middle push-center"> - .push-middle.push-center - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-8 push-middle push-center"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Push Bottom</h5> - <div class="example demo-grid"> - <div class="row" style="height: 104px;"> - <div class="col col-8 push-bottom"> - .push-bottom - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-8 push-bottom"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-fixed-column"><a href="#h-fixed-column">Fixed Width Column</a></h3> - <p>Here's one more bit of magic. You can set a fixed width column and still have a responsive and flexible layout right beside this fixed width column.</p> - <div class="example demo-grid"> - <div id="demo-container"> - <div id="demo-sidebar"> - sidebar - </div> - <div id="demo-content"> - content - </div> - </div> - <pre class="code skip"><span class="hljs-comment"><!-- scss --></span> -#container { - @include grid-row; -} -#sidebar { - @include flex-item-width(300px); -} -#content { - @include flex-item-auto; -} - -<span class="hljs-comment"><!-- html --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sidebar"</span>></span>Sidebar<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"content"</span>></span>Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -</pre> - </div> - <h3 class="section-head" id="h-media-grid"><a href="#h-media-grid">Media Grid</a></h3> - <p>Media grid is a great example of Kube's flexibility and versatility. Whenever you have some media to display, you can choose to use Media grid. This type of grid is ideal for featuring photos; it adds some visual music and slight randomness to your layout.</p> - <div class="example demo-grid"> - <div id="demo-media-grid"> - <div> - 1 - </div> - <div> - 2 - </div> - <div> - 3 - </div> - <div> - 4 - </div> - <div> - 5 - </div> - <div> - 6 - </div> - <div> - 7 - </div> - <div> - 8 - </div> - <div> - 9 - </div> - <div> - 10 - </div> - </div> - <pre class="code skip"><span class="hljs-comment"><!-- scss --></span> -#media-grid { - - @include grid-media-columns(2); - - & > div { - margin-bottom: 20px; - height: 80px; - } - & > div:nth-child(2n) { - height: 200px; - } - & > div:nth-child(5n) { - height: 120px; - } -} - -<span class="hljs-comment"><!-- html --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"media-grid"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>1<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>2<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>3<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>4<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>5<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>7<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>8<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>9<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>10<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> - </div> -</div> diff --git a/exampleSite/content/blog/content/blog/content/docs/labels.md b/exampleSite/content/blog/content/blog/content/docs/labels.md deleted file mode 100644 index 2069ff6..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/labels.md +++ /dev/null @@ -1,51 +0,0 @@ -+++ -date = "2017-04-10T16:40:43+01:00" -title = "Labels" -draft = false -weight = 80 -description = "Label things with all sorts of labels" -bref = "Labels have all standard Kube styling options available: outline, states (success, error, warning), inverted color, and more. You can also customize labels to your requirements, and place them inside other elements, such as buttons, for example" -toc = true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <span class="label">Default</span> <span class="label success">Success</span> <span class="label error">Error</span> <span class="label warning">Warning</span> <span class="label focus">Focus</span> <span class="label black">Black</span> <span class="example-inverted-box"><span class="label inverted">Inverted</span></span> -</div> -<h3 class="section-head" id="h-outline"><a href="#h-outline">Outline</a></h3> -<div class="example"> - <span class="label outline">Default</span> <span class="label success outline">Success</span> <span class="label error outline">Error</span> <span class="label warning outline">Warning</span> <span class="label focus outline">Focus</span> <span class="label black outline">Black</span> <span class="example-inverted-box"><span class="label inverted outline">Inverted</span></span> -</div> -<h3 class="section-head" id="h-upper"><a href="#h-upper">Upper</a></h3> -<div class="example"> - <span class="label upper">Default</span> <span class="label success upper">Success</span> <span class="label error upper">Error</span> <span class="label warning upper">Warning</span> <span class="label focus upper">Focus</span> <span class="label black upper">Black</span> <span class="example-inverted-box"><span class="label inverted upper">Inverted</span></span> -</div> -<h3 class="section-head" id="h-tag"><a href="#h-tag">Tag</a></h3> -<div class="example"> - <span class="label tag"><a href="#">Default</a></span> <span class="label tag success">Success</span> <span class="label tag error">Error</span> <span class="label tag warning">Warning</span> <span class="label tag focus"><a href="#">Focus</a></span> <span class="label tag black">Black</span> <span class="example-inverted-box"><span class="label tag inverted">Inverted</span></span> -</div> -<h3 class="section-head" id="h-badges"><a href="#h-badges">Badges</a></h3> -<p>Labels are ideal for use as badges with badge class.</p> -<div class="example"> - <span class="label badge"><a href="#">1</a></span> <span class="label badge error">2</span> <span class="label badge success">3</span> <span class="label badge warning">4</span> <span class="label badge focus"><a href="#">5</a></span> <span class="label badge black">6</span> <span class="example-inverted-box"><span class="label badge inverted">7</span></span> -</div> -<h3 class="section-head" id="h-outline-badges"><a href="#h-outline-badges">Outline Badges</a></h3> -<div class="example"> - <span class="label badge outline"><a href="#">1</a></span> <span class="label badge error outline">2</span> <span class="label badge success outline">3</span> <span class="label badge warning outline">4</span> <span class="label badge focus outline"><a href="#">5</a></span> <span class="label badge black outline">6</span> <span class="example-inverted-box"><span class="label badge inverted outline">7</span></span> -</div> -<h3 class="section-head" id="h-custom"><a href="#h-custom">Custom</a></h3> -<p>You can use mixins to customize your labels and badges.</p> -<div class="example"> - <span class="label custom">Label</span> <span class="label badge custom">1</span> <span class="label tag custom">Tag</span> - <pre class="code skip"><span class="hljs-comment"><!-- scss --></span> -.label.custom { - // $text-color, $back-color - @include label(#fff, #ea48a7); -} - -<span class="hljs-comment"><!-- html --></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label custom"</span>></span>Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label badge custom"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label tag custom"</span>></span>Tag<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -</pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/messages.md b/exampleSite/content/blog/content/blog/content/docs/messages.md deleted file mode 100644 index 11bc2ec..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/messages.md +++ /dev/null @@ -1,159 +0,0 @@ -+++ -date = "2017-04-10T16:41:34+01:00" -draft = false -weight = 90 -description = "Versatile and refined messages, ideal for daily use" -title = "Messages" -bref = "Messages are an essential part of modern web, and they can provide invaluable feedback to the users. Messages in Kube look nice, they are informative, simple and very easy to set up to whatever requirements you may have, style-wise or otherwise. Take a div, give it an message class, add a color using meaningful classes like error or success and you're practically done!" -toc = true -+++ - -<h3 class="section-head" id="h-usage"><a href="#h-usage">Usage</a></h3> -<div class="example"> - <div class="message open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="#install">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message error open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message error"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message success open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message success"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message warning open" data-component="message" data-loaded="true"> - <h5>Warning!</h5>You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"message warning"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"message"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h5</span>></span> - ... - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close small"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<div class="example"> - <div class="message focus open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message focus"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message black open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small white"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message black"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message inverted open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message inverted"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<h3 class="section-head" id="h-options"><a href="#h-options">Options</a></h3> -<table> - <thead> - <tr> - <th class="w30">Name</th> - <th class="w30">Type</th> - <th class="w40">Default</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>closeSelector</code></td> - <td><var>string</var></td> - <td>.close</td> - </tr> - <tr> - <td><code>closeEvent</code></td> - <td><var>string</var></td> - <td>click</td> - </tr> - <tr> - <td><code>animationOpen</code></td> - <td><var>string</var></td> - <td>fadeIn</td> - </tr> - <tr> - <td><code>animationClose</code></td> - <td><var>string</var></td> - <td>fadeOut</td> - </tr> - </tbody> -</table> -<h4>Set an option</h4> -<p>Via data attribute:</p> -<pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"message"</span> data-component=<span class="hljs-string">"message"</span> data-close-selector=<span class="hljs-string">".my-custom-close"</span>> - ... <span <span class="hljs-built_in">class</span>=<span class="hljs-string">"my-custom-close small"</span>></span> -</<span class="hljs-keyword">div</span>> -</pre> -<p>Via Javascript:</p> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-message'</span>).message({ - <span class="hljs-symbol">closeSelector:</span> <span class="hljs-string">'.my-custom-close'</span> -}); -</pre> -<h3 class="section-head" id="h-methods"><a href="#h-methods">Methods</a></h3> -<p><button onclick="$('#message-1').message('open')">Open</button> <button onclick="$('#message-1').message('close')">Close</button></p> -<div class="message open" data-component="message" data-loaded="true" id="message-1"> - You have 2 modules waiting to installation. <a href="#install">Install</a> <span class="close small"></span> -</div> -<table> - <thead> - <tr> - <th>Method</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>close</code></td> - <td>Manually closes a message.</td> - </tr> - <tr> - <td><code>open</code></td> - <td>Opens a message if it has been closed.</td> - </tr> - </tbody> -</table> -<h4>Example</h4> -<pre class="code">$(<span class="hljs-string">'#my-message'</span>).<span class="hljs-keyword">message</span>(<span class="hljs-string">'close'</span>);</pre> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<table> - <thead> - <tr> - <th>Callback</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>open</code></td> - <td>This event fires immediately when the open instance method is called.</td> - </tr> - <tr> - <td><code>opened</code></td> - <td>This event is fired when the message has been opened, will wait for CSS animation to complete.</td> - </tr> - <tr> - <td><code>close</code></td> - <td>This event fires immediately when the close instance method is called.</td> - </tr> - <tr> - <td><code>closed</code></td> - <td>This event is fired when the message has been closed, will wait for CSS animation to complete.</td> - </tr> - </tbody> -</table> -<h4>Example</h4> -<pre class="code skip">$(<span class="hljs-string">'#my-message'</span>).on(<span class="hljs-string">'closed.message'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something</span> -}) -</pre> diff --git a/exampleSite/content/blog/content/blog/content/docs/mixins.md b/exampleSite/content/blog/content/blog/content/docs/mixins.md deleted file mode 100644 index 70a3b93..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/mixins.md +++ /dev/null @@ -1,268 +0,0 @@ -+++ -weight = 230 -description = "Mixins save countless hours and bring results faster" -date = "2017-04-10T16:43:36+01:00" -title = "Mixins" -draft = false -bref="Mixins are a great way to produce things and effects way faster with Sass then with pure CSS. Kube has a lot to offer in this respect; feel free to use any of these mixins with any Kube components." -toc = true -+++ - -<h3 class="section-head" id="h-get-started"><a href="#h-get-started">Get Started</a></h3> -<p>Kube has been designed to help you with web development, that's why it's so easy to use Kube when building websites. To move forward quickly and efficiently, just link <code>kube.scss</code> from Kube package: this file contains variables, mixins and everything you need to simplify daily routine tasks.</p> -<p>For example, import <code>kube.scss</code> into your <code>master.scss</code> styles file, which you will later compile into <code>master.css</code></p> -<pre class="code skip"><span class="hljs-comment">// master.scss</span> -@<span class="hljs-keyword">import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>; -</pre> -<p>Now all Kube's variables and mixins are readily available in <code>master.scss</code>, and you can use them whenever needed.</p> -<pre class="code skip"><span class="hljs-comment">// master.scss</span> -@<span class="hljs-keyword">import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>; - -<span class="hljs-comment">// use mixins</span> -<span class="hljs-selector-id">#my-layout</span> { - @<span class="hljs-keyword">include</span> flex; -} - -<span class="hljs-comment">// use variables</span> -<span class="hljs-selector-id">#my-layout</span> { - <span class="hljs-attribute">padding</span>: <span class="hljs-variable">$base-line</span>; -} -</pre> -<h3 class="section-head" id="h-fonts"><a href="#h-fonts">Fonts</a></h3> -<p>Generates a font-family declarations for text, headings, buttons or inputs.</p> -<pre class="code skip"><span class="hljs-comment">// import Kube</span> -@<span class="hljs-keyword">import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>; - -<span class="hljs-comment">// use mixins</span> -@<span class="hljs-keyword">include</span> text-font(<span class="hljs-string">"Lato, 'Helvetica Neue', sans-serif"</span>); -@<span class="hljs-keyword">include</span> headings-font(<span class="hljs-string">"Lato, 'Helvetica Neue', sans-serif"</span>); -@<span class="hljs-keyword">include</span> buttons-font(<span class="hljs-string">"Lato, 'Helvetica Neue', sans-serif"</span>); -@<span class="hljs-keyword">include</span> inputs-font(<span class="hljs-string">"Lato, 'Helvetica Neue', sans-serif"</span>); -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-comment">// Text</span> -<span class="hljs-selector-tag">body</span> { - <span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; -} - -<span class="hljs-comment">// Headings</span> -<span class="hljs-selector-tag">h1</span><span class="hljs-selector-class">.title</span>, <span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-tag">h2</span>, <span class="hljs-selector-tag">h3</span>, <span class="hljs-selector-tag">h4</span>, <span class="hljs-selector-tag">h5</span>, <span class="hljs-selector-tag">h6</span>, <span class="hljs-selector-class">.h1</span>, <span class="hljs-selector-class">.h2</span>, <span class="hljs-selector-class">.h3</span>, <span class="hljs-selector-class">.h4</span>, <span class="hljs-selector-class">.h5</span>, <span class="hljs-selector-class">.h6</span> { - <span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; -} - -<span class="hljs-comment">// Buttons</span> -<span class="hljs-selector-tag">button</span>, <span class="hljs-selector-class">.button</span> { - <span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; -} - -<span class="hljs-comment">// Inputs</span> -<span class="hljs-selector-tag">input</span>, <span class="hljs-selector-tag">textarea</span>, select { - <span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; -} -</pre> -<h3 class="section-head" id="h-breakpoints"><a href="#h-breakpoints">Breakpoints</a></h3> -<p>Breakpoint for small screens (max-width 768px by default).</p> -<pre class="code skip">@<span class="hljs-keyword">include</span> breakpoint(sm) { - <span class="hljs-selector-class">.span</span> { - <span class="hljs-attribute">display</span>: none; - } -} -</pre> -<p>Breakpoint for medium screens (min-width 1024px by default).</p> -<pre class="code skip">@<span class="hljs-keyword">include</span> breakpoint(md) { - <span class="hljs-selector-class">.span</span> { - <span class="hljs-attribute">display</span>: none; - } -} -</pre> -<p>Breakpoint for large screens (min-width 1200px by default).</p> -<pre class="code skip">@<span class="hljs-keyword">include</span> breakpoint(lg) { - <span class="hljs-selector-class">.span</span> { - <span class="hljs-attribute">display</span>: none; - } -} -</pre> -<p>Custom breakpoints:</p> -<pre class="code skip"><span class="hljs-comment">// min-width 768px;</span> -<span class="hljs-variable">@include</span> breakpoint(<span class="hljs-number">768px</span>) {} - -<span class="hljs-comment">// min-width 768px and max-width 1024px;</span> -<span class="hljs-variable">@include</span> breakpoint(<span class="hljs-number">768px</span>, <span class="hljs-number">1024px</span>) {} - -<span class="hljs-comment">// max-width 1024px;</span> -<span class="hljs-variable">@include</span> breakpoint(<span class="hljs-number">0</span>, <span class="hljs-number">1024px</span>) {} -</pre> -<h3 class="section-head" id="h-grid"><a href="#h-grid">Grid</a></h3> -<h5 id="h-grid-row">Row</h5> -<p>Generates a grid row.</p> -<pre class="code skip"><span class="hljs-selector-class">.my-row</span> { - <span class="hljs-variable">@include</span> grid-row; -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.my-row</span> { - <span class="hljs-attribute">display</span>: -ms-flexbox; - <span class="hljs-attribute">display</span>: -webkit-flex; - <span class="hljs-attribute">display</span>: flex; - - <span class="hljs-attribute">-ms-flex-direction</span>: row; - <span class="hljs-attribute">-webkit-flex-direction</span>: row; - <span class="hljs-attribute">flex-direction</span>: row; - - <span class="hljs-attribute">-ms-flex-wrap</span>: wrap; - <span class="hljs-attribute">-webkit-flex-wrap</span>: wrap; - <span class="hljs-attribute">flex-wrap</span>: wrap; -} -</pre> -<h5 id="h-grid-media">Media Grid</h5> -<p>Generates a media grid. See <a href="/kube/docs/grid/#h-media-grid">live example</a>.</p> -<pre class="code skip"><span class="hljs-selector-class">.my-media-grid</span> { - @include grid-media-<span class="hljs-attribute">columns</span>(<span class="hljs-number">3</span>); -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.my-media-grid</span> { - -webkit-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">3</span>; - -moz-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">3</span>; - <span class="hljs-attribute">column-count</span>: <span class="hljs-number">3</span>; - - <span class="hljs-comment">// column gap is specified</span> - <span class="hljs-comment">// in the grid settings (variables.scss) as $grid-gutter</span> - -webkit-<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>; - -moz-<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>; - <span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>; -} - -<span class="hljs-selector-class">.my-media-grid</span> > <span class="hljs-selector-tag">div</span> { - <span class="hljs-attribute">display</span>: inline-block; - <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; -} - -@<span class="hljs-keyword">media</span> (max-width: 768px) { - <span class="hljs-selector-class">.my-media-grid</span> { - -webkit-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; - -moz-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; - <span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; - } -} -</pre> -<h3 class="section-head" id="h-flex"><a href="#h-flex">Flex</a></h3> -<pre class="code skip"><span class="hljs-variable">@include</span> flex; -<span class="hljs-variable">@include</span> flex-basis($basis); - -<span class="hljs-comment">// items</span> -<span class="hljs-variable">@include</span> flex-items-wrap; -<span class="hljs-variable">@include</span> flex-items-nowrap; -<span class="hljs-variable">@include</span> flex-items-row -<span class="hljs-variable">@include</span> flex-items-column; -<span class="hljs-variable">@include</span> flex-items-left; -<span class="hljs-variable">@include</span> flex-items-right; -<span class="hljs-variable">@include</span> flex-items-center; -<span class="hljs-variable">@include</span> flex-items-space-between; -<span class="hljs-variable">@include</span> flex-items-space-around; -<span class="hljs-variable">@include</span> flex-items-top; -<span class="hljs-variable">@include</span> flex-items-middle; -<span class="hljs-variable">@include</span> flex-items-bottom; - -<span class="hljs-comment">// item</span> -<span class="hljs-variable">@include</span> flex-item-grow($grow); -<span class="hljs-variable">@include</span> flex-item-auto; -<span class="hljs-variable">@include</span> flex-item-one; -<span class="hljs-variable">@include</span> flex-item-shrink($shrink); -<span class="hljs-variable">@include</span> flex-item-width($width); -</pre> -<h3 class="section-head" id="h-gradients"><a href="#h-gradients">Gradients</a></h3> -<h5 id="h-gradients-vertical">Vertical</h5> -<pre class="code skip">@<span class="hljs-keyword">include</span> gradient-vertical(<span class="hljs-variable">$startColor</span>, <span class="hljs-variable">$endColor</span>);</pre> -<div class="demo-gradient demo-gradient-vertical"></div> -<pre class="code skip"><span class="hljs-symbol">@include</span> gradient-vertical-<span class="hljs-keyword">to</span>-opacity($startColor, $opacity)<span class="hljs-comment">;</span></pre> -<div class="demo-gradient demo-gradient-vertical-to-opacity"></div> -<h5 id="h-gradients-horizontal">Horizontal</h5> -<pre class="code skip">@<span class="hljs-keyword">include</span> gradient-horizontal(<span class="hljs-variable">$startColor</span>, <span class="hljs-variable">$endColor</span>);</pre> -<div class="demo-gradient demo-gradient-horizontal"></div> -<pre class="code skip"><span class="hljs-symbol">@include</span> gradient-horizontal-<span class="hljs-keyword">to</span>-opacity($startColor, $opacity)<span class="hljs-comment">;</span></pre> -<div class="demo-gradient demo-gradient-horizontal-to-opacity"></div> -<h5 id="h-gradients-radial">Radial</h5> -<pre class="code skip">@include gradient-<span class="hljs-keyword">radial</span>($innerColor, $outerColor);</pre> -<div class="demo-gradient demo-gradient-radial"></div> -<h3 class="section-head" id="h-utils"><a href="#h-utils">Utils</a></h3> -<h5 id="h-utils-clearfix">Clearfix</h5> -<p>Provides an easy way to include a clearfix for containing floats.</p> -<pre class="code skip"><span class="hljs-selector-class">.layout</span> { - <span class="hljs-variable">@include</span> clearfix; -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.layout</span><span class="hljs-selector-pseudo">:after</span> { - <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>; - <span class="hljs-attribute">display</span>: table; - <span class="hljs-attribute">clear</span>: both; -} -</pre> -<h5 id="h-utils-transition">Transition</h5> -<p>This mixin provides a shorthand syntax for transitions.</p> -<pre class="code skip"><span class="hljs-comment">// by default 'all linear .2s'</span> -<span class="hljs-meta">@include</span> transition; - -<span class="hljs-comment">// custom transitions</span> -<span class="hljs-meta">@include</span> transition(all .<span class="hljs-number">2</span>s ease-<span class="hljs-keyword">in</span>-<span class="hljs-keyword">out</span>); -<span class="hljs-meta">@include</span> transition(opacity <span class="hljs-number">1</span>s ease-<span class="hljs-keyword">in</span>, width .<span class="hljs-number">2</span>s ease-<span class="hljs-keyword">in</span>); -</pre> -<h5 id="h-utils-transform">Transform</h5> -<p>Provides a shorthand syntax for transforms.</p> -<pre class="code skip"><span class="hljs-selector-class">.span</span> { - @include <span class="hljs-attribute">transform</span>(rotate(<span class="hljs-number">90deg</span>)); -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.span</span> { - <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(90deg); - <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">rotate</span>(90deg); - <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">rotate</span>(90deg); - <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(90deg); -} -</pre> -<h5 id="h-utils-blur">Blur</h5> -<p>Provides a shorthand syntax for blur filter.</p> -<pre class="code skip"><span class="hljs-selector-class">.span</span> { - <span class="hljs-variable">@include</span> blur(<span class="hljs-number">5px</span>); -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.span</span> { - <span class="hljs-attribute">-webkit-filter</span>: <span class="hljs-built_in">blur</span>(5px); - <span class="hljs-attribute">-moz-filter</span>: <span class="hljs-built_in">blur</span>(5px); - <span class="hljs-attribute">-ms-filter</span>: <span class="hljs-built_in">blur</span>(5px); - <span class="hljs-attribute">filter</span>: <span class="hljs-built_in">blur</span>(5px); -} -</pre> -<h5 id="h-utils-retina-image">Retina Image</h5> -<p>Retina image must have a suffix <code>-2x</code>, for example: <code>image-2x.jpg</code></p> -<pre class="code skip">@include retina-<span class="hljs-built_in">background</span>-<span class="hljs-built_in">image</span>($<span class="hljs-built_in">image</span>-url, $<span class="hljs-built_in">image</span>-type, $<span class="hljs-built_in">image</span>-<span class="hljs-built_in">width</span>, $<span class="hljs-built_in">image</span>-<span class="hljs-built_in">height</span>); - -// $<span class="hljs-built_in">image</span>-type - jpg, png, gif -// $<span class="hljs-built_in">image</span>-<span class="hljs-built_in">height</span> - optional -</pre> -<p>Example:</p> -<pre class="code skip"><span class="hljs-selector-class">.brand</span> { - @include retina-<span class="hljs-attribute">background-image</span>(<span class="hljs-string">'../logo'</span>, <span class="hljs-string">'png'</span>, <span class="hljs-number">100px</span>); -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.brand</span> { - <span class="hljs-attribute">background-repeat</span>: no-repeat; - <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">"../logo.png"</span>); -} -@<span class="hljs-keyword">media</span> only screen and (-webkit-min-device-pixel-ratio: <span class="hljs-number">2</span>), - only screen and (min--moz-device-pixel-ratio: <span class="hljs-number">2</span>), - only screen and (-o-min-device-pixel-ratio: <span class="hljs-number">2</span> / <span class="hljs-number">1</span>), - only screen and (min-device-pixel-ratio: <span class="hljs-number">2</span>), - only screen and (min-resolution: <span class="hljs-number">192dpi</span>), - only screen and (min-resolution: <span class="hljs-number">2dppx</span>) - { - <span class="hljs-selector-class">.brand</span> { - <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">"../logo-2x.png"</span>); - <span class="hljs-attribute">background-size</span>: <span class="hljs-number">100px</span> auto; - } - } -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/modal.md b/exampleSite/content/blog/content/blog/content/docs/modal.md deleted file mode 100644 index 1321b83..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/modal.md +++ /dev/null @@ -1,189 +0,0 @@ -+++ -title = "Modal" -draft = false -weight = 150 -date = "2017-04-10T16:42:18+01:00" -description = "Clean, functional, and extensible modal window dialogs" -bref="Modal windows are used for various reasons and purposes. Kube makes the way you design and operate modal windows very straightforward. First, you set a <code>div</code> which will represent the content of the modal window, then you set up a way to open and close this window, and finally you add a way to call the modal from the page" -toc = true -+++ - -<h4 class="demo-head" id="h-calling">Calling</h4> -<p>Here you add an actual call to the modal window. Clicking the "Open" button below will launch a <var>modal</var> with content of a <var>#my-modal</var> div. You can use buttons or links to open modals in Kube. Clicking anywhere outside of the modal or hitting <kbd>ESC</kbd> will close the window.</p> -<div class="example"> - <p><button class="button" data-component="modal" data-loaded="true" data-target="#my-modal" data-width="760px">Open</button></p> - <pre class="code skip">// <span class="hljs-keyword">Call</span> -<button <span class="hljs-keyword">data</span>-component=<span class="hljs-string">"modal"</span> <span class="hljs-keyword">data</span>-target=<span class="hljs-string">"#my-modal"</span>><span class="hljs-keyword">Open</span></button> - -// Markup -<<span class="hljs-keyword">div</span> <span class="hljs-keyword">id</span>=<span class="hljs-string">"my-modal"</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-box hide"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal"</span>> - <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"close"</span>></span> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-header"</span>>Modal Header</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-body"</span>>...</<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> -</div> -<p>Open from url</p> -<div class="example"> - <p><button class="button" data-component="modal" data-loaded="true" data-target="#ui-modal" data-url="/tests/modal.html">Open from url</button></p> - <pre class="code skip">// <span class="hljs-keyword">Call</span> -<button <span class="hljs-keyword">data</span>-component=<span class="hljs-string">"modal"</span> <span class="hljs-keyword">data</span>-target=<span class="hljs-string">"#ui-modal"</span> <span class="hljs-keyword">data</span>-<span class="hljs-keyword">url</span>=<span class="hljs-string">"modal.html"</span>><span class="hljs-keyword">Open</span></button> - -// Markup -<<span class="hljs-keyword">div</span> <span class="hljs-keyword">id</span>=<span class="hljs-string">"ui-modal"</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-box hide"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal"</span>> - <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"close"</span>></span> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-header"</span>>UI Modal</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-body"</span>>... <span class="hljs-keyword">content</span> <span class="hljs-keyword">from</span> modal.html ...</<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> - -// modal.html -<p>...</p> -<a href=<span class="hljs-string">"#"</span> <span class="hljs-keyword">data</span>-<span class="hljs-keyword">action</span>=<span class="hljs-string">"modal-close"</span>><span class="hljs-keyword">Close</span></a> -</pre> -</div> -<p>Direct open</p> -<div class="example"> - <p><button class="button" onclick="$.modalwindow({ target: '#ui-modal', url: '/tests/modal.html' });">Direct Open</button></p> - <pre class="code skip"><span class="hljs-comment">// Call</span> -<<span class="hljs-keyword">button</span> <span class="hljs-keyword">onclick</span>=<span class="hljs-string">"$.modalwindow({ target: '#ui-modal', url: 'modal.html' });"</span>>Open</<span class="hljs-keyword">button</span>> -</pre> -</div> -<div class="modal-box hide" id="ui-modal"> - <div class="modal"> - <span class="close"></span> - <div class="modal-header"> - UI Modal - </div> - <div class="modal-body"></div> - </div> -</div> -<div class="modal-box hide" id="my-modal"> - <div class="modal"> - <span class="close"></span> - <div class="modal-header"> - My Modal - </div> - <div class="modal-body"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - </div> -</div> -<h4 class="section-head" id="h-actions"><a href="#h-actions">Actions</a></h4> -<p>Using <var>modal-close</var> action you now introducing a way to close you window, using a link or a button.</p> -<pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"my-modal"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"modal-box hide"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"modal"</span>> - <span <span class="hljs-built_in">class</span>=<span class="hljs-string">"close"</span>></span> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"modal-header"</span>>Modal Header</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"modal-body"</span>> - ... - <a href=<span class="hljs-string">"#"</span> data-action=<span class="hljs-string">"modal-close"</span>>Close</a> - </<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>target</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>null</var></li> -</ul> -<p>Defines a content layer for the modal window</p> -<h5>url</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Defines a URL in case your modal is opening via a URL.</p> -<h5>header</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Sets the header for the modal window. Optional, and is <var>false</var> by default.</p> -<h5>width</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'600px'</var></li> -</ul> -<h5>height</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<h5>maxHeight</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>This setting defines the maximum height of the window. A scrollbar will be introduced in case there's more text than <var>maxHeight</var> can accommodate.</p> -<h5>position</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'center'</var></li> -</ul> -<p>This is where your modal appears when opened.</p> -<h5>overlay</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>When this is set to <var>false</var>, you modal window will just appear on top ow your page, without an overlay effect. By default, your page will be "covered" with a semi-transparent layer when you open a modal.</p> -<h5>animation</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Turns opening and closing animation on and off.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-modal'</span>).on(<span class="hljs-string">'open.modal'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-modal'</span>).on(<span class="hljs-string">'opened.modal'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-modal'</span>).on(<span class="hljs-string">'close.modal'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-modal'</span>).on(<span class="hljs-string">'closed.modal'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h3 class="section-head" id="h-api"><a href="#h-api">API</a></h3> -<p>You can use these API methods to programmatically operate and modify modal windows.</p> -<h5>close</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-modal'</span>).modal(<span class="hljs-string">'close'</span>); -</pre> -<h5>setHeader</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-modal'</span>).modal(<span class="hljs-string">'setHeader'</span>, <span class="hljs-string">'My Header'</span>); -</pre> -<p>This is another way to set a header for the modal on the fly without introducing a <code>div</code> with a <var>modal-header</var> class.</p> -<h5>setContent</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-modal'</span>).modal(<span class="hljs-string">'setContent'</span>, <span class="hljs-string">'My Content'</span>); -</pre> -<p>Content of the modal window can be set up on the fly as well. No need for a <code>div</code> with <var>modal</var> class.</p> -<h5>setWidth</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-modal'</span>).modal(<span class="hljs-string">'setWidth'</span>, <span class="hljs-string">'800px'</span>); -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/offcanvas.md b/exampleSite/content/blog/content/blog/content/docs/offcanvas.md deleted file mode 100644 index 37ed858..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/offcanvas.md +++ /dev/null @@ -1,140 +0,0 @@ -+++ -date = "2017-04-10T16:42:43+01:00" -draft = false -weight = 180 -description = "Navigation, menus and content sliding from outside the page" -title = "Offcanvas" -bref="Offcanvas makes it look like a menu is sliding from the outside of the page. This may be useful in many different cases, one of them being when you need to save space on screen and don't have to display sidebar at all times" -toc= true -+++ - -<h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> -<p>This feature is very easy to set up. It is based on <code>data-component</code> set to <var>offcanvas</var>, <code>data-target</code> set to the menu layer (<var>#offcanvas-right</var> in example below) and a feature-specific <code>data-direction</code> which is required for right menu to be set to <var>right</var>.</p> -<p><a class="button outline" data-component="offcanvas" data-target="#offcanvas-left" href="#"><i class="kube-menu"></i> Open Left</a> <a class="button outline" data-component="offcanvas" data-direction="right" data-target="#offcanvas-right" href="#">Open Right <i class="kube-menu"></i></a></p> -<div class="hide" id="offcanvas-left"> - <nav> - <ul> - <li> - <a href="">Home</a> - </li> - <li> - <a href="">About</a> - </li> - <li> - <a href="">Showcase</a> - </li> - <li> - <a href="">Help</a> - </li> - <li> - <a href="">Contact</a> - </li> - </ul> - </nav> -</div> -<div class="hide" id="offcanvas-right"> - <a class="close" href="#"></a> - <nav> - <ul> - <li> - <a href="">Home</a> - </li> - <li> - <a href="">About</a> - </li> - <li> - <a href="">Showcase</a> - </li> - <li> - <a href="">Help</a> - </li> - <li> - <a href="">Contact</a> - </li> - </ul> - </nav> -</div> -<pre class="code skip">// Left -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#offcanvas-left"</span>></span>Open Left<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvas-left"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">nav</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -// Right + Close -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#offcanvas-right"</span> <span class="hljs-attr">data-direction</span>=<span class="hljs-string">"right"</span>></span>Open Right<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvas-right"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">nav</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>target</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>null</var></li> -</ul> -<p>Sets ID selector of an element that will slide from the side.</p> -<h5>push</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<h5>direction</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'left'</var></li> -</ul> -<p>The direction in which page will shift to give way for the sidebar menu. Default is <var>left</var> and is not required for left-side navigation, however, <var>right</var> value must be set for the right-side menu to work.</p> -<h5>clickOutside</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Unless set to <var>false</var>, clicking anywhere on a page will make side menu to close.</p> -<h5>width</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'250px'</var></li> -</ul> -<p>Sidebar width in pixels.</p> -<h5>animation</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Setting this to <var>false</var> turns off opening and closing animation.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-offcanvas'</span>).on(<span class="hljs-string">'open.offcanvas'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-offcanvas'</span>).on(<span class="hljs-string">'opened.offcanvas'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-offcanvas'</span>).on(<span class="hljs-string">'close.offcanvas'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-offcanvas'</span>).on(<span class="hljs-string">'closed.offcanvas'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/pagination.md b/exampleSite/content/blog/content/blog/content/docs/pagination.md deleted file mode 100644 index e5a3d05..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/pagination.md +++ /dev/null @@ -1,196 +0,0 @@ -+++ -date = "2017-04-10T16:42:03+01:00" -draft = false -weight = 130 -description = "Various flexible pagination options for your site" -title = "Pagination" -bref= "Default pagination in Kube is organized using lists, with visual cues for the user what is the current page, and page numbers for easier navigation. Pagination buttons and multiline formats are available out-of-the-box as well" -toc =true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <nav class="pagination"> - <ul> - <li class="prev"> - <a href="#">←</a> - </li> - <li> - <ul> - <li><span>1</span></li> - <li> - <a href="#">2</a> - </li> - <li> - <a href="#">3</a> - </li> - <li> - <a href="#">4</a> - </li> - <li> - <a href="#">5</a> - </li> - </ul> - </li> - <li class="next"> - <a href="#">→</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>&larr;<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>&rarr;<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-centered"><a href="#h-centered">Centered</a></h3> -<div class="example"> - <nav class="pagination align-center"> - <ul> - <li class="prev"> - <a href="#">←</a> - </li> - <li> - <ul> - <li class="active"> - <a href="#">1</a> - </li> - <li> - <a href="#">2</a> - </li> - <li> - <a href="#">3</a> - </li> - <li> - <a href="#">4</a> - </li> - <li> - <a href="#">5</a> - </li> - </ul> - </li> - <li class="next"> - <a href="#">→</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination align-center"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>&larr;<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>&rarr;<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-wide"><a href="#h-wide">Wide</a></h3> -<p>Here you can see an example where previous and next buttons are aligned to the left and to the right, with a link in the center of the page.</p> -<div class="example"> - <nav class="pagination align-center upper strong"> - <ul> - <li class="prev"> - <a href="#">< Prev</a> - </li> - <li class="w100"> - <ul> - <li> - <a href="#">Back to catalog</a> - </li> - </ul> - </li> - <li class="next"> - <a href="#">Next ></a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination align-center upper strong"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>&lt; Prev<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w100"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>Next &gt;<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-pager"><a href="#h-pager">Pager</a></h3> -<div class="example"> - <nav class="pagination pager"> - <ul> - <li class="prev"> - <a href="#">Previous</a> - </li> - <li class="next"> - <a href="#">Next</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination pager"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>Previous<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<div class="example"> - <nav class="pagination pager align-center"> - <ul> - <li class="prev"> - <a href="#">Previous</a> - </li> - <li class="next"> - <a href="#">Next</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination pager align-center"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>Previous<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<p>Elements within a single list item can be stacked to create a clean and intuitive pagination elements.</p> -<div class="example"> - <nav class="pagination pager flat"> - <ul> - <li class="prev"> - <span class="label tag">Prev</span> <a href="#">Learn How to Use Images on Your Website</a> - </li> - <li class="next"> - <span class="label tag">Next</span> <a href="#">Your Guide to Flat Design</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination pager flat"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label tag"</span>></span>Prev<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label tag"</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/quick-start.md b/exampleSite/content/blog/content/blog/content/docs/quick-start.md deleted file mode 100644 index dc75490..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/quick-start.md +++ /dev/null @@ -1,81 +0,0 @@ -+++
-title = "Quick Start"
-description = "Up and running in under a minute"
-weight = 10
-draft = false
-toc = true
-bref = "As a complete and self-sufficient web framework, Kube is here to help you get the most out of your daily work. Kube takes care of routine stuff, saving you precious time for things that you love. Starting up with Kube is ridiculously fast you can start in under a minute. Here's how to set up Kube, and what basic customization are available out-of-the-box."
-+++
-
-<h3 class="section-head" id="h-basic-template"><a href="#h-basic-template">Basic Template</a></h3>
-
-<p>With Kube, you can set up your web framework and be on your way in under a minute. Just add this code to your web page for the basic template to take effect immediately.</p>
-
-<pre class="code"><span class="hljs-meta"><!DOCTYPE html></span>
-<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Basic Template<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1"</span>></span>
-
- <span class="hljs-comment"><!-- Kube CSS --></span>
- <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"assets/css/kube.css"</span>></span>
-
-<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Hello, world!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
-
- <span class="hljs-comment"><!-- Kube JS + jQuery are used for some functionality, but are not required for the basic setup --></span>
- <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/js/kube.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">html</span>></span></pre>
-
-
-<h3 class="section-head" id="h-supported-browsers"><a href="#h-supported-browsers">Supported Browsers</a></h3>
-
-<p>Kube supports the latest, stable releases of all major browsers:</p>
-<ul>
- <li>Latest Chrome</li>
- <li>Latest Firefox</li>
- <li>Latest Safari</li>
- <li>Latest Opera</li>
- <li>Microsoft Edge</li>
- <li>Internet Explorer 11</li>
-</ul>
-
-
-<h3 class="section-head" id="h-development"><a href="#h-development">Development with Kube</a></h3>
-
-<p>Kube has been designed to help you with web development, that's why it's so easy to use Kube when building websites. To move forward quickly and efficiently, just link <code>kube.scss</code> from Kube package: this file contains variables, mixins and everything you need to simplify daily routine tasks.
-</p>
-
-<p>
- For example, import kube.scss into your master.scss styles file, which you will later compile into <code>master.css</code>:
-</p>
-
-<pre class="code"><span class="hljs-comment">// master.scss</span>
-@<span class="hljs-keyword">import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>;</pre>
-
-<p>
- Now all Kube's variables and mixins are readily available in <code>master.scss</code>,
- and you can use them whenever needed. For instance, here's how one of examples:
-</p>
-
-<pre class="code"><span class="hljs-comment">// master.scss</span>
-<span class="hljs-keyword">@import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>;
-
-<span class="hljs-selector-id">#sidebar</span> {
- <span class="hljs-variable">@include</span> flex-item-width(<span class="hljs-number">200px</span>);
-}</pre>
-
-<p>Also, you could use settings from <code>variables.scss</code>:</p>
-
-
-<pre class="code"><span class="hljs-comment">// master.scss</span>
-@<span class="hljs-keyword">import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>;
-
-<span class="hljs-selector-id">#my-layout</span> {
- <span class="hljs-attribute">padding</span>: <span class="hljs-variable">$base-line</span>;
-}</pre>
diff --git a/exampleSite/content/blog/content/blog/content/docs/sizing.md b/exampleSite/content/blog/content/blog/content/docs/sizing.md deleted file mode 100644 index be164b9..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/sizing.md +++ /dev/null @@ -1,99 +0,0 @@ -+++ -title = "Sizing" -date = "2017-04-10T16:43:21+01:00" -draft = false -weight = 220 -description = "Helper tools for elements width and height" -bref="Helper tools for elements width and height." -toc = true -+++ - -<h3 class="section-head" id="h-width"><a href="#h-width">Width</a></h3> -<div class="example demo-sizing"> - <div class="w5"> - w5 - </div> - <div class="w10"> - w10 - </div> - <div class="w15"> - w15 - </div> - <div class="w20"> - w20 - </div> - <div class="w25"> - w25 - </div> - <div class="w30"> - w30 - </div> - <div class="w35"> - w35 - </div> - <div class="w40"> - w40 - </div> - <div class="w45"> - w45 - </div> - <div class="w50"> - w50 - </div> - <div class="w55"> - w55 - </div> - <div class="w60"> - w60 - </div> - <div class="w65"> - w65 - </div> - <div class="w70"> - w70 - </div> - <div class="w75"> - w75 - </div> - <div class="w80"> - w80 - </div> - <div class="w85"> - w85 - </div> - <div class="w90"> - w90 - </div> - <div class="w95"> - w95 - </div> - <div class="w100"> - w100 - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"w5"</span>>w5</<span class="hljs-keyword">div</span>> -... -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"w100"</span>>w100</<span class="hljs-keyword">div</span>> -</pre> -</div> -<div class="example demo-sizing"> - <p>100% width on small devices.</p> - <div class="w50 w100-sm"> - w100-sm - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"w50 w100-sm"</span>>...</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-auto-width"><a href="#h-auto-width">Auto Width</a></h3> -<div class="example"> - .w-auto<br> - .w-auto-sm -</div> -<h3 class="section-head" id="h-max-width"><a href="#h-max-width">Max Width</a></h3> -<div class="example"> - .max-w5 — .max-w100<br> - .max-w-auto-sm -</div> -<h3 class="section-head" id="h-min-width"><a href="#h-min-width">Min Width</a></h3> -<div class="example"> - .min-w5 — .min-w100 -</div> diff --git a/exampleSite/content/blog/content/blog/content/docs/sticky.md b/exampleSite/content/blog/content/blog/content/docs/sticky.md deleted file mode 100644 index 9779ed5..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/sticky.md +++ /dev/null @@ -1,66 +0,0 @@ -+++ -date = "2017-04-10T16:42:26+01:00" -title = "Sticky" -draft = false -weight = 160 -description = "Make navigation menus stick to the top on scroll" -bref="Sticky navigation makes it easy to affix menus to the top of the page whenever a user scrolls the page down. This could be very helpful and useful on long pages. Sticky is disabled on mobile devices to avoid unwanted content overlaps and to preserve valuable screen real estate" -toc = true -+++ - -<h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> -<p>Scroll down to fix the navigation.</p> -<div data-component="sticky" id="navbar-demo"> - <div id="navbar-brand"> - <a href=""><img alt="Brand" src="/img/kube/brand.png"></a> - </div> - <nav id="navbar-main"> - <ul> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">News</a> - </li> - <li> - <a href="#">Contact</a> - </li> - <li> - <a href="#">Blog</a> - </li> - <li> - <a href="#">Account</a> - </li> - </ul> - </nav> -</div> -<pre class="code skip"><<span class="hljs-keyword">div</span> data-component=<span class="hljs-string">"sticky"</span>>...</<span class="hljs-keyword">div</span>> -</pre> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>offset</h5> -<ul> - <li>Type: <var>int</var></li> - <li>Default: <var>0</var></li> -</ul> -<p>Sets top offset in pixels when navigation is fixed.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>fixed</h5> -<p>Using this callback, you can act upon menu becoming fixed at the top of the page.</p> -<pre class="code skip">$(<span class="hljs-string">'#my-nav'</span>).on(<span class="hljs-string">'fixed.sticky'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>unfixed</h5> -<p>Whenever fixed position of the menu is released, you can do something with this callback.</p> -<pre class="code skip">$(<span class="hljs-string">'#my-nav'</span>).on(<span class="hljs-string">'unfixed.sticky'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre><br> -<br> -<p><em>Some scrollable material</em></p> -<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/tables.md b/exampleSite/content/blog/content/blog/content/docs/tables.md deleted file mode 100644 index 0bc6c26..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/tables.md +++ /dev/null @@ -1,196 +0,0 @@ -+++ -date = "2017-04-10T16:40:43+01:00" -title = "Tables" -draft = false -weight = 50 -description = "Rows and columns for all sorts of tables" -toc = true -bref = "Tables are an essential part of many different contexts. Kube serves them all and delivers full variety of tables, preformatted to save you time. Whatever your requirements are, tables are completely customizable to match them." -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <table> - <thead> - <tr> - <th>First Name</th> - <th>Last Name</th> - <th>Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="2">Total points</td> - <td>223</td> - </tr> - </tfoot> - </table> - <pre class="code"><<span class="hljs-keyword">table</span>>...</<span class="hljs-keyword">table</span>></pre> -</div> -<h3 class="section-head" id="h-bordered"><a href="#h-bordered">Bordered</a></h3> -<div class="example"> - <table class="bordered"> - <thead> - <tr> - <th>First Name</th> - <th>Last Name</th> - <th>Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="2">Total points</td> - <td>223</td> - </tr> - </tfoot> - </table> - <pre class="code"><<span class="hljs-keyword">table</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"bordered"</span>>...</<span class="hljs-keyword">table</span>></pre> -</div> -<h3 class="section-head" id="h-striped"><a href="#h-striped">Striped</a></h3> -<div class="example"> - <table class="striped"> - <thead> - <tr> - <th>First Name</th> - <th>Last Name</th> - <th>Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="2">Total points</td> - <td>223</td> - </tr> - </tfoot> - </table> - <pre class="code"><<span class="hljs-keyword">table</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"striped"</span>>...</<span class="hljs-keyword">table</span>></pre> -</div> -<h3 class="section-head" id="h-unstyled"><a href="#h-unstyled">Unstyled</a></h3> -<div class="example"> - <table class="unstyled"> - <thead> - <tr> - <th>First Name</th> - <th>Last Name</th> - <th>Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="2">Total points</td> - <td>223</td> - </tr> - </tfoot> - </table> - <pre class="code"><<span class="hljs-keyword">table</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"unstyled"</span>>...</<span class="hljs-keyword">table</span>></pre> -</div> -<h3 class="section-head" id="h-mixed"><a href="#h-mixed">Mixed</a></h3> -<div class="example"> - <table class="bordered striped"> - <thead> - <tr> - <th>First Name</th> - <th>Last Name</th> - <th>Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="2">Total points</td> - <td>223</td> - </tr> - </tfoot> - </table> - <pre class="code"><<span class="hljs-keyword">table</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"bordered striped"</span>>...</<span class="hljs-keyword">table</span>></pre> -</div> -<h3 class="section-head" id="h-width"><a href="#h-width">Width</a></h3> -<div class="example"> - <table class="bordered"> - <thead> - <tr> - <th class="w40">First Name</th> - <th class="w40">Last Name</th> - <th class="w20">Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - </table> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">table</span>></span> -<span class="hljs-tag"><<span class="hljs-name">tr</span>></span> - <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w40"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">td</span>></span> - <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w40"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">td</span>></span> - <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w20"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">td</span>></span> -<span class="hljs-tag"></<span class="hljs-name">tr</span>></span> -<span class="hljs-tag"></<span class="hljs-name">table</span>></span></pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/tabs.md b/exampleSite/content/blog/content/blog/content/docs/tabs.md deleted file mode 100644 index 95b6e23..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/tabs.md +++ /dev/null @@ -1,286 +0,0 @@ -+++ -title = "Tabs" -date = "2017-04-10T16:41:40+01:00" -draft = false -weight = 100 -description = "User-friendly navigation for your content or app" -bref= "Tabs in Kube are crafted the way one would expect from the world's best CSS framework. With versatile API, wide range of settings an options, with callbacks and live examples. Take a look!" -toc= true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<p>Here's an example of basic tabs setup. Tabs bar is an unordered list, and each tab in tabs bar is a list item. For each tab there's a corresponding div, which contains the body of the tab (it can be any kind of HTML).</p> -<div class="example"> - <nav class="tabs" data-component="tabs"> - <ul> - <li class="active"> - <a href="#tab1">Home</a> - </li> - <li> - <a href="#tab2">Shop</a> - </li> - <li> - <a href="#tab3">Catalog</a> - </li> - <li> - <a href="#tab4">T-Shirts</a> - </li> - <li> - <a href="#tab5">Brand</a> - </li> - </ul> - </nav> - <div id="tab1"> - <h5>Home</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="hide" id="tab2"> - <h5>Shop</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="hide" id="tab3"> - <h5>Catalog</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="hide" id="tab4"> - <h5>T-Shirts</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="hide" id="tab5"> - <h5>Brand</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"tabs"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - </pre> -</div> -<h3 class="section-head" id="h-javaScript-behavior"><a href="#h-javaScript-behavior">JavaScript behavior</a></h3> -<p>Tabs are interactive elements, and can be opened, closed, switched, destroyed and selected programmatically via JavaScript. Try this example, poke around and then have a look at the self-explanatory code example below.</p> -<div class="example"> - <p><button class="button outline" onclick="$('#tabs-demo').tabs('destroy');">destroy</button> <button class="button outline" onclick="$('#tabs-demo').tabs('prev');">prev</button> <button class="button outline" onclick="$('#tabs-demo').tabs('next');">next</button> <button class="button outline" onclick="$('#tabs-demo').tabs('open', 4);">open</button> <button class="button outline" onclick="$('#tabs-demo').tabs('close', '#tab-demo9');">close</button> <button class="button outline" onclick="$('#tabs-demo').tabs('closeAll');">closeAll</button></p><br> - <nav class="tabs" data-component="tabs" id="tabs-demo"> - <ul> - <li> - <a href="#tab-demo6">Home</a> - </li> - <li class="active"> - <a href="#tab-demo7">Shop</a> - </li> - <li> - <a href="#tab-demo8">Catalog</a> - </li> - <li> - <a href="#tab-demo9">T-Shirts</a> - </li> - <li> - <a href="#tab-demo10">Brand</a> - </li> - </ul> - </nav> - <div id="tab-demo6"> - <h5>Home</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div id="tab-demo7"> - <h5>Shop</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div id="tab-demo8"> - <h5>Catalog</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div id="tab-demo9"> - <h5>T-Shirts</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div id="tab-demo10"> - <h5>Brand</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('destroy');"</span>></span>destroy<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('prev');"</span>></span>prev<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('next');"</span>></span>next<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('open', 4);"</span>></span>open<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('close', '#tab4');"</span>></span>close<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('closeAll');"</span>></span>closeAll<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"tabs"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab1"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab2"</span>></span>Shop<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab3"</span>></span>Catalog<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab4"</span>></span>T-Shirts<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab5"</span>></span>Brand<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab4"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab4"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-equals"><a href="#h-equals">Equals</a></h3> -<p>Often it is important to create tabs that are equal in width regardless of content. <var>data-equals</var> is here to help you with this task.</p> -<div class="example"> - <nav class="tabs" data-component="tabs" data-equals="true"> - <ul> - <li class="active"> - <a href="#tab11">Tab 1</a> - </li> - <li> - <a href="#tab12">Tab 2</a> - </li> - </ul> - </nav> - <div id="tab11"> - <h5>Tab 1</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div id="tab12"> - <h5>Tab 2</h5> - <p>...</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">data-equals</span>=<span class="hljs-string">"true"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab12"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-livetabs"><a href="#h-livetabs">Livetabs</a></h3> -<p>Livetabs provide a very seamless and smooth experience by blending content and tabs in this kind of live manner. Set up <var>data-live</var> class, and make sure your tabs have this same class. It's that simple.</p> -<div class="example"> - <nav data-component="tabs" data-live=".tab-live" id="livetabs"></nav> - <div class="tab-live" data-title="General" id="tab-general"> - <h5>General</h5> - <p>This is very General Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="tab-live" data-title="Additional" id="tab-additional"> - <h5>Additional</h5> - <p>Quite an additional is displayed here: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><nav <span class="hljs-built_in">id</span>=<span class="hljs-string">"livetabs"</span> data-component=<span class="hljs-string">"tabs"</span> data-live=<span class="hljs-string">".tab-live"</span>></nav> - -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"tab-general"</span> data-title=<span class="hljs-string">"General"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"tab-live"</span>>...</<span class="hljs-keyword">div</span>> -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"tab-additional"</span> data-title=<span class="hljs-string">"Additional"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"tab-live"</span>>...</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-active"><a href="#h-active">Active</a></h3> -<p>To denote active tab, and to let users know where they are, use class <var>active</var>.</p> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>equals</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Making all tabs in a set equal width</p> -<h5>active</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Responsible for denoting active tab.</p> -<h5>live</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Responsible for live tabs (see <a href="#h-livetabs">Livetabs</a> example)</p> -<h5>hash</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>This will add a hash and an ID to the URL.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>init</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'init.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>next</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'next.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$item</span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>prev</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'prev.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$item</span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'open.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'opened.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'close.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'closed.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h3 class="section-head" id="h-api"><a href="#h-api">API</a></h3> -<h5>open</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'open'</span>, <span class="hljs-number">1</span>); - -<span class="hljs-regexp">//</span> <span class="hljs-keyword">or</span> - -<span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'open'</span>, <span class="hljs-string">'#tab1'</span>); -</pre> -<h5>close</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'close'</span>, <span class="hljs-number">1</span>); - -<span class="hljs-regexp">//</span> <span class="hljs-keyword">or</span> - -<span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'close'</span>, <span class="hljs-string">'#tab1'</span>); -</pre> -<h5>closeAll</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'closeAll'</span>); -</pre> -<h5>next</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'next'</span>); -</pre> -<h5>prev</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'prev'</span>); -</pre> -<h5>destroy</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'destroy'</span>); -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/toggleme.md b/exampleSite/content/blog/content/blog/content/docs/toggleme.md deleted file mode 100644 index 8f42250..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/toggleme.md +++ /dev/null @@ -1,157 +0,0 @@ -+++ -title = "Toggleme" -date = "2017-04-10T16:42:59+01:00" -draft = false -weight = 190 -description = "Display or hide elements with simple toggle" -bref= "Toggleme is a great way to add a binary option to either display some content or hide it. It works like a charm for menus, disclaimers and so much more!" -toc = true -+++ - -<h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> -<p>Toggleme works on mobile devices as well as on desktops. To see Toggleme in action, just resize this window or open this page on a mobile device.</p> -<div class="example"> - <div class="show-sm"> - <a data-component="toggleme" data-loaded="true" data-target="#navbar" href="#"><b>Toggle</b></a> - </div> - <div class="hide-sm" id="navbar"> - <div id="navbar-demo"> - <div id="navbar-brand"> - <a href=""><img alt="Brand" src="/img/kube/brand.png"></a> - </div> - <nav id="navbar-main"> - <ul> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">News</a> - </li> - <li> - <a href="#">Contact</a> - </li> - <li> - <a href="#">Blog</a> - </li> - <li> - <a href="#">Account</a> - </li> - </ul> - </nav> - </div> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-sm"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"toggleme"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#navbar"</span>></span>Toggle<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navbar"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-sm"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-usage"><a href="#h-usage">Usage</a></h3> -<div class="example"> - <p><button class="button outline" data-component="toggleme" data-loaded="true" data-target="#togglebox-target-1" data-text="Hide Me">Show Me</button></p> - <div class="togglebox-box hide" id="togglebox-target-1"> - <h3>Ok, I'm opened. Now hide me</h3> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><button data-component=<span class="hljs-string">"toggleme"</span> data-target=<span class="hljs-string">"#togglebox-target"</span> data-<span class="hljs-built_in">text</span>=<span class="hljs-string">"Hide Me"</span>>Show Me</button> - -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"togglebox-target"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide"</span>> - ... -</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-multiple-targets"><a href="#h-multiple-targets">Multiple targets</a></h3> -<div class="example"> - <p><button class="button primary outline" data-component="toggleme" data-loaded="true" data-target="#togglebox-target-3, #togglebox-target-4" data-text="Hide Me">Show Me</button></p> - <div class="togglebox-box hide" id="togglebox-target-3"> - <h3>Ok, I'm opened. Now hide me</h3> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="togglebox-box hide" id="togglebox-target-4"> - <h3>... and, I'm opened too. Now hide me</h3> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><button data-component=<span class="hljs-string">"toggleme"</span> data-target=<span class="hljs-string">"#togglebox-target-3, #togglebox-target-4"</span> data-<span class="hljs-built_in">text</span>=<span class="hljs-string">"Hide Me"</span>>Show Me</button> - -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"togglebox-target-1"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide"</span>> - ... -</<span class="hljs-keyword">div</span>> - -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"togglebox-target-2"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide"</span>> - ... -</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>target</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>null</var></li> - <li>Possible values: <var>selector/selectors</var></li> -</ul> -<p>Defines which layer or layers should be displayed upon clicking the "open" button.</p> -<pre class="code skip"><<span class="hljs-keyword">button </span><span class="hljs-meta">data</span>-component=<span class="hljs-string">"toggleme"</span> <span class="hljs-meta">data</span>-target=<span class="hljs-string">"#togglebox-target"</span>>Show Me</<span class="hljs-keyword">button> -</span> -<<span class="hljs-keyword">button </span><span class="hljs-meta">data</span>-component=<span class="hljs-string">"toggleme"</span> <span class="hljs-meta">data</span>-target=<span class="hljs-string">"#togglebox-target-1, #togglebox-target-2"</span>>Show Me</<span class="hljs-keyword">button> -</span> -<<span class="hljs-keyword">button </span><span class="hljs-meta">data</span>-component=<span class="hljs-string">"toggleme"</span> <span class="hljs-meta">data</span>-target=<span class="hljs-string">".togglebox-target"</span>>Show Me</<span class="hljs-keyword">button> -</span> -</pre> -<h5>text</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>''</var></li> -</ul> -<p>Defines what text should a button have after the layer has been opened. If not set, button text will not change.</p> -<pre class="code skip"><<span class="hljs-keyword">button </span><span class="hljs-meta">data</span>-component=<span class="hljs-string">"toggleme"</span> <span class="hljs-meta">data</span>-target=<span class="hljs-string">"#togglebox-target"</span> <span class="hljs-meta">data</span>-text=<span class="hljs-string">"Hide Me"</span>>Show Me</<span class="hljs-keyword">button> -</span> -</pre> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#togglebox-target'</span>).on(<span class="hljs-string">'open.toggleme'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#togglebox-target'</span>).on(<span class="hljs-string">'opened.toggleme'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#togglebox-target'</span>).on(<span class="hljs-string">'close.toggleme'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#togglebox-target'</span>).on(<span class="hljs-string">'closed.toggleme'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h3 class="section-head" id="h-api"><a href="#h-api">API</a></h3> -<h5>toggle</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'toggle'</span>); -</pre> -<h5>open</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'open'</span>); -</pre> -<h5>close</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'close'</span>); -</pre> -<h5>isOpened</h5> -<pre class="code skip"><span class="hljs-keyword">var</span> isOpened = $(<span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'isOpened'</span>); -</pre> -<h5>isClosed</h5> -<pre class="code skip"><span class="hljs-keyword">var</span> isClosed = $(<span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'isClosed'</span>); -</pre> -<h5>destroy</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'destroy'</span>); -</pre> diff --git a/exampleSite/content/blog/content/blog/content/docs/typography.md b/exampleSite/content/blog/content/blog/content/docs/typography.md deleted file mode 100644 index 40f30ef..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/typography.md +++ /dev/null @@ -1,452 +0,0 @@ -+++ -title = "Typography" -weight = 25 -draft = false -description = "Always precise spacing and perfect font size" -bref = "Typography is perhaps one of the most important and most visible things on a web page. Even slightest imperfection can ruin otherwise perfect website. With Kube, you will have perfect typography with ideal spacing, font sizes and proportions, regardless of the exact style or font you choose for your site." -toc = true -+++ - -<h3 class="section-head" id="h-get-started"><a href="#h-get-started">Get Started</a></h3> -<p>Typography of Kube based on the 4px horizontal grid, it means that for the headers, paragraphs, quotes and any other texts chosen are a combination of line-height, that fit into the 4px grid and help set the horizontal rhythm of design by default.</p> -<figure> - <img alt="4px horizontal rhythm" height="180" src="/img/kube/typography/01.png" width="676"> - <figcaption> - 4px grid for typography - the magic of the horizontal rhythm - </figcaption> -</figure> -<p>With this feature, you can quickly and easily make a solid and harmonious-looking website and UI design. You do not need to do complicated calculations to find the size and proportions of the text baseline, no need to look for the magic formula to build a horizontal rhythm. Magic is already in Kube.</p> -<p>You can use all the default settings of typography and it will always look balanced. But also you can easily change any font sizes, just try to set the value of line-height fold for 4px and your texts will still look great.</p> -<p>Additional balance and harmony, creates a classic typography scale, used in Kube.</p> -<figure> - <img alt="the typography scale" height="140" src="/img/kube/typography/02.png" width="520"> - <figcaption> - The typography scale helps to build a balance between the size of headings and text elements - </figcaption> -</figure> -<h3 class="section-head" id="h-headings"><a href="#h-headings">Headings</a></h3> -<p>Use h1-h6 tags or <code>.h1-.h6</code> classes to define headers and <code>class="title"</code> for the title, which is suitable for the most important inscriptions, for example, in the hero or covers.</p> -<div class="example"> - <h1 class="title">Title</h1> - <h1>Heading 1</h1> - <h2>Heading 2</h2> - <h3>Heading 3</h3> - <h4>Heading 4</h4> - <h5>Heading 5</h5> - <h6>Heading 6</h6> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> -<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> -... -<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></pre> -</div> -<h3 class="section-head" id="h-paragraphs"><a href="#h-paragraphs">Paragraphs</a></h3> -<p>The base pragraph has an ideal ratio of font size and baseline. This text is easy to read in most cases.</p> -<div class="example"> - <p class="section-item-desc">16px/24px</p> - <p>By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<p>In special cases, you can use modifiers which increase or decrease the text size. It is useful for building a variety of websites and UI, when you need to make a lead text or signatures with a small font size .</p> -<div class="example"> - <p class="section-item-desc">20px/32px</p> - <p class="large">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<div class="example"> - <p class="section-item-desc">18px/28px</p> - <p class="big">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"big"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<div class="example"> - <p class="section-item-desc">14px/20px</p> - <p class="small">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<div class="example"> - <p class="section-item-desc">12px/20px</p> - <p class="smaller">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"smaller"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<h3 class="section-head" id="h-columns"><a href="#h-columns">Columns</a></h3> -<p>Kube has three classes of <code>.columns-2</code> through <code>.columns-4</code> to create a multi-column layout. All multi-column layouts will be in a single column on mobile.</p> -<div class="example"> - <p class="section-item-desc">2 columns</p> - <div class="columns-2"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns-2"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<div class="example"> - <p class="section-item-desc">3 columns</p> - <div class="columns-3"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns-3"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<div class="example"> - <p class="section-item-desc">4 columns</p> - <div class="columns-4"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns-4"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-quotes"><a href="#h-quotes">Quotes</a></h3> -<p>Quotes in the text stand out for contrast and added variety to the text. In the quotes you can mark text as a paragraph tag and without it.</p> -<div class="example"> - <blockquote> - <p>No, she'll probably make me do it. Goodbye, friends. I never thought I'd die like this. But I always really hoped. I saw you with those two "ladies of the evening" at Elzars. Explain that. I never loved you.</p> - </blockquote> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span>...<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span></pre> -</div> -<p>Use <code>small</code> tag for attribution. It's a prefer way for semantic code.</p> -<div class="example"> - <blockquote> - <p>Who's brave enough to fly into something we all keep calling a death sphere? Yes. You gave me a dollar and some candy. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.</p><small>— Bender</small> - </blockquote> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Quotation content<span class="hljs-tag"></<span class="hljs-name">p</span>></span> - <span class="hljs-tag"><<span class="hljs-name">small</span>></span>Author attribution<span class="hljs-tag"></<span class="hljs-name">small</span>></span> -<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-pre-formatted"><a href="#h-pre-formatted">Pre-formatted</a></h3> -<p>Pre-formatted text most often used to display code snippets or other text elements, for which you wish to preserve the exact formatting they've got.</p> -<div class="example"> - <pre>Function.prototype.inherits = function(parent) -{ - for (var key in parent.prototype) - { - this.prototype[key] = parent.prototype[key]; - } -}; -</pre> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">pre</span>></span>...<span class="hljs-tag"></<span class="hljs-name">pre</span>></span></pre> -</div> -<p>You feel free to use <code>code</code> tag inside <code>pre</code>.</p> -<div class="example"> - <pre class="demo-pre"><code>Function.prototype.inherits = function(parent) -{ - for (var key in parent.prototype) - { - this.prototype[key] = parent.prototype[key]; - } -}; -</code></pre> - <pre class="code"><pre><span class="xml"><span class="hljs-tag"><<span class="hljs-name">code</span>></span>...<span class="hljs-tag"></<span class="hljs-name">code</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">pre</span>></span></span></pre> -</div> -<h3 class="section-head" id="h-inline-elements"><a href="#h-inline-elements">Inline Elements</a></h3> -<p>Kube features various inline formatting elements. They all have their own semantic meaning, but you're free to use them just for their style.</p> -<table> - <thead> - <tr> - <th>Example</th> - <th>Tag</th> - <th>Example</th> - <th>Tag</th> - </tr> - </thead> - <tbody> - <tr> - <td><abbr title="Cascading Style Sheets">CSS</abbr></td> - <td class="col-6"><code><abbr></code></td> - <td><cite>Cite</cite></td> - <td class="col-6"><code><cite></code></td> - </tr> - <tr> - <td><code>Code</code></td> - <td><code><code></code></td> - <td><samp>Sample</samp></td> - <td><code><samp></code></td> - </tr> - <tr> - <td><var>Variable</var></td> - <td><code><var></code></td> - <td><mark>Mark</mark></td> - <td><code><mark></code></td> - </tr> - <tr> - <td><kbd>Shortcut</kbd></td> - <td><code><kbd></code></td> - <td> - <del>Deleted</del> - </td> - <td><code><del></code></td> - </tr> - <tr> - <td><i>Italic</i></td> - <td><code><i></code></td> - <td><em>Emphasis</em></td> - <td><code><em></code></td> - </tr> - <tr> - <td><strong>Highlighted</strong></td> - <td><code><strong></code></td> - <td><b>Bold</b></td> - <td><code><b></code></td> - </tr> - <tr> - <td>x<sup>superscript</sup></td> - <td><code><sup></code></td> - <td>x<sub>subscript</sub></td> - <td><code><sub></code></td> - </tr> - <tr> - <td><small>Small</small></td> - <td><code><small></code></td> - <td> - <ins>Inserted</ins> - </td> - <td><code><ins></code></td> - </tr> - </tbody> -</table> -<h3 class="section-head" id="h-modifiers"><a href="#h-modifiers">Modifiers</a></h3> -<p>Modifiers - a set of helper classes for creating accents in the text and for the solution of useful tasks without writing CSS code, for example, the alignment of the text in the center.</p> -<p>Modifiers can be applied to any tags as inline elements, links or block tags.</p> -<table> - <thead> - <tr> - <th>Example</th> - <th>Modifier</th> - </tr> - </thead> - <tbody> - <tr> - <td><span class="muted">Muted</span></td> - <td class="col-12"><code>.muted</code></td> - </tr> - <tr> - <td> - <a class="muted" href="#">Muted link</a> - </td> - <td><code>.muted</code></td> - </tr> - <tr> - <td> - <a class="black" href="#">Black link</a> - </td> - <td><code>.black</code></td> - </tr> - <tr> - <td><span class="highlight">Highlight</span></td> - <td><code>.highlight</code></td> - </tr> - <tr> - <td><span class="upper">upper</span></td> - <td><code>.upper</code></td> - </tr> - <tr> - <td><span class="lower">LOWER</span></td> - <td><code>.lower</code></td> - </tr> - <tr> - <td><span class="italic">Italic</span></td> - <td><code>.italic</code></td> - </tr> - <tr> - <td><span class="strong">Strong</span></td> - <td><code>.strong</code></td> - </tr> - <tr> - <td><strong class="normal">Not strong</strong></td> - <td><code>.normal</code></td> - </tr> - <tr> - <td><span class="monospace">Monospace</span></td> - <td><code>.monospace</code></td> - </tr> - <tr> - <td><span class="nowrap">Nowrap</span></td> - <td><code>.nowrap</code></td> - </tr> - <tr> - <td class="nowrap">Remove margin bottom</td> - <td><code>.end</code></td> - </tr> - <tr> - <td><span class="highlight">Highlight</span></td> - <td><code>.highlight</code></td> - </tr> - <tr> - <td><span class="small">Small</span></td> - <td><code>.small</code></td> - </tr> - <tr> - <td><span class="smaller">Smaller</span></td> - <td><code>.smaller</code></td> - </tr> - <tr> - <td><span class="large">Large</span></td> - <td><code>.large</code></td> - </tr> - <tr> - <td><span class="big">Big</span></td> - <td><code>.big</code></td> - </tr> - <tr> - <td class="text-left">Text left</td> - <td><code>.text-left</code></td> - </tr> - <tr> - <td class="text-center">Text center</td> - <td><code>.text-center</code></td> - </tr> - <tr> - <td class="text-right">Text right</td> - <td><code>.text-right</code></td> - </tr> - </tbody> -</table> -<h3 class="section-head" id="h-figure"><a href="#h-figure">Figure</a></h3> -<p>A figure tag features an image, a video or a code plus a caption. It is a good accessibility practice. It also helps serve responsive video to various devices when you wrap video into <code>.video-container</code> class.</p> -<h5>Images</h5> -<figure> - <img alt="Image" height="533" src="/img/favicons/logo-384x384.png" width="800"> - <figcaption> - Lorem ipsum dolor sit amet, consectetur adipisicing elit... - </figcaption> -</figure> -<p class="end"><var>HTML</var></p> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -</pre> -<h5>Video</h5> -<figure> - <div class="video-container"> - <iframe allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/nywsA8wCCfY" width="560"></iframe> - </div> - <figcaption> - Journey Through The Ice | National Geographic - </figcaption> -</figure> -<p class="end"><var>HTML</var></p> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">iframe</span>></span>...<span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -</pre> -<h5>Code</h5> -<figure> - <pre>Function.prototype.inherits = function(parent) -{ - for (var key in parent.prototype) - { - this.prototype[key] = parent.prototype[key]; - } -}; -</pre> - <figcaption> - One of the implementations of inheritance - </figcaption> -</figure> -<p class="end"><var>HTML</var></p> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">pre</span>></span>...<span class="hljs-tag"></<span class="hljs-name">pre</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -</pre> -<h3 class="section-head" id="h-lists"><a href="#h-lists">Lists</a></h3> -<p>Although you most likely will not ever need to do so, you can still nest as many list levels as you like.</p> -<div class="row gutters"> - <div class="col col-6"> - <div class="example"> - <ul> - <li>list item 1</li> - <li>list item 2 - <ul> - <li>list item 2.1</li> - <li>list item 2.2 - <ul> - <li>list item 2.2.1</li> - <li>list item 2.2.2</li> - </ul> - </li> - <li>list item 2.3</li> - <li>list item 2.4</li> - </ul> - </li> - <li>list item 3</li> - <li>list item 4</li> - </ul> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</pre> - </div> - </div> - <div class="col col-6"> - <div class="example"> - <ol> - <li>list item 1</li> - <li>list item 2 - <ol> - <li>list item 2.1</li> - <li>list item 2.2 - <ol> - <li>list item 2.2.1</li> - <li>list item 2.2.2</li> - </ol> - </li> - <li>list item 2.3</li> - <li>list item 2.4</li> - </ol> - </li> - <li>list item 3</li> - <li>list item 4</li> - </ol> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ol</span>></span> -</pre> - </div> - </div> -</div> -<h5>Unstyled List</h5> -<p>To remove default list styling, use <code>.unstyled</code>.</p> -<div class="example"> - <ul class="unstyled"> - <li>list item 1</li> - <li>list item 2 - <ul> - <li>list item 2.1</li> - <li>list item 2.2</li> - </ul> - </li> - <li>list item 3</li> - <li>list item 4</li> - </ul> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"unstyled"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</pre> -</div> -<h5>Definition List</h5> -<p>From time to time, you may need to produce a list of definitions, and there's one nicely built-in into Kube. We love semantic things. And lists. We love lists.</p> -<div class="example"> - <dl> - <dt>Term 1</dt> - <dd>Description 1</dd> - <dt>Term 2</dt> - <dd>Description 2</dd> - <dt>Term 3</dt> - <dd>Description 3</dd> - </dl> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">dl</span>></span> - <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>Term<span class="hljs-tag"></<span class="hljs-name">dt</span>></span> - <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>Description<span class="hljs-tag"></<span class="hljs-name">dd</span>></span> -<span class="hljs-tag"></<span class="hljs-name">dl</span>></span> -</pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/docs/utils.md b/exampleSite/content/blog/content/blog/content/docs/utils.md deleted file mode 100644 index 3e58bcc..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/utils.md +++ /dev/null @@ -1,124 +0,0 @@ -+++ -date = "2017-04-10T16:43:30+01:00" -draft = false -weight = 280 -description = "A dozen of useful utilities that come with Kube" -title = "Utils" -bref= "Here you can find over a dozen of examples of little tiny utilities, that can make developer's life that much easier, and your project progress that much faster." -toc = true -+++ - -<h3 class="section-head" id="h-group"><a href="#h-group">Group</a></h3> -<p>Combines float elements to group with a clearfix.</p> -<div class="example"> - <div class="group"> - <div class="float-left"> - This text is visibly floating left - </div> - <div class="float-right"> - This text looks like a case of right float - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"group"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"float-left"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"float-right"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-visibility"><a href="#h-visibility">Visibility</a></h3> -<p>Below is an invisible <code>div</code> with class <var>invisible</var>. You can't see it, because it is invisible. You can't see invisible things.</p> -<div class="example"> - <div class="invisible"> - invisible - </div> - <div class="visible"> - But you can see this <code>div</code> because it has <var>visible</var> class. - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"invisible"</span>>...</<span class="hljs-keyword">div</span>> -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"visible"</span>>...</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-display"><a href="#h-display">Display</a></h3> -<p>This is a very useful little bit. Whenever you need to hide some text or an element on a small screen, just throw in <var>hide-sm</var> class. Or, if you need to specifically show something only on small screens, <var>show-sm</var> class is yours for the job. You can also just plain hide stuff with <var>hide</var> class. Can you see red words "I'm hidden" below? Exactly.</p> -<div class="example"> - <div class="hide red"> - I'm hidden - </div> - <div class="hide-sm"> - This text will not show up on a small screen. - </div> - <p>Resize your window and trust us on this <span class="hide-sm">↑</span> <span class="show-sm">↓</span></p> - <div class="show-sm"> - This text will only show up on a small screen - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide"</span>>I'm hidden</<span class="hljs-keyword">div</span>> -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide-sm"</span>>This <span class="hljs-built_in">text</span> will <span class="hljs-keyword">not</span> show up <span class="hljs-keyword">on</span> a small screen.</<span class="hljs-keyword">div</span>> -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"show-sm"</span>>This will only show up <span class="hljs-keyword">on</span> a small screen</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-print"><a href="#h-print">Print</a></h3> -<p>One more neat feature of Kube. It helps you produce better ready-to-print pages by simply hiding irrelevant things.</p> -<div class="example"> - <div class="hide-print"> - This will be hidden on print, because it is some sort of web-specific thing. - </div> - <div class="show-print"> - This will be printed, because this text is somehow more relevant on paper than on screen. - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide-print"</span>>...</<span class="hljs-keyword">div</span>> -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"show-print"</span>>...</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-video-container"><a href="#h-video-container">Video Container</a></h3> -<p>Helps to serve responsive video to various devices.</p> -<div class="example"> - <div class="video-container"> - <iframe allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/nywsA8wCCfY" width="560"></iframe> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">iframe</span>></span>...<span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-close"><a href="#h-close">Close</a></h3> -<p>Closing icon to close anything you want.</p> -<div class="example"> - <span class="close small"></span> - <pre class="code skip"><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span></pre> -</div> -<div class="example"> - <span class="close"></span> - <pre class="code skip"><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span></pre> -</div> -<div class="example"> - <span class="close big"></span> - <pre class="code skip"><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close big"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span></pre> -</div> -<h3 class="section-head" id="h-caret"><a href="#h-caret">Caret</a></h3> -<p>Kube has already built-in four-direction caret.</p> -<div class="example"> - <span class="caret down"></span> <span class="caret up"></span> <span class="caret left"></span> <span class="caret right"></span> - <pre class="code skip"><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"caret down"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> -<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"caret up"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> -<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"caret left"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> -<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"caret right"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> -</pre> -</div> -<p>Example of usage:</p> -<div class="example"> - <button class="button">Button <span class="caret down white"></span></button> <a href="#">Link <span class="caret up"></span></a> Text <span class="caret down"></span> <button class="button secondary outline">Button <span class="caret down"></span></button> -</div> -<h3 class="section-head" id="h-icons"><a href="#h-icons">Icons</a></h3> -<p>Some useful icons are already built-in to Kube.</p> -<div class="example"> - <i class="kube-search"></i> - <pre class="code skip"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"kube-search"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></pre> -</div> -<div class="example"> - <i class="kube-menu"></i> - <pre class="code skip"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"kube-menu"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></pre> -</div> -<div class="example"> - <i class="kube-calendar"></i> - <pre class="code skip"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"kube-calendar"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/faq/_index.md b/exampleSite/content/blog/content/blog/content/faq/_index.md deleted file mode 100644 index 17c8963..0000000 --- a/exampleSite/content/blog/content/blog/content/faq/_index.md +++ /dev/null @@ -1,39 +0,0 @@ -+++
-draft= false
-title = "FAQ"
-description = "Asked and answered"
-+++
-
-## Kube looks awesome. Who is it for?
-
-We designed Kube as a small and inconspicuous helper for the professional developers and designers. Why an emphasis on “professional”? Well, because Kube is neither a kit of ready elements nor a set of templates; Kube is mainly a tool, which helps to keep routine tasks to a minimum. Kube doesn’t impose its own styles and doesn’t require following any specific design rules or practices. It makes Kube ideal for creative and challenging tasks of making unique websites with the unique design. For those who know HTML/CSS/JS inside out, Kube may become an irreplaceable tool that saves countless hours of work.
-
-If you are new to HTML/CSS/JS, then you may have a hard time implementing Kube in your projects, and it may just not be a tool for you yet. But certainly feel free to download and explore Kube, and see where this journey will take you!
-
-## What? Where’s the Nav Bar and other navigation?
-
-With over 15 years of web development experience under the belt, we can assure you that Nav Bars and all other sorts of navigational elements are always faster and easier to build for a project from scratch than to modify, customize and rebuild an existing solution.
-
-Each and every project has its unique navigational needs and often requires more of a custom approach. Vast experience shows that writing code for navigation from ground up is less time-consuming and more efficient, than tweaking and creating the navigation based on a boilerplate solution.
-
-## Isn’t it a great idea to add some awesome features to Kube?
-
-Nope. We want to keep Kube minimalistic, small and flexible. So, actually, there’s more chance of us removing stuff from the code and functions while preserving features, than adding new code and new stuff.
-
-## What Does the Future Hold for Kube? What’s the plan?
-
-Right now, Kube is a self-sufficient, modern and complete product. We have no specific plans of adding any new components anytime soon; we do not plan to extend Kube as well. Our goal is to improve the things that make Kube so awesome by squashing bugs, refactoring the code and improving overall performance.
-
-Having this said, we are keeping our eyes on what’s new in the world of HTML, CSS, and JS, and if something truly exciting happens in future with these technologies (comparable, let’s say, to flexbox emergence), we most certainly will consider these changes and will be first to go ahead and implement them as soon as possible.
-
-## I’m using old Kube. How do I download it again, and where do I find old Documentation?
-
-Old versions of Kube are critically outdated, and we strongly encourage you to stop using them as soon as you can. We do not offer old versions for download, and we do not provide old documentation. We realize that this may be an inconvenience, however, we also deeply believe that upgrading to the new Kube will bring way greater positive effect to your projects than the ability to support legacy versions.
-
-## How do I migrate from an older version to the latest one?
-
-Basically, you take the new Kube and start afresh from scratch. The old Kube had been built on a completely different set of principles and technologies, and it is pretty much incompatible with the new Kube in every way. Starting anew with the new Kube will also give you an opportunity to reevaluate your project in a new light and improve it in general.
-
-## Can I create design themes for sale based on Kube?
-
-You absolutely can! You have our permission to use Kube in whatever projects you wish commercial, for sale, or otherwise, in whichever way you like.
\ No newline at end of file diff --git a/exampleSite/content/blog/content/blog/content/password-recovery.md b/exampleSite/content/blog/content/blog/content/password-recovery.md deleted file mode 100644 index 73ae263..0000000 --- a/exampleSite/content/blog/content/blog/content/password-recovery.md +++ /dev/null @@ -1,17 +0,0 @@ -
-+++
-title = "Password Recovery"
-+++
-<form id="form-recovery-form" action="" data-component="validate" method="post" class="form form-centered"><input type="hidden" name="authorize-token" value="">
-
- <div class="form-item">
- <label>Your email <span class="error" id="user-email-validation-error"></span></label>
- <input type="email" name="user-email" autofocus="true" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
- </div>
-
- <p>
- <button class="button primary width-100">Send</button>
- </p>
-
- <p><a href="/account/" class="small muted">Back to Log In</a></p>
-</form>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/company.md b/exampleSite/content/blog/content/company.md deleted file mode 100644 index bc2cdf2..0000000 --- a/exampleSite/content/blog/content/company.md +++ /dev/null @@ -1,4 +0,0 @@ -+++
-title = "Company"
-description = "We create apps and websites since 2009. We aim for minimalism and efficiency in everything we do. Our products are simple yet beautiful. They help you focus on your goals, not on your tools."
-+++
diff --git a/exampleSite/content/blog/content/docs/animation.md b/exampleSite/content/blog/content/docs/animation.md deleted file mode 100644 index 3ff71e4..0000000 --- a/exampleSite/content/blog/content/docs/animation.md +++ /dev/null @@ -1,163 +0,0 @@ -+++ -description = "Add some motion, shaking, pulsing, sliding and more" -title = "Animation" -date = "2017-04-10T16:43:08+01:00" -draft = false -weight = 200 -bref="Although it is quite easy to overuse animation effects, Kube makes it pretty easy to create meaningful, smooth and overall nice looking animation. Feel free to click every button below to see what it does, and then only use those effects that are essential to your project" -toc = true -script = 'animation' -+++ - -<h3 class="section-head" id="h-slide"><a href="#h-slide">Slide</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div id="animation-box-slide-up"> - slideUp - </div> - </div> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-slide-down"> - slideDown - </div> - </div> - </div><a class="demo-animation-btn" data-back="slideDown" data-el="#animation-box-slide-up" data-to="slideUp" href="#" id="slide-up-btn">Slide Up</a> <a class="demo-animation-btn" data-back="slideUp" data-el="#animation-box-slide-down" data-to="slideDown" href="#" id="slide-down-btn">Slide Down</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideUp'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideDown'</span>);</pre> -</div> -<h3 class="section-head" id="h-fade"><a href="#h-fade">Fade</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-fade-in"> - fadeIn - </div> - </div> - <div class="demo-animation-box"> - <div id="animation-box-fade-out"> - fadeOut - </div> - </div> - </div><a class="demo-animation-btn" data-back="fadeOut" data-el="#animation-box-fade-in" data-to="fadeIn" href="#" id="fade-in-btn">Fade In</a> <a class="demo-animation-btn" data-back="fadeIn" data-el="#animation-box-fade-out" data-to="fadeOut" href="#" id="fade-out-btn">Fade Out</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'fadeIn'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'fadeOut'</span>);</pre> -</div> -<h3 class="section-head" id="h-flip"><a href="#h-flip">Flip</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-flip-in"> - flipIn - </div> - </div> - <div class="demo-animation-box"> - <div id="animation-box-flip-out"> - flipOut - </div> - </div> - </div><a class="demo-animation-btn" data-back="flipOut" data-el="#animation-box-flip-in" data-to="flipIn" href="#" id="flip-in-btn">Flip In</a> <a class="demo-animation-btn" data-back="flipIn" data-el="#animation-box-flip-out" data-to="flipOut" href="#" id="flip-out-btn">Flip Out</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'flipIn'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'flipOut'</span>);</pre> -</div> -<h3 class="section-head" id="h-zoom"><a href="#h-zoom">Zoom</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-zoom-in"> - zoomIn - </div> - </div> - <div class="demo-animation-box"> - <div id="animation-box-zoom-out"> - zoomOut - </div> - </div> - </div><a class="demo-animation-btn" data-back="zoomOut" data-el="#animation-box-zoom-in" data-to="zoomIn" href="#" id="zoom-in-btn">Zoom In</a> <a class="demo-animation-btn" data-back="zoomIn" data-el="#animation-box-zoom-out" data-to="zoomOut" href="#" id="zoom-out-btn">Zoom Out</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'zoomIn'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'zoomOut'</span>);</pre> -</div> -<h3 class="section-head" id="h-rotate"><a href="#h-rotate">Rotate</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div id="animation-box-rotate"> - rotate - </div> - </div> - </div><a class="demo-animation-btn" href="#" id="rotate-btn">Rotate</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'rotate'</span>);</pre> -</div> -<h3 class="section-head" id="h-shake"><a href="#h-shake">Shake</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div id="animation-box-shake"> - shake - </div> - </div> - </div><a class="demo-animation-btn" href="#" id="shake-btn">Shake</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'shake'</span>);</pre> -</div> -<h3 class="section-head" id="h-pulse"><a href="#h-pulse">Pulse</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div id="animation-box-pulse"> - pulse - </div> - </div> - </div><a class="demo-animation-btn" href="#" id="pulse-btn">Pulse</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'pulse'</span>);</pre> -</div> -<h3 class="section-head" id="h-slide-in"><a href="#h-slide-in">Slide In</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-slide-in-right"> - slideInRight - </div> - </div> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-slide-in-left"> - slideInLeft - </div> - </div> - <div class="demo-animation-box"> - <div class="hide" id="animation-box-slide-in-down"> - slideInDown - </div> - </div> - </div><a class="demo-animation-btn" data-back="slideOutRight" data-el="#animation-box-slide-in-right" data-to="slideInRight" href="#" id="slide-in-right-btn">Slide In Right</a> <a class="demo-animation-btn" data-back="slideOutLeft" data-el="#animation-box-slide-in-left" data-to="slideInLeft" href="#" id="slide-in-left-btn">Slide In Left</a> <a class="demo-animation-btn" data-back="slideOutUp" data-el="#animation-box-slide-in-down" data-to="slideInDown" href="#" id="slide-in-down-btn">Slide In Down</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideInRight'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideInLeft'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideInDown'</span>);</pre> -</div> -<h3 class="section-head" id="h-slide-out"><a href="#h-slide-out">Slide Out</a></h3> -<div class="example"> - <div class="demo-animation-wrap"> - <div class="demo-animation-box"> - <div id="animation-box-slide-out-right"> - slideOutRight - </div> - </div> - <div class="demo-animation-box"> - <div id="animation-box-slide-out-left"> - slideOutLeft - </div> - </div> - <div class="demo-animation-box"> - <div id="animation-box-slide-out-up"> - slideOutUp - </div> - </div> - </div><a class="demo-animation-btn" data-back="slideInRight" data-el="#animation-box-slide-out-right" data-to="slideOutRight" href="#" id="slide-out-right-btn">Slide Out Right</a> <a class="demo-animation-btn" data-back="slideInLeft" data-el="#animation-box-slide-out-left" data-to="slideOutLeft" href="#" id="slide-out-left-btn">Slide Out Left</a> <a class="demo-animation-btn" data-back="slideInDown" data-el="#animation-box-slide-out-up" data-to="slideOutUp" href="#" id="slide-out-up-btn">Slide Out Up</a> - <pre class="code"><span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideOutRight'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideOutLeft'</span>); -<span class="hljs-variable">$(</span><span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'slideOutUp'</span>);</pre> -</div> -<h3 class="section-head" id="h-callback"><a href="#h-callback">Callback</a></h3> -<pre class="code">$(<span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'fadeIn'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// code ...</span> -});</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/breadcrumbs.md b/exampleSite/content/blog/content/docs/breadcrumbs.md deleted file mode 100644 index b195c9e..0000000 --- a/exampleSite/content/blog/content/docs/breadcrumbs.md +++ /dev/null @@ -1,99 +0,0 @@ -+++ -date = "2017-04-10T16:41:54+01:00" -weight = 110 -description = "Traces for the users so they won't get lost" -title = "Breadcrumbs" -draft = false -bref= "Breadcrumbs in Kube are formed as lists with default separator. This separator can be customized with ease by simply changing a single CSS line" -toc = true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <nav class="breadcrumbs"> - <ul> - <li> - <a href="#">Home</a> - </li> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">Catalog</a> - </li> - <li> - <a href="#">T-Shirts</a> - </li> - <li><span>Brand</span></li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumbs"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-centered"><a href="#h-centered">Centered</a></h3> -<div class="example"> - <nav class="breadcrumbs push-center"> - <ul> - <li> - <a href="#">Home</a> - </li> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">Catalog</a> - </li> - <li> - <a href="#">T-Shirts</a> - </li> - <li class="active"> - <a href="">Brand</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumbs push-center"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-custom-separator"><a href="#h-custom-separator">Custom Separator</a></h3> -<div class="example"> - <nav class="breadcrumbs" id="breadcrumbs-custom-separator"> - <ul> - <li> - <a href="#">Home</a> - </li> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">Catalog</a> - </li> - <li> - <a href="#">T-Shirts</a> - </li> - <li><span>Brand</span></li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-comment">// css</span> -<span class="hljs-meta">#breadcrumbs-custom-separator li:after {</span> -<span class="hljs-symbol"> content:</span> <span class="hljs-string">'>'</span>; -} - -<span class="hljs-comment">// html</span> -<span class="hljs-params"><nav id="breadcrumbs-custom-separator" class="breadcrumbs"></span> - <span class="hljs-params"><ul></span> - <span class="hljs-params"><li></span><span class="hljs-params"><a href=""></span>...<span class="hljs-params"></a></span><span class="hljs-params"></li></span> - <span class="hljs-params"><li></span><span class="hljs-params"><span></span>...<span class="hljs-params"></span></span><span class="hljs-params"></li></span> - <span class="hljs-params"></ul></span> -<span class="hljs-params"></nav></span> -</pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/buttons.md b/exampleSite/content/blog/content/docs/buttons.md deleted file mode 100644 index 3027dc7..0000000 --- a/exampleSite/content/blog/content/docs/buttons.md +++ /dev/null @@ -1,108 +0,0 @@ -+++ -date = "2017-04-10T16:41:16+01:00" -weight = 70 -description = "Full variety of pressible, clickable and pushable buttons" -title = "Buttons" -draft = false -bref = "Buttons in Kube are minimalistic, designed for instant and convenient customization, and are ready to be pushed, pressed, clicked and manipulated in whichever ways. A lot of interactive components use buttons, and you should too!" -toc = true -+++ - -<h3 class="section-head" id="h-primary"><a href="#h-primary">Primary</a></h3> -<div class="example"> - <button class="button">Button</button> <a class="button" href="#">Button</a> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">a</span>></span></pre> -</div> -<h3 class="section-head" id="h-secondary"><a href="#h-secondary">Secondary</a></h3> -<div class="example"> - <button class="button secondary">Button</button> <a class="button secondary" href="#">Button</a> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">a</span>></span></pre> -</div> -<h3 class="section-head" id="h-outline"><a href="#h-outline">Outline</a></h3> -<p>Outline class does exactly what it is supposed to do: styles a button with an outline with no fill color.</p> -<div class="example"> - <button class="button outline">Button</button> <button class="button secondary outline">Button</button> - <pre class="code"><<span class="hljs-keyword">button</span> class=<span class="hljs-string">"button outline"</span>><span class="hljs-keyword">Button</span></<span class="hljs-keyword">button</span>> -<<span class="hljs-keyword">button</span> class=<span class="hljs-string">"button secondary outline"</span>><span class="hljs-keyword">Button</span></<span class="hljs-keyword">button</span>></pre> -</div> -<h3 class="section-head" id="h-disabled"><a href="#h-disabled">Disabled</a></h3> -<p>Disabled buttons are automatically styles with muted colors, inactive and not clickable. As you can see, there's no need to set disabled class for the button element, and disabled argument is enough. Having this said, both a link and a button input require disabled class.</p> -<div class="example"> - <a class="button disabled" href="#" role="button">Link</a> <button class="button secondary" disabled>Button</button> <button class="button outline" disabled>Button</button> <button class="button secondary outline" disabled>Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button disabled"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary"</span> <span class="hljs-attr">disabled</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-small"><a href="#h-small">Small</a></h3> -<p>Buttons come in all sizes and shapes.</p> -<div class="example"> - <a class="button small" href="#" role="button">Link</a> <button class="button secondary small">Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button small"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary small"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-big"><a href="#h-big">Big</a></h3> -<div class="example"> - <a class="button big" href="#" role="button">Link</a> <button class="button secondary big">Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button big"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary big"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-large"><a href="#h-large">Large</a></h3> -<div class="example"> - <a class="button large" href="#" role="button">Link</a> <button class="button secondary large">Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button large"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary large"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-upper"><a href="#h-upper">Upper</a></h3> -<div class="example"> - <a class="button upper" href="#" role="button">Link</a> <button class="button secondary upper">Button</button> <a class="button upper outline" href="#" role="button">Link</a> <button class="button secondary upper outline">Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button upper"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary upper"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button upper outline"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary upper outline"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-round"><a href="#h-round">Round</a></h3> -<div class="example"> - <a class="button round" href="#" role="button">Link</a> <button class="button secondary round">Button</button> <a class="button round outline" href="#" role="button">Link</a> <button class="button secondary round outline">Button</button> -</div> -<pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button round"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary round"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button round outline"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary round outline"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -<h3 class="section-head" id="h-inverted"><a href="#h-inverted">Inverted</a></h3> -<p>For use on darker backgrounds, you can just introduce inverted class to have your button flip its color to the opposite one.</p> -<div class="example bg-darkgray"> - <a class="button inverted" href="#" role="button">Link</a> <button class="button inverted outline">Button</button> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button inverted"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Link<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button inverted outline"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -</div> -<h3 class="section-head" id="h-width"><a href="#h-width">Width</a></h3> -<div class="example"> - <p><button class="button w100">100%</button></p> - <p><button class="button secondary w50">50%</button></p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button w100"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary w50"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -</div> -<h3 class="section-head" id="h-icons"><a href="#h-icons">Icons</a></h3> -<div class="example"> - <button class="button"><i class="kube-calendar"></i></button> <button class="button secondary"><i class="kube-calendar"></i> Change</button> <button class="button outline"><i class="kube-search"></i></button> <button class="button secondary outline"><i class="kube-search"></i> Search</button> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kube-calendar"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kube-calendar"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Change<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button outline"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kube-search"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary outline"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kube-search"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> -</div> -<h3 class="section-head" id="h-custom"><a href="#h-custom">Custom</a></h3> -<p>With some Sass magic, you can customize your buttons in a snap. Just include a color class declaration and set the color itself, and you're done.</p> -<div class="example"> - <button class="button red">Button</button> <button class="button red outline">Button</button> - <pre class="code"><span class="hljs-comment">// scss</span> -.button.red { - <span class="hljs-comment">// $text-color, $back-color</span> - @include <span class="hljs-keyword">button</span>(<span class="hljs-meta">#fff, #ff3366);</span> -} - -<span class="hljs-comment">// html</span> -<<span class="hljs-keyword">button</span> class=<span class="hljs-string">"button red"</span>><span class="hljs-keyword">Button</span></<span class="hljs-keyword">button</span>> -<<span class="hljs-keyword">button</span> class=<span class="hljs-string">"button red outline"</span>><span class="hljs-keyword">Button</span></<span class="hljs-keyword">button</span>></pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/collapse.md b/exampleSite/content/blog/content/docs/collapse.md deleted file mode 100644 index fdc4029..0000000 --- a/exampleSite/content/blog/content/docs/collapse.md +++ /dev/null @@ -1,207 +0,0 @@ -+++ -date = "2017-04-10T16:42:50+01:00" -draft = false -weight = 180 -description = "Smoothly and reliably collapse elements for extra convenience" -title = "Collapse" -bref="Collapsable elements are horizontally aligned tabs, in a way. Jokes aside, collapsable elements are useful and easy to setup, both for direct purpose of switching between content while collapsing everything else, and for navigation use cases" -toc = true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <div class="my-collapse" data-component="collapse" id="my-collapse"> - <h4><a class="collapse-toggle" href="#collapse-box-1">Item 1</a></h4> - <div class="collapse-box hide" id="collapse-box-1"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#collapse-box-2">Item 2</a></h4> - <div class="collapse-box" id="collapse-box-2"> - <p>I look active on load.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#collapse-box-3">Item 3</a></h4> - <div class="collapse-box hide" id="collapse-box-3"> - <h6>Important Heading</h6> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - </div> - -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-collapse"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-navigation-example"><a href="#h-navigation-example">Navigation Example</a></h3> -<p>Here you can see a list of items forming a navigation menu, with a nested list which acts as a collapsable element</p> -<div class="example"> - <ul id="demo-nav-collapse"> - <li> - <a href="#">Installation</a> - </li> - <li> - <a href="#">Configuration</a> - </li> - <li> - <a href="#">Adding Content</a> - </li> - <li> - <a href="#">Templates</a> - </li> - <li data-component="collapse"> - <a class="collapse-toggle" href="#languages-box-2">Languages <span class="caret down"></span></a> - <ul class="collapse-box" id="languages-box-2"> - <li> - <a href="#">Setup</a> - </li> - <li> - <a href="#">Translating content</a> - </li> - <li> - <a href="#">Language variables</a> - </li> - <li> - <a href="#">Supporting RTL</a> - </li> - </ul> - </li> - <li> - <a href="#">Settings</a> - </li> - <li> - <a href="#">Callbacks</a> - </li> - <li> - <a href="#">API</a> - </li> - </ul> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#toggle-box"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span> - Toggle - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"toggle-box"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<p>Settings are pretty straightforward: you can toggle, denote active element, turn animation on and off, and more.</p> -<h5>toggle</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<h5>active</h5> -<ul> - <li>Type: <var>string or boolean</var></li> - <li>Default: <var>false</var></li> -</ul> -<h5>toggleClass</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'collapse-toggle'</var></li> -</ul> -<p>Sets a class of a collapsable object.</p> -<h5>boxClass</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'collapse-box'</var></li> -</ul> -<p>Sets a class for collapsable object's content</p> -<h5>animation</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Turns animation on and off.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'open.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'opened.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'close.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-collapse'</span>).on(<span class="hljs-string">'closed.collapse'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h3 class="section-head" id="h-api"><a href="#h-api">API</a></h3> -<p>We love APIs, and for interactive elements such as collapsable elements we offer ways to programmatically open and close individual elements, or all at once.</p> -<div class="example"> - <p><button class="button outline" onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('openAll');">Open All</button> <button class="button outline" onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button></p><br> - <div class="my-collapse" data-component="collapse" id="my-collapse-api"> - <h4><a class="collapse-toggle" href="#box-1">Item 1</a></h4> - <div class="collapse-box hide" id="box-1"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#box-2">Item 2</a></h4> - <div class="collapse-box hide" id="box-2"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <h4><a class="collapse-toggle" href="#box-3">Item 3</a></h4> - <div class="collapse-box hide" id="box-3"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('open', '#box-2');"</span>></span>Open<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('close', '#box-2');"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('openAll');"</span>></span>Open All<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('closeAll');"</span>></span>Close All<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-collapse-api"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h4</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h5>open</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'open'</span>); -</pre> -<h5>close</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'close'</span>); -</pre> -<h5>openAll</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'openAll'</span>); -</pre> -<h5>closeAll</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'closeAll'</span>); -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/colors.md b/exampleSite/content/blog/content/docs/colors.md deleted file mode 100644 index d59e0fc..0000000 --- a/exampleSite/content/blog/content/docs/colors.md +++ /dev/null @@ -1,141 +0,0 @@ -+++ -date = "2017-04-10T16:43:14+01:00" -draft = false -weight = 210 -description = "The basic set of colors" -title = "Colors" -bref="Kube has a basic set of colors for text, links, buttons, states and gray palette. These colors help to create uniformity and harmony in the look of UI elements. All colors are carefully selected and combined with each other. Of course, you can change the color scheme to your choice in the framework settings." -toc = true -+++ - -<h3 class="section-head">Text</h3> -<p>Contrasting black color for headings and less intense dark gray for the text helps to improve readability.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch swatch-bg-headings"></span> - <h5>Headings</h5> - <p>$color-headings</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-text"></span> - <h5>Text</h5> - <p>$color-text</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-links"><a href="#h-links">Links</a></h3> -<p>Classic blue links and soft red for the hover state makes links visible and predictable.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch swatch-bg-link"></span> - <h5>Link</h5> - <p>$color-link</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-link-hover"></span> - <h5>Hover</h5> - <p>$color-link-hover</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-buttons"><a href="#h-buttons">Buttons</a></h3> -<p>Blue color for primary buttons for greater consistency with links. Black color for secondary buttons allows you build a variety of UI.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch swatch-bg-button-primary"></span> - <h5>Primary</h5> - <p>$color-button-primary</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-button-secondary"></span> - <h5>Secondary</h5> - <p>$color-button-secondary</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-states"><a href="#h-states">States</a></h3> -<p>All possible states of the UI are in the simple and intuitive color scheme helps to focus the user's attention when creating an interactive UI.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch bg-error"></span> - <h5>Error</h5> - <p>$color-error</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-focus"></span> - <h5>Focus</h5> - <p>$color-focus</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-success"></span> - <h5>Success</h5> - <p>$color-success</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-warning"></span> - <h5>Warning</h5> - <p>$color-warning</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-extra"><a href="#h-extra">Extra</a></h3> -<p>Special color to highlight areas of interaction with the interface. And the white color for all cases.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch bg-highlight"></span> - <h5>Highlight</h5> - <p>$color-highlight</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-inverted"></span> - <h5>Inverted</h5> - <p>$color-inverted</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-grayscale"><a href="#h-grayscale">Grayscale</a></h3> -<p>Harmonious and well-thought-out scheme of gray for a broad range of tasks in the designing of the interface from controls to backgrounds.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch bg-black"></span> - <h5>Black</h5> - <p>$color-black</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-darkgray"></span> - <h5>Darkgray</h5> - <p>$color-darkgray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-midgray"></span> - <h5>Midgray</h5> - <p>$color-midgray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-gray"></span> - <h5>Gray</h5> - <p>$color-gray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-lightgray"></span> - <h5>Lightgray</h5> - <p>$color-lightgray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-silver"></span> - <h5>Silver</h5> - <p>$color-silver</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-aluminum"></span> - <h5>Aluminum</h5> - <p>$color-aluminum</p> - </div> - </div> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/custom-plugins.md b/exampleSite/content/blog/content/docs/custom-plugins.md deleted file mode 100644 index 49e0b67..0000000 --- a/exampleSite/content/blog/content/docs/custom-plugins.md +++ /dev/null @@ -1,96 +0,0 @@ -+++
-title = "Custom Plugins"
-description = "Flexible and extensible way to add custom features"
-weight = 20
-draft = false
-toc = true
-bref = "Kube has a lot to offer in terms of extensibility and flexibility, and plugins are the way of doing incredible things without bloating the core. With plugins, you can extend existing features, make them more interactive, or you can crate completely new functionality."
-+++
-
-<h3 class="section-head" id="h-plugin"><a href="#h-plugin">Plugin Template</a></h3>
-<p>Here's what a generic plugin looks like. This template gives an overall idea of what you can do with plugins in Kube. Feel free to use this one as a boilerplate for your custom plugins.</p>
-<pre class="code skip">(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">Kube</span>)
-</span>{
- Kube.Myplugin = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">element, options</span>)
- </span>{
- <span class="hljs-keyword">this</span>.namespace = <span class="hljs-string">'myplugin'</span>;
-
- <span class="hljs-comment">// default settings</span>
- <span class="hljs-keyword">this</span>.defaults = {
- mysetting: <span class="hljs-literal">true</span>
- };
-
- <span class="hljs-comment">// Parent Constructor</span>
- Kube.apply(<span class="hljs-keyword">this</span>, <span class="hljs-built_in">arguments</span>);
-
- <span class="hljs-comment">// Initialization</span>
- <span class="hljs-keyword">this</span>.start();
- };
-
- <span class="hljs-comment">// Functionality</span>
- Kube.Myplugin.prototype = {
- start: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
- </span>{
- <span class="hljs-comment">// plugin element</span>
- <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$element);
-
- <span class="hljs-comment">// call options</span>
- <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.opts.mysetting);
-
- <span class="hljs-comment">// call methods</span>
- <span class="hljs-keyword">this</span>.method();
- },
- method: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
- </span>{
- <span class="hljs-comment">// do something...</span>
-
- <span class="hljs-comment">// callback</span>
- <span class="hljs-keyword">this</span>.callback(<span class="hljs-string">'show'</span>);
-
- <span class="hljs-comment">// callback with arguments</span>
- <span class="hljs-keyword">this</span>.callback(<span class="hljs-string">'show'</span>, value1, value2);
- }
- };
-
- <span class="hljs-comment">// Inheritance</span>
- Kube.Myplugin.inherits(Kube);
-
- <span class="hljs-comment">// Plugin</span>
- Kube.Plugin.create(<span class="hljs-string">'Myplugin'</span>);
- Kube.Plugin.autoload(<span class="hljs-string">'Myplugin'</span>);
-
-}(Kube));
-</pre>
-<h3 class="section-head" id="h-call"><a href="#h-call">Call</a></h3>
-<p>Calling a plugin is very easy, just add the <code>data-component</code> with the name of your plugin and it will start automatic.</p>
-<pre class="code"><<span class="hljs-keyword">div</span> data-component=<span class="hljs-string">"myplugin"</span>></<span class="hljs-keyword">div</span>></pre>
-<p>Or call manually</p>
-<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-element"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
- $(<span class="hljs-string">'#my-element'</span>).myplugin();
-</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-</pre>
-<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3>
-<p>Kube plugins can react on events with callbacks. Whenever you need your plugin to do something in response to an action or an event, just use a callback.</p>
-<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myplugin"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"myplugin"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
-$(<span class="hljs-string">'#myplugin'</span>).on(<span class="hljs-string">'show.myplugin'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
-</span>{
- <span class="hljs-comment">// do something...</span>
-});
-</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-</pre>
-<p>All plugin methods and variables are available within the plugin via <var>this</var>:</p>
-<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
-$(<span class="hljs-string">'#myplugin'</span>).on(<span class="hljs-string">'show.myplugin'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
-</span>{
- <span class="hljs-comment">// plugin element</span>
- <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$element);
-
- <span class="hljs-comment">// call plugin method</span>
- <span class="hljs-keyword">this</span>.method();
-});
-</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/dropdown.md b/exampleSite/content/blog/content/docs/dropdown.md deleted file mode 100644 index 2c2eaf5..0000000 --- a/exampleSite/content/blog/content/docs/dropdown.md +++ /dev/null @@ -1,172 +0,0 @@ -+++ -date = "2017-04-10T16:42:12+01:00" -draft = false -weight = 140 -description = "Popular and adjustable menu and navigation option" -title = "Dropdown" -bref= "Dropdown menus in Kube are simple and intuitive. You've got a link with <code>data-component='dropdown'</code> and a <code>div</code> with some kind of HTML content. Clicking outside of the dropdown or hitting <kbd>Esc</kbd> closes dropdown" -toc = true -+++ - -<h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> -<div class="example"> - <p><a data-component="dropdown" data-loaded="true" data-target="#dropdown1" href="#">Show Dropdown <span class="caret down"></span></a></p> - <div class="dropdown hide" id="dropdown1"> - <a class="close show-sm" href=""></a> - <ul> - <li> - <a href="">Item 1</a> - </li> - <li> - <a href="">Item 2</a> - </li> - <li class="active"> - <a href="">Item 3</a> - </li> - <li> - <a href="">Item 4</a> - </li> - <li> - <a href=""><span class="label primary">Item 5</span></a> - </li> - <li> - <a href=""><span class="label error">Item 6</span></a> - </li> - </ul> - </div> - <pre class="code skip">// Toggle -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"dropdown"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#my-dropdown"</span>></span>Show <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> - -// Dropdown -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-dropdown"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close show-sm"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<div class="example"> - <p><button class="button outline" data-component="dropdown" data-loaded="true" data-target="#dropdown2">Show Dropdown <span class="caret down"></span></button></p> - <div class="dropdown hide" id="dropdown2"> - <div style="padding: 24px;"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a data-action="dropdown-close" href="#">Close</a> - </div> - </div> - <pre class="code skip">// Toggle -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"dropdown"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#my-dropdown"</span>></span>Show Dropdown <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> - -// Dropdown -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-dropdown"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-action</span>=<span class="hljs-string">"dropdown-close"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head">Navigation Fixed</h3> -<p>Scroll down a bit to make a fixed navigation bar appear at the top of the page, and then try out "Account" dropdown.</p> -<div class="example"> - <div data-component="sticky" data-loaded="true" id="navbar-demo"> - <div id="navbar-brand"> - <a href=""><img alt="Brand" src="/img/kube/brand.png"></a> - </div> - <nav id="navbar-main"> - <ul> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">News</a> - </li> - <li> - <a href="#">Contact</a> - </li> - <li> - <a href="#">Blog</a> - </li> - <li> - <a data-component="dropdown" data-loaded="true" data-target="#dropdown-fixed" href="">Account <span class="caret down"></span></a> - </li> - </ul> - </nav> - </div> - <div class="dropdown hide" id="dropdown-fixed"> - <ul> - <li> - <a href="">Billing</a> - </li> - <li> - <a href="">Log Out</a> - </li> - </ul> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navbar-demo"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"sticky"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">nav</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"dropdown"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#dropdown-fixed"</span>></span> - Account - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -// Dropdown -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-fixed"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>target</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>null</var></li> -</ul> -<p>Sets an ID of a target dropdown layer.</p> -<h5>height</h5> -<ul> - <li>Type: <var>int</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Sets dropdown height.</p> -<h5>width</h5> -<ul> - <li>Type: <var>int</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Sets dropdown width.</p> -<h5>animation</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Turns opening and closing animation on and off.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code">$(<span class="hljs-string">'#my-dropdown'</span>).on(<span class="hljs-string">'open.dropdown'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -});</pre> -<h5>opened</h5> -<pre class="code">$(<span class="hljs-string">'#my-dropdown'</span>).on(<span class="hljs-string">'opened.dropdown'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -});</pre> -<h5>close</h5> -<pre class="code">$(<span class="hljs-string">'#my-dropdown'</span>).on(<span class="hljs-string">'close.dropdown'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -});</pre> -<h5>closed</h5> -<pre class="code">$(<span class="hljs-string">'#my-dropdown'</span>).on(<span class="hljs-string">'closed.dropdown'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -});</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/forms.md b/exampleSite/content/blog/content/docs/forms.md deleted file mode 100644 index 2055793..0000000 --- a/exampleSite/content/blog/content/docs/forms.md +++ /dev/null @@ -1,800 +0,0 @@ -+++ -date = "2017-04-10T16:40:50+01:00" -title = "Forms" -draft = false -weight = 60 -description = "Rows and columns for all sorts of tables" -bref = 'Forms come in all forms and shapes in Kube, and you can do all sorts of things with them, especially when combining with <a href="/docs/custom-plugins/">custom plugins</a> for extra interactivity. These forms are ideal building material for your awesome projects!' -toc = true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<p>This is the most basic form with all the basic inputs.</p> -<div class="example"> - <form action="" autocomplete="off" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> <input id="fake_user_name" name="fake_user[name]" style="position:absolute; top:-10000px;" type="text" value="Safari Autofill Me"> - <div class="form-item"> - <label>Email</label> <input class="w50" name="email" type="email"> - </div> - <div class="form-item"> - <label>Country</label> <select> - <option value=""> - --- - </option> - </select> - </div> - <div class="form-item"> - <label class="checkbox"><input type="checkbox"> Check me</label> <label class="checkbox"><input type="radio"> Radio me</label> - </div> - <div class="form-item"> - <textarea rows="6"></textarea> - </div> - <div class="form-item form-buttons"> - <button>Log in</button> <button class="button secondary outline">Cancel</button> - </div> - </form> - -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form"</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w50"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Country<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>></span>---<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> Check me<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>></span> Radio me<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"6"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span>></span>Log in<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary outline"</span>></span>Cancel<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</pre> - -</div> - -<h3 class="section-head" id="h-inputs"><a href="#h-inputs">Inputs</a></h3> -<p>Here's a standard input field with type set as text. Label serves as input's label, and the following div with class desc serves as an optional description.</p> -<div class="example"> - <form class="form"> - <div class="form-item"> - <label>City</label> <input type="text"> - <div class="desc"> - This information helps us deliver orders on time. - </div> - </div> - </form> - <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>City<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<p>Here are two text input fields, one with a placeholder and another one disabled, both set to be 6 grid columns wide.</p> -<div class="example"> - <form class="form"> - <div class="row gutters"> - <div class="col col-6"> - <div class="form-item"> - <input placeholder="Email" type="text"> - </div> - </div> - <div class="col col-6"> - <div class="form-item"> - <input disabled="true" type="text" value="Disabled"> - </div> - </div> - </div> - </form> - <pre class="code skip"><form <span class="hljs-built_in">class</span>=<span class="hljs-string">"form"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row gutters"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"form-item"</span>> - <input type=<span class="hljs-string">"text"</span> placeholder=<span class="hljs-string">"Email"</span>> - </<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"form-item"</span>> - <input type=<span class="hljs-string">"text"</span> disabled=<span class="hljs-string">"true"</span> value=<span class="hljs-string">"Disabled"</span>> - </<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> -</form> -</pre> -</div> -<p>Here's how you denote required fields with req class, and add descriptions to labels using span with class desc.</p> -<div class="example"> - <form class="form"> - <div class="row gutters"> - <div class="col col-6"> - <div class="form-item"> - <label>City <span class="req">*</span></label> <input type="text"> - </div> - </div> - <div class="col col-6"> - <div class="form-item"> - <label>City <span class="desc">Just curious.</span></label> <input type="text"> - <div class="desc"> - This information helps us deliver orders on time. - </div> - </div> - </div> - </div> - </form> - <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row gutters"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>City <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"req"</span>></span>*<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>City <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</span></pre> -</div> -<h3 class="section-head" id="h-search"><a href="#h-search">Search</a></h3> -<div class="example"> - <form class="form"> - <div class="form-item"> - <input class="search" type="text"> - </div> - </form> - <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"search"</span>> - </div> -</form> -</pre> -</div> -<h3 class="section-head" id="h-checkboxes"><a href="#h-checkboxes">Checkboxes & Radio</a></h3> -<p>Kube features full variety of stylish checkboxes and radio buttons. You can feature them on your pages by defining input type as checkbox or radio. There's also a neat option to place checkboxes inline by adding <code>form-checkboxes</code> class to the container (works for both checkboxes and radio buttons)</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item form-checkboxes"> - <label class="checkbox"><input type="checkbox"> Check 1</label> <label class="checkbox"><input type="checkbox"> Check 2</label> <label class="checkbox"><input type="checkbox"> Check 3</label> <label class="checkbox"><input type="checkbox"> Check 4</label> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item form-checkboxes"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label class="checkbox"><input type="checkbox"> Check 1</label> <label class="checkbox"><input type="checkbox"> Check 2</label> <label class="checkbox"><input type="checkbox"> Check 3</label> <label class="checkbox"><input type="checkbox"> Check 4</label> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item form-checkboxes"> - <label class="checkbox"><input name="check" type="radio"> Check 1</label> <label class="checkbox"><input name="check" type="radio"> Check 2</label> <label class="checkbox"><input name="check" type="radio"> Check 3</label> <label class="checkbox"><input name="check" type="radio"> Check 4</label> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item form-checkboxes"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>></span> Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label class="checkbox"><input name="check" type="radio"> Check 1</label> <label class="checkbox"><input name="check" type="radio"> Check 2</label> <label class="checkbox"><input name="check" type="radio"> Check 3</label> <label class="checkbox"><input name="check" type="radio"> Check 4</label> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>></span> Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-fieldset"><a href="#h-fieldset">Fieldset</a></h3> -<p>Fieldsets in Kube are nicely pre-formatted and ready to go. Just wrap your form in a fieldset tag and you're good to go.</p> -<form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <fieldset> - <legend>Login data</legend> - <div class="form-item"> - <label>Email</label> <input class="w50" name="user-email" type="email"> - </div> - <div class="form-item"> - <label>Password</label> <input class="w50" name="user-password" type="password"> - </div> - </fieldset> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span> - <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Login data<span class="hljs-tag"></<span class="hljs-name">legend</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w50"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Password<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-password"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w50"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span> -</pre> - <fieldset> - <legend>About</legend> - <div class="form-item"> - <textarea name="user-about" rows="5"></textarea> - </div> - <div class="form-item"> - <button>Submit</button> - </div> - </fieldset> -</form> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span> - <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>About<span class="hljs-tag"></<span class="hljs-name">legend</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-about"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"5"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span> -</pre> -<h3 class="section-head" id="h-small"><a href="#h-small">Small</a></h3> -<p>Simple class <code>.small</code> makes your selects and fields, well, smaller.</p> -<div class="example"> - <form class="form"> - <div class="form-item"> - <input class="small" placeholder="Title" type="text"> - </div> - <div class="form-item"> - <select class="small"> - <option> - Choose me - </option> - </select> - </div> - </form> - <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Title"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-big"><a href="#h-big">Big</a></h3> -<p>Simple class <code>.big</code> makes your selects and fields, well, bigger.</p> -<div class="example"> - <form class="form"> - <div class="form-item"> - <input class="big" placeholder="Title" type="text"> - </div> - <div class="form-item"> - <select class="big"> - <option> - Choose me - </option> - </select> - </div> - </form> - <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"big"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Title"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"big"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-width"><a href="#h-width">Width</a></h3> -<p>Following framework-wide rules, it is very easy to manipulate form fields sizes. Just use <code>w50</code> class to make a field 50% wide or <code>w25</code> to a 25% wide.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <input class="w25" type="text" value=".w25"> - </div> - <div class="form-item"> - <input class="w50" type="text" value=".w50"> - </div> - <div class="form-item"> - <input class="w75" type="text" value=".w75"> - </div> - <div class="form-item"> - <input type="text" value="100% by default"> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"w25"</span>> - </div> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"w50"</span>> - </div> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"w75"</span>> - </div> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> value=<span class="hljs-string">"100% by default"</span>> - </div> -</form> -</pre> -</div> -<h3 class="section-head" id="h-states"><a href="#h-states">States</a></h3> -<p>By default, Kube features two different states: success and failure.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Your height <span class="success">Looks like a valid value</span></label> <input class="success" type="text"> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Your height <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Enter your weight <span class="error">No negative numbers, please</span></label> <input class="error" type="text"> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Enter your weight <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"error"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"error"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-required"><a href="#h-required">Required</a></h3> -<p>Along with making a field actually required, you can add a visual clue for the users using a span with req class.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Email <span class="req">*</span></label> <input name="user-email" type="email"> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"req"</span>></span>*<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-email"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-descriptions"><a href="#h-descriptions">Descriptions</a></h3> -<p>Descriptions are simple: as long as form's element has desc class, Kube will treat it as a description.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Name <span class="desc">Always nice to feel important.</span></label> <input name="user-name" type="text"> - </div> - <div class="form-item"> - <label>Email</label> <input name="user-email" type="email"> - <div class="desc"> - Please enter your email. - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Name <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-name"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-email"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</span></pre> -</div> -<h3 class="section-head" id="h-disabled"><a href="#h-disabled">Disabled</a></h3> -<p>Not only text inputs can be disabled, but checkboxes and radio buttons as well. Just add <code>disabled</code> attribute or <code>.disabled</code> class to the input.</p> -<div class="example"> - <p><input disabled type="text" value="Text"></p> - <p><input class="disabled" type="checkbox"></p> - <p><input disabled type="radio"></p> - <p> - <textarea disabled>Text</textarea></p> - <p><select disabled> - <option> - Item - </option> - </select></p> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> <span class="hljs-attr">disabled</span>></span> -<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"disabled"</span>></span> -<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">disabled</span>></span> -<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">disabled</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> -<span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">disabled</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> -<span class="hljs-tag"></<span class="hljs-name">select</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-append"><a href="#h-append">Append & Prepend</a></h3> -<p>You can prepend or append certain elements within your input fields, such as currency characters.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>How much is it?</label> - <div class="prepend w50"> - <span>$</span> <input type="text"> - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>How much is it?<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prepend w50"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">span</span>></span>$<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>It is much how?</label> - <div class="append"> - <input type="text"><span>$</span> - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>It is much how?<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"append"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>$<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-append-button"><a href="#h-append-button">Button Append</a></h3> -<p>Appending works for buttons as well. Here you can see a button that has been appended and included withing a text input field.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Label</label> - <div class="append w50"> - <input name="search" placeholder="Search" type="text"> <button class="button outline">Go</button> - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Label<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"append w50"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Search"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button outline"</span>></span>Go<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<h3 class="section-head" id="h-more-examples"><a href="#h-more-examples">More Examples</a></h3> -<p>The examples below are quite self explanatory and they cover multiple selections, selecting dates, filling in phone numbers, a ready feedback form template and more. Feel free to use any of these examples as templates for your sites.</p> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Select multiple</label> <select class="w50" multiple="multiple" size="10"> - <optgroup label="Group 1"> - <option value="1"> - Some text goes here - </option> - <option value="2"> - Another choice could be here - </option> - <option value="3"> - Yet another item to be chosen - </option> - </optgroup> - <optgroup label="Group 2"> - <option value="4"> - Some text goes here - </option> - <option value="5"> - Another choice could be here - </option> - <option value="6"> - Yet another item to be chosen - </option> - </optgroup> - <optgroup label="Group 3"> - <option value="7"> - Some text goes here - </option> - <option value="8"> - Another choice could be here - </option> - <option value="9"> - Yet another item to be chosen - </option> - </optgroup> - </select> - </div> - </form> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Select multiple<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w50"</span> <span class="hljs-attr">multiple</span>=<span class="hljs-string">"multiple"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"10"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">optgroup</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Group 1"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">optgroup</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> <label>Choose date</label> - <div class="row gutters"> - <div class="col col-3"> - <div class="form-item"> - <select> - <option> - --- - </option> - </select> - <div class="desc"> - Month - </div> - </div> - </div> - <div class="col col-3"> - <div class="form-item"> - <select> - <option> - --- - </option> - </select> - <div class="desc"> - Day - </div> - </div> - </div> - <div class="col col-6"> - <div class="form-item"> - <select> - <option> - --- - </option> - </select> - <div class="desc"> - Year - </div> - </div> - </div> - </div> - </form> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Choose date<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row gutters"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-3"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span><span class="hljs-tag"><<span class="hljs-name">option</span>></span>---<span class="hljs-tag"></<span class="hljs-name">option</span>></span><span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>Month<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-3"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span><span class="hljs-tag"><<span class="hljs-name">option</span>></span>---<span class="hljs-tag"></<span class="hljs-name">option</span>></span><span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>Day<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span><span class="hljs-tag"><<span class="hljs-name">option</span>></span>---<span class="hljs-tag"></<span class="hljs-name">option</span>></span><span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>Year<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</pre> -</div> -<div class="example"> - <form action="" class="form form-inline" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Phone number</label> ( <input class="small" name="phone-prefix" size="3" type="text"> ) <input class="small w50" name="phone-number" type="text"> ext: <input class="small" name="phone-ext" size="3" type="text"> - <div class="desc"> - Needed if there are questions about your order - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form form-inline"</span>> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form-item"</span>> - <label><span class="hljs-type">Phone</span> number</label> - ( <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> name=<span class="hljs-string">"phone-prefix"</span> size=<span class="hljs-string">"3"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"small"</span>> ) - <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> name=<span class="hljs-string">"phone-number"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"small w50"</span>> - &nbsp;ext: <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> name=<span class="hljs-string">"phone-ext"</span> size=<span class="hljs-string">"3"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"small"</span>> - <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"desc"</span>>...</div> - </div> -</form> -</pre> -</div> -<div class="example"> - <form class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="row gutters"> - <div class="col col-6"> - <div class="form-item"> - <label>Email</label> <input type="email"> - </div> - </div> - <div class="col col-6"> - <div class="form-item"> - <label>Topic</label> <select> - <option value=""> - Questions - </option> - </select> - </div> - </div> - </div> - <div class="form-item"> - <label>Message</label> - <textarea rows="6"></textarea> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row gutters"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Topic<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Message<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"6"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="row gutters"> - <div class="col col-6"> - <div class="form-item"> - <label>Country</label> <select> - <option> - --- - </option> - </select> - <div class="desc"> - Where are you from? - </div> - </div> - </div> - <div class="col col-6"> - <div class="form-item"> - <label><br></label> <button>Submit</button> - </div> - </div> - </div> - </form> - <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"form"</span>> - <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row gutters"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Country<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">option</span>></span>---<span class="hljs-tag"></<span class="hljs-name">option</span>></span> - <span class="hljs-tag"></<span class="hljs-name">select</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-6"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Text</label> - <textarea rows="4"></textarea> - </div> - </form> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Text<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"4"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</pre> -</div> -<div class="example"> - <form action="" class="form" method="post"> - <input name="authorize-token" type="hidden" value="c6851d805bd96d2c91d52574c65d3ae26ce4b6bca43f560518a0bea61335f9d52acc6055807bf8616ff3d13d3882d5aa2f4b15a046562c1e6a9d932e369e9fad"> - <div class="form-item"> - <label>Text</label> - <textarea class="w50" rows="4"></textarea> - </div> - </form> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Text<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w50"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">form</span>></span> -</pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/grid.md b/exampleSite/content/blog/content/docs/grid.md deleted file mode 100644 index f750657..0000000 --- a/exampleSite/content/blog/content/docs/grid.md +++ /dev/null @@ -1,588 +0,0 @@ -+++ -draft = false -weight = 30 -description = "Flexible, fully responsive and ready to use" -title = "Grid" -bref = "Kube uses fully responsive, flexbox-enabled 12-column grid. You can combine or divide columns, nest them, center them horizontally or vertically, and do all sorts of things. Here are a few examples of what you can do with Kube's grid." -toc = true -+++ - -<div id="main"> - <h3 class="section-head" id="h-columns"><a href="#h-columns">Columns</a></h3> - <p>Columns are building blocks for many websites. Here's how columns are formed in Kube, and here's how you can use them right away.</p> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-1"> - 1 - </div> - <div class="col col-11"> - 11 - </div> - </div> - <div class="row"> - <div class="col col-2"> - 2 - </div> - <div class="col col-10"> - 10 - </div> - </div> - <div class="row"> - <div class="col col-3"> - 3 - </div> - <div class="col col-9"> - 9 - </div> - </div> - <div class="row"> - <div class="col col-4"> - 4 - </div> - <div class="col col-8"> - 8 - </div> - </div> - <div class="row"> - <div class="col col-5"> - 5 - </div> - <div class="col col-7"> - 7 - </div> - </div> - <div class="row"> - <div class="col col-6"> - 6 - </div> - <div class="col col-6"> - 6 - </div> - </div> - <div class="row"> - <div class="col col-7"> - 7 - </div> - <div class="col col-5"> - 5 - </div> - </div> - <div class="row"> - <div class="col col-8"> - 8 - </div> - <div class="col col-4"> - 4 - </div> - </div> - <div class="row"> - <div class="col col-9"> - 9 - </div> - <div class="col col-3"> - 3 - </div> - </div> - <div class="row"> - <div class="col col-10"> - 10 - </div> - <div class="col col-2"> - 2 - </div> - </div> - <div class="row"> - <div class="col col-11"> - 11 - </div> - <div class="col col-1"> - 1 - </div> - </div> - <div class="row"> - <div class="col col-12"> - 12 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-8"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-gutters"><a href="#h-gutters">Gutters</a></h3> - <div class="example demo-grid"> - <div class="row gutters"> - <div class="col col-3"> - 3 - </div> - <div class="col col-9"> - 9 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row gutters"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-9"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-auto-width"><a href="#h-auto-width">Auto Width</a></h3> - <div class="example demo-grid"> - <div class="row auto"> - <div class="col"> - auto - </div> - <div class="col"> - auto - </div> - <div class="col"> - auto - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row auto"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Auto + Gutters</h5> - <div class="example demo-grid"> - <div class="row gutters auto"> - <div class="col"> - auto - </div> - <div class="col"> - auto - </div> - <div class="col"> - auto - </div> - <div class="col"> - auto - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row gutters auto"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-bricks"><a href="#h-bricks">Bricks</a></h3> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-6"> - 50% - </div> - <div class="col col-6"> - 50% - </div> - <div class="col col-6"> - 50% - </div> - <div class="col col-6"> - 50% - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Bricks + Gutters</h5> - <div class="example demo-grid"> - <div class="row gutters"> - <div class="col col-4"> - 33% - </div> - <div class="col col-4"> - 33% - </div> - <div class="col col-4"> - 33% - </div> - <div class="col col-4"> - 33% - </div> - <div class="col col-4"> - 33% - </div> - <div class="col col-4"> - 33% - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row gutters"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-offset"><a href="#h-offset">Offset</a></h3> - <p>Offsetting columns is very simple in Kube. Just use column's class as usual, for example, <code>col col-2</code> and then add the offset value <code>offset-4</code>. This will offset this column and all following columns by 4.</p> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-2"> - 2 - </div> - <div class="col col-6 offset-4"> - 6 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-2"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6 offset-4"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-nested"><a href="#h-nested">Nested</a></h3> - <p>Here's an example of nesting columns within columns. In this example, we have a single row, with two columns .col col-6, a div nested within the second column, with .row end class to denote where to inject nested columns, and the three nested columns.</p> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-6"> - 6 - </div> - <div class="col col-6 demo-col-nested"> - <div class="row"> - <div class="col col-4"> - 4 - </div> - <div class="col col-4"> - 4 - </div> - <div class="col col-4"> - 4 - </div> - </div> - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-equal-height"><a href="#h-equal-height">Equal Height Columns</a></h3> - <p>Columns are equal height by default in Kube</p> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-6"> - 1 - </div> - <div class="col col-6"> - 1<br> - 2<br> - 3 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>> - ... - </<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>> - ... - ... - ... - </<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-reordering"><a href="#h-reordering">Reordering</a></h3> - <h5>First</h5> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-4"> - 4 - </div> - <div class="col col-8 first"> - 8 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-8 first"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Last</h5> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-3 last"> - 3 - </div> - <div class="col col-9"> - 9 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3 last"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-9"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-around"><a href="#h-around">Around</a></h3> - <p>When you want your columns to be surrounded by an even margins on both sides, just use <code>.around</code> class.</p> - <div class="example demo-grid"> - <div class="row around"> - <div class="col col-3"> - 3 - </div> - <div class="col col-3"> - 3 - </div> - <div class="col col-3"> - 3 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row around"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-between"><a href="#h-between">Between</a></h3> - <p>Sometime you just need space between columns, and not around them. Well, there's a class for that: <code>.between</code></p> - <div class="example demo-grid"> - <div class="row between"> - <div class="col col-3"> - 3 - </div> - <div class="col col-3"> - 3 - </div> - <div class="col col-3"> - 3 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row between"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-alignment"><a href="#h-alignment">Alignment</a></h3> - <h5>Align Center</h5> - <div class="example demo-grid"> - <div class="row align-center"> - <div class="col col-6"> - 6 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row align-center"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Align Right</h5> - <div class="example demo-grid"> - <div class="row align-right"> - <div class="col col-3"> - 3 - </div> - <div class="col col-3"> - 3 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row align-right"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-3"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Align Middle</h5> - <div class="example demo-grid"> - <div class="row align-middle" style="height: 104px; border: 1px solid #eee;"> - <div class="col col-4" style="height: 36px;"> - 4 - </div> - <div class="col col-4" style="height: 56px;"> - 4 - </div> - <div class="col col-4" style="height: 36px;"> - 4 - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row align-middle"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-push"><a href="#h-push">Push</a></h3> - <h5>Push Center</h5> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-4 push-center"> - .push-center - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4 push-center"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Push Right</h5> - <div class="example demo-grid"> - <div class="row"> - <div class="col col-6"> - ... - </div> - <div class="col col-4 push-right"> - .push-right - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-6"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-4 push-right"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Push Middle</h5> - <div class="example demo-grid"> - <div class="row" style="height: 104px;"> - <div class="col col-8 push-middle"> - .push-middle - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-8 push-middle"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Push Mixed</h5> - <div class="example demo-grid"> - <div class="row" style="height: 104px;"> - <div class="col col-8 push-middle push-center"> - .push-middle.push-center - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-8 push-middle push-center"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h5>Push Bottom</h5> - <div class="example demo-grid"> - <div class="row" style="height: 104px;"> - <div class="col col-8 push-bottom"> - .push-bottom - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"row"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"col col-8 push-bottom"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> - </div> - <h3 class="section-head" id="h-fixed-column"><a href="#h-fixed-column">Fixed Width Column</a></h3> - <p>Here's one more bit of magic. You can set a fixed width column and still have a responsive and flexible layout right beside this fixed width column.</p> - <div class="example demo-grid"> - <div id="demo-container"> - <div id="demo-sidebar"> - sidebar - </div> - <div id="demo-content"> - content - </div> - </div> - <pre class="code skip"><span class="hljs-comment"><!-- scss --></span> -#container { - @include grid-row; -} -#sidebar { - @include flex-item-width(300px); -} -#content { - @include flex-item-auto; -} - -<span class="hljs-comment"><!-- html --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sidebar"</span>></span>Sidebar<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"content"</span>></span>Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -</pre> - </div> - <h3 class="section-head" id="h-media-grid"><a href="#h-media-grid">Media Grid</a></h3> - <p>Media grid is a great example of Kube's flexibility and versatility. Whenever you have some media to display, you can choose to use Media grid. This type of grid is ideal for featuring photos; it adds some visual music and slight randomness to your layout.</p> - <div class="example demo-grid"> - <div id="demo-media-grid"> - <div> - 1 - </div> - <div> - 2 - </div> - <div> - 3 - </div> - <div> - 4 - </div> - <div> - 5 - </div> - <div> - 6 - </div> - <div> - 7 - </div> - <div> - 8 - </div> - <div> - 9 - </div> - <div> - 10 - </div> - </div> - <pre class="code skip"><span class="hljs-comment"><!-- scss --></span> -#media-grid { - - @include grid-media-columns(2); - - & > div { - margin-bottom: 20px; - height: 80px; - } - & > div:nth-child(2n) { - height: 200px; - } - & > div:nth-child(5n) { - height: 120px; - } -} - -<span class="hljs-comment"><!-- html --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"media-grid"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>1<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>2<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>3<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>4<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>5<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>7<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>8<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>9<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>10<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> - </div> -</div> diff --git a/exampleSite/content/blog/content/docs/labels.md b/exampleSite/content/blog/content/docs/labels.md deleted file mode 100644 index 2069ff6..0000000 --- a/exampleSite/content/blog/content/docs/labels.md +++ /dev/null @@ -1,51 +0,0 @@ -+++ -date = "2017-04-10T16:40:43+01:00" -title = "Labels" -draft = false -weight = 80 -description = "Label things with all sorts of labels" -bref = "Labels have all standard Kube styling options available: outline, states (success, error, warning), inverted color, and more. You can also customize labels to your requirements, and place them inside other elements, such as buttons, for example" -toc = true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <span class="label">Default</span> <span class="label success">Success</span> <span class="label error">Error</span> <span class="label warning">Warning</span> <span class="label focus">Focus</span> <span class="label black">Black</span> <span class="example-inverted-box"><span class="label inverted">Inverted</span></span> -</div> -<h3 class="section-head" id="h-outline"><a href="#h-outline">Outline</a></h3> -<div class="example"> - <span class="label outline">Default</span> <span class="label success outline">Success</span> <span class="label error outline">Error</span> <span class="label warning outline">Warning</span> <span class="label focus outline">Focus</span> <span class="label black outline">Black</span> <span class="example-inverted-box"><span class="label inverted outline">Inverted</span></span> -</div> -<h3 class="section-head" id="h-upper"><a href="#h-upper">Upper</a></h3> -<div class="example"> - <span class="label upper">Default</span> <span class="label success upper">Success</span> <span class="label error upper">Error</span> <span class="label warning upper">Warning</span> <span class="label focus upper">Focus</span> <span class="label black upper">Black</span> <span class="example-inverted-box"><span class="label inverted upper">Inverted</span></span> -</div> -<h3 class="section-head" id="h-tag"><a href="#h-tag">Tag</a></h3> -<div class="example"> - <span class="label tag"><a href="#">Default</a></span> <span class="label tag success">Success</span> <span class="label tag error">Error</span> <span class="label tag warning">Warning</span> <span class="label tag focus"><a href="#">Focus</a></span> <span class="label tag black">Black</span> <span class="example-inverted-box"><span class="label tag inverted">Inverted</span></span> -</div> -<h3 class="section-head" id="h-badges"><a href="#h-badges">Badges</a></h3> -<p>Labels are ideal for use as badges with badge class.</p> -<div class="example"> - <span class="label badge"><a href="#">1</a></span> <span class="label badge error">2</span> <span class="label badge success">3</span> <span class="label badge warning">4</span> <span class="label badge focus"><a href="#">5</a></span> <span class="label badge black">6</span> <span class="example-inverted-box"><span class="label badge inverted">7</span></span> -</div> -<h3 class="section-head" id="h-outline-badges"><a href="#h-outline-badges">Outline Badges</a></h3> -<div class="example"> - <span class="label badge outline"><a href="#">1</a></span> <span class="label badge error outline">2</span> <span class="label badge success outline">3</span> <span class="label badge warning outline">4</span> <span class="label badge focus outline"><a href="#">5</a></span> <span class="label badge black outline">6</span> <span class="example-inverted-box"><span class="label badge inverted outline">7</span></span> -</div> -<h3 class="section-head" id="h-custom"><a href="#h-custom">Custom</a></h3> -<p>You can use mixins to customize your labels and badges.</p> -<div class="example"> - <span class="label custom">Label</span> <span class="label badge custom">1</span> <span class="label tag custom">Tag</span> - <pre class="code skip"><span class="hljs-comment"><!-- scss --></span> -.label.custom { - // $text-color, $back-color - @include label(#fff, #ea48a7); -} - -<span class="hljs-comment"><!-- html --></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label custom"</span>></span>Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label badge custom"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label tag custom"</span>></span>Tag<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -</pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/messages.md b/exampleSite/content/blog/content/docs/messages.md deleted file mode 100644 index 11bc2ec..0000000 --- a/exampleSite/content/blog/content/docs/messages.md +++ /dev/null @@ -1,159 +0,0 @@ -+++ -date = "2017-04-10T16:41:34+01:00" -draft = false -weight = 90 -description = "Versatile and refined messages, ideal for daily use" -title = "Messages" -bref = "Messages are an essential part of modern web, and they can provide invaluable feedback to the users. Messages in Kube look nice, they are informative, simple and very easy to set up to whatever requirements you may have, style-wise or otherwise. Take a div, give it an message class, add a color using meaningful classes like error or success and you're practically done!" -toc = true -+++ - -<h3 class="section-head" id="h-usage"><a href="#h-usage">Usage</a></h3> -<div class="example"> - <div class="message open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="#install">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message error open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message error"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message success open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message success"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message warning open" data-component="message" data-loaded="true"> - <h5>Warning!</h5>You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"message warning"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"message"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h5</span>></span> - ... - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close small"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<div class="example"> - <div class="message focus open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message focus"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message black open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small white"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message black"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<div class="example"> - <div class="message inverted open" data-component="message" data-loaded="true"> - You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span> - </div> - <pre class="code"><div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message inverted"</span> data-component=<span class="hljs-string">"message"</span>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre> -</div> -<h3 class="section-head" id="h-options"><a href="#h-options">Options</a></h3> -<table> - <thead> - <tr> - <th class="w30">Name</th> - <th class="w30">Type</th> - <th class="w40">Default</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>closeSelector</code></td> - <td><var>string</var></td> - <td>.close</td> - </tr> - <tr> - <td><code>closeEvent</code></td> - <td><var>string</var></td> - <td>click</td> - </tr> - <tr> - <td><code>animationOpen</code></td> - <td><var>string</var></td> - <td>fadeIn</td> - </tr> - <tr> - <td><code>animationClose</code></td> - <td><var>string</var></td> - <td>fadeOut</td> - </tr> - </tbody> -</table> -<h4>Set an option</h4> -<p>Via data attribute:</p> -<pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"message"</span> data-component=<span class="hljs-string">"message"</span> data-close-selector=<span class="hljs-string">".my-custom-close"</span>> - ... <span <span class="hljs-built_in">class</span>=<span class="hljs-string">"my-custom-close small"</span>></span> -</<span class="hljs-keyword">div</span>> -</pre> -<p>Via Javascript:</p> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-message'</span>).message({ - <span class="hljs-symbol">closeSelector:</span> <span class="hljs-string">'.my-custom-close'</span> -}); -</pre> -<h3 class="section-head" id="h-methods"><a href="#h-methods">Methods</a></h3> -<p><button onclick="$('#message-1').message('open')">Open</button> <button onclick="$('#message-1').message('close')">Close</button></p> -<div class="message open" data-component="message" data-loaded="true" id="message-1"> - You have 2 modules waiting to installation. <a href="#install">Install</a> <span class="close small"></span> -</div> -<table> - <thead> - <tr> - <th>Method</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>close</code></td> - <td>Manually closes a message.</td> - </tr> - <tr> - <td><code>open</code></td> - <td>Opens a message if it has been closed.</td> - </tr> - </tbody> -</table> -<h4>Example</h4> -<pre class="code">$(<span class="hljs-string">'#my-message'</span>).<span class="hljs-keyword">message</span>(<span class="hljs-string">'close'</span>);</pre> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<table> - <thead> - <tr> - <th>Callback</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>open</code></td> - <td>This event fires immediately when the open instance method is called.</td> - </tr> - <tr> - <td><code>opened</code></td> - <td>This event is fired when the message has been opened, will wait for CSS animation to complete.</td> - </tr> - <tr> - <td><code>close</code></td> - <td>This event fires immediately when the close instance method is called.</td> - </tr> - <tr> - <td><code>closed</code></td> - <td>This event is fired when the message has been closed, will wait for CSS animation to complete.</td> - </tr> - </tbody> -</table> -<h4>Example</h4> -<pre class="code skip">$(<span class="hljs-string">'#my-message'</span>).on(<span class="hljs-string">'closed.message'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something</span> -}) -</pre> diff --git a/exampleSite/content/blog/content/docs/mixins.md b/exampleSite/content/blog/content/docs/mixins.md deleted file mode 100644 index 70a3b93..0000000 --- a/exampleSite/content/blog/content/docs/mixins.md +++ /dev/null @@ -1,268 +0,0 @@ -+++ -weight = 230 -description = "Mixins save countless hours and bring results faster" -date = "2017-04-10T16:43:36+01:00" -title = "Mixins" -draft = false -bref="Mixins are a great way to produce things and effects way faster with Sass then with pure CSS. Kube has a lot to offer in this respect; feel free to use any of these mixins with any Kube components." -toc = true -+++ - -<h3 class="section-head" id="h-get-started"><a href="#h-get-started">Get Started</a></h3> -<p>Kube has been designed to help you with web development, that's why it's so easy to use Kube when building websites. To move forward quickly and efficiently, just link <code>kube.scss</code> from Kube package: this file contains variables, mixins and everything you need to simplify daily routine tasks.</p> -<p>For example, import <code>kube.scss</code> into your <code>master.scss</code> styles file, which you will later compile into <code>master.css</code></p> -<pre class="code skip"><span class="hljs-comment">// master.scss</span> -@<span class="hljs-keyword">import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>; -</pre> -<p>Now all Kube's variables and mixins are readily available in <code>master.scss</code>, and you can use them whenever needed.</p> -<pre class="code skip"><span class="hljs-comment">// master.scss</span> -@<span class="hljs-keyword">import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>; - -<span class="hljs-comment">// use mixins</span> -<span class="hljs-selector-id">#my-layout</span> { - @<span class="hljs-keyword">include</span> flex; -} - -<span class="hljs-comment">// use variables</span> -<span class="hljs-selector-id">#my-layout</span> { - <span class="hljs-attribute">padding</span>: <span class="hljs-variable">$base-line</span>; -} -</pre> -<h3 class="section-head" id="h-fonts"><a href="#h-fonts">Fonts</a></h3> -<p>Generates a font-family declarations for text, headings, buttons or inputs.</p> -<pre class="code skip"><span class="hljs-comment">// import Kube</span> -@<span class="hljs-keyword">import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>; - -<span class="hljs-comment">// use mixins</span> -@<span class="hljs-keyword">include</span> text-font(<span class="hljs-string">"Lato, 'Helvetica Neue', sans-serif"</span>); -@<span class="hljs-keyword">include</span> headings-font(<span class="hljs-string">"Lato, 'Helvetica Neue', sans-serif"</span>); -@<span class="hljs-keyword">include</span> buttons-font(<span class="hljs-string">"Lato, 'Helvetica Neue', sans-serif"</span>); -@<span class="hljs-keyword">include</span> inputs-font(<span class="hljs-string">"Lato, 'Helvetica Neue', sans-serif"</span>); -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-comment">// Text</span> -<span class="hljs-selector-tag">body</span> { - <span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; -} - -<span class="hljs-comment">// Headings</span> -<span class="hljs-selector-tag">h1</span><span class="hljs-selector-class">.title</span>, <span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-tag">h2</span>, <span class="hljs-selector-tag">h3</span>, <span class="hljs-selector-tag">h4</span>, <span class="hljs-selector-tag">h5</span>, <span class="hljs-selector-tag">h6</span>, <span class="hljs-selector-class">.h1</span>, <span class="hljs-selector-class">.h2</span>, <span class="hljs-selector-class">.h3</span>, <span class="hljs-selector-class">.h4</span>, <span class="hljs-selector-class">.h5</span>, <span class="hljs-selector-class">.h6</span> { - <span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; -} - -<span class="hljs-comment">// Buttons</span> -<span class="hljs-selector-tag">button</span>, <span class="hljs-selector-class">.button</span> { - <span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; -} - -<span class="hljs-comment">// Inputs</span> -<span class="hljs-selector-tag">input</span>, <span class="hljs-selector-tag">textarea</span>, select { - <span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; -} -</pre> -<h3 class="section-head" id="h-breakpoints"><a href="#h-breakpoints">Breakpoints</a></h3> -<p>Breakpoint for small screens (max-width 768px by default).</p> -<pre class="code skip">@<span class="hljs-keyword">include</span> breakpoint(sm) { - <span class="hljs-selector-class">.span</span> { - <span class="hljs-attribute">display</span>: none; - } -} -</pre> -<p>Breakpoint for medium screens (min-width 1024px by default).</p> -<pre class="code skip">@<span class="hljs-keyword">include</span> breakpoint(md) { - <span class="hljs-selector-class">.span</span> { - <span class="hljs-attribute">display</span>: none; - } -} -</pre> -<p>Breakpoint for large screens (min-width 1200px by default).</p> -<pre class="code skip">@<span class="hljs-keyword">include</span> breakpoint(lg) { - <span class="hljs-selector-class">.span</span> { - <span class="hljs-attribute">display</span>: none; - } -} -</pre> -<p>Custom breakpoints:</p> -<pre class="code skip"><span class="hljs-comment">// min-width 768px;</span> -<span class="hljs-variable">@include</span> breakpoint(<span class="hljs-number">768px</span>) {} - -<span class="hljs-comment">// min-width 768px and max-width 1024px;</span> -<span class="hljs-variable">@include</span> breakpoint(<span class="hljs-number">768px</span>, <span class="hljs-number">1024px</span>) {} - -<span class="hljs-comment">// max-width 1024px;</span> -<span class="hljs-variable">@include</span> breakpoint(<span class="hljs-number">0</span>, <span class="hljs-number">1024px</span>) {} -</pre> -<h3 class="section-head" id="h-grid"><a href="#h-grid">Grid</a></h3> -<h5 id="h-grid-row">Row</h5> -<p>Generates a grid row.</p> -<pre class="code skip"><span class="hljs-selector-class">.my-row</span> { - <span class="hljs-variable">@include</span> grid-row; -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.my-row</span> { - <span class="hljs-attribute">display</span>: -ms-flexbox; - <span class="hljs-attribute">display</span>: -webkit-flex; - <span class="hljs-attribute">display</span>: flex; - - <span class="hljs-attribute">-ms-flex-direction</span>: row; - <span class="hljs-attribute">-webkit-flex-direction</span>: row; - <span class="hljs-attribute">flex-direction</span>: row; - - <span class="hljs-attribute">-ms-flex-wrap</span>: wrap; - <span class="hljs-attribute">-webkit-flex-wrap</span>: wrap; - <span class="hljs-attribute">flex-wrap</span>: wrap; -} -</pre> -<h5 id="h-grid-media">Media Grid</h5> -<p>Generates a media grid. See <a href="/kube/docs/grid/#h-media-grid">live example</a>.</p> -<pre class="code skip"><span class="hljs-selector-class">.my-media-grid</span> { - @include grid-media-<span class="hljs-attribute">columns</span>(<span class="hljs-number">3</span>); -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.my-media-grid</span> { - -webkit-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">3</span>; - -moz-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">3</span>; - <span class="hljs-attribute">column-count</span>: <span class="hljs-number">3</span>; - - <span class="hljs-comment">// column gap is specified</span> - <span class="hljs-comment">// in the grid settings (variables.scss) as $grid-gutter</span> - -webkit-<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>; - -moz-<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>; - <span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>; -} - -<span class="hljs-selector-class">.my-media-grid</span> > <span class="hljs-selector-tag">div</span> { - <span class="hljs-attribute">display</span>: inline-block; - <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; -} - -@<span class="hljs-keyword">media</span> (max-width: 768px) { - <span class="hljs-selector-class">.my-media-grid</span> { - -webkit-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; - -moz-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; - <span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; - } -} -</pre> -<h3 class="section-head" id="h-flex"><a href="#h-flex">Flex</a></h3> -<pre class="code skip"><span class="hljs-variable">@include</span> flex; -<span class="hljs-variable">@include</span> flex-basis($basis); - -<span class="hljs-comment">// items</span> -<span class="hljs-variable">@include</span> flex-items-wrap; -<span class="hljs-variable">@include</span> flex-items-nowrap; -<span class="hljs-variable">@include</span> flex-items-row -<span class="hljs-variable">@include</span> flex-items-column; -<span class="hljs-variable">@include</span> flex-items-left; -<span class="hljs-variable">@include</span> flex-items-right; -<span class="hljs-variable">@include</span> flex-items-center; -<span class="hljs-variable">@include</span> flex-items-space-between; -<span class="hljs-variable">@include</span> flex-items-space-around; -<span class="hljs-variable">@include</span> flex-items-top; -<span class="hljs-variable">@include</span> flex-items-middle; -<span class="hljs-variable">@include</span> flex-items-bottom; - -<span class="hljs-comment">// item</span> -<span class="hljs-variable">@include</span> flex-item-grow($grow); -<span class="hljs-variable">@include</span> flex-item-auto; -<span class="hljs-variable">@include</span> flex-item-one; -<span class="hljs-variable">@include</span> flex-item-shrink($shrink); -<span class="hljs-variable">@include</span> flex-item-width($width); -</pre> -<h3 class="section-head" id="h-gradients"><a href="#h-gradients">Gradients</a></h3> -<h5 id="h-gradients-vertical">Vertical</h5> -<pre class="code skip">@<span class="hljs-keyword">include</span> gradient-vertical(<span class="hljs-variable">$startColor</span>, <span class="hljs-variable">$endColor</span>);</pre> -<div class="demo-gradient demo-gradient-vertical"></div> -<pre class="code skip"><span class="hljs-symbol">@include</span> gradient-vertical-<span class="hljs-keyword">to</span>-opacity($startColor, $opacity)<span class="hljs-comment">;</span></pre> -<div class="demo-gradient demo-gradient-vertical-to-opacity"></div> -<h5 id="h-gradients-horizontal">Horizontal</h5> -<pre class="code skip">@<span class="hljs-keyword">include</span> gradient-horizontal(<span class="hljs-variable">$startColor</span>, <span class="hljs-variable">$endColor</span>);</pre> -<div class="demo-gradient demo-gradient-horizontal"></div> -<pre class="code skip"><span class="hljs-symbol">@include</span> gradient-horizontal-<span class="hljs-keyword">to</span>-opacity($startColor, $opacity)<span class="hljs-comment">;</span></pre> -<div class="demo-gradient demo-gradient-horizontal-to-opacity"></div> -<h5 id="h-gradients-radial">Radial</h5> -<pre class="code skip">@include gradient-<span class="hljs-keyword">radial</span>($innerColor, $outerColor);</pre> -<div class="demo-gradient demo-gradient-radial"></div> -<h3 class="section-head" id="h-utils"><a href="#h-utils">Utils</a></h3> -<h5 id="h-utils-clearfix">Clearfix</h5> -<p>Provides an easy way to include a clearfix for containing floats.</p> -<pre class="code skip"><span class="hljs-selector-class">.layout</span> { - <span class="hljs-variable">@include</span> clearfix; -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.layout</span><span class="hljs-selector-pseudo">:after</span> { - <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>; - <span class="hljs-attribute">display</span>: table; - <span class="hljs-attribute">clear</span>: both; -} -</pre> -<h5 id="h-utils-transition">Transition</h5> -<p>This mixin provides a shorthand syntax for transitions.</p> -<pre class="code skip"><span class="hljs-comment">// by default 'all linear .2s'</span> -<span class="hljs-meta">@include</span> transition; - -<span class="hljs-comment">// custom transitions</span> -<span class="hljs-meta">@include</span> transition(all .<span class="hljs-number">2</span>s ease-<span class="hljs-keyword">in</span>-<span class="hljs-keyword">out</span>); -<span class="hljs-meta">@include</span> transition(opacity <span class="hljs-number">1</span>s ease-<span class="hljs-keyword">in</span>, width .<span class="hljs-number">2</span>s ease-<span class="hljs-keyword">in</span>); -</pre> -<h5 id="h-utils-transform">Transform</h5> -<p>Provides a shorthand syntax for transforms.</p> -<pre class="code skip"><span class="hljs-selector-class">.span</span> { - @include <span class="hljs-attribute">transform</span>(rotate(<span class="hljs-number">90deg</span>)); -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.span</span> { - <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(90deg); - <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">rotate</span>(90deg); - <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">rotate</span>(90deg); - <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(90deg); -} -</pre> -<h5 id="h-utils-blur">Blur</h5> -<p>Provides a shorthand syntax for blur filter.</p> -<pre class="code skip"><span class="hljs-selector-class">.span</span> { - <span class="hljs-variable">@include</span> blur(<span class="hljs-number">5px</span>); -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.span</span> { - <span class="hljs-attribute">-webkit-filter</span>: <span class="hljs-built_in">blur</span>(5px); - <span class="hljs-attribute">-moz-filter</span>: <span class="hljs-built_in">blur</span>(5px); - <span class="hljs-attribute">-ms-filter</span>: <span class="hljs-built_in">blur</span>(5px); - <span class="hljs-attribute">filter</span>: <span class="hljs-built_in">blur</span>(5px); -} -</pre> -<h5 id="h-utils-retina-image">Retina Image</h5> -<p>Retina image must have a suffix <code>-2x</code>, for example: <code>image-2x.jpg</code></p> -<pre class="code skip">@include retina-<span class="hljs-built_in">background</span>-<span class="hljs-built_in">image</span>($<span class="hljs-built_in">image</span>-url, $<span class="hljs-built_in">image</span>-type, $<span class="hljs-built_in">image</span>-<span class="hljs-built_in">width</span>, $<span class="hljs-built_in">image</span>-<span class="hljs-built_in">height</span>); - -// $<span class="hljs-built_in">image</span>-type - jpg, png, gif -// $<span class="hljs-built_in">image</span>-<span class="hljs-built_in">height</span> - optional -</pre> -<p>Example:</p> -<pre class="code skip"><span class="hljs-selector-class">.brand</span> { - @include retina-<span class="hljs-attribute">background-image</span>(<span class="hljs-string">'../logo'</span>, <span class="hljs-string">'png'</span>, <span class="hljs-number">100px</span>); -} -</pre> -<p>CSS Output</p> -<pre class="code skip"><span class="hljs-selector-class">.brand</span> { - <span class="hljs-attribute">background-repeat</span>: no-repeat; - <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">"../logo.png"</span>); -} -@<span class="hljs-keyword">media</span> only screen and (-webkit-min-device-pixel-ratio: <span class="hljs-number">2</span>), - only screen and (min--moz-device-pixel-ratio: <span class="hljs-number">2</span>), - only screen and (-o-min-device-pixel-ratio: <span class="hljs-number">2</span> / <span class="hljs-number">1</span>), - only screen and (min-device-pixel-ratio: <span class="hljs-number">2</span>), - only screen and (min-resolution: <span class="hljs-number">192dpi</span>), - only screen and (min-resolution: <span class="hljs-number">2dppx</span>) - { - <span class="hljs-selector-class">.brand</span> { - <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">"../logo-2x.png"</span>); - <span class="hljs-attribute">background-size</span>: <span class="hljs-number">100px</span> auto; - } - } -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/modal.md b/exampleSite/content/blog/content/docs/modal.md deleted file mode 100644 index 1321b83..0000000 --- a/exampleSite/content/blog/content/docs/modal.md +++ /dev/null @@ -1,189 +0,0 @@ -+++ -title = "Modal" -draft = false -weight = 150 -date = "2017-04-10T16:42:18+01:00" -description = "Clean, functional, and extensible modal window dialogs" -bref="Modal windows are used for various reasons and purposes. Kube makes the way you design and operate modal windows very straightforward. First, you set a <code>div</code> which will represent the content of the modal window, then you set up a way to open and close this window, and finally you add a way to call the modal from the page" -toc = true -+++ - -<h4 class="demo-head" id="h-calling">Calling</h4> -<p>Here you add an actual call to the modal window. Clicking the "Open" button below will launch a <var>modal</var> with content of a <var>#my-modal</var> div. You can use buttons or links to open modals in Kube. Clicking anywhere outside of the modal or hitting <kbd>ESC</kbd> will close the window.</p> -<div class="example"> - <p><button class="button" data-component="modal" data-loaded="true" data-target="#my-modal" data-width="760px">Open</button></p> - <pre class="code skip">// <span class="hljs-keyword">Call</span> -<button <span class="hljs-keyword">data</span>-component=<span class="hljs-string">"modal"</span> <span class="hljs-keyword">data</span>-target=<span class="hljs-string">"#my-modal"</span>><span class="hljs-keyword">Open</span></button> - -// Markup -<<span class="hljs-keyword">div</span> <span class="hljs-keyword">id</span>=<span class="hljs-string">"my-modal"</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-box hide"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal"</span>> - <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"close"</span>></span> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-header"</span>>Modal Header</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-body"</span>>...</<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> -</div> -<p>Open from url</p> -<div class="example"> - <p><button class="button" data-component="modal" data-loaded="true" data-target="#ui-modal" data-url="/tests/modal.html">Open from url</button></p> - <pre class="code skip">// <span class="hljs-keyword">Call</span> -<button <span class="hljs-keyword">data</span>-component=<span class="hljs-string">"modal"</span> <span class="hljs-keyword">data</span>-target=<span class="hljs-string">"#ui-modal"</span> <span class="hljs-keyword">data</span>-<span class="hljs-keyword">url</span>=<span class="hljs-string">"modal.html"</span>><span class="hljs-keyword">Open</span></button> - -// Markup -<<span class="hljs-keyword">div</span> <span class="hljs-keyword">id</span>=<span class="hljs-string">"ui-modal"</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-box hide"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal"</span>> - <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"close"</span>></span> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-header"</span>>UI Modal</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-body"</span>>... <span class="hljs-keyword">content</span> <span class="hljs-keyword">from</span> modal.html ...</<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> - -// modal.html -<p>...</p> -<a href=<span class="hljs-string">"#"</span> <span class="hljs-keyword">data</span>-<span class="hljs-keyword">action</span>=<span class="hljs-string">"modal-close"</span>><span class="hljs-keyword">Close</span></a> -</pre> -</div> -<p>Direct open</p> -<div class="example"> - <p><button class="button" onclick="$.modalwindow({ target: '#ui-modal', url: '/tests/modal.html' });">Direct Open</button></p> - <pre class="code skip"><span class="hljs-comment">// Call</span> -<<span class="hljs-keyword">button</span> <span class="hljs-keyword">onclick</span>=<span class="hljs-string">"$.modalwindow({ target: '#ui-modal', url: 'modal.html' });"</span>>Open</<span class="hljs-keyword">button</span>> -</pre> -</div> -<div class="modal-box hide" id="ui-modal"> - <div class="modal"> - <span class="close"></span> - <div class="modal-header"> - UI Modal - </div> - <div class="modal-body"></div> - </div> -</div> -<div class="modal-box hide" id="my-modal"> - <div class="modal"> - <span class="close"></span> - <div class="modal-header"> - My Modal - </div> - <div class="modal-body"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - </div> -</div> -<h4 class="section-head" id="h-actions"><a href="#h-actions">Actions</a></h4> -<p>Using <var>modal-close</var> action you now introducing a way to close you window, using a link or a button.</p> -<pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"my-modal"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"modal-box hide"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"modal"</span>> - <span <span class="hljs-built_in">class</span>=<span class="hljs-string">"close"</span>></span> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"modal-header"</span>>Modal Header</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"modal-body"</span>> - ... - <a href=<span class="hljs-string">"#"</span> data-action=<span class="hljs-string">"modal-close"</span>>Close</a> - </<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>target</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>null</var></li> -</ul> -<p>Defines a content layer for the modal window</p> -<h5>url</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Defines a URL in case your modal is opening via a URL.</p> -<h5>header</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Sets the header for the modal window. Optional, and is <var>false</var> by default.</p> -<h5>width</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'600px'</var></li> -</ul> -<h5>height</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<h5>maxHeight</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>This setting defines the maximum height of the window. A scrollbar will be introduced in case there's more text than <var>maxHeight</var> can accommodate.</p> -<h5>position</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'center'</var></li> -</ul> -<p>This is where your modal appears when opened.</p> -<h5>overlay</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>When this is set to <var>false</var>, you modal window will just appear on top ow your page, without an overlay effect. By default, your page will be "covered" with a semi-transparent layer when you open a modal.</p> -<h5>animation</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Turns opening and closing animation on and off.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-modal'</span>).on(<span class="hljs-string">'open.modal'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-modal'</span>).on(<span class="hljs-string">'opened.modal'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-modal'</span>).on(<span class="hljs-string">'close.modal'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-modal'</span>).on(<span class="hljs-string">'closed.modal'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h3 class="section-head" id="h-api"><a href="#h-api">API</a></h3> -<p>You can use these API methods to programmatically operate and modify modal windows.</p> -<h5>close</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-modal'</span>).modal(<span class="hljs-string">'close'</span>); -</pre> -<h5>setHeader</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-modal'</span>).modal(<span class="hljs-string">'setHeader'</span>, <span class="hljs-string">'My Header'</span>); -</pre> -<p>This is another way to set a header for the modal on the fly without introducing a <code>div</code> with a <var>modal-header</var> class.</p> -<h5>setContent</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-modal'</span>).modal(<span class="hljs-string">'setContent'</span>, <span class="hljs-string">'My Content'</span>); -</pre> -<p>Content of the modal window can be set up on the fly as well. No need for a <code>div</code> with <var>modal</var> class.</p> -<h5>setWidth</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-modal'</span>).modal(<span class="hljs-string">'setWidth'</span>, <span class="hljs-string">'800px'</span>); -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/offcanvas.md b/exampleSite/content/blog/content/docs/offcanvas.md deleted file mode 100644 index 37ed858..0000000 --- a/exampleSite/content/blog/content/docs/offcanvas.md +++ /dev/null @@ -1,140 +0,0 @@ -+++ -date = "2017-04-10T16:42:43+01:00" -draft = false -weight = 180 -description = "Navigation, menus and content sliding from outside the page" -title = "Offcanvas" -bref="Offcanvas makes it look like a menu is sliding from the outside of the page. This may be useful in many different cases, one of them being when you need to save space on screen and don't have to display sidebar at all times" -toc= true -+++ - -<h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> -<p>This feature is very easy to set up. It is based on <code>data-component</code> set to <var>offcanvas</var>, <code>data-target</code> set to the menu layer (<var>#offcanvas-right</var> in example below) and a feature-specific <code>data-direction</code> which is required for right menu to be set to <var>right</var>.</p> -<p><a class="button outline" data-component="offcanvas" data-target="#offcanvas-left" href="#"><i class="kube-menu"></i> Open Left</a> <a class="button outline" data-component="offcanvas" data-direction="right" data-target="#offcanvas-right" href="#">Open Right <i class="kube-menu"></i></a></p> -<div class="hide" id="offcanvas-left"> - <nav> - <ul> - <li> - <a href="">Home</a> - </li> - <li> - <a href="">About</a> - </li> - <li> - <a href="">Showcase</a> - </li> - <li> - <a href="">Help</a> - </li> - <li> - <a href="">Contact</a> - </li> - </ul> - </nav> -</div> -<div class="hide" id="offcanvas-right"> - <a class="close" href="#"></a> - <nav> - <ul> - <li> - <a href="">Home</a> - </li> - <li> - <a href="">About</a> - </li> - <li> - <a href="">Showcase</a> - </li> - <li> - <a href="">Help</a> - </li> - <li> - <a href="">Contact</a> - </li> - </ul> - </nav> -</div> -<pre class="code skip">// Left -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#offcanvas-left"</span>></span>Open Left<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvas-left"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">nav</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -// Right + Close -<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#offcanvas-right"</span> <span class="hljs-attr">data-direction</span>=<span class="hljs-string">"right"</span>></span>Open Right<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvas-right"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">nav</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>target</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>null</var></li> -</ul> -<p>Sets ID selector of an element that will slide from the side.</p> -<h5>push</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<h5>direction</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'left'</var></li> -</ul> -<p>The direction in which page will shift to give way for the sidebar menu. Default is <var>left</var> and is not required for left-side navigation, however, <var>right</var> value must be set for the right-side menu to work.</p> -<h5>clickOutside</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Unless set to <var>false</var>, clicking anywhere on a page will make side menu to close.</p> -<h5>width</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>'250px'</var></li> -</ul> -<p>Sidebar width in pixels.</p> -<h5>animation</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>Setting this to <var>false</var> turns off opening and closing animation.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-offcanvas'</span>).on(<span class="hljs-string">'open.offcanvas'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-offcanvas'</span>).on(<span class="hljs-string">'opened.offcanvas'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-offcanvas'</span>).on(<span class="hljs-string">'close.offcanvas'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#my-offcanvas'</span>).on(<span class="hljs-string">'closed.offcanvas'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/pagination.md b/exampleSite/content/blog/content/docs/pagination.md deleted file mode 100644 index e5a3d05..0000000 --- a/exampleSite/content/blog/content/docs/pagination.md +++ /dev/null @@ -1,196 +0,0 @@ -+++ -date = "2017-04-10T16:42:03+01:00" -draft = false -weight = 130 -description = "Various flexible pagination options for your site" -title = "Pagination" -bref= "Default pagination in Kube is organized using lists, with visual cues for the user what is the current page, and page numbers for easier navigation. Pagination buttons and multiline formats are available out-of-the-box as well" -toc =true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <nav class="pagination"> - <ul> - <li class="prev"> - <a href="#">←</a> - </li> - <li> - <ul> - <li><span>1</span></li> - <li> - <a href="#">2</a> - </li> - <li> - <a href="#">3</a> - </li> - <li> - <a href="#">4</a> - </li> - <li> - <a href="#">5</a> - </li> - </ul> - </li> - <li class="next"> - <a href="#">→</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>&larr;<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>&rarr;<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-centered"><a href="#h-centered">Centered</a></h3> -<div class="example"> - <nav class="pagination align-center"> - <ul> - <li class="prev"> - <a href="#">←</a> - </li> - <li> - <ul> - <li class="active"> - <a href="#">1</a> - </li> - <li> - <a href="#">2</a> - </li> - <li> - <a href="#">3</a> - </li> - <li> - <a href="#">4</a> - </li> - <li> - <a href="#">5</a> - </li> - </ul> - </li> - <li class="next"> - <a href="#">→</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination align-center"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>&larr;<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>&rarr;<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-wide"><a href="#h-wide">Wide</a></h3> -<p>Here you can see an example where previous and next buttons are aligned to the left and to the right, with a link in the center of the page.</p> -<div class="example"> - <nav class="pagination align-center upper strong"> - <ul> - <li class="prev"> - <a href="#">< Prev</a> - </li> - <li class="w100"> - <ul> - <li> - <a href="#">Back to catalog</a> - </li> - </ul> - </li> - <li class="next"> - <a href="#">Next ></a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination align-center upper strong"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>&lt; Prev<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w100"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>Next &gt;<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-pager"><a href="#h-pager">Pager</a></h3> -<div class="example"> - <nav class="pagination pager"> - <ul> - <li class="prev"> - <a href="#">Previous</a> - </li> - <li class="next"> - <a href="#">Next</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination pager"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>Previous<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<div class="example"> - <nav class="pagination pager align-center"> - <ul> - <li class="prev"> - <a href="#">Previous</a> - </li> - <li class="next"> - <a href="#">Next</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination pager align-center"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>Previous<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<p>Elements within a single list item can be stacked to create a clean and intuitive pagination elements.</p> -<div class="example"> - <nav class="pagination pager flat"> - <ul> - <li class="prev"> - <span class="label tag">Prev</span> <a href="#">Learn How to Use Images on Your Website</a> - </li> - <li class="next"> - <span class="label tag">Next</span> <a href="#">Your Guide to Flat Design</a> - </li> - </ul> - </nav> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination pager flat"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label tag"</span>></span>Prev<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label tag"</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/quick-start.md b/exampleSite/content/blog/content/docs/quick-start.md deleted file mode 100644 index dc75490..0000000 --- a/exampleSite/content/blog/content/docs/quick-start.md +++ /dev/null @@ -1,81 +0,0 @@ -+++
-title = "Quick Start"
-description = "Up and running in under a minute"
-weight = 10
-draft = false
-toc = true
-bref = "As a complete and self-sufficient web framework, Kube is here to help you get the most out of your daily work. Kube takes care of routine stuff, saving you precious time for things that you love. Starting up with Kube is ridiculously fast you can start in under a minute. Here's how to set up Kube, and what basic customization are available out-of-the-box."
-+++
-
-<h3 class="section-head" id="h-basic-template"><a href="#h-basic-template">Basic Template</a></h3>
-
-<p>With Kube, you can set up your web framework and be on your way in under a minute. Just add this code to your web page for the basic template to take effect immediately.</p>
-
-<pre class="code"><span class="hljs-meta"><!DOCTYPE html></span>
-<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Basic Template<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1"</span>></span>
-
- <span class="hljs-comment"><!-- Kube CSS --></span>
- <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"assets/css/kube.css"</span>></span>
-
-<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Hello, world!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
-
- <span class="hljs-comment"><!-- Kube JS + jQuery are used for some functionality, but are not required for the basic setup --></span>
- <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/js/kube.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">html</span>></span></pre>
-
-
-<h3 class="section-head" id="h-supported-browsers"><a href="#h-supported-browsers">Supported Browsers</a></h3>
-
-<p>Kube supports the latest, stable releases of all major browsers:</p>
-<ul>
- <li>Latest Chrome</li>
- <li>Latest Firefox</li>
- <li>Latest Safari</li>
- <li>Latest Opera</li>
- <li>Microsoft Edge</li>
- <li>Internet Explorer 11</li>
-</ul>
-
-
-<h3 class="section-head" id="h-development"><a href="#h-development">Development with Kube</a></h3>
-
-<p>Kube has been designed to help you with web development, that's why it's so easy to use Kube when building websites. To move forward quickly and efficiently, just link <code>kube.scss</code> from Kube package: this file contains variables, mixins and everything you need to simplify daily routine tasks.
-</p>
-
-<p>
- For example, import kube.scss into your master.scss styles file, which you will later compile into <code>master.css</code>:
-</p>
-
-<pre class="code"><span class="hljs-comment">// master.scss</span>
-@<span class="hljs-keyword">import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>;</pre>
-
-<p>
- Now all Kube's variables and mixins are readily available in <code>master.scss</code>,
- and you can use them whenever needed. For instance, here's how one of examples:
-</p>
-
-<pre class="code"><span class="hljs-comment">// master.scss</span>
-<span class="hljs-keyword">@import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>;
-
-<span class="hljs-selector-id">#sidebar</span> {
- <span class="hljs-variable">@include</span> flex-item-width(<span class="hljs-number">200px</span>);
-}</pre>
-
-<p>Also, you could use settings from <code>variables.scss</code>:</p>
-
-
-<pre class="code"><span class="hljs-comment">// master.scss</span>
-@<span class="hljs-keyword">import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>;
-
-<span class="hljs-selector-id">#my-layout</span> {
- <span class="hljs-attribute">padding</span>: <span class="hljs-variable">$base-line</span>;
-}</pre>
diff --git a/exampleSite/content/blog/content/docs/sizing.md b/exampleSite/content/blog/content/docs/sizing.md deleted file mode 100644 index be164b9..0000000 --- a/exampleSite/content/blog/content/docs/sizing.md +++ /dev/null @@ -1,99 +0,0 @@ -+++ -title = "Sizing" -date = "2017-04-10T16:43:21+01:00" -draft = false -weight = 220 -description = "Helper tools for elements width and height" -bref="Helper tools for elements width and height." -toc = true -+++ - -<h3 class="section-head" id="h-width"><a href="#h-width">Width</a></h3> -<div class="example demo-sizing"> - <div class="w5"> - w5 - </div> - <div class="w10"> - w10 - </div> - <div class="w15"> - w15 - </div> - <div class="w20"> - w20 - </div> - <div class="w25"> - w25 - </div> - <div class="w30"> - w30 - </div> - <div class="w35"> - w35 - </div> - <div class="w40"> - w40 - </div> - <div class="w45"> - w45 - </div> - <div class="w50"> - w50 - </div> - <div class="w55"> - w55 - </div> - <div class="w60"> - w60 - </div> - <div class="w65"> - w65 - </div> - <div class="w70"> - w70 - </div> - <div class="w75"> - w75 - </div> - <div class="w80"> - w80 - </div> - <div class="w85"> - w85 - </div> - <div class="w90"> - w90 - </div> - <div class="w95"> - w95 - </div> - <div class="w100"> - w100 - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"w5"</span>>w5</<span class="hljs-keyword">div</span>> -... -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"w100"</span>>w100</<span class="hljs-keyword">div</span>> -</pre> -</div> -<div class="example demo-sizing"> - <p>100% width on small devices.</p> - <div class="w50 w100-sm"> - w100-sm - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"w50 w100-sm"</span>>...</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-auto-width"><a href="#h-auto-width">Auto Width</a></h3> -<div class="example"> - .w-auto<br> - .w-auto-sm -</div> -<h3 class="section-head" id="h-max-width"><a href="#h-max-width">Max Width</a></h3> -<div class="example"> - .max-w5 — .max-w100<br> - .max-w-auto-sm -</div> -<h3 class="section-head" id="h-min-width"><a href="#h-min-width">Min Width</a></h3> -<div class="example"> - .min-w5 — .min-w100 -</div> diff --git a/exampleSite/content/blog/content/docs/sticky.md b/exampleSite/content/blog/content/docs/sticky.md deleted file mode 100644 index 9779ed5..0000000 --- a/exampleSite/content/blog/content/docs/sticky.md +++ /dev/null @@ -1,66 +0,0 @@ -+++ -date = "2017-04-10T16:42:26+01:00" -title = "Sticky" -draft = false -weight = 160 -description = "Make navigation menus stick to the top on scroll" -bref="Sticky navigation makes it easy to affix menus to the top of the page whenever a user scrolls the page down. This could be very helpful and useful on long pages. Sticky is disabled on mobile devices to avoid unwanted content overlaps and to preserve valuable screen real estate" -toc = true -+++ - -<h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> -<p>Scroll down to fix the navigation.</p> -<div data-component="sticky" id="navbar-demo"> - <div id="navbar-brand"> - <a href=""><img alt="Brand" src="/img/kube/brand.png"></a> - </div> - <nav id="navbar-main"> - <ul> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">News</a> - </li> - <li> - <a href="#">Contact</a> - </li> - <li> - <a href="#">Blog</a> - </li> - <li> - <a href="#">Account</a> - </li> - </ul> - </nav> -</div> -<pre class="code skip"><<span class="hljs-keyword">div</span> data-component=<span class="hljs-string">"sticky"</span>>...</<span class="hljs-keyword">div</span>> -</pre> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>offset</h5> -<ul> - <li>Type: <var>int</var></li> - <li>Default: <var>0</var></li> -</ul> -<p>Sets top offset in pixels when navigation is fixed.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>fixed</h5> -<p>Using this callback, you can act upon menu becoming fixed at the top of the page.</p> -<pre class="code skip">$(<span class="hljs-string">'#my-nav'</span>).on(<span class="hljs-string">'fixed.sticky'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>unfixed</h5> -<p>Whenever fixed position of the menu is released, you can do something with this callback.</p> -<pre class="code skip">$(<span class="hljs-string">'#my-nav'</span>).on(<span class="hljs-string">'unfixed.sticky'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre><br> -<br> -<p><em>Some scrollable material</em></p> -<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/tables.md b/exampleSite/content/blog/content/docs/tables.md deleted file mode 100644 index 0bc6c26..0000000 --- a/exampleSite/content/blog/content/docs/tables.md +++ /dev/null @@ -1,196 +0,0 @@ -+++ -date = "2017-04-10T16:40:43+01:00" -title = "Tables" -draft = false -weight = 50 -description = "Rows and columns for all sorts of tables" -toc = true -bref = "Tables are an essential part of many different contexts. Kube serves them all and delivers full variety of tables, preformatted to save you time. Whatever your requirements are, tables are completely customizable to match them." -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<div class="example"> - <table> - <thead> - <tr> - <th>First Name</th> - <th>Last Name</th> - <th>Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="2">Total points</td> - <td>223</td> - </tr> - </tfoot> - </table> - <pre class="code"><<span class="hljs-keyword">table</span>>...</<span class="hljs-keyword">table</span>></pre> -</div> -<h3 class="section-head" id="h-bordered"><a href="#h-bordered">Bordered</a></h3> -<div class="example"> - <table class="bordered"> - <thead> - <tr> - <th>First Name</th> - <th>Last Name</th> - <th>Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="2">Total points</td> - <td>223</td> - </tr> - </tfoot> - </table> - <pre class="code"><<span class="hljs-keyword">table</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"bordered"</span>>...</<span class="hljs-keyword">table</span>></pre> -</div> -<h3 class="section-head" id="h-striped"><a href="#h-striped">Striped</a></h3> -<div class="example"> - <table class="striped"> - <thead> - <tr> - <th>First Name</th> - <th>Last Name</th> - <th>Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="2">Total points</td> - <td>223</td> - </tr> - </tfoot> - </table> - <pre class="code"><<span class="hljs-keyword">table</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"striped"</span>>...</<span class="hljs-keyword">table</span>></pre> -</div> -<h3 class="section-head" id="h-unstyled"><a href="#h-unstyled">Unstyled</a></h3> -<div class="example"> - <table class="unstyled"> - <thead> - <tr> - <th>First Name</th> - <th>Last Name</th> - <th>Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="2">Total points</td> - <td>223</td> - </tr> - </tfoot> - </table> - <pre class="code"><<span class="hljs-keyword">table</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"unstyled"</span>>...</<span class="hljs-keyword">table</span>></pre> -</div> -<h3 class="section-head" id="h-mixed"><a href="#h-mixed">Mixed</a></h3> -<div class="example"> - <table class="bordered striped"> - <thead> - <tr> - <th>First Name</th> - <th>Last Name</th> - <th>Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="2">Total points</td> - <td>223</td> - </tr> - </tfoot> - </table> - <pre class="code"><<span class="hljs-keyword">table</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"bordered striped"</span>>...</<span class="hljs-keyword">table</span>></pre> -</div> -<h3 class="section-head" id="h-width"><a href="#h-width">Width</a></h3> -<div class="example"> - <table class="bordered"> - <thead> - <tr> - <th class="w40">First Name</th> - <th class="w40">Last Name</th> - <th class="w20">Points</th> - </tr> - </thead> - <tbody> - <tr> - <td>Jill</td> - <td>Smith</td> - <td>50</td> - </tr> - <tr> - <td>Eve</td> - <td>Jackson</td> - <td>94</td> - </tr> - </tbody> - </table> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">table</span>></span> -<span class="hljs-tag"><<span class="hljs-name">tr</span>></span> - <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w40"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">td</span>></span> - <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w40"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">td</span>></span> - <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w20"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">td</span>></span> -<span class="hljs-tag"></<span class="hljs-name">tr</span>></span> -<span class="hljs-tag"></<span class="hljs-name">table</span>></span></pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/tabs.md b/exampleSite/content/blog/content/docs/tabs.md deleted file mode 100644 index 95b6e23..0000000 --- a/exampleSite/content/blog/content/docs/tabs.md +++ /dev/null @@ -1,286 +0,0 @@ -+++ -title = "Tabs" -date = "2017-04-10T16:41:40+01:00" -draft = false -weight = 100 -description = "User-friendly navigation for your content or app" -bref= "Tabs in Kube are crafted the way one would expect from the world's best CSS framework. With versatile API, wide range of settings an options, with callbacks and live examples. Take a look!" -toc= true -+++ - -<h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> -<p>Here's an example of basic tabs setup. Tabs bar is an unordered list, and each tab in tabs bar is a list item. For each tab there's a corresponding div, which contains the body of the tab (it can be any kind of HTML).</p> -<div class="example"> - <nav class="tabs" data-component="tabs"> - <ul> - <li class="active"> - <a href="#tab1">Home</a> - </li> - <li> - <a href="#tab2">Shop</a> - </li> - <li> - <a href="#tab3">Catalog</a> - </li> - <li> - <a href="#tab4">T-Shirts</a> - </li> - <li> - <a href="#tab5">Brand</a> - </li> - </ul> - </nav> - <div id="tab1"> - <h5>Home</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="hide" id="tab2"> - <h5>Shop</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="hide" id="tab3"> - <h5>Catalog</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="hide" id="tab4"> - <h5>T-Shirts</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="hide" id="tab5"> - <h5>Brand</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"tabs"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - </pre> -</div> -<h3 class="section-head" id="h-javaScript-behavior"><a href="#h-javaScript-behavior">JavaScript behavior</a></h3> -<p>Tabs are interactive elements, and can be opened, closed, switched, destroyed and selected programmatically via JavaScript. Try this example, poke around and then have a look at the self-explanatory code example below.</p> -<div class="example"> - <p><button class="button outline" onclick="$('#tabs-demo').tabs('destroy');">destroy</button> <button class="button outline" onclick="$('#tabs-demo').tabs('prev');">prev</button> <button class="button outline" onclick="$('#tabs-demo').tabs('next');">next</button> <button class="button outline" onclick="$('#tabs-demo').tabs('open', 4);">open</button> <button class="button outline" onclick="$('#tabs-demo').tabs('close', '#tab-demo9');">close</button> <button class="button outline" onclick="$('#tabs-demo').tabs('closeAll');">closeAll</button></p><br> - <nav class="tabs" data-component="tabs" id="tabs-demo"> - <ul> - <li> - <a href="#tab-demo6">Home</a> - </li> - <li class="active"> - <a href="#tab-demo7">Shop</a> - </li> - <li> - <a href="#tab-demo8">Catalog</a> - </li> - <li> - <a href="#tab-demo9">T-Shirts</a> - </li> - <li> - <a href="#tab-demo10">Brand</a> - </li> - </ul> - </nav> - <div id="tab-demo6"> - <h5>Home</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div id="tab-demo7"> - <h5>Shop</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div id="tab-demo8"> - <h5>Catalog</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div id="tab-demo9"> - <h5>T-Shirts</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div id="tab-demo10"> - <h5>Brand</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('destroy');"</span>></span>destroy<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('prev');"</span>></span>prev<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('next');"</span>></span>next<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('open', 4);"</span>></span>open<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('close', '#tab4');"</span>></span>close<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('closeAll');"</span>></span>closeAll<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"tabs"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab1"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab2"</span>></span>Shop<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab3"</span>></span>Catalog<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab4"</span>></span>T-Shirts<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab5"</span>></span>Brand<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab4"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab4"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-equals"><a href="#h-equals">Equals</a></h3> -<p>Often it is important to create tabs that are equal in width regardless of content. <var>data-equals</var> is here to help you with this task.</p> -<div class="example"> - <nav class="tabs" data-component="tabs" data-equals="true"> - <ul> - <li class="active"> - <a href="#tab11">Tab 1</a> - </li> - <li> - <a href="#tab12">Tab 2</a> - </li> - </ul> - </nav> - <div id="tab11"> - <h5>Tab 1</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div id="tab12"> - <h5>Tab 2</h5> - <p>...</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">data-equals</span>=<span class="hljs-string">"true"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab12"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-livetabs"><a href="#h-livetabs">Livetabs</a></h3> -<p>Livetabs provide a very seamless and smooth experience by blending content and tabs in this kind of live manner. Set up <var>data-live</var> class, and make sure your tabs have this same class. It's that simple.</p> -<div class="example"> - <nav data-component="tabs" data-live=".tab-live" id="livetabs"></nav> - <div class="tab-live" data-title="General" id="tab-general"> - <h5>General</h5> - <p>This is very General Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="tab-live" data-title="Additional" id="tab-additional"> - <h5>Additional</h5> - <p>Quite an additional is displayed here: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><nav <span class="hljs-built_in">id</span>=<span class="hljs-string">"livetabs"</span> data-component=<span class="hljs-string">"tabs"</span> data-live=<span class="hljs-string">".tab-live"</span>></nav> - -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"tab-general"</span> data-title=<span class="hljs-string">"General"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"tab-live"</span>>...</<span class="hljs-keyword">div</span>> -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"tab-additional"</span> data-title=<span class="hljs-string">"Additional"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"tab-live"</span>>...</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-active"><a href="#h-active">Active</a></h3> -<p>To denote active tab, and to let users know where they are, use class <var>active</var>.</p> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>equals</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Making all tabs in a set equal width</p> -<h5>active</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Responsible for denoting active tab.</p> -<h5>live</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>false</var></li> -</ul> -<p>Responsible for live tabs (see <a href="#h-livetabs">Livetabs</a> example)</p> -<h5>hash</h5> -<ul> - <li>Type: <var>boolean</var></li> - <li>Default: <var>true</var></li> -</ul> -<p>This will add a hash and an ID to the URL.</p> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>init</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'init.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>next</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'next.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$item</span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>prev</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'prev.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$item</span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'open.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'opened.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'close.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#tabs'</span>).on(<span class="hljs-string">'closed.tabs'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h3 class="section-head" id="h-api"><a href="#h-api">API</a></h3> -<h5>open</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'open'</span>, <span class="hljs-number">1</span>); - -<span class="hljs-regexp">//</span> <span class="hljs-keyword">or</span> - -<span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'open'</span>, <span class="hljs-string">'#tab1'</span>); -</pre> -<h5>close</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'close'</span>, <span class="hljs-number">1</span>); - -<span class="hljs-regexp">//</span> <span class="hljs-keyword">or</span> - -<span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'close'</span>, <span class="hljs-string">'#tab1'</span>); -</pre> -<h5>closeAll</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'closeAll'</span>); -</pre> -<h5>next</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'next'</span>); -</pre> -<h5>prev</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'prev'</span>); -</pre> -<h5>destroy</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'destroy'</span>); -</pre>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/toggleme.md b/exampleSite/content/blog/content/docs/toggleme.md deleted file mode 100644 index 8f42250..0000000 --- a/exampleSite/content/blog/content/docs/toggleme.md +++ /dev/null @@ -1,157 +0,0 @@ -+++ -title = "Toggleme" -date = "2017-04-10T16:42:59+01:00" -draft = false -weight = 190 -description = "Display or hide elements with simple toggle" -bref= "Toggleme is a great way to add a binary option to either display some content or hide it. It works like a charm for menus, disclaimers and so much more!" -toc = true -+++ - -<h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> -<p>Toggleme works on mobile devices as well as on desktops. To see Toggleme in action, just resize this window or open this page on a mobile device.</p> -<div class="example"> - <div class="show-sm"> - <a data-component="toggleme" data-loaded="true" data-target="#navbar" href="#"><b>Toggle</b></a> - </div> - <div class="hide-sm" id="navbar"> - <div id="navbar-demo"> - <div id="navbar-brand"> - <a href=""><img alt="Brand" src="/img/kube/brand.png"></a> - </div> - <nav id="navbar-main"> - <ul> - <li> - <a href="#">Shop</a> - </li> - <li> - <a href="#">News</a> - </li> - <li> - <a href="#">Contact</a> - </li> - <li> - <a href="#">Blog</a> - </li> - <li> - <a href="#">Account</a> - </li> - </ul> - </nav> - </div> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"show-sm"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"toggleme"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#navbar"</span>></span>Toggle<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navbar"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-sm"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-usage"><a href="#h-usage">Usage</a></h3> -<div class="example"> - <p><button class="button outline" data-component="toggleme" data-loaded="true" data-target="#togglebox-target-1" data-text="Hide Me">Show Me</button></p> - <div class="togglebox-box hide" id="togglebox-target-1"> - <h3>Ok, I'm opened. Now hide me</h3> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><button data-component=<span class="hljs-string">"toggleme"</span> data-target=<span class="hljs-string">"#togglebox-target"</span> data-<span class="hljs-built_in">text</span>=<span class="hljs-string">"Hide Me"</span>>Show Me</button> - -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"togglebox-target"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide"</span>> - ... -</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-multiple-targets"><a href="#h-multiple-targets">Multiple targets</a></h3> -<div class="example"> - <p><button class="button primary outline" data-component="toggleme" data-loaded="true" data-target="#togglebox-target-3, #togglebox-target-4" data-text="Hide Me">Show Me</button></p> - <div class="togglebox-box hide" id="togglebox-target-3"> - <h3>Ok, I'm opened. Now hide me</h3> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <div class="togglebox-box hide" id="togglebox-target-4"> - <h3>... and, I'm opened too. Now hide me</h3> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><button data-component=<span class="hljs-string">"toggleme"</span> data-target=<span class="hljs-string">"#togglebox-target-3, #togglebox-target-4"</span> data-<span class="hljs-built_in">text</span>=<span class="hljs-string">"Hide Me"</span>>Show Me</button> - -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"togglebox-target-1"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide"</span>> - ... -</<span class="hljs-keyword">div</span>> - -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"togglebox-target-2"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide"</span>> - ... -</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> -<h5>target</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>null</var></li> - <li>Possible values: <var>selector/selectors</var></li> -</ul> -<p>Defines which layer or layers should be displayed upon clicking the "open" button.</p> -<pre class="code skip"><<span class="hljs-keyword">button </span><span class="hljs-meta">data</span>-component=<span class="hljs-string">"toggleme"</span> <span class="hljs-meta">data</span>-target=<span class="hljs-string">"#togglebox-target"</span>>Show Me</<span class="hljs-keyword">button> -</span> -<<span class="hljs-keyword">button </span><span class="hljs-meta">data</span>-component=<span class="hljs-string">"toggleme"</span> <span class="hljs-meta">data</span>-target=<span class="hljs-string">"#togglebox-target-1, #togglebox-target-2"</span>>Show Me</<span class="hljs-keyword">button> -</span> -<<span class="hljs-keyword">button </span><span class="hljs-meta">data</span>-component=<span class="hljs-string">"toggleme"</span> <span class="hljs-meta">data</span>-target=<span class="hljs-string">".togglebox-target"</span>>Show Me</<span class="hljs-keyword">button> -</span> -</pre> -<h5>text</h5> -<ul> - <li>Type: <var>string</var></li> - <li>Default: <var>''</var></li> -</ul> -<p>Defines what text should a button have after the layer has been opened. If not set, button text will not change.</p> -<pre class="code skip"><<span class="hljs-keyword">button </span><span class="hljs-meta">data</span>-component=<span class="hljs-string">"toggleme"</span> <span class="hljs-meta">data</span>-target=<span class="hljs-string">"#togglebox-target"</span> <span class="hljs-meta">data</span>-text=<span class="hljs-string">"Hide Me"</span>>Show Me</<span class="hljs-keyword">button> -</span> -</pre> -<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3> -<h5>open</h5> -<pre class="code skip">$(<span class="hljs-string">'#togglebox-target'</span>).on(<span class="hljs-string">'open.toggleme'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>opened</h5> -<pre class="code skip">$(<span class="hljs-string">'#togglebox-target'</span>).on(<span class="hljs-string">'opened.toggleme'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>close</h5> -<pre class="code skip">$(<span class="hljs-string">'#togglebox-target'</span>).on(<span class="hljs-string">'close.toggleme'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h5>closed</h5> -<pre class="code skip">$(<span class="hljs-string">'#togglebox-target'</span>).on(<span class="hljs-string">'closed.toggleme'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) -</span>{ - <span class="hljs-comment">// do something...</span> -}); -</pre> -<h3 class="section-head" id="h-api"><a href="#h-api">API</a></h3> -<h5>toggle</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'toggle'</span>); -</pre> -<h5>open</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'open'</span>); -</pre> -<h5>close</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'close'</span>); -</pre> -<h5>isOpened</h5> -<pre class="code skip"><span class="hljs-keyword">var</span> isOpened = $(<span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'isOpened'</span>); -</pre> -<h5>isClosed</h5> -<pre class="code skip"><span class="hljs-keyword">var</span> isClosed = $(<span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'isClosed'</span>); -</pre> -<h5>destroy</h5> -<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'destroy'</span>); -</pre> diff --git a/exampleSite/content/blog/content/docs/typography.md b/exampleSite/content/blog/content/docs/typography.md deleted file mode 100644 index 40f30ef..0000000 --- a/exampleSite/content/blog/content/docs/typography.md +++ /dev/null @@ -1,452 +0,0 @@ -+++ -title = "Typography" -weight = 25 -draft = false -description = "Always precise spacing and perfect font size" -bref = "Typography is perhaps one of the most important and most visible things on a web page. Even slightest imperfection can ruin otherwise perfect website. With Kube, you will have perfect typography with ideal spacing, font sizes and proportions, regardless of the exact style or font you choose for your site." -toc = true -+++ - -<h3 class="section-head" id="h-get-started"><a href="#h-get-started">Get Started</a></h3> -<p>Typography of Kube based on the 4px horizontal grid, it means that for the headers, paragraphs, quotes and any other texts chosen are a combination of line-height, that fit into the 4px grid and help set the horizontal rhythm of design by default.</p> -<figure> - <img alt="4px horizontal rhythm" height="180" src="/img/kube/typography/01.png" width="676"> - <figcaption> - 4px grid for typography - the magic of the horizontal rhythm - </figcaption> -</figure> -<p>With this feature, you can quickly and easily make a solid and harmonious-looking website and UI design. You do not need to do complicated calculations to find the size and proportions of the text baseline, no need to look for the magic formula to build a horizontal rhythm. Magic is already in Kube.</p> -<p>You can use all the default settings of typography and it will always look balanced. But also you can easily change any font sizes, just try to set the value of line-height fold for 4px and your texts will still look great.</p> -<p>Additional balance and harmony, creates a classic typography scale, used in Kube.</p> -<figure> - <img alt="the typography scale" height="140" src="/img/kube/typography/02.png" width="520"> - <figcaption> - The typography scale helps to build a balance between the size of headings and text elements - </figcaption> -</figure> -<h3 class="section-head" id="h-headings"><a href="#h-headings">Headings</a></h3> -<p>Use h1-h6 tags or <code>.h1-.h6</code> classes to define headers and <code>class="title"</code> for the title, which is suitable for the most important inscriptions, for example, in the hero or covers.</p> -<div class="example"> - <h1 class="title">Title</h1> - <h1>Heading 1</h1> - <h2>Heading 2</h2> - <h3>Heading 3</h3> - <h4>Heading 4</h4> - <h5>Heading 5</h5> - <h6>Heading 6</h6> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> -<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> -... -<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></pre> -</div> -<h3 class="section-head" id="h-paragraphs"><a href="#h-paragraphs">Paragraphs</a></h3> -<p>The base pragraph has an ideal ratio of font size and baseline. This text is easy to read in most cases.</p> -<div class="example"> - <p class="section-item-desc">16px/24px</p> - <p>By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<p>In special cases, you can use modifiers which increase or decrease the text size. It is useful for building a variety of websites and UI, when you need to make a lead text or signatures with a small font size .</p> -<div class="example"> - <p class="section-item-desc">20px/32px</p> - <p class="large">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<div class="example"> - <p class="section-item-desc">18px/28px</p> - <p class="big">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"big"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<div class="example"> - <p class="section-item-desc">14px/20px</p> - <p class="small">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<div class="example"> - <p class="section-item-desc">12px/20px</p> - <p class="smaller">By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</p> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"smaller"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> -</div> -<h3 class="section-head" id="h-columns"><a href="#h-columns">Columns</a></h3> -<p>Kube has three classes of <code>.columns-2</code> through <code>.columns-4</code> to create a multi-column layout. All multi-column layouts will be in a single column on mobile.</p> -<div class="example"> - <p class="section-item-desc">2 columns</p> - <div class="columns-2"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns-2"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<div class="example"> - <p class="section-item-desc">3 columns</p> - <div class="columns-3"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns-3"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<div class="example"> - <p class="section-item-desc">4 columns</p> - <div class="columns-4"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns-4"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-quotes"><a href="#h-quotes">Quotes</a></h3> -<p>Quotes in the text stand out for contrast and added variety to the text. In the quotes you can mark text as a paragraph tag and without it.</p> -<div class="example"> - <blockquote> - <p>No, she'll probably make me do it. Goodbye, friends. I never thought I'd die like this. But I always really hoped. I saw you with those two "ladies of the evening" at Elzars. Explain that. I never loved you.</p> - </blockquote> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span>...<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span></pre> -</div> -<p>Use <code>small</code> tag for attribution. It's a prefer way for semantic code.</p> -<div class="example"> - <blockquote> - <p>Who's brave enough to fly into something we all keep calling a death sphere? Yes. You gave me a dollar and some candy. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.</p><small>— Bender</small> - </blockquote> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Quotation content<span class="hljs-tag"></<span class="hljs-name">p</span>></span> - <span class="hljs-tag"><<span class="hljs-name">small</span>></span>Author attribution<span class="hljs-tag"></<span class="hljs-name">small</span>></span> -<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-pre-formatted"><a href="#h-pre-formatted">Pre-formatted</a></h3> -<p>Pre-formatted text most often used to display code snippets or other text elements, for which you wish to preserve the exact formatting they've got.</p> -<div class="example"> - <pre>Function.prototype.inherits = function(parent) -{ - for (var key in parent.prototype) - { - this.prototype[key] = parent.prototype[key]; - } -}; -</pre> - <pre class="code"><span class="hljs-tag"><<span class="hljs-name">pre</span>></span>...<span class="hljs-tag"></<span class="hljs-name">pre</span>></span></pre> -</div> -<p>You feel free to use <code>code</code> tag inside <code>pre</code>.</p> -<div class="example"> - <pre class="demo-pre"><code>Function.prototype.inherits = function(parent) -{ - for (var key in parent.prototype) - { - this.prototype[key] = parent.prototype[key]; - } -}; -</code></pre> - <pre class="code"><pre><span class="xml"><span class="hljs-tag"><<span class="hljs-name">code</span>></span>...<span class="hljs-tag"></<span class="hljs-name">code</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">pre</span>></span></span></pre> -</div> -<h3 class="section-head" id="h-inline-elements"><a href="#h-inline-elements">Inline Elements</a></h3> -<p>Kube features various inline formatting elements. They all have their own semantic meaning, but you're free to use them just for their style.</p> -<table> - <thead> - <tr> - <th>Example</th> - <th>Tag</th> - <th>Example</th> - <th>Tag</th> - </tr> - </thead> - <tbody> - <tr> - <td><abbr title="Cascading Style Sheets">CSS</abbr></td> - <td class="col-6"><code><abbr></code></td> - <td><cite>Cite</cite></td> - <td class="col-6"><code><cite></code></td> - </tr> - <tr> - <td><code>Code</code></td> - <td><code><code></code></td> - <td><samp>Sample</samp></td> - <td><code><samp></code></td> - </tr> - <tr> - <td><var>Variable</var></td> - <td><code><var></code></td> - <td><mark>Mark</mark></td> - <td><code><mark></code></td> - </tr> - <tr> - <td><kbd>Shortcut</kbd></td> - <td><code><kbd></code></td> - <td> - <del>Deleted</del> - </td> - <td><code><del></code></td> - </tr> - <tr> - <td><i>Italic</i></td> - <td><code><i></code></td> - <td><em>Emphasis</em></td> - <td><code><em></code></td> - </tr> - <tr> - <td><strong>Highlighted</strong></td> - <td><code><strong></code></td> - <td><b>Bold</b></td> - <td><code><b></code></td> - </tr> - <tr> - <td>x<sup>superscript</sup></td> - <td><code><sup></code></td> - <td>x<sub>subscript</sub></td> - <td><code><sub></code></td> - </tr> - <tr> - <td><small>Small</small></td> - <td><code><small></code></td> - <td> - <ins>Inserted</ins> - </td> - <td><code><ins></code></td> - </tr> - </tbody> -</table> -<h3 class="section-head" id="h-modifiers"><a href="#h-modifiers">Modifiers</a></h3> -<p>Modifiers - a set of helper classes for creating accents in the text and for the solution of useful tasks without writing CSS code, for example, the alignment of the text in the center.</p> -<p>Modifiers can be applied to any tags as inline elements, links or block tags.</p> -<table> - <thead> - <tr> - <th>Example</th> - <th>Modifier</th> - </tr> - </thead> - <tbody> - <tr> - <td><span class="muted">Muted</span></td> - <td class="col-12"><code>.muted</code></td> - </tr> - <tr> - <td> - <a class="muted" href="#">Muted link</a> - </td> - <td><code>.muted</code></td> - </tr> - <tr> - <td> - <a class="black" href="#">Black link</a> - </td> - <td><code>.black</code></td> - </tr> - <tr> - <td><span class="highlight">Highlight</span></td> - <td><code>.highlight</code></td> - </tr> - <tr> - <td><span class="upper">upper</span></td> - <td><code>.upper</code></td> - </tr> - <tr> - <td><span class="lower">LOWER</span></td> - <td><code>.lower</code></td> - </tr> - <tr> - <td><span class="italic">Italic</span></td> - <td><code>.italic</code></td> - </tr> - <tr> - <td><span class="strong">Strong</span></td> - <td><code>.strong</code></td> - </tr> - <tr> - <td><strong class="normal">Not strong</strong></td> - <td><code>.normal</code></td> - </tr> - <tr> - <td><span class="monospace">Monospace</span></td> - <td><code>.monospace</code></td> - </tr> - <tr> - <td><span class="nowrap">Nowrap</span></td> - <td><code>.nowrap</code></td> - </tr> - <tr> - <td class="nowrap">Remove margin bottom</td> - <td><code>.end</code></td> - </tr> - <tr> - <td><span class="highlight">Highlight</span></td> - <td><code>.highlight</code></td> - </tr> - <tr> - <td><span class="small">Small</span></td> - <td><code>.small</code></td> - </tr> - <tr> - <td><span class="smaller">Smaller</span></td> - <td><code>.smaller</code></td> - </tr> - <tr> - <td><span class="large">Large</span></td> - <td><code>.large</code></td> - </tr> - <tr> - <td><span class="big">Big</span></td> - <td><code>.big</code></td> - </tr> - <tr> - <td class="text-left">Text left</td> - <td><code>.text-left</code></td> - </tr> - <tr> - <td class="text-center">Text center</td> - <td><code>.text-center</code></td> - </tr> - <tr> - <td class="text-right">Text right</td> - <td><code>.text-right</code></td> - </tr> - </tbody> -</table> -<h3 class="section-head" id="h-figure"><a href="#h-figure">Figure</a></h3> -<p>A figure tag features an image, a video or a code plus a caption. It is a good accessibility practice. It also helps serve responsive video to various devices when you wrap video into <code>.video-container</code> class.</p> -<h5>Images</h5> -<figure> - <img alt="Image" height="533" src="/img/favicons/logo-384x384.png" width="800"> - <figcaption> - Lorem ipsum dolor sit amet, consectetur adipisicing elit... - </figcaption> -</figure> -<p class="end"><var>HTML</var></p> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -</pre> -<h5>Video</h5> -<figure> - <div class="video-container"> - <iframe allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/nywsA8wCCfY" width="560"></iframe> - </div> - <figcaption> - Journey Through The Ice | National Geographic - </figcaption> -</figure> -<p class="end"><var>HTML</var></p> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">iframe</span>></span>...<span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -</pre> -<h5>Code</h5> -<figure> - <pre>Function.prototype.inherits = function(parent) -{ - for (var key in parent.prototype) - { - this.prototype[key] = parent.prototype[key]; - } -}; -</pre> - <figcaption> - One of the implementations of inheritance - </figcaption> -</figure> -<p class="end"><var>HTML</var></p> -<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">pre</span>></span>...<span class="hljs-tag"></<span class="hljs-name">pre</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -</pre> -<h3 class="section-head" id="h-lists"><a href="#h-lists">Lists</a></h3> -<p>Although you most likely will not ever need to do so, you can still nest as many list levels as you like.</p> -<div class="row gutters"> - <div class="col col-6"> - <div class="example"> - <ul> - <li>list item 1</li> - <li>list item 2 - <ul> - <li>list item 2.1</li> - <li>list item 2.2 - <ul> - <li>list item 2.2.1</li> - <li>list item 2.2.2</li> - </ul> - </li> - <li>list item 2.3</li> - <li>list item 2.4</li> - </ul> - </li> - <li>list item 3</li> - <li>list item 4</li> - </ul> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</pre> - </div> - </div> - <div class="col col-6"> - <div class="example"> - <ol> - <li>list item 1</li> - <li>list item 2 - <ol> - <li>list item 2.1</li> - <li>list item 2.2 - <ol> - <li>list item 2.2.1</li> - <li>list item 2.2.2</li> - </ol> - </li> - <li>list item 2.3</li> - <li>list item 2.4</li> - </ol> - </li> - <li>list item 3</li> - <li>list item 4</li> - </ol> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ol</span>></span> -</pre> - </div> - </div> -</div> -<h5>Unstyled List</h5> -<p>To remove default list styling, use <code>.unstyled</code>.</p> -<div class="example"> - <ul class="unstyled"> - <li>list item 1</li> - <li>list item 2 - <ul> - <li>list item 2.1</li> - <li>list item 2.2</li> - </ul> - </li> - <li>list item 3</li> - <li>list item 4</li> - </ul> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"unstyled"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</pre> -</div> -<h5>Definition List</h5> -<p>From time to time, you may need to produce a list of definitions, and there's one nicely built-in into Kube. We love semantic things. And lists. We love lists.</p> -<div class="example"> - <dl> - <dt>Term 1</dt> - <dd>Description 1</dd> - <dt>Term 2</dt> - <dd>Description 2</dd> - <dt>Term 3</dt> - <dd>Description 3</dd> - </dl> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">dl</span>></span> - <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>Term<span class="hljs-tag"></<span class="hljs-name">dt</span>></span> - <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>Description<span class="hljs-tag"></<span class="hljs-name">dd</span>></span> -<span class="hljs-tag"></<span class="hljs-name">dl</span>></span> -</pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/docs/utils.md b/exampleSite/content/blog/content/docs/utils.md deleted file mode 100644 index 3e58bcc..0000000 --- a/exampleSite/content/blog/content/docs/utils.md +++ /dev/null @@ -1,124 +0,0 @@ -+++ -date = "2017-04-10T16:43:30+01:00" -draft = false -weight = 280 -description = "A dozen of useful utilities that come with Kube" -title = "Utils" -bref= "Here you can find over a dozen of examples of little tiny utilities, that can make developer's life that much easier, and your project progress that much faster." -toc = true -+++ - -<h3 class="section-head" id="h-group"><a href="#h-group">Group</a></h3> -<p>Combines float elements to group with a clearfix.</p> -<div class="example"> - <div class="group"> - <div class="float-left"> - This text is visibly floating left - </div> - <div class="float-right"> - This text looks like a case of right float - </div> - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"group"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"float-left"</span>>...</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"float-right"</span>>...</<span class="hljs-keyword">div</span>> -</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-visibility"><a href="#h-visibility">Visibility</a></h3> -<p>Below is an invisible <code>div</code> with class <var>invisible</var>. You can't see it, because it is invisible. You can't see invisible things.</p> -<div class="example"> - <div class="invisible"> - invisible - </div> - <div class="visible"> - But you can see this <code>div</code> because it has <var>visible</var> class. - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"invisible"</span>>...</<span class="hljs-keyword">div</span>> -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"visible"</span>>...</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-display"><a href="#h-display">Display</a></h3> -<p>This is a very useful little bit. Whenever you need to hide some text or an element on a small screen, just throw in <var>hide-sm</var> class. Or, if you need to specifically show something only on small screens, <var>show-sm</var> class is yours for the job. You can also just plain hide stuff with <var>hide</var> class. Can you see red words "I'm hidden" below? Exactly.</p> -<div class="example"> - <div class="hide red"> - I'm hidden - </div> - <div class="hide-sm"> - This text will not show up on a small screen. - </div> - <p>Resize your window and trust us on this <span class="hide-sm">↑</span> <span class="show-sm">↓</span></p> - <div class="show-sm"> - This text will only show up on a small screen - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide"</span>>I'm hidden</<span class="hljs-keyword">div</span>> -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide-sm"</span>>This <span class="hljs-built_in">text</span> will <span class="hljs-keyword">not</span> show up <span class="hljs-keyword">on</span> a small screen.</<span class="hljs-keyword">div</span>> -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"show-sm"</span>>This will only show up <span class="hljs-keyword">on</span> a small screen</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-print"><a href="#h-print">Print</a></h3> -<p>One more neat feature of Kube. It helps you produce better ready-to-print pages by simply hiding irrelevant things.</p> -<div class="example"> - <div class="hide-print"> - This will be hidden on print, because it is some sort of web-specific thing. - </div> - <div class="show-print"> - This will be printed, because this text is somehow more relevant on paper than on screen. - </div> - <pre class="code skip"><<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide-print"</span>>...</<span class="hljs-keyword">div</span>> -<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"show-print"</span>>...</<span class="hljs-keyword">div</span>> -</pre> -</div> -<h3 class="section-head" id="h-video-container"><a href="#h-video-container">Video Container</a></h3> -<p>Helps to serve responsive video to various devices.</p> -<div class="example"> - <div class="video-container"> - <iframe allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/nywsA8wCCfY" width="560"></iframe> - </div> - <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">iframe</span>></span>...<span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</pre> -</div> -<h3 class="section-head" id="h-close"><a href="#h-close">Close</a></h3> -<p>Closing icon to close anything you want.</p> -<div class="example"> - <span class="close small"></span> - <pre class="code skip"><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span></pre> -</div> -<div class="example"> - <span class="close"></span> - <pre class="code skip"><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span></pre> -</div> -<div class="example"> - <span class="close big"></span> - <pre class="code skip"><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close big"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span></pre> -</div> -<h3 class="section-head" id="h-caret"><a href="#h-caret">Caret</a></h3> -<p>Kube has already built-in four-direction caret.</p> -<div class="example"> - <span class="caret down"></span> <span class="caret up"></span> <span class="caret left"></span> <span class="caret right"></span> - <pre class="code skip"><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"caret down"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> -<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"caret up"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> -<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"caret left"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> -<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"caret right"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> -</pre> -</div> -<p>Example of usage:</p> -<div class="example"> - <button class="button">Button <span class="caret down white"></span></button> <a href="#">Link <span class="caret up"></span></a> Text <span class="caret down"></span> <button class="button secondary outline">Button <span class="caret down"></span></button> -</div> -<h3 class="section-head" id="h-icons"><a href="#h-icons">Icons</a></h3> -<p>Some useful icons are already built-in to Kube.</p> -<div class="example"> - <i class="kube-search"></i> - <pre class="code skip"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"kube-search"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></pre> -</div> -<div class="example"> - <i class="kube-menu"></i> - <pre class="code skip"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"kube-menu"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></pre> -</div> -<div class="example"> - <i class="kube-calendar"></i> - <pre class="code skip"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"kube-calendar"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></pre> -</div>
\ No newline at end of file diff --git a/exampleSite/content/blog/content/faq/_index.md b/exampleSite/content/blog/content/faq/_index.md deleted file mode 100644 index 17c8963..0000000 --- a/exampleSite/content/blog/content/faq/_index.md +++ /dev/null @@ -1,39 +0,0 @@ -+++
-draft= false
-title = "FAQ"
-description = "Asked and answered"
-+++
-
-## Kube looks awesome. Who is it for?
-
-We designed Kube as a small and inconspicuous helper for the professional developers and designers. Why an emphasis on “professional”? Well, because Kube is neither a kit of ready elements nor a set of templates; Kube is mainly a tool, which helps to keep routine tasks to a minimum. Kube doesn’t impose its own styles and doesn’t require following any specific design rules or practices. It makes Kube ideal for creative and challenging tasks of making unique websites with the unique design. For those who know HTML/CSS/JS inside out, Kube may become an irreplaceable tool that saves countless hours of work.
-
-If you are new to HTML/CSS/JS, then you may have a hard time implementing Kube in your projects, and it may just not be a tool for you yet. But certainly feel free to download and explore Kube, and see where this journey will take you!
-
-## What? Where’s the Nav Bar and other navigation?
-
-With over 15 years of web development experience under the belt, we can assure you that Nav Bars and all other sorts of navigational elements are always faster and easier to build for a project from scratch than to modify, customize and rebuild an existing solution.
-
-Each and every project has its unique navigational needs and often requires more of a custom approach. Vast experience shows that writing code for navigation from ground up is less time-consuming and more efficient, than tweaking and creating the navigation based on a boilerplate solution.
-
-## Isn’t it a great idea to add some awesome features to Kube?
-
-Nope. We want to keep Kube minimalistic, small and flexible. So, actually, there’s more chance of us removing stuff from the code and functions while preserving features, than adding new code and new stuff.
-
-## What Does the Future Hold for Kube? What’s the plan?
-
-Right now, Kube is a self-sufficient, modern and complete product. We have no specific plans of adding any new components anytime soon; we do not plan to extend Kube as well. Our goal is to improve the things that make Kube so awesome by squashing bugs, refactoring the code and improving overall performance.
-
-Having this said, we are keeping our eyes on what’s new in the world of HTML, CSS, and JS, and if something truly exciting happens in future with these technologies (comparable, let’s say, to flexbox emergence), we most certainly will consider these changes and will be first to go ahead and implement them as soon as possible.
-
-## I’m using old Kube. How do I download it again, and where do I find old Documentation?
-
-Old versions of Kube are critically outdated, and we strongly encourage you to stop using them as soon as you can. We do not offer old versions for download, and we do not provide old documentation. We realize that this may be an inconvenience, however, we also deeply believe that upgrading to the new Kube will bring way greater positive effect to your projects than the ability to support legacy versions.
-
-## How do I migrate from an older version to the latest one?
-
-Basically, you take the new Kube and start afresh from scratch. The old Kube had been built on a completely different set of principles and technologies, and it is pretty much incompatible with the new Kube in every way. Starting anew with the new Kube will also give you an opportunity to reevaluate your project in a new light and improve it in general.
-
-## Can I create design themes for sale based on Kube?
-
-You absolutely can! You have our permission to use Kube in whatever projects you wish commercial, for sale, or otherwise, in whichever way you like.
\ No newline at end of file diff --git a/exampleSite/content/blog/content/password-recovery.md b/exampleSite/content/blog/content/password-recovery.md deleted file mode 100644 index 73ae263..0000000 --- a/exampleSite/content/blog/content/password-recovery.md +++ /dev/null @@ -1,17 +0,0 @@ -
-+++
-title = "Password Recovery"
-+++
-<form id="form-recovery-form" action="" data-component="validate" method="post" class="form form-centered"><input type="hidden" name="authorize-token" value="">
-
- <div class="form-item">
- <label>Your email <span class="error" id="user-email-validation-error"></span></label>
- <input type="email" name="user-email" autofocus="true" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
- </div>
-
- <p>
- <button class="button primary width-100">Send</button>
- </p>
-
- <p><a href="/account/" class="small muted">Back to Log In</a></p>
-</form>
\ No newline at end of file diff --git a/exampleSite/content/blog/prototyping.md b/exampleSite/content/blog/prototyping.md index aee327f..f55d46a 100644 --- a/exampleSite/content/blog/prototyping.md +++ b/exampleSite/content/blog/prototyping.md @@ -5,6 +5,7 @@ tags = ["markdown","prototype", "hugo"] categories = ["design"] description = "An idea to make website protoype with markdown" draft = false +weight = 30 +++ <img data-src="https://cldup.com/3tov0aCFh8.png" class="lazyload"> diff --git a/exampleSite/content/blog/typography.md b/exampleSite/content/blog/typography.md index 32fbec6..e5b631b 100644 --- a/exampleSite/content/blog/typography.md +++ b/exampleSite/content/blog/typography.md @@ -4,6 +4,7 @@ weight = 25 draft = false description = "Always precise spacing and perfect font size" bref = "Typography is perhaps one of the most important and most visible things on a web page. Even slightest imperfection can ruin otherwise perfect website. With Kube, you will have perfect typography with ideal spacing, font sizes and proportions, regardless of the exact style or font you choose for your site." + +++ <h3 class="section-head" id="h-get-started"><a href="#h-get-started">Get Started</a></h3> diff --git a/exampleSite/content/blog/welcome.md b/exampleSite/content/blog/welcome.md index ecd9a45..9d8217f 100644 --- a/exampleSite/content/blog/welcome.md +++ b/exampleSite/content/blog/welcome.md @@ -1,11 +1,11 @@ +++ -date = "2017-04-02T21:56:55+01:00" +date = "2017-03-02T21:56:55+01:00" title = "Welcome to Kube" tags = ["markdown","example"] categories = ["general"] draft = false description = "This article is just a demo post and shows you the style of common used elements writing in pure markdown without HTML code." - +weight = 10 +++ # Welcome to Kube – an open source documentation like theme for Hugo |