Browse Source

first commit for kube theme

sx-custom
jeblister 5 years ago
commit
9cd642aba1
  1. 1
      .gitignore
  2. 20
      LICENSE.md
  3. 176
      README.md
  4. 6
      archetypes/blog.md
  5. 8
      archetypes/docs.md
  6. 20
      exampleSite/content/account.md
  7. 206
      exampleSite/content/blog/collapse.md
  8. 20
      exampleSite/content/blog/content/account.md
  9. 207
      exampleSite/content/blog/content/blog/collapse.md
  10. 20
      exampleSite/content/blog/content/blog/content/account.md
  11. 206
      exampleSite/content/blog/content/blog/content/blog/collapse.md
  12. 10
      exampleSite/content/blog/content/blog/content/blog/inline-style.md
  13. 158
      exampleSite/content/blog/content/blog/content/blog/messages.md
  14. 23
      exampleSite/content/blog/content/blog/content/blog/prototyping.md
  15. 452
      exampleSite/content/blog/content/blog/content/blog/typography.md
  16. 85
      exampleSite/content/blog/content/blog/content/blog/welcome.md
  17. 4
      exampleSite/content/blog/content/blog/content/company.md
  18. 163
      exampleSite/content/blog/content/blog/content/docs/animation.md
  19. 99
      exampleSite/content/blog/content/blog/content/docs/breadcrumbs.md
  20. 108
      exampleSite/content/blog/content/blog/content/docs/buttons.md
  21. 207
      exampleSite/content/blog/content/blog/content/docs/collapse.md
  22. 141
      exampleSite/content/blog/content/blog/content/docs/colors.md
  23. 96
      exampleSite/content/blog/content/blog/content/docs/custom-plugins.md
  24. 172
      exampleSite/content/blog/content/blog/content/docs/dropdown.md
  25. 800
      exampleSite/content/blog/content/blog/content/docs/forms.md
  26. 588
      exampleSite/content/blog/content/blog/content/docs/grid.md
  27. 51
      exampleSite/content/blog/content/blog/content/docs/labels.md
  28. 159
      exampleSite/content/blog/content/blog/content/docs/messages.md
  29. 268
      exampleSite/content/blog/content/blog/content/docs/mixins.md
  30. 189
      exampleSite/content/blog/content/blog/content/docs/modal.md
  31. 140
      exampleSite/content/blog/content/blog/content/docs/offcanvas.md
  32. 196
      exampleSite/content/blog/content/blog/content/docs/pagination.md
  33. 81
      exampleSite/content/blog/content/blog/content/docs/quick-start.md
  34. 99
      exampleSite/content/blog/content/blog/content/docs/sizing.md
  35. 66
      exampleSite/content/blog/content/blog/content/docs/sticky.md
  36. 196
      exampleSite/content/blog/content/blog/content/docs/tables.md
  37. 286
      exampleSite/content/blog/content/blog/content/docs/tabs.md
  38. 157
      exampleSite/content/blog/content/blog/content/docs/toggleme.md
  39. 452
      exampleSite/content/blog/content/blog/content/docs/typography.md
  40. 124
      exampleSite/content/blog/content/blog/content/docs/utils.md
  41. 39
      exampleSite/content/blog/content/blog/content/faq/_index.md
  42. 17
      exampleSite/content/blog/content/blog/content/password-recovery.md
  43. 4
      exampleSite/content/blog/content/company.md
  44. 163
      exampleSite/content/blog/content/docs/animation.md
  45. 99
      exampleSite/content/blog/content/docs/breadcrumbs.md
  46. 108
      exampleSite/content/blog/content/docs/buttons.md
  47. 207
      exampleSite/content/blog/content/docs/collapse.md
  48. 141
      exampleSite/content/blog/content/docs/colors.md
  49. 96
      exampleSite/content/blog/content/docs/custom-plugins.md
  50. 172
      exampleSite/content/blog/content/docs/dropdown.md
  51. 800
      exampleSite/content/blog/content/docs/forms.md
  52. 588
      exampleSite/content/blog/content/docs/grid.md
  53. 51
      exampleSite/content/blog/content/docs/labels.md
  54. 159
      exampleSite/content/blog/content/docs/messages.md
  55. 268
      exampleSite/content/blog/content/docs/mixins.md
  56. 189
      exampleSite/content/blog/content/docs/modal.md
  57. 140
      exampleSite/content/blog/content/docs/offcanvas.md
  58. 196
      exampleSite/content/blog/content/docs/pagination.md
  59. 81
      exampleSite/content/blog/content/docs/quick-start.md
  60. 99
      exampleSite/content/blog/content/docs/sizing.md
  61. 66
      exampleSite/content/blog/content/docs/sticky.md
  62. 196
      exampleSite/content/blog/content/docs/tables.md
  63. 286
      exampleSite/content/blog/content/docs/tabs.md
  64. 157
      exampleSite/content/blog/content/docs/toggleme.md
  65. 452
      exampleSite/content/blog/content/docs/typography.md
  66. 124
      exampleSite/content/blog/content/docs/utils.md
  67. 39
      exampleSite/content/blog/content/faq/_index.md
  68. 17
      exampleSite/content/blog/content/password-recovery.md
  69. 10
      exampleSite/content/blog/inline-style.md
  70. 158
      exampleSite/content/blog/messages.md
  71. 22
      exampleSite/content/blog/prototyping.md
  72. 451
      exampleSite/content/blog/typography.md
  73. 85
      exampleSite/content/blog/welcome.md
  74. 4
      exampleSite/content/company.md
  75. 163
      exampleSite/content/docs/animation.md
  76. 99
      exampleSite/content/docs/breadcrumbs.md
  77. 108
      exampleSite/content/docs/buttons.md
  78. 207
      exampleSite/content/docs/collapse.md
  79. 141
      exampleSite/content/docs/colors.md
  80. 96
      exampleSite/content/docs/custom-plugins.md
  81. 172
      exampleSite/content/docs/dropdown.md
  82. 800
      exampleSite/content/docs/forms.md
  83. 588
      exampleSite/content/docs/grid.md
  84. 51
      exampleSite/content/docs/labels.md
  85. 159
      exampleSite/content/docs/messages.md
  86. 268
      exampleSite/content/docs/mixins.md
  87. 189
      exampleSite/content/docs/modal.md
  88. 140
      exampleSite/content/docs/offcanvas.md
  89. 196
      exampleSite/content/docs/pagination.md
  90. 81
      exampleSite/content/docs/quick-start.md
  91. 99
      exampleSite/content/docs/sizing.md
  92. 66
      exampleSite/content/docs/sticky.md
  93. 196
      exampleSite/content/docs/tables.md
  94. 286
      exampleSite/content/docs/tabs.md
  95. 157
      exampleSite/content/docs/toggleme.md
  96. 452
      exampleSite/content/docs/typography.md
  97. 124
      exampleSite/content/docs/utils.md
  98. 39
      exampleSite/content/faq/_index.md
  99. 17
      exampleSite/content/password-recovery.md
  100. 0
      exampleSite/static/.gitkeep
  101. Some files were not shown because too many files have changed in this diff Show More

1
.gitignore vendored

@ -0,0 +1 @@ @@ -0,0 +1 @@
.DS_Store

20
LICENSE.md

@ -0,0 +1,20 @@ @@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2017 mohamed jebli
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

176
README.md

@ -0,0 +1,176 @@ @@ -0,0 +1,176 @@
# kube Theme for Hugo
`kube` 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.
I create this theme based on the `Version 6.5.2` [Kube Framework](https://imperavi.com/kube/).
![kube hugo landingPage]()
# Demo
To see this theme in action, check out [kube project](http://kube.elemnts.org) which is rendered with this theme and some conetnt for documentation and blog posts.
## Features
- Mobile-first Design : Every element in kube is mobile-first and fully embraces latest and greatest tech.
- Responsive Design : Optimized for mobile, tablet, desktop
- Horizontal Rhythm : Like Kube framework this theme is based on a 4px vertical grid.
- Typography : beautiful typographie choice
- Google Analytics : Google Analytics using the internal async template
- Disqus Commenting : Post comments with Disqus using the internal template
- OpenGraph support : SEO-optimized using OpenGraph
- Schema Structured Data : Schema Structured Data and Meta tags
- Paginated Lists : Simple list pagination with page indicators
- Reading Time : Post reading time and update notice set user expectations
- Meta data for all blog article : Rich post data including links to category and tag taxonomy listings, author and word count
- Related Posts : Related Content for increased page views and reader loyalty
- Block Templates : Block Templates for foolproof layout extensions
- Table of Contents : Accessible Table of Contents for documentation
- SEO Site Verification : Site verification with Google, Bing Alexa and Yandex
- 404 page : 404 page with animated background
## Installation
Inside the folder of your Hugo site run:
$ mkdir themes
$ cd themes
$ git clone https://github.com/jeblister/kube.git
For more information read the official [setup guide](//gohugo.io/overview/installing/) for Hugo.
Copy custom archetypes to your site:
```shell
cp themes/kube/archetypes/* archetypes
```
Next, take a look in the `exampleSite` folder at. This directory contains an example config file and the content for the demo. It serves as an example setup for your blog.
Copy at least the `config.toml` in the root directory of your website. Overwrite the existing config file if necessary.
Hugo includes a development server, so you can view your changes as you go :
``` sh
hugo server -w
```
Now you can go to [localhost:1313](http://localhost:1313) and the `kube`
theme should be visible.
## Getting Started
There are a few concepts this theme employs to make a personal documentation site. It's important to read this as you may not see what you expect upon launching. It assumes you want to call your documentation posts `docs` and organizes them as such. For example, creating a new docs with Hugo would require you typing:
```
$ hugo new --kind docs docs/my-new-doc.md
```
It also assumes you want to display three types of content `docs` and `blog` and some pages : the `faq`, `company` and `sign-in` pages and and display links to this pages in the menu. This guide will take you through the steps to configure your documentation site to use the theme.
### Configuring you website
#### Where should blog post markdown files be stored?
The theme works with other content types, but docs pages work best when grouped under `docs`. When using the `docs` content type you'll have a customized list page sorted by `weight` and the default list page for all documentation. Here's an example:
![Custom List docs Page]()
#### Defining yourself as the Author
In this case you would want to add `author = "your name"` variable like your name to your post's Front Matter.
#### Webmaster Verification
Verify your site with several webmaster tools including Google, Bing, Alexa and Yandex. To allow verification of your site with any or all of these providers simply add the following to your `config.toml` and fill in their respective values:
```toml
[params.seo.webmaster_verifications]
google = "" # Optional, Google verification code
bing = "" # Optional, Bing verification code
alexa = "" # Optional, Alexa verification code
yandex = "" # Optional, Yandex verification code
```
### Index Blocking
Just because a page appears in your `sitemap.xml` does not mean you want it to appear in a SERP. Examples of pages which will appear in your `sitemap.xml` that you typically do not want indexed by crawlers include error pages, search pages, legal pages, and pages that simply list summaries of other pages.
Though it's possible to block search indexing from a `robots.txt` file, kube makes it possible to block page indexing using Hugo configuration as well. By default the following page types will be blocked:
- Section Pages (e.g. Post listings)
- Taxonomy Pages (e.g. Category and Tag listings)
- Taxonomy Terms Pages (e.g. Pages listing taxonomies)
To customize default blocking configure the `noindex_kinds` setting in the `[params]` section of your `config.toml`. For example, if you want to enable crawling for sections appearing in [Section Menu](#adding-a-section-menu) add the following to your configuration file:
```
[params]
noindex_kinds = [
"taxonomy",
"taxonomyTerm"
]
```
To block individual pages from being indexed add `nofollow` to your page's front matter and set the value to `true`, like:
```toml
noindex = true
```
And, finally, if you're using Hugo `v0.18` or better, you can also add an `_index.md` file with the `noindex` front matter to control indexing for specific section list layouts:
```shell
├── content
│ ├── modules
│ │ ├── starry-night.md
│ │ └── flying-toilets.md
│ └── news
│ ├── _index.md
│ └── return-flying-toasters.md
```
To learn more about how crawlers use this feature read [block search indexing with meta tags](https://support.google.com/webmasters/answer/93710).
### Custom CSS
To add your own theme css or override existing CSS without having to change theme files do the following:
1. Create a `style.css` in your site's `layouts/static/css directory` or use `custom.css` file in 'themes/kube/static/css/custom.css`
1. Add link to this file in 'themes/kube/layouts/_default/baseof.html'.
Default `style block` :
```html
<!-- Your own theme here -->
<link href="/css/custom.css" rel="stylesheet" type="text/css">
```
## Contributing
Did you find a bug or have an ideas for new features? Feel free to use the issue tracker to let me know or make a pull request.
There's only one rule...there are no rules.
## License
MIT
## Credit
[kube framework]: https://imperavi.com/kube/
[after dark]: https://github.com/comfusion/after-dark
## Contact
This is the second theme I've made for Hugo, so I'm sure I've done some things wrong or assumed too much. If you have ideas or things that should be fixed, please let me know.
- [Mohamed JEBLI](http://findme.surge.sh) [@jebli_7](http://twitter.com/jebli_7)

6
archetypes/blog.md

@ -0,0 +1,6 @@ @@ -0,0 +1,6 @@
+++
title = ""
description = ""
weight = 20
draft = false
+++

8
archetypes/docs.md

@ -0,0 +1,8 @@ @@ -0,0 +1,8 @@
+++
title = ""
description = ""
weight = 20
draft = false
bref = ""
toc = true
+++

20
exampleSite/content/account.md

@ -0,0 +1,20 @@ @@ -0,0 +1,20 @@
+++
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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); 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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); 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>

206
exampleSite/content/blog/collapse.md

@ -0,0 +1,206 @@ @@ -0,0 +1,206 @@
+++
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">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</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">&lt;<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
Toggle
<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</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">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('open', '#box-2');"</span>&gt;</span>Open<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('close', '#box-2');"</span>&gt;</span>Close<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('openAll');"</span>&gt;</span>Open All<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('closeAll');"</span>&gt;</span>Close All<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</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>

20
exampleSite/content/blog/content/account.md

@ -0,0 +1,20 @@ @@ -0,0 +1,20 @@
+++
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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); 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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); 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>

207
exampleSite/content/blog/content/blog/collapse.md

@ -0,0 +1,207 @@ @@ -0,0 +1,207 @@
+++
++
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">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</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">&lt;<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
Toggle
<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</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">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('open', '#box-2');"</span>&gt;</span>Open<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('close', '#box-2');"</span>&gt;</span>Close<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('openAll');"</span>&gt;</span>Open All<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('closeAll');"</span>&gt;</span>Close All<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</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>

20
exampleSite/content/blog/content/blog/content/account.md

@ -0,0 +1,20 @@ @@ -0,0 +1,20 @@
+++
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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); 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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); 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>

206
exampleSite/content/blog/content/blog/content/blog/collapse.md

@ -0,0 +1,206 @@ @@ -0,0 +1,206 @@
+++
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">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</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">&lt;<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"collapse"</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
Toggle
<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"caret down"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</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">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('open', '#box-2');"</span>&gt;</span>Open<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('close', '#box-2');"</span>&gt;</span>Close<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('openAll');"</span>&gt;</span>Open All<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#my-collapse-api').collapse('closeAll');"</span>&gt;</span>Close All<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</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>

10
exampleSite/content/blog/content/blog/content/blog/inline-style.md

@ -0,0 +1,10 @@ @@ -0,0 +1,10 @@
+++
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.

158
exampleSite/content/blog/content/blog/content/blog/messages.md

@ -0,0 +1,158 @@ @@ -0,0 +1,158 @@
+++
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">&lt;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>&gt; ... &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</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">&lt;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>&gt; ... &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</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">&lt;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>&gt; ... &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span