From a02bb1f8d50fea51b09fbf87ff321fa7e9aeb859 Mon Sep 17 00:00:00 2001 From: Andrew Weiss Date: Thu, 27 Dec 2018 12:44:12 -0500 Subject: [PATCH] add initial docs --- .gitignore | 2 + docs/archetypes/blog.md | 7 + docs/archetypes/default.md | 6 + docs/archetypes/docs.md | 9 + docs/config.toml | 25 + docs/content/_index.md | 6 + docs/content/account.md | 20 + docs/content/blog/collapse.md | 207 +++++ docs/content/blog/inline-style.md | 10 + docs/content/blog/messages.md | 158 ++++ docs/content/blog/prototyping.md | 23 + docs/content/blog/typography.md | 452 ++++++++++ docs/content/blog/welcome.md | 85 ++ docs/content/company.md | 4 + docs/content/docs/animation.md | 163 ++++ docs/content/docs/breadcrumbs.md | 99 +++ docs/content/docs/buttons.md | 108 +++ docs/content/docs/collapse.md | 207 +++++ docs/content/docs/colors.md | 141 +++ docs/content/docs/custom-plugins.md | 96 +++ docs/content/docs/dropdown.md | 172 ++++ docs/content/docs/forms.md | 800 ++++++++++++++++++ docs/content/docs/grid.md | 588 +++++++++++++ docs/content/docs/labels.md | 51 ++ docs/content/docs/messages.md | 159 ++++ docs/content/docs/mixins.md | 268 ++++++ docs/content/docs/modal.md | 189 +++++ docs/content/docs/offcanvas.md | 140 +++ docs/content/docs/pagination.md | 196 +++++ docs/content/docs/quick-start.md | 105 +++ docs/content/docs/sizing.md | 99 +++ docs/content/docs/sticky.md | 66 ++ docs/content/docs/tables.md | 196 +++++ docs/content/docs/tabs.md | 286 +++++++ docs/content/docs/toggleme.md | 157 ++++ docs/content/docs/typography.md | 452 ++++++++++ docs/content/docs/utils.md | 124 +++ docs/content/faq/_index.md | 39 + docs/content/password-recovery.md | 17 + docs/layouts/docs/single.html | 23 + docs/layouts/index.html | 61 ++ docs/layouts/partials/favicon.html | 1 + docs/layouts/partials/footer.html | 17 + docs/layouts/partials/header.html | 29 + docs/layouts/partials/meta/name-author.html | 6 + docs/layouts/partials/meta/ogimage.html | 8 + docs/layouts/partials/page-summary.html | 9 + docs/layouts/partials/pagination.html | 15 + docs/layouts/partials/post/byauthor.html | 20 + docs/layouts/partials/post/category-link.html | 1 + docs/layouts/partials/post/meta.html | 14 + .../partials/post/related-content.html | 16 + docs/layouts/partials/post/tag-link.html | 1 + docs/layouts/partials/scripts/animation.html | 127 +++ docs/layouts/partials/site-verification.html | 12 + docs/layouts/partials/toc.html | 21 + docs/themes/oscalkit | 1 + 57 files changed, 6314 insertions(+) create mode 100644 docs/archetypes/blog.md create mode 100644 docs/archetypes/default.md create mode 100644 docs/archetypes/docs.md create mode 100644 docs/config.toml create mode 100644 docs/content/_index.md create mode 100644 docs/content/account.md create mode 100644 docs/content/blog/collapse.md create mode 100644 docs/content/blog/inline-style.md create mode 100644 docs/content/blog/messages.md create mode 100644 docs/content/blog/prototyping.md create mode 100644 docs/content/blog/typography.md create mode 100644 docs/content/blog/welcome.md create mode 100644 docs/content/company.md create mode 100644 docs/content/docs/animation.md create mode 100644 docs/content/docs/breadcrumbs.md create mode 100644 docs/content/docs/buttons.md create mode 100644 docs/content/docs/collapse.md create mode 100644 docs/content/docs/colors.md create mode 100644 docs/content/docs/custom-plugins.md create mode 100644 docs/content/docs/dropdown.md create mode 100644 docs/content/docs/forms.md create mode 100644 docs/content/docs/grid.md create mode 100644 docs/content/docs/labels.md create mode 100644 docs/content/docs/messages.md create mode 100644 docs/content/docs/mixins.md create mode 100644 docs/content/docs/modal.md create mode 100644 docs/content/docs/offcanvas.md create mode 100644 docs/content/docs/pagination.md create mode 100644 docs/content/docs/quick-start.md create mode 100644 docs/content/docs/sizing.md create mode 100644 docs/content/docs/sticky.md create mode 100644 docs/content/docs/tables.md create mode 100644 docs/content/docs/tabs.md create mode 100644 docs/content/docs/toggleme.md create mode 100644 docs/content/docs/typography.md create mode 100644 docs/content/docs/utils.md create mode 100644 docs/content/faq/_index.md create mode 100644 docs/content/password-recovery.md create mode 100644 docs/layouts/docs/single.html create mode 100644 docs/layouts/index.html create mode 100644 docs/layouts/partials/favicon.html create mode 100644 docs/layouts/partials/footer.html create mode 100644 docs/layouts/partials/header.html create mode 100644 docs/layouts/partials/meta/name-author.html create mode 100644 docs/layouts/partials/meta/ogimage.html create mode 100644 docs/layouts/partials/page-summary.html create mode 100644 docs/layouts/partials/pagination.html create mode 100644 docs/layouts/partials/post/byauthor.html create mode 100644 docs/layouts/partials/post/category-link.html create mode 100644 docs/layouts/partials/post/meta.html create mode 100644 docs/layouts/partials/post/related-content.html create mode 100644 docs/layouts/partials/post/tag-link.html create mode 100644 docs/layouts/partials/scripts/animation.html create mode 100644 docs/layouts/partials/site-verification.html create mode 100644 docs/layouts/partials/toc.html create mode 160000 docs/themes/oscalkit diff --git a/.gitignore b/.gitignore index b1d30c5e..e5e035fc 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,5 @@ *.out dist/ + +docs/public/ diff --git a/docs/archetypes/blog.md b/docs/archetypes/blog.md new file mode 100644 index 00000000..dcde13f5 --- /dev/null +++ b/docs/archetypes/blog.md @@ -0,0 +1,7 @@ ++++ +title = "" +description = "" +date = {{ .Date }} +weight = 20 +draft = false ++++ diff --git a/docs/archetypes/default.md b/docs/archetypes/default.md new file mode 100644 index 00000000..00e77bd7 --- /dev/null +++ b/docs/archetypes/default.md @@ -0,0 +1,6 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +date: {{ .Date }} +draft: true +--- + diff --git a/docs/archetypes/docs.md b/docs/archetypes/docs.md new file mode 100644 index 00000000..29df1fa9 --- /dev/null +++ b/docs/archetypes/docs.md @@ -0,0 +1,9 @@ ++++ +title = "" +description = "" +date = {{ .Date }} +weight = 20 +draft = false +bref = "" +toc = true ++++ diff --git a/docs/config.toml b/docs/config.toml new file mode 100644 index 00000000..51bb567a --- /dev/null +++ b/docs/config.toml @@ -0,0 +1,25 @@ +baseURL = "https://opencontrol.github.io/oscalkit/" +languageCode = "en-us" +title = "oscalkit" +theme = "oscalkit" +description = "oscalkit is a CLI and Go SDK for OSCAL" +Paginate = 4 +[Params] + RSSLink = "/index.xml" + author = "oscalkit" # add your company name + github = "oscalkit" # add your github profile name + twitter = "" # add your twitter profile + email = "" + +[[menu.main]] + name = "Docs" + weight = -100 + url = "/docs/" +# [[menu.main]] +# name = "Blog" +# weight = -100 +# url = "/blog/" +# [[menu.main]] +# name = "Faq" +# weight = -100 +# url = "/faq/" \ No newline at end of file diff --git a/docs/content/_index.md b/docs/content/_index.md new file mode 100644 index 00000000..365ed775 --- /dev/null +++ b/docs/content/_index.md @@ -0,0 +1,6 @@ ++++ +description = "oscalkit is a CLI tool and Go SDK for NIST's Open Security Controls Assessment Lanugage (OSCAL)" +title = "oscalkit" +draft = false + ++++ diff --git a/docs/content/account.md b/docs/content/account.md new file mode 100644 index 00000000..ad1f583d --- /dev/null +++ b/docs/content/account.md @@ -0,0 +1,20 @@ ++++ +title = "Sign In" ++++ +
+ +
+ + +
+ +
+ + +
+ +

+

Forgot password?

+

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 support@company.com and we'll fix it right away.

+ +
diff --git a/docs/content/blog/collapse.md b/docs/content/blog/collapse.md new file mode 100644 index 00000000..55e431b5 --- /dev/null +++ b/docs/content/blog/collapse.md @@ -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" + ++++ + +

Base

+
+
+

Item 1

+
+

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.

+
+

Item 2

+
+

I look active on load.

+

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.

+
+

Item 3

+
+
Important Heading
+

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.

+

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.

+
+
+ +
<div id="my-collapse" data-component="collapse">
+
+    <h4><a href="#box-1" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-1">...</div>
+
+    <h4><a href="#box-2" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box" id="box-2">...</div>
+
+    <h4><a href="#box-3" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-3">...</div>
+
+</div>
+
+
+

Navigation Example

+

Here you can see a list of items forming a navigation menu, with a nested list which acts as a collapsable element

+
+ + 
<ul>
+    <li><a href="#">...</a></li>
+    <li data-component="collapse">
+        <a href="#toggle-box" class="collapse-toggle">
+            Toggle
+            <span class="caret down"></span>
+        </a>
+        <ul id="toggle-box" class="collapse-box">
+            <li><a href="#">...</a></li>
+        </ul>
+    </li>
+    <li><a href="#">...</a></li>
+</ul>
+
+
+

Settings

+

Settings are pretty straightforward: you can toggle, denote active element, turn animation on and off, and more.

+
toggle
+ +
active
+ +
toggleClass
+ +

Sets a class of a collapsable object.

+
boxClass
+ +

Sets a class for collapsable object's content

+
animation
+ +

Turns animation on and off.

+

Callbacks

+
open
+
$('#my-collapse').on('open.collapse', function()
+{
+    // do something...
+});
+
+
opened
+
$('#my-collapse').on('opened.collapse', function()
+{
+    // do something...
+});
+
+
close
+
$('#my-collapse').on('close.collapse', function()
+{
+    // do something...
+});
+
+
closed
+
$('#my-collapse').on('closed.collapse', function()
+{
+    // do something...
+});
+
+

API

+

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.

+
+


+
+

Item 1

+
+

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.

+
+

Item 2

+
+

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.

+
+

Item 3

+
+

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.

+

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.

+
+
+ 
<button onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button>
+<button onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button>
+<button onclick="$('#my-collapse-api').collapse('openAll');">Open All</button>
+<button onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button>
+
+<div id="my-collapse-api" data-component="collapse">
+
+    <h4><a href="#box-1" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-1">...</div>
+
+    <h4><a href="#box-2" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-2">...</div>
+
+    <h4><a href="#box-3" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-3">...</div>
+
+</div>
+
+
+
open
+
$('#my-collapse').collapse('open');
+
+
close
+
$('#my-collapse').collapse('close');
+
+
openAll
+
$('#my-collapse').collapse('openAll');
+
+
closeAll
+
$('#my-collapse').collapse('closeAll');
+
\ No newline at end of file diff --git a/docs/content/blog/inline-style.md b/docs/content/blog/inline-style.md new file mode 100644 index 00000000..02623be8 --- /dev/null +++ b/docs/content/blog/inline-style.md @@ -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 $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/docs/content/blog/messages.md b/docs/content/blog/messages.md new file mode 100644 index 00000000..5b884b76 --- /dev/null +++ b/docs/content/blog/messages.md @@ -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" ++++ + +

Usage

+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message error" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message success" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+
Warning!
You have 2 modules waiting to installation. Install +
+ 
<div class="message warning" data-component="message">
+    <h5>...</h5>
+    ...
+    <span class="close small"></span>
+</div>
+
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message focus" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message black" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message inverted" data-component="message"> ...  <span class="close small"></span></div>
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault
closeSelectorstring.close
closeEventstringclick
animationOpenstringfadeIn
animationClosestringfadeOut
+

Set an option

+

Via data attribute:

+
<div class="message" data-component="message" data-close-selector=".my-custom-close">
+    ... <span class="my-custom-close small"></span>
+</div>
+
+

Via Javascript:

+
$('#my-message').message({
+    closeSelector: '.my-custom-close'
+});
+
+

Methods

+

+
+ You have 2 modules waiting to installation. Install +
+ + + + + + + + + + + + + + + + + +
MethodDescription
closeManually closes a message.
openOpens a message if it has been closed.
+

Example

+
$('#my-message').message('close');
+

Callbacks

+ + + + + + + + + + + + + + + + + + + + + + + + + +
CallbackDescription
openThis event fires immediately when the open instance method is called.
openedThis event is fired when the message has been opened, will wait for CSS animation to complete.
closeThis event fires immediately when the close instance method is called.
closedThis event is fired when the message has been closed, will wait for CSS animation to complete.
+

Example

+
$('#my-message').on('closed.message', function()
+{
+    // do something
+})
+
diff --git a/docs/content/blog/prototyping.md b/docs/content/blog/prototyping.md new file mode 100644 index 00000000..f55d46ab --- /dev/null +++ b/docs/content/blog/prototyping.md @@ -0,0 +1,23 @@ ++++ +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 ++++ + + + +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/docs/content/blog/typography.md b/docs/content/blog/typography.md new file mode 100644 index 00000000..e5b631b4 --- /dev/null +++ b/docs/content/blog/typography.md @@ -0,0 +1,452 @@ ++++ +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." + ++++ + +

Get Started

+

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.

+
+ 4px horizontal rhythm +
+ 4px grid for typography - the magic of the horizontal rhythm +
+
+

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.

+

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.

+

Additional balance and harmony, creates a classic typography scale, used in Kube.

+
+ the typography scale +
+ The typography scale helps to build a balance between the size of headings and text elements +
+
+

Headings

+

Use h1-h6 tags or .h1-.h6 classes to define headers and class="title" for the title, which is suitable for the most important inscriptions, for example, in the hero or covers.

+
+

Title

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ 
<h1 class="title">...</h1>
+<h1>...</h1>
+...
+<h6>...</h6>
+
+

Paragraphs

+

The base pragraph has an ideal ratio of font size and baseline. This text is easy to read in most cases.

+
+

16px/24px

+

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>...</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 .

+
+

20px/32px

+

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 class="large">...</p>
+
+
+

18px/28px

+

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 class="big">...</p>
+
+
+

14px/20px

+

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 class="small">...</p>
+
+
+

12px/20px

+

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 class="smaller">...</p>
+
+

Columns

+

Kube has three classes of .columns-2 through .columns-4 to create a multi-column layout. All multi-column layouts will be in a single column on mobile.

+
+

2 columns

+
+

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.

+
+ 
<div class="columns-2">
+    <p>...</p>
+</div>
+
+
+
+

3 columns

+
+

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.

+
+ 
<div class="columns-3">
+    <p>...</p>
+</div>
+
+
+
+

4 columns

+
+

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.

+
+ 
<div class="columns-4">
+    <p>...</p>
+</div>
+
+
+

Quotes

+

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.

+
+
+

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.

+
+ 
<blockquote>...</blockquote>
+
+

Use small tag for attribution. It's a prefer way for semantic code.

+
+
+

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.

— Bender +
+ 
<blockquote>
+    <p>Quotation content</p>
+    <small>Author attribution</small>
+</blockquote>
+
+
+

Pre-formatted

+

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.

+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+ 
<pre>...</pre>
+
+

You feel free to use code tag inside pre.

+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+ 
<pre><code>...</code></pre>
+
+

Inline Elements

+

Kube features various inline formatting elements. They all have their own semantic meaning, but you're free to use them just for their style.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExampleTagExampleTag
CSS<abbr>Cite<cite>
Code<code>Sample<samp>
Variable<var>Mark<mark>
Shortcut<kbd> + Deleted + <del>
Italic<i>Emphasis<em>
Highlighted<strong>Bold<b>
xsuperscript<sup>xsubscript<sub>
Small<small> + Inserted + <ins>
+

Modifiers

+

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.

+

Modifiers can be applied to any tags as inline elements, links or block tags.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExampleModifier
Muted.muted
+ Muted link + .muted
+ Black link + .black
Highlight.highlight
upper.upper
LOWER.lower
Italic.italic
Strong.strong
Not strong.normal
Monospace.monospace
Nowrap.nowrap
Remove margin bottom.end
Highlight.highlight
Small.small
Smaller.smaller
Large.large
Big.big
Text left.text-left
Text center.text-center
Text right.text-right
+

Figure

+

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 .video-container class.

+
Images
+
+ Image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit... +
+
+

HTML

+
<figure>
+    <img src="image.jpg">
+    <figcaption>...</figcaption>
+</figure>
+
+
Video
+
+
+ +
+
+ Journey Through The Ice | National Geographic +
+
+

HTML

+
<figure>
+    <div class="video-container">
+        <iframe>...</iframe>
+    </div>
+    <figcaption>...</figcaption>
+</figure>
+
+
Code
+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+
+ One of the implementations of inheritance +
+
+

HTML

+
<figure>
+    <pre>...</pre>
+    <figcaption>...</figcaption>
+</figure>
+
+

Lists

+

Although you most likely will not ever need to do so, you can still nest as many list levels as you like.

+
+
+
+
    +
  • list item 1
    • +
  • list item 2 +
      +
    • list item 2.1
      • +
    • list item 2.2 +
        +
      • list item 2.2.1
        • +
      • list item 2.2.2
        • +
      +
      • +
    • list item 2.3
      • +
    • list item 2.4
      • +
    +
    • +
  • list item 3
    • +
  • list item 4
    • +
+ 
<ul>
+    <li>...</li>
+</ul>
+
+
+
+
+
+
    +
  1. list item 1
    2. +
  2. list item 2 +
      +
    1. list item 2.1
      2. +
    2. list item 2.2 +
        +
      1. list item 2.2.1
        2. +
      2. list item 2.2.2
        3. +
      +
      3. +
    3. list item 2.3
      4. +
    4. list item 2.4
      5. +
    +
    3. +
  3. list item 3
    4. +
  4. list item 4
    5. +
+ 
<ol>
+    <li>...</li>
+</ol>
+
+
+
+
+
Unstyled List
+

To remove default list styling, use .unstyled.

+
+
    +
  • list item 1
    • +
  • list item 2 +
      +
    • list item 2.1
      • +
    • list item 2.2
      • +
    +
    • +
  • list item 3
    • +
  • list item 4
    • +
+ 
<ul class="unstyled">
+    <li>...</li>
+</ul>
+
+
+
Definition List
+

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.

+
+
+
Term 1
+
Description 1
+
Term 2
+
Description 2
+
Term 3
+
Description 3
+
+ 
<dl>
+    <dt>Term</dt>
+    <dd>Description</dd>
+</dl>
+
+
\ No newline at end of file diff --git a/docs/content/blog/welcome.md b/docs/content/blog/welcome.md new file mode 100644 index 00000000..9d8217f3 --- /dev/null +++ b/docs/content/blog/welcome.md @@ -0,0 +1,85 @@ ++++ +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 a marked part cheesecake donut. Jelly-o ` $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. + +## 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. + +
Ice cream
icing chupa chups cupcake jelly-o candy. Croissant jujubes topping tart soufflé pudding
Cake
Jelly beans pudding oat cake pie
Drops marzipan icing
Cake jelly-o chocolate cake sugar plum carrot cake lollipop
+ +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. + +
+

For example.

+
+ +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/docs/content/company.md b/docs/content/company.md new file mode 100644 index 00000000..bc2cdf2a --- /dev/null +++ b/docs/content/company.md @@ -0,0 +1,4 @@ ++++ +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/docs/content/docs/animation.md b/docs/content/docs/animation.md new file mode 100644 index 00000000..3ff71e4c --- /dev/null +++ b/docs/content/docs/animation.md @@ -0,0 +1,163 @@ ++++ +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' ++++ + +

Slide

+
+
+
+
+ slideUp +
+
+
+
+ slideDown +
+
+
Slide Up Slide Down + 
$('#element').animation('slideUp');
+$('#element').animation('slideDown');
+
+

Fade

+
+
+
+
+ fadeIn +
+
+
+
+ fadeOut +
+
+
Fade In Fade Out + 
$('#element').animation('fadeIn');
+$('#element').animation('fadeOut');
+
+

Flip

+
+
+
+
+ flipIn +
+
+
+
+ flipOut +
+
+
Flip In Flip Out + 
$('#element').animation('flipIn');
+$('#element').animation('flipOut');
+
+

Zoom

+
+
+
+
+ zoomIn +
+
+
+
+ zoomOut +
+
+
Zoom In Zoom Out + 
$('#element').animation('zoomIn');
+$('#element').animation('zoomOut');
+
+

Rotate

+
+
+
+
+ rotate +
+
+
Rotate + 
$('#element').animation('rotate');
+
+

Shake

+
+
+
+
+ shake +
+
+
Shake + 
$('#element').animation('shake');
+
+

Pulse

+
+
+
+
+ pulse +
+
+
Pulse + 
$('#element').animation('pulse');
+
+

Slide In

+
+
+
+
+ slideInRight +
+
+
+
+ slideInLeft +
+
+
+
+ slideInDown +
+
+
Slide In Right Slide In Left Slide In Down + 
$('#element').animation('slideInRight');
+$('#element').animation('slideInLeft');
+$('#element').animation('slideInDown');
+
+

Slide Out

+
+
+
+
+ slideOutRight +
+
+
+
+ slideOutLeft +
+
+
+
+ slideOutUp +
+
+
Slide Out Right Slide Out Left Slide Out Up + 
$('#element').animation('slideOutRight');
+$('#element').animation('slideOutLeft');
+$('#element').animation('slideOutUp');
+
+

Callback

+
$('#element').animation('fadeIn', function()
+{
+    // code ...
+});
\ No newline at end of file diff --git a/docs/content/docs/breadcrumbs.md b/docs/content/docs/breadcrumbs.md new file mode 100644 index 00000000..b195c9e8 --- /dev/null +++ b/docs/content/docs/breadcrumbs.md @@ -0,0 +1,99 @@ ++++ +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 ++++ + +

Base

+
+ + 
<nav class="breadcrumbs">
+    <ul>
+        <li><a href="">...</a></li>
+        <li><span>...</span></li>
+    </ul>
+</nav>
+
+
+

Centered

+
+ + 
<nav class="breadcrumbs push-center">
+    <ul>
+        <li><a href="">...</a></li>
+        <li class="active"><a href="">...</a></li>
+    </ul>
+</nav>
+
+
+

Custom Separator

+
+ + 
// css
+#breadcrumbs-custom-separator li:after {
+    content: '>';
+}
+
+// html
+<nav id="breadcrumbs-custom-separator" class="breadcrumbs">
+    <ul>
+        <li><a href="">...</a></li>
+        <li><span>...</span></li>
+    </ul>
+</nav>
+
+
\ No newline at end of file diff --git a/docs/content/docs/buttons.md b/docs/content/docs/buttons.md new file mode 100644 index 00000000..3027dc74 --- /dev/null +++ b/docs/content/docs/buttons.md @@ -0,0 +1,108 @@ ++++ +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 ++++ + +

Primary

+
+ Button + 
<button class="button">Button</button>
+<a href="#" class="button">Button</a>
+
+

Secondary

+
+ Button + 
<button class="button secondary">Button</button>
+<a href="#" class="button secondary">Button</a>
+
+

Outline

+

Outline class does exactly what it is supposed to do: styles a button with an outline with no fill color.

+
+ + 
<button class="button outline">Button</button>
+<button class="button secondary outline">Button</button>
+
+

Disabled

+

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.

+
+ Link +
+
<a href="#" class="button disabled" role="button">Link</a>
+<button class="button secondary" disabled>Button</button>
+

Small

+

Buttons come in all sizes and shapes.

+
+ Link +
+
<a href="#" class="button small" role="button">Link</a>
+<button class="button secondary small">Button</button>
+

Big

+
+ Link +
+
<a href="#" class="button big" role="button">Link</a>
+<button class="button secondary big">Button</button>
+

Large

+
+ Link +
+
<a href="#" class="button large" role="button">Link</a>
+<button class="button secondary large">Button</button>
+

Upper

+
+ Link Link +
+
<a href="#" class="button upper" role="button">Link</a>
+<button class="button secondary upper">Button</button>
+<a href="#" class="button upper outline" role="button">Link</a>
+<button class="button secondary upper outline">Button</button>
+

Round

+
+ Link Link +
+
<a href="#" class="button round" role="button">Link</a>
+<button class="button secondary round">Button</button>
+<a href="#" class="button round outline" role="button">Link</a>
+<button class="button secondary round outline">Button</button>
+

Inverted

+

For use on darker backgrounds, you can just introduce inverted class to have your button flip its color to the opposite one.

+
+ Link     + 
<a href="#" class="button inverted" role="button">Link</a>
+<button class="button inverted outline">Button</button>
+
+

Width

+
+

+

+ 
<button class="button w100">...</button>
+<button class="button secondary w50">...</button>
+
+

Icons

+
+ + 
<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>
+
+

Custom

+

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.

+
+ + 
// scss
+.button.red {
+    // $text-color, $back-color
+    @include button(#fff, #ff3366);
+}
+
+// html
+<button class="button red">Button</button>
+<button class="button red outline">Button</button>
+
\ No newline at end of file diff --git a/docs/content/docs/collapse.md b/docs/content/docs/collapse.md new file mode 100644 index 00000000..fdc4029e --- /dev/null +++ b/docs/content/docs/collapse.md @@ -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="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 ++++ + +

Base

+
+
+

Item 1

+
+

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.

+
+

Item 2

+
+

I look active on load.

+

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.

+
+

Item 3

+
+
Important Heading
+

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.

+

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.

+
+
+ +
<div id="my-collapse" data-component="collapse">
+
+    <h4><a href="#box-1" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-1">...</div>
+
+    <h4><a href="#box-2" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box" id="box-2">...</div>
+
+    <h4><a href="#box-3" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-3">...</div>
+
+</div>
+
+
+

Navigation Example

+

Here you can see a list of items forming a navigation menu, with a nested list which acts as a collapsable element

+
+ + 
<ul>
+    <li><a href="#">...</a></li>
+    <li data-component="collapse">
+        <a href="#toggle-box" class="collapse-toggle">
+            Toggle
+            <span class="caret down"></span>
+        </a>
+        <ul id="toggle-box" class="collapse-box">
+            <li><a href="#">...</a></li>
+        </ul>
+    </li>
+    <li><a href="#">...</a></li>
+</ul>
+
+
+

Settings

+

Settings are pretty straightforward: you can toggle, denote active element, turn animation on and off, and more.

+
toggle
+
    +
  • Type: boolean
    • +
  • Default: true
    • +
+
active
+
    +
  • Type: string or boolean
    • +
  • Default: false
    • +
+
toggleClass
+
    +
  • Type: string
    • +
  • Default: 'collapse-toggle'
    • +
+

Sets a class of a collapsable object.

+
boxClass
+
    +
  • Type: string
    • +
  • Default: 'collapse-box'
    • +
+

Sets a class for collapsable object's content

+
animation
+
    +
  • Type: boolean
    • +
  • Default: true
    • +
+

Turns animation on and off.

+

Callbacks

+
open
+
$('#my-collapse').on('open.collapse', function()
+{
+    // do something...
+});
+
+
opened
+
$('#my-collapse').on('opened.collapse', function()
+{
+    // do something...
+});
+
+
close
+
$('#my-collapse').on('close.collapse', function()
+{
+    // do something...
+});
+
+
closed
+
$('#my-collapse').on('closed.collapse', function()
+{
+    // do something...
+});
+
+

API

+

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.

+
+


+
+

Item 1

+
+

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.

+
+

Item 2

+
+

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.

+
+

Item 3

+
+

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.

+

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.

+
+
+ 
<button onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button>
+<button onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button>
+<button onclick="$('#my-collapse-api').collapse('openAll');">Open All</button>
+<button onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button>
+
+<div id="my-collapse-api" data-component="collapse">
+
+    <h4><a href="#box-1" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-1">...</div>
+
+    <h4><a href="#box-2" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-2">...</div>
+
+    <h4><a href="#box-3" class="collapse-toggle">...</a></h4>
+    <div class="collapse-box hide" id="box-3">...</div>
+
+</div>
+
+
+
open
+
$('#my-collapse').collapse('open');
+
+
close
+
$('#my-collapse').collapse('close');
+
+
openAll
+
$('#my-collapse').collapse('openAll');
+
+
closeAll
+
$('#my-collapse').collapse('closeAll');
+
\ No newline at end of file diff --git a/docs/content/docs/colors.md b/docs/content/docs/colors.md new file mode 100644 index 00000000..d59e0fc9 --- /dev/null +++ b/docs/content/docs/colors.md @@ -0,0 +1,141 @@ ++++ +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 ++++ + +

Text

+

Contrasting black color for headings and less intense dark gray for the text helps to improve readability.

+
+
+
+ +
Headings
+

$color-headings

+
+
+ +
Text
+

$color-text

+
+
+
+ +

Classic blue links and soft red for the hover state makes links visible and predictable.

+
+
+
+ +
Link
+

$color-link

+
+
+ +
Hover
+

$color-link-hover

+
+
+
+

Buttons

+

Blue color for primary buttons for greater consistency with links. Black color for secondary buttons allows you build a variety of UI.

+
+
+
+ +
Primary
+

$color-button-primary

+
+
+ +
Secondary
+

$color-button-secondary

+
+
+
+

States

+

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.

+
+
+
+ +
Error
+

$color-error

+
+
+ +
Focus
+

$color-focus

+
+
+ +
Success
+

$color-success

+
+
+ +
Warning
+

$color-warning

+
+
+
+

Extra

+

Special color to highlight areas of interaction with the interface. And the white color for all cases.

+
+
+
+ +
Highlight
+

$color-highlight

+
+
+ +
Inverted
+

$color-inverted

+
+
+
+

Grayscale

+

Harmonious and well-thought-out scheme of gray for a broad range of tasks in the designing of the interface from controls to backgrounds.

+
+
+
+ +
Black
+

$color-black

+
+
+ +
Darkgray
+

$color-darkgray

+
+
+ +
Midgray
+

$color-midgray

+
+
+ +
Gray
+

$color-gray

+
+
+ +
Lightgray
+

$color-lightgray

+
+
+ +
Silver
+

$color-silver

+
+
+ +
Aluminum
+

$color-aluminum

+
+
+
\ No newline at end of file diff --git a/docs/content/docs/custom-plugins.md b/docs/content/docs/custom-plugins.md new file mode 100644 index 00000000..49e0b671 --- /dev/null +++ b/docs/content/docs/custom-plugins.md @@ -0,0 +1,96 @@ ++++ +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." ++++ + +

Plugin Template

+

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.

+
(function(Kube)
+{
+    Kube.Myplugin = function(element, options)
+    {
+        this.namespace = 'myplugin';
+
+        // default settings
+        this.defaults = {
+            mysetting: true
+        };
+
+        // Parent Constructor
+        Kube.apply(this, arguments);
+
+        // Initialization
+        this.start();
+    };
+
+    // Functionality
+    Kube.Myplugin.prototype = {
+        start: function()
+        {
+            // plugin element
+            console.log(this.$element);
+
+            // call options
+            console.log(this.opts.mysetting);
+
+            // call methods
+            this.method();
+        },
+        method: function()
+        {
+            // do something...
+
+            // callback
+            this.callback('show');
+
+            // callback with arguments
+            this.callback('show', value1, value2);
+        }
+    };
+
+    // Inheritance
+    Kube.Myplugin.inherits(Kube);
+
+    // Plugin
+    Kube.Plugin.create('Myplugin');
+    Kube.Plugin.autoload('Myplugin');
+
+}(Kube));
+
+

Call

+

Calling a plugin is very easy, just add the data-component with the name of your plugin and it will start automatic.

+
<div data-component="myplugin"></div>
+

Or call manually

+
<div id="my-element"></div>
+
+<script>
+    $('#my-element').myplugin();
+</script>
+
+

Callbacks

+

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.

+
<div id="myplugin" data-component="myplugin"></div>
+
+<script>
+$('#myplugin').on('show.myplugin', function()
+{
+    // do something...
+});
+</script>
+
+

All plugin methods and variables are available within the plugin via this:

+
<script>
+$('#myplugin').on('show.myplugin', function()
+{
+    // plugin element
+    console.log(this.$element);
+
+    // call plugin method
+    this.method();
+});
+</script>
+
\ No newline at end of file diff --git a/docs/content/docs/dropdown.md b/docs/content/docs/dropdown.md new file mode 100644 index 00000000..2c2eaf5e --- /dev/null +++ b/docs/content/docs/dropdown.md @@ -0,0 +1,172 @@ ++++ +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 data-component='dropdown' and a div with some kind of HTML content. Clicking outside of the dropdown or hitting Esc closes dropdown" +toc = true ++++ + +

Demo

+
+

Show Dropdown

+ + 
// Toggle
+<a href="#" data-component="dropdown" data-target="#my-dropdown">Show <span class="caret down"></span></a>
+
+// Dropdown
+<div class="dropdown hide" id="my-dropdown">
+    <a href="" class="close show-sm"></a>
+    <ul>
+        <li><a href="">...</a></li>
+    </ul>
+</div>
+
+
+
+

+ + 
// Toggle
+<button data-component="dropdown" data-target="#my-dropdown">Show Dropdown <span class="caret down"></span></button>
+
+// Dropdown
+<div class="dropdown hide" id="my-dropdown">
+
+    <p>...</p>
+    <a href="#" data-action="dropdown-close">Close</a>
+
+</div>
+
+
+

Navigation Fixed

+

Scroll down a bit to make a fixed navigation bar appear at the top of the page, and then try out "Account" dropdown.

+
+ + + 
<div id="navbar-demo" data-component="sticky">
+    <nav>
+        <ul>
+            <li><a href="">...</a></li>
+            <li>
+                <a href="" data-component="dropdown" data-target="#dropdown-fixed">
+                    Account
+                    <span class="caret down"></span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
+
+// Dropdown
+<div class="dropdown hide" id="dropdown-fixed">
+    <ul>
+        <li><a href="">...</a></li>
+    </ul>
+</div>
+
+
+

Settings

+
target
+
    +
  • Type: string
    • +
  • Default: null
    • +
+

Sets an ID of a target dropdown layer.

+
height
+
    +
  • Type: int
    • +
  • Default: false
    • +
+

Sets dropdown height.

+
width
+
    +
  • Type: int
    • +
  • Default: false
    • +
+

Sets dropdown width.

+
animation
+
    +
  • Type: boolean
    • +
  • Default: true
    • +
+

Turns opening and closing animation on and off.

+

Callbacks

+
open
+
$('#my-dropdown').on('open.dropdown', function()
+{
+    // do something...
+});
+
opened
+
$('#my-dropdown').on('opened.dropdown', function()
+{
+    // do something...
+});
+
close
+
$('#my-dropdown').on('close.dropdown', function()
+{
+    // do something...
+});
+
closed
+
$('#my-dropdown').on('closed.dropdown', function()
+{
+    // do something...
+});
\ No newline at end of file diff --git a/docs/content/docs/forms.md b/docs/content/docs/forms.md new file mode 100644 index 00000000..20557931 --- /dev/null +++ b/docs/content/docs/forms.md @@ -0,0 +1,800 @@ ++++ +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 custom plugins for extra interactivity. These forms are ideal building material for your awesome projects!' +toc = true ++++ + +

Base

+

This is the most basic form with all the basic inputs.

+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
<form method="post" action="" class="form">
+
+    <div class="form-item">
+        <label>Email</label>
+        <input type="email" name="email" class="w50">
+    </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">
+        <button>Log in</button>
+        <button class="button secondary outline">Cancel</button>
+    </div>
+
+</form>
+
+ +
+ +

Inputs

+

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.

+
+
+
+ +
+ This information helps us deliver orders on time. +
+
+
+ 
<form class="form">
+    <div class="form-item">
+        <label>City</label>
+        <input type="text">
+        <div class="desc">...</div>
+    </div>
+</form>
+
+
+

Here are two text input fields, one with a placeholder and another one disabled, both set to be 6 grid columns wide.

+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ 
<form class="form">
+    <div class="row gutters">
+        <div class="col col-6">
+            <div class="form-item">
+                <input type="text" placeholder="Email">
+            </div>
+        </div>
+        <div class="col col-6">
+            <div class="form-item">
+                <input type="text" disabled="true" value="Disabled">
+            </div>
+        </div>
+    </div>
+</form>
+
+
+

Here's how you denote required fields with req class, and add descriptions to labels using span with class desc.

+
+
+
+
+
+ +
+
+
+
+ +
+ This information helps us deliver orders on time. +
+
+
+
+
+ 
<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">...</span></label>
+                <input type="text">
+                <div class="desc">...</div>
+            </div>
+        </div>
+    </div>
+</form>
+
+
+ +
+
+
+ +
+
+ 
<form class="form">
+    <div class="form-item">
+        <input type="text" class="search">
+    </div>
+</form>
+
+
+

Checkboxes & Radio

+

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 form-checkboxes class to the container (works for both checkboxes and radio buttons)

+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item form-checkboxes">
+        <label class="checkbox"><input type="checkbox"> Check 1</label>
+        ...
+    </div>
+</form>
+
+
+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label class="checkbox"><input type="checkbox"> Check 1</label>
+        ...
+    </div>
+</form>
+
+
+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item form-checkboxes">
+        <label class="checkbox"><input type="radio"> Check 1</label>
+        ...
+    </div>
+</form>
+
+
+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label class="checkbox"><input type="radio"> Check 1</label>
+        ...
+    </div>
+</form>
+
+
+

Fieldset

+

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.

+
+ +
+ Login data +
+ +
+
+ +
+
+ 
<fieldset>
+    <legend>Login data</legend>
+    <div class="form-item">
+        <label>Email</label>
+        <input type="email" name="user-email" class="w50">
+    </div>
+    <div class="form-item">
+        <label>Password</label>
+        <input type="password" name="user-password" class="w50">
+    </div>
+</fieldset>
+
+
+ About +
+ +
+
+ +
+
+
+
<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>
+
+

Small

+

Simple class .small makes your selects and fields, well, smaller.

+
+
+
+ +
+
+ +
+
+ 
<form class="form">
+    <div class="form-item">
+        <input type="text" class="small" placeholder="Title">
+    </div>
+    <div class="form-item">
+        <select class="small">
+            <option>...</option>
+        </select>
+    </div>
+</form>
+
+
+

Big

+

Simple class .big makes your selects and fields, well, bigger.

+
+
+
+ +
+
+ +
+
+ 
<form class="form">
+    <div class="form-item">
+        <input type="text" class="big" placeholder="Title">
+    </div>
+    <div class="form-item">
+        <select class="big">
+            <option>...</option>
+        </select>
+    </div>
+</form>
+
+
+

Width

+

Following framework-wide rules, it is very easy to manipulate form fields sizes. Just use w50 class to make a field 50% wide or w25 to a 25% wide.

+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <input type="text" class="w25">
+    </div>
+    <div class="form-item">
+        <input type="text" class="w50">
+    </div>
+    <div class="form-item">
+        <input type="text" class="w75">
+    </div>
+    <div class="form-item">
+        <input type="text" value="100% by default">
+    </div>
+</form>
+
+
+

States

+

By default, Kube features two different states: success and failure.

+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Your height <span class="success">...</span></label>
+        <input type="text" class="success">
+    </div>
+</form>
+
+
+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Enter your weight <span class="error">...</span></label>
+        <input type="text" class="error">
+    </div>
+</form>
+
+
+

Required

+

Along with making a field actually required, you can add a visual clue for the users using a span with req class.

+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Email <span class="req">*</span></label>
+        <input type="email" name="user-email">
+    </div>
+</form>
+
+
+

Descriptions

+

Descriptions are simple: as long as form's element has desc class, Kube will treat it as a description.

+
+
+ +
+ +
+
+ +
+ Please enter your email. +
+
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Name <span class="desc">...</span></label>
+        <input type="text" name="user-name">
+    </div>
+    <div class="form-item">
+        <label>Email</label>
+        <input type="email" name="user-email">
+        <div class="desc">...</div>
+    </div>
+</form>
+
+
+

Disabled

+

Not only text inputs can be disabled, but checkboxes and radio buttons as well. Just add disabled attribute or .disabled class to the input.

+
+

+

+

+

+

+

+ 
<input type="text" value="" disabled>
+<input type="checkbox" class="disabled">
+<input type="radio" disabled>
+<textarea disabled></textarea>
+<select disabled>
+    <option>...</option>
+</select>
+
+
+

Append & Prepend

+

You can prepend or append certain elements within your input fields, such as currency characters.

+
+
+ +
+ +
+ $ +
+
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>How much is it?</label>
+        <div class="prepend w50">
+            <span>$</span>
+            <input type="text">
+        </div>
+    </div>
+</form>
+
+
+
+
+ +
+ +
+ $ +
+
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>It is much how?</label>
+        <div class="append">
+            <input type="text"><span>$</span>
+        </div>
+    </div>
+</form>
+
+
+

Button Append

+

Appending works for buttons as well. Here you can see a button that has been appended and included withing a text input field.

+
+
+ +
+ +
+ +
+
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Label</label>
+        <div class="append w50">
+            <input type="text" name="search" placeholder="Search">
+            <button class="button outline">Go</button>
+        </div>
+    </div>
+</form>
+
+
+

More Examples

+

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.

+
+
+ +
+ +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Select multiple</label>
+        <select class="w50" multiple="multiple" size="10">
+            <optgroup label="Group 1">
+                <option value="">...</option>
+            </optgroup>
+        </select>
+    </div>
+</form>
+
+
+
+
+ +
+
+
+ +
+ Month +
+
+
+
+
+ +
+ Day +
+
+
+
+
+ +
+ Year +
+
+
+
+
+ 
<form method="post" action="" class="form">
+    <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>
+
+
+
+
+ +
+ ( )  ext: +
+ Needed if there are questions about your order +
+
+
+ 
<form method="post" action="" class="form form-inline">
+    <div class="form-item">
+        <label>Phone number</label>
+        ( <input type="text" name="phone-prefix" size="3" class="small"> )
+        <input type="text" name="phone-number" class="small w50">
+        &nbsp;ext: <input type="text" name="phone-ext" size="3" class="small">
+        <div class="desc">...</div>
+    </div>
+</form>
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ + +
+
+ 
<form method="post" class="form">
+    <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="">...</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    <div class="form-item">
+        <label>Message</label>
+        <textarea rows="6"></textarea>
+    </div>
+</form>
+
+
+
+
+ +
+
+
+ +
+ Where are you from? +
+
+
+
+
+ +
+
+
+
+ 
<form method="post" action="" class="form">
+    <div class="row gutters">
+        <div class="col col-6">
+            <div class="form-item">
+                <label>Country</label>
+                <select>
+                    <option>---</option>
+                </select>
+                <div class="desc">...</div>
+            </div>
+        </div>
+        <div class="col col-6">
+            <div class="form-item">
+                <label><br></label>
+                <button>Submit</button>
+            </div>
+        </div>
+    </div>
+</form>
+
+
+
+
+ +
+ + +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Text</label>
+        <textarea rows="4"></textarea>
+    </div>
+</form>
+
+
+
+
+ +
+ + +
+
+ 
<form method="post" action="" class="form">
+    <div class="form-item">
+        <label>Text</label>
+        <textarea rows="4" class="w50"></textarea>
+    </div>
+</form>
+
+
\ No newline at end of file diff --git a/docs/content/docs/grid.md b/docs/content/docs/grid.md new file mode 100644 index 00000000..f7506573 --- /dev/null +++ b/docs/content/docs/grid.md @@ -0,0 +1,588 @@ ++++ +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 ++++ + +
+

Columns

+

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.

+
+
+
+ 1 +
+
+ 11 +
+
+
+
+ 2 +
+
+ 10 +
+
+
+
+ 3 +
+
+ 9 +
+
+
+
+ 4 +
+
+ 8 +
+
+
+
+ 5 +
+
+ 7 +
+
+
+
+ 6 +
+
+ 6 +
+
+
+
+ 7 +
+
+ 5 +
+
+
+
+ 8 +
+
+ 4 +
+
+
+
+ 9 +
+
+ 3 +
+
+
+
+ 10 +
+
+ 2 +
+
+
+
+ 11 +
+
+ 1 +
+
+
+
+ 12 +
+
+ 
<div class="row">
+    <div class="col col-4">...</div>
+    <div class="col col-8">...</div>
+</div>
+
+
+

Gutters

+
+
+
+ 3 +
+
+ 9 +
+
+ 
<div class="row gutters">
+    <div class="col col-3">...</div>
+    <div class="col col-9">...</div>
+</div>
+
+
+

Auto Width

+
+
+
+ auto +
+
+ auto +
+
+ auto +
+
+ 
<div class="row auto">
+    <div class="col">...</div>
+    <div class="col">...</div>
+    <div class="col">...</div>
+</div>
+
+
+
Auto + Gutters
+
+
+
+ auto +
+
+ auto +
+
+ auto +
+
+ auto +
+
+ 
<div class="row gutters auto">
+    <div class="col">...</div>
+    <div class="col">...</div>
+    <div class="col">...</div>
+    <div class="col">...</div>
+</div>
+
+
+

Bricks

+
+
+
+ 50% +
+
+ 50% +
+
+ 50% +
+
+ 50% +
+
+ 
<div class="row">
+    <div class="col col-6">...</div>
+    <div class="col col-6">...</div>
+    <div class="col col-6">...</div>
+    <div class="col col-6">...</div>
+</div>
+
+
+
Bricks + Gutters
+
+
+
+ 33% +
+
+ 33% +
+
+ 33% +
+
+ 33% +
+
+ 33% +
+
+ 33% +
+
+ 
<div class="row gutters">
+    <div class="col col-4">...</div>
+    <div class="col col-4">...</div>
+    <div class="col col-4">...</div>
+    <div class="col col-4">...</div>
+</div>
+
+
+

Offset

+

Offsetting columns is very simple in Kube. Just use column's class as usual, for example, col col-2 and then add the offset value offset-4. This will offset this column and all following columns by 4.

+
+
+
+ 2 +
+
+ 6 +
+
+ 
<div class="row">
+    <div class="col col-2">...</div>
+    <div class="col col-6 offset-4">...</div>
+</div>
+
+
+

Nested

+

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.

+
+
+
+ 6 +
+
+
+
+ 4 +
+
+ 4 +
+
+ 4 +
+
+
+
+ 
<div class="row">
+    <div class="col col-6">...</div>
+    <div class="col col-6">
+        <div class="row">
+            <div class="col col-4">...</div>
+            <div class="col col-4">...</div>
+            <div class="col col-4">...</div>
+        </div>
+    </div>
+</div>
+
+
+

Equal Height Columns

+

Columns are equal height by default in Kube

+
+
+
+ 1 +
+
+ 1
+ 2
+ 3 +
+
+ 
<div class="row">
+    <div class="col col-6">
+        ...
+    </div>
+    <div class="col col-6">
+        ...
+        ...
+        ...
+    </div>
+</div>
+
+
+

Reordering

+
First
+
+
+
+ 4 +
+
+ 8 +
+
+ 
<div class="row">
+    <div class="col col-4">...</div>
+    <div class="col col-8 first">...</div>
+</div>
+
+
+
Last
+
+
+
+ 3 +
+
+ 9 +
+
+ 
<div class="row">
+    <div class="col col-3 last">...</div>
+    <div class="col col-9">...</div>
+</div>
+
+
+

Around

+

When you want your columns to be surrounded by an even margins on both sides, just use .around class.

+
+
+
+ 3 +
+
+ 3 +
+
+ 3 +
+
+ 
<div class="row around">
+    <div class="col col-3">...</div>
+    <div class="col col-3">...</div>
+    <div class="col col-3">...</div>
+</div>
+
+
+

Between

+

Sometime you just need space between columns, and not around them. Well, there's a class for that: .between

+
+
+
+ 3 +
+
+ 3 +
+
+ 3 +
+
+ 
<div class="row between">
+    <div class="col col-3">...</div>
+    <div class="col col-3">...</div>
+    <div class="col col-3">...</div>
+</div>
+
+
+

Alignment

+
Align Center
+
+
+
+ 6 +
+
+ 
<div class="row align-center">
+    <div class="col col-6">...</div>
+</div>
+
+
+
Align Right
+
+
+
+ 3 +
+
+ 3 +
+
+ 
<div class="row align-right">
+    <div class="col col-3">...</div>
+    <div class="col col-3">...</div>
+</div>
+
+
+
Align Middle
+
+
+
+ 4 +
+
+ 4 +
+
+ 4 +
+
+ 
<div class="row align-middle">
+    <div class="col col-4">...</div>
+    <div class="col col-4">...</div>
+    <div class="col col-4">...</div>
+</div>
+
+
+

Push

+
Push Center
+
+
+
+ .push-center +
+
+ 
<div class="row">
+    <div class="col col-4 push-center">...</div>
+</div>
+
+
+
Push Right
+
+
+
+ ... +
+
+ .push-right +
+
+ 
<div class="row">
+    <div class="col col-6">...</div>
+    <div class="col col-4 push-right">...</div>
+</div>
+
+
+
Push Middle
+
+
+
+ .push-middle +
+
+ 
<div class="row">
+    <div class="col col-8 push-middle">...</div>
+</div>
+
+
+
Push Mixed
+
+
+
+ .push-middle.push-center +
+
+ 
<div class="row">
+    <div class="col col-8 push-middle push-center">...</div>
+</div>
+
+
+
Push Bottom
+
+
+
+ .push-bottom +
+
+ 
<div class="row">
+    <div class="col col-8 push-bottom">...</div>
+</div>
+
+
+

Fixed Width Column

+

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.

+
+
+
+ sidebar +
+
+ content +
+
+ 
<!-- scss -->
+#container {
+    @include grid-row;
+}
+#sidebar {
+    @include flex-item-width(300px);
+}
+#content {
+    @include flex-item-auto;
+}
+
+<!-- html -->
+<div id="container">
+    <div id="sidebar">Sidebar</div>
+    <div id="content">Content</div>
+</div>
+
+
+
+

Media Grid

+

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.

+
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+ 6 +
+
+ 7 +
+
+ 8 +
+
+ 9 +
+
+ 10 +
+
+ 
<!-- scss -->
+#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;
+    }
+}
+
+<!-- html -->
+<div id="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>
+
+
+
diff --git a/docs/content/docs/labels.md b/docs/content/docs/labels.md new file mode 100644 index 00000000..2069ff69 --- /dev/null +++ b/docs/content/docs/labels.md @@ -0,0 +1,51 @@ ++++ +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 ++++ + +

Base

+
+ Default   Success   Error   Warning   Focus   Black   Inverted +
+

Outline

+
+ Default   Success   Error   Warning   Focus   Black   Inverted +
+

Upper

+
+ Default   Success   Error   Warning   Focus   Black   Inverted +
+

Tag

+
+ Default   Success   Error   Warning   Focus   Black   Inverted +
+

Badges

+

Labels are ideal for use as badges with badge class.

+
+ 1 2 3 4 5 6 7 +
+

Outline Badges

+
+ 1 2 3 4 5 6 7 +
+

Custom

+

You can use mixins to customize your labels and badges.

+
+ Label   1   Tag + 
<!-- scss -->
+.label.custom {
+    // $text-color, $back-color
+    @include label(#fff, #ea48a7);
+}
+
+<!-- html -->
+<span class="label custom">Label</span>
+<span class="label badge custom">1</span>
+<span class="label tag custom">Tag</span>
+
+
\ No newline at end of file diff --git a/docs/content/docs/messages.md b/docs/content/docs/messages.md new file mode 100644 index 00000000..11bc2ec5 --- /dev/null +++ b/docs/content/docs/messages.md @@ -0,0 +1,159 @@ ++++ +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 ++++ + +

Usage

+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message error" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message success" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+
Warning!
You have 2 modules waiting to installation. Install +
+ 
<div class="message warning" data-component="message">
+    <h5>...</h5>
+    ...
+    <span class="close small"></span>
+</div>
+
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message focus" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message black" data-component="message"> ...  <span class="close small"></span></div>
+
+
+
+ You have 2 modules waiting to installation. Install +
+ 
<div class="message inverted" data-component="message"> ...  <span class="close small"></span></div>
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault
closeSelectorstring.close
closeEventstringclick
animationOpenstringfadeIn
animationClosestringfadeOut
+

Set an option

+

Via data attribute:

+
<div class="message" data-component="message" data-close-selector=".my-custom-close">
+    ... <span class="my-custom-close small"></span>
+</div>
+
+

Via Javascript:

+
$('#my-message').message({
+    closeSelector: '.my-custom-close'
+});
+
+

Methods

+

+
+ You have 2 modules waiting to installation. Install +
+ + + + + + + + + + + + + + + + + +
MethodDescription
closeManually closes a message.
openOpens a message if it has been closed.
+

Example

+
$('#my-message').message('close');
+

Callbacks

+ + + + + + + + + + + + + + + + + + + + + + + + + +
CallbackDescription
openThis event fires immediately when the open instance method is called.
openedThis event is fired when the message has been opened, will wait for CSS animation to complete.
closeThis event fires immediately when the close instance method is called.
closedThis event is fired when the message has been closed, will wait for CSS animation to complete.
+

Example

+
$('#my-message').on('closed.message', function()
+{
+    // do something
+})
+
diff --git a/docs/content/docs/mixins.md b/docs/content/docs/mixins.md new file mode 100644 index 00000000..70a3b932 --- /dev/null +++ b/docs/content/docs/mixins.md @@ -0,0 +1,268 @@ ++++ +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 ++++ + +

Get Started

+

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 kube.scss from Kube package: this file contains variables, mixins and everything you need to simplify daily routine tasks.

+

For example, import kube.scss into your master.scss styles file, which you will later compile into master.css

+
// master.scss
+@import "dist/scss/kube.scss";
+
+

Now all Kube's variables and mixins are readily available in master.scss, and you can use them whenever needed.

+
// master.scss
+@import "dist/scss/kube.scss";
+
+// use mixins
+#my-layout {
+    @include flex;
+}
+
+// use variables
+#my-layout {
+    padding: $base-line;
+}
+
+

Fonts

+

Generates a font-family declarations for text, headings, buttons or inputs.

+
// import Kube
+@import "dist/scss/kube.scss";
+
+// use mixins
+@include text-font("Lato, 'Helvetica Neue', sans-serif");
+@include headings-font("Lato, 'Helvetica Neue', sans-serif");
+@include buttons-font("Lato, 'Helvetica Neue', sans-serif");
+@include inputs-font("Lato, 'Helvetica Neue', sans-serif");
+
+

CSS Output

+
// Text
+body {
+    font-family: Lato, 'Helvetica Neue', sans-serif;
+}
+
+// Headings
+h1.title, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    font-family: Lato, 'Helvetica Neue', sans-serif;
+}
+
+// Buttons
+button, .button {
+    font-family: Lato, 'Helvetica Neue', sans-serif;
+}
+
+// Inputs
+input, textarea, select {
+    font-family: Lato, 'Helvetica Neue', sans-serif;
+}
+
+

Breakpoints

+

Breakpoint for small screens (max-width 768px by default).

+
@include breakpoint(sm) {
+    .span {
+        display: none;
+    }
+}
+
+

Breakpoint for medium screens (min-width 1024px by default).

+
@include breakpoint(md) {
+    .span {
+        display: none;
+    }
+}
+
+

Breakpoint for large screens (min-width 1200px by default).

+
@include breakpoint(lg) {
+    .span {
+        display: none;
+    }
+}
+
+

Custom breakpoints:

+
// min-width 768px;
+@include breakpoint(768px) {}
+
+// min-width 768px and max-width 1024px;
+@include breakpoint(768px, 1024px) {}
+
+// max-width 1024px;
+@include breakpoint(0, 1024px) {}
+
+

Grid

+
Row
+

Generates a grid row.

+
.my-row {
+    @include grid-row;
+}
+
+

CSS Output

+
.my-row {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+
Media Grid
+

Generates a media grid. See live example.

+
.my-media-grid {
+    @include grid-media-columns(3);
+}
+
+

CSS Output

+
.my-media-grid {
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+
+    // column gap is specified
+    // in the grid settings (variables.scss) as $grid-gutter
+    -webkit-column-gap: 2%;
+    -moz-column-gap: 2%;
+    column-gap: 2%;
+}
+
+.my-media-grid > div {
+    display: inline-block;
+    width: 100%;
+}
+
+@media (max-width: 768px) {
+    .my-media-grid {
+        -webkit-column-count: 1;
+        -moz-column-count: 1;
+        column-count: 1;
+    }
+}
+
+

Flex

+
@include flex;
+@include flex-basis($basis);
+
+// items
+@include flex-items-wrap;
+@include flex-items-nowrap;
+@include flex-items-row
+@include flex-items-column;
+@include flex-items-left;
+@include flex-items-right;
+@include flex-items-center;
+@include flex-items-space-between;
+@include flex-items-space-around;
+@include flex-items-top;
+@include flex-items-middle;
+@include flex-items-bottom;
+
+// item
+@include flex-item-grow($grow);
+@include flex-item-auto;
+@include flex-item-one;
+@include flex-item-shrink($shrink);
+@include flex-item-width($width);
+
+

Gradients

+
Vertical
+
@include gradient-vertical($startColor, $endColor);
+
+
@include gradient-vertical-to-opacity($startColor, $opacity);
+
+
Horizontal
+
@include gradient-horizontal($startColor, $endColor);
+
+
@include gradient-horizontal-to-opacity($startColor, $opacity);
+
+
Radial
+
@include gradient-radial($innerColor, $outerColor);
+
+

Utils

+
Clearfix
+

Provides an easy way to include a clearfix for containing floats.

+
.layout {
+    @include clearfix;
+}
+
+

CSS Output

+
.layout:after {
+    content: '';
+    display: table;
+    clear: both;
+}
+
+
Transition
+

This mixin provides a shorthand syntax for transitions.

+
// by default 'all linear .2s'
+@include transition;
+
+// custom transitions
+@include transition(all .2s ease-in-out);
+@include transition(opacity 1s ease-in, width .2s ease-in);
+
+
Transform
+

Provides a shorthand syntax for transforms.

+
.span {
+    @include transform(rotate(90deg));
+}
+
+

CSS Output

+
.span {
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+
Blur
+

Provides a shorthand syntax for blur filter.

+
.span {
+    @include blur(5px);
+}
+
+

CSS Output

+
.span {
+    -webkit-filter: blur(5px);
+    -moz-filter: blur(5px);
+    -ms-filter: blur(5px);
+    filter: blur(5px);
+}
+
+
Retina Image
+

Retina image must have a suffix -2x, for example: image-2x.jpg

+
@include retina-background-image($image-url, $image-type, $image-width, $image-height);
+
+// $image-type - jpg, png, gif
+// $image-height - optional
+
+

Example:

+
.brand {
+    @include retina-background-image('../logo', 'png', 100px);
+}
+
+

CSS Output

+
.brand {
+    background-repeat: no-repeat;
+    background-image: url("../logo.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2),
+       only screen and (min--moz-device-pixel-ratio: 2),
+       only screen and (-o-min-device-pixel-ratio: 2 / 1),
+       only screen and (min-device-pixel-ratio: 2),
+       only screen and (min-resolution: 192dpi),
+       only screen and (min-resolution: 2dppx)
+       {
+            .brand {
+                background-image: url("../logo-2x.png");
+                background-size: 100px auto;
+            }
+       }
+
\ No newline at end of file diff --git a/docs/content/docs/modal.md b/docs/content/docs/modal.md new file mode 100644 index 00000000..1321b831 --- /dev/null +++ b/docs/content/docs/modal.md @@ -0,0 +1,189 @@ ++++ +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 div 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 ++++ + +

Calling

+

Here you add an actual call to the modal window. Clicking the "Open" button below will launch a modal with content of a #my-modal div. You can use buttons or links to open modals in Kube. Clicking anywhere outside of the modal or hitting ESC will close the window.

+
+

+ 
// Call
+<button data-component="modal" data-target="#my-modal">Open</button>
+
+// Markup
+<div id="my-modal" class="modal-box hide">
+    <div class="modal">
+        <span class="close"></span>
+        <div class="modal-header">Modal Header</div>
+        <div class="modal-body">...</div>
+    </div>
+</div>
+
+
+

Open from url

+
+

+ 
// Call
+<button data-component="modal" data-target="#ui-modal" data-url="modal.html">Open</button>
+
+// Markup
+<div id="ui-modal" class="modal-box hide">
+    <div class="modal">
+        <span class="close"></span>
+        <div class="modal-header">UI Modal</div>
+        <div class="modal-body">... content from modal.html ...</div>
+    </div>
+</div>
+
+// modal.html
+<p>...</p>
+<a href="#" data-action="modal-close">Close</a>
+
+
+

Direct open

+
+

+ 
// Call
+<button onclick="$.modalwindow({ target: '#ui-modal', url: 'modal.html' });">Open</button>
+
+
+ + +

Actions

+

Using modal-close action you now introducing a way to close you window, using a link or a button.

+
<div id="my-modal" class="modal-box hide">
+    <div class="modal">
+        <span class="close"></span>
+        <div class="modal-header">Modal Header</div>
+        <div class="modal-body">
+            ...
+            <a href="#" data-action="modal-close">Close</a>
+        </div>
+    </div>
+</div>
+
+

Settings

+
target
+
    +
  • Type: string
    • +
  • Default: null
    • +
+

Defines a content layer for the modal window

+
url
+
    +
  • Type: string
    • +
  • Default: false
    • +
+

Defines a URL in case your modal is opening via a URL.

+
header
+
    +
  • Type: string
    • +
  • Default: false
    • +
+

Sets the header for the modal window. Optional, and is false by default.

+
width
+
    +
  • Type: string
    • +
  • Default: '600px'
    • +
+
height
+
    +
  • Type: string
    • +
  • Default: false
    • +
+
maxHeight
+
    +
  • Type: string
    • +
  • Default: false
    • +
+

This setting defines the maximum height of the window. A scrollbar will be introduced in case there's more text than maxHeight can accommodate.

+
position
+
    +
  • Type: string
    • +
  • Default: 'center'
    • +
+

This is where your modal appears when opened.

+
overlay
+
    +
  • Type: boolean
    • +
  • Default: true
    • +
+

When this is set to false, 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.

+
animation
+
    +
  • Type: boolean
    • +
  • Default: true
    • +
+

Turns opening and closing animation on and off.

+

Callbacks

+
open
+
$('#my-modal').on('open.modal', function()
+{
+    // do something...
+});
+
+
opened
+
$('#my-modal').on('opened.modal', function()
+{
+    // do something...
+});
+
+
close
+
$('#my-modal').on('close.modal', function()
+{
+    // do something...
+});
+
+
closed
+
$('#my-modal').on('closed.modal', function()
+{
+    // do something...
+});
+
+

API

+

You can use these API methods to programmatically operate and modify modal windows.

+
close
+
$('#my-modal').modal('close');
+
+
setHeader
+
$('#my-modal').modal('setHeader', 'My Header');
+
+

This is another way to set a header for the modal on the fly without introducing a div with a modal-header class.

+
setContent
+
$('#my-modal').modal('setContent', 'My Content');
+
+

Content of the modal window can be set up on the fly as well. No need for a div with modal class.

+
setWidth
+
$('#my-modal').modal('setWidth', '800px');
+
\ No newline at end of file diff --git a/docs/content/docs/offcanvas.md b/docs/content/docs/offcanvas.md new file mode 100644 index 00000000..37ed858a --- /dev/null +++ b/docs/content/docs/offcanvas.md @@ -0,0 +1,140 @@ ++++ +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 ++++ + +

Demo

+

This feature is very easy to set up. It is based on data-component set to offcanvas, data-target set to the menu layer (#offcanvas-right in example below) and a feature-specific data-direction which is required for right menu to be set to right.

+

Open Left Open Right

+
+ +
+
+ + +
+
// Left
+<a href="#" data-component="offcanvas" data-target="#offcanvas-left">Open Left</a>
+
+<div id="offcanvas-left" class="hide">
+    <nav>
+        <ul>
+            <li>...</li>
+        </ul>
+    </nav>
+</div>
+
+// Right + Close
+<a href="#" data-component="offcanvas" data-target="#offcanvas-right" data-direction="right">Open Right</a>
+
+<div id="offcanvas-right" class="hide">
+    <a href="#" class="close"></a>
+    <nav>
+        <ul>
+            <li>...</li>
+        </ul>
+    </nav>
+</div>
+
+

Settings

+
target
+
    +
  • Type: string
    • +
  • Default: null
    • +
+

Sets ID selector of an element that will slide from the side.

+
push
+
    +
  • Type: boolean
    • +
  • Default: true
    • +
+
direction
+
    +
  • Type: string
    • +
  • Default: 'left'
    • +
+

The direction in which page will shift to give way for the sidebar menu. Default is left and is not required for left-side navigation, however, right value must be set for the right-side menu to work.

+
clickOutside
+
    +
  • Type: boolean
    • +
  • Default: true
    • +
+

Unless set to false, clicking anywhere on a page will make side menu to close.

+
width
+
    +
  • Type: string
    • +
  • Default: '250px'
    • +
+

Sidebar width in pixels.

+
animation
+
    +
  • Type: boolean
    • +
  • Default: true
    • +
+

Setting this to false turns off opening and closing animation.

+

Callbacks

+
open
+
$('#my-offcanvas').on('open.offcanvas', function()
+{
+    // do something...
+});
+
+
opened
+
$('#my-offcanvas').on('opened.offcanvas', function()
+{
+    // do something...
+});
+
+
close
+
$('#my-offcanvas').on('close.offcanvas', function()
+{
+    // do something...
+});
+
+
closed
+
$('#my-offcanvas').on('closed.offcanvas', function()
+{
+    // do something...
+});
+
\ No newline at end of file diff --git a/docs/content/docs/pagination.md b/docs/content/docs/pagination.md new file mode 100644 index 00000000..e5a3d051 --- /dev/null +++ b/docs/content/docs/pagination.md @@ -0,0 +1,196 @@ ++++ +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 ++++ + +

Base

+
+ + 
<nav class="pagination">
+    <ul>
+        <li class="prev"><a href="">&larr;</a></li>
+        <li>
+            <ul>
+                <li><span>...</span></li>
+                <li><a href="">...</a></li>
+            </ul>
+        </li>
+        <li class="next"><a href="">&rarr;</a></li>
+    </ul>
+</nav>
+
+
+

Centered

+
+ + 
<nav class="pagination align-center">
+    <ul>
+        <li class="prev"><a href="">&larr;</a></li>
+        <li>
+            <ul>
+                <li class="active"><a href="#">...</a></li>
+                <li><a href="">...</a></li>
+            </ul>
+        </li>
+        <li class="next"><a href="">&rarr;</a></li>
+    </ul>
+</nav>
+
+
+

Wide

+

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.

+
+ + 
<nav class="pagination align-center upper strong">
+    <ul>
+        <li class="prev"><a href="">&lt; Prev</a></li>
+        <li class="w100">
+            <ul>
+                <li><a href="">...</a></li>
+            </ul>
+        </li>
+        <li class="next"><a href="">Next &gt;</a></li>
+    </ul>
+</nav>
+
+
+

Pager

+
+ + 
<nav class="pagination pager">
+    <ul>
+        <li class="prev"><a href="">Previous</a></li>
+        <li class="next"><a href="">Next</a></li>
+    </ul>
+</nav>
+
+
+
+ + 
<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>
+
+
+

Elements within a single list item can be stacked to create a clean and intuitive pagination elements.

+
+ + 
<nav class="pagination pager flat">
+    <ul>
+        <li class="prev">
+            <span class="label tag">Prev</span>
+            <a href="">...</a>
+        </li>
+        <li class="next">
+            <span class="label tag">Next</span>
+            <a href="">...</a>
+        </li>
+    </ul>
+</nav>
+
+
\ No newline at end of file diff --git a/docs/content/docs/quick-start.md b/docs/content/docs/quick-start.md new file mode 100644 index 00000000..73cd8bfd --- /dev/null +++ b/docs/content/docs/quick-start.md @@ -0,0 +1,105 @@ ++++ +title = "Quick Start" +description = "Get up and running with the oscalkit CLI" +weight = 10 +draft = false +toc = true +bref = "Install oscalkit and become familiar with the basic functionality it provides" ++++ + +

Install

+ +oscalkit has been packaged for various OS's and as a Docker image. Navigate to the [Releases](https://github.com/opencontrol/oscalkit/releases) page to download the appropriate package for your intended platform. + +#### macOS (Homebrew) + + $ brew install oscalkit + +to update: + + $ brew update oscalkit + +#### Windows + +Download the .exe from the [Releases](https://github.com/opencontrol/oscalkit/releases) page. Move it to a location from which it can be easily executed. + +#### Linux + +Download the binary from the [Releases](https://github.com/opencontrol/oscalkit/releases) page. Move it to a location from which it can be easily executed. + +#### Verify installation + +Check that you've installed the binary by executing `oscalkit --version` from the command line. + +

Running

+ + diff --git a/docs/content/docs/sizing.md b/docs/content/docs/sizing.md new file mode 100644 index 00000000..be164b99 --- /dev/null +++ b/docs/content/docs/sizing.md @@ -0,0 +1,99 @@ ++++ +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 ++++ + +

Width

+
+
+ w5 +
+
+ w10 +
+
+ w15 +
+
+ w20 +
+
+ w25 +
+
+ w30 +
+
+ w35 +
+
+ w40 +
+
+ w45 +
+
+ w50 +
+
+ w55 +
+
+ w60 +
+
+ w65 +
+
+ w70 +
+
+ w75 +
+
+ w80 +
+
+ w85 +
+
+ w90 +
+
+ w95 +
+
+ w100 +
+ 
<div class="w5">w5</div>
+...
+<div class="w100">w100</div>
+
+
+
+

100% width on small devices.

+
+ w100-sm +
+ 
<div class="w50 w100-sm">...</div>
+
+
+

Auto Width

+
+ .w-auto
+ .w-auto-sm +
+

Max Width

+
+ .max-w5 — .max-w100
+ .max-w-auto-sm +
+

Min Width

+
+ .min-w5 — .min-w100 +
diff --git a/docs/content/docs/sticky.md b/docs/content/docs/sticky.md new file mode 100644 index 00000000..9779ed53 --- /dev/null +++ b/docs/content/docs/sticky.md @@ -0,0 +1,66 @@ ++++ +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 ++++ + +

Demo

+

Scroll down to fix the navigation.

+ +
<div data-component="sticky">...</div>
+
+

Settings

+
offset
+
    +
  • Type: int
    • +
  • Default: 0
    • +
+

Sets top offset in pixels when navigation is fixed.

+

Callbacks

+
fixed
+

Using this callback, you can act upon menu becoming fixed at the top of the page.

+
$('#my-nav').on('fixed.sticky', function()
+{
+    // do something...
+});
+
+
unfixed
+

Whenever fixed position of the menu is released, you can do something with this callback.

+
$('#my-nav').on('unfixed.sticky', function()
+{
+    // do something...
+});
+

+
+

Some scrollable material

+

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.

+

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.

+

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.

+

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.

\ No newline at end of file diff --git a/docs/content/docs/tables.md b/docs/content/docs/tables.md new file mode 100644 index 00000000..0bc6c26b --- /dev/null +++ b/docs/content/docs/tables.md @@ -0,0 +1,196 @@ ++++ +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." ++++ + +

Base

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
Total points223
+ 
<table>...</table>
+
+

Bordered

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
Total points223
+ 
<table class="bordered">...</table>
+
+

Striped

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
Total points223
+ 
<table class="striped">...</table>
+
+

Unstyled

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
Total points223
+ 
<table class="unstyled">...</table>
+
+

Mixed

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
Total points223
+ 
<table class="bordered striped">...</table>
+
+

Width

+
+ + + + + + + + + + + + + + + + + + + + +
First NameLast NamePoints
JillSmith50
EveJackson94
+ 
<table>
+<tr>
+    <td class="w40">...</td>
+    <td class="w40">...</td>
+    <td class="w20">...</td>
+</tr>
+</table>
+
\ No newline at end of file diff --git a/docs/content/docs/tabs.md b/docs/content/docs/tabs.md new file mode 100644 index 00000000..95b6e231 --- /dev/null +++ b/docs/content/docs/tabs.md @@ -0,0 +1,286 @@ ++++ +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 ++++ + +

Base

+

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).

+
+ +
+
Home
+

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.

+
+
+
Shop
+

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.

+

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.

+
+
+
Catalog
+

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.

+
+
+
T-Shirts
+

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.

+
+
+
Brand
+

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.

+
+ 
<nav class="tabs" data-component="tabs">
+    <ul>
+        <li class="active"><a href="#tab1">...</a></li>
+        <li><a href="#tab2">...</a></li>
+    </ul>
+</nav>
+
+<div id="tab1">...</div>
+<div id="tab2">...</div>
+
+
+

JavaScript behavior

+

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.

+
+


+ +
+
Home
+

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.

+
+
+
Shop
+

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.

+
+
+
Catalog
+

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.

+
+
+
T-Shirts
+

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.

+
+
+
Brand
+

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.

+
+ 
<button onclick="$('#tabs').tabs('destroy');">destroy</button>
+<button onclick="$('#tabs').tabs('prev');">prev</button>
+<button onclick="$('#tabs').tabs('next');">next</button>
+<button onclick="$('#tabs').tabs('open', 4);">open</button>
+<button onclick="$('#tabs').tabs('close', '#tab4');">close</button>
+<button onclick="$('#tabs').tabs('closeAll');">closeAll</button>
+
+<nav id="tabs" class="tabs" data-component="tabs">
+    <ul>
+        <li><a href="#tab1">Home</a></li>
+        <li class="active"><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">...</div>
+<div id="tab2">...</div>
+<div id="tab3">...</div>
+<div id="tab4">...</div>
+<div id="tab4">...</div>
+
+
+

Equals

+

Often it is important to create tabs that are equal in width regardless of content. data-equals is here to help you with this task.

+
+ +
+
Tab 1
+

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.

+
+
+
Tab 2
+

...

+
+ 
<nav class="tabs" data-component="tabs" data-equals="true">
+    <ul>
+        <li class="active"><a href="#tab1">...</a></li>
+        <li><a href="#tab12">...</a></li>
+    </ul>
+</nav>
+
+<div id="tab1">...</div>
+<div id="tab2">...</div>
+
+
+

Livetabs

+

Livetabs provide a very seamless and smooth experience by blending content and tabs in this kind of live manner. Set up data-live class, and make sure your tabs have this same class. It's that simple.

+
+ +
+
General
+

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.

+
+
+
Additional
+

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.

+
+ 
<nav id="livetabs" data-component="tabs" data-live=".tab-live"></nav>
+
+<div id="tab-general" data-title="General" class="tab-live">...</div>
+<div id="tab-additional" data-title="Additional" class="tab-live">...</div>
+
+
+

Active

+

To denote active tab, and to let users know where they are, use class active.

+
<nav class="tabs">
+    <ul>
+        <li><a href="">...</a></li>
+        <li class="active"><a href="">...</a></li>
+        <li><a href="">...</a></li>
+    </ul>
+</nav>
+
+

Settings

+
equals
+
    +
  • Type: boolean
    • +
  • Default: false
    • +
+

Making all tabs in a set equal width

+
active
+
    +
  • Type: string
    • +
  • Default: false
    • +
+

Responsible for denoting active tab.

+
live
+
    +
  • Type: string
    • +
  • Default: false
    • +
+

Responsible for live tabs (see Livetabs example)

+
hash
+
    +
  • Type: boolean
    • +
  • Default: true
    • +
+

This will add a hash and an ID to the URL.

+

Callbacks

+
init
+
$('#tabs').on('init.tabs', function()
+{
+    // do something...
+});
+
+
next
+
$('#tabs').on('next.tabs', function($item)
+{
+    // do something...
+});
+
+
prev
+
$('#tabs').on('prev.tabs', function($item)
+{
+    // do something...
+});
+
+
open
+
$('#tabs').on('open.tabs', function()
+{
+    // do something...
+});
+
+
opened
+
$('#tabs').on('opened.tabs', function()
+{
+    // do something...
+});
+
+
close
+
$('#tabs').on('close.tabs', function()
+{
+    // do something...
+});
+
+
closed
+
$('#tabs').on('closed.tabs', function()
+{
+    // do something...
+});
+
+

API

+
open
+
$('#tabs').tabs('open', 1);
+
+// or
+
+$('#tabs').tabs('open', '#tab1');
+
+
close
+
$('#tabs').tabs('close', 1);
+
+// or
+
+$('#tabs').tabs('close', '#tab1');
+
+
closeAll
+
$('#tabs').tabs('closeAll');
+
+
next
+
$('#tabs').tabs('next');
+
+
prev
+
$('#tabs').tabs('prev');
+
+
destroy
+
$('#tabs').tabs('destroy');
+
\ No newline at end of file diff --git a/docs/content/docs/toggleme.md b/docs/content/docs/toggleme.md new file mode 100644 index 00000000..a5bda7de --- /dev/null +++ b/docs/content/docs/toggleme.md @@ -0,0 +1,157 @@ ++++ +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 ++++ + +

Demo

+

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.

+
+
+ Toggle +
+ + 
<div class="show-sm">
+    <a href="#" data-component="toggleme" data-target="#navbar">Toggle</a>
+</div>
+
+<nav id="navbar" class="hide-sm">
+    <ul>
+        <li><a href="#">...</a></li>
+    </ul>
+</nav>
+
+
+

Usage

+
+

+
+

Ok, I'm opened. Now hide me

+

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.

+
+ 
<button data-component="toggleme" data-target="#togglebox-target" data-text="Hide Me">Show Me</button>
+
+<div id="togglebox-target" class="hide">
+    ...
+</div>
+
+
+

Multiple targets

+
+

+
+

Ok, I'm opened. Now hide me

+

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.

+
+
+

... and, I'm opened too. Now hide me

+

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.

+
+ 
<button data-component="toggleme" data-target="#togglebox-target-3, #togglebox-target-4" data-text="Hide Me">Show Me</button>
+
+<div id="togglebox-target-1" class="hide">
+    ...
+</div>
+
+<div id="togglebox-target-2" class="hide">
+    ...
+</div>
+
+
+

Settings

+
target
+
    +
  • Type: string
    • +
  • Default: null
    • +
  • Possible values: selector/selectors
    • +
+

Defines which layer or layers should be displayed upon clicking the "open" button.

+
<button data-component="toggleme" data-target="#togglebox-target">Show Me</button>
+
+<button data-component="toggleme" data-target="#togglebox-target-1, #togglebox-target-2">Show Me</button>
+
+<button data-component="toggleme" data-target=".togglebox-target">Show Me</button>
+
+
+
text
+
    +
  • Type: string
    • +
  • Default: ''
    • +
+

Defines what text should a button have after the layer has been opened. If not set, button text will not change.

+
<button data-component="toggleme" data-target="#togglebox-target" data-text="Hide Me">Show Me</button>
+
+
+

Callbacks

+
open
+
$('#togglebox-target').on('open.toggleme', function()
+{
+    // do something...
+});
+
+
opened
+
$('#togglebox-target').on('opened.toggleme', function()
+{
+    // do something...
+});
+
+
close
+
$('#togglebox-target').on('close.toggleme', function()
+{
+    // do something...
+});
+
+
closed
+
$('#togglebox-target').on('closed.toggleme', function()
+{
+    // do something...
+});
+
+

API

+
toggle
+
$('#togglebox-target').toggleme('toggle');
+
+
open
+
$('#togglebox-target').toggleme('open');
+
+
close
+
$('#togglebox-target').toggleme('close');
+
+
isOpened
+
var isOpened = $('#togglebox-target').toggleme('isOpened');
+
+
isClosed
+
var isClosed = $('#togglebox-target').toggleme('isClosed');
+
+
destroy
+
$('#togglebox-target').toggleme('destroy');
+
diff --git a/docs/content/docs/typography.md b/docs/content/docs/typography.md new file mode 100644 index 00000000..40f30ef5 --- /dev/null +++ b/docs/content/docs/typography.md @@ -0,0 +1,452 @@ ++++ +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 ++++ + +

Get Started

+

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.

+
+ 4px horizontal rhythm +
+ 4px grid for typography - the magic of the horizontal rhythm +
+
+

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.

+

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.

+

Additional balance and harmony, creates a classic typography scale, used in Kube.

+
+ the typography scale +
+ The typography scale helps to build a balance between the size of headings and text elements +
+
+

Headings

+

Use h1-h6 tags or .h1-.h6 classes to define headers and class="title" for the title, which is suitable for the most important inscriptions, for example, in the hero or covers.

+
+

Title

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ 
<h1 class="title">...</h1>
+<h1>...</h1>
+...
+<h6>...</h6>
+
+

Paragraphs

+

The base pragraph has an ideal ratio of font size and baseline. This text is easy to read in most cases.

+
+

16px/24px

+

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>...</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 .

+
+

20px/32px

+

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 class="large">...</p>
+
+
+

18px/28px

+

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 class="big">...</p>
+
+
+

14px/20px

+

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 class="small">...</p>
+
+
+

12px/20px

+

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 class="smaller">...</p>
+
+

Columns

+

Kube has three classes of .columns-2 through .columns-4 to create a multi-column layout. All multi-column layouts will be in a single column on mobile.

+
+

2 columns

+
+

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.

+
+ 
<div class="columns-2">
+    <p>...</p>
+</div>
+
+
+
+

3 columns

+
+

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.

+
+ 
<div class="columns-3">
+    <p>...</p>
+</div>
+
+
+
+

4 columns

+
+

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.

+
+ 
<div class="columns-4">
+    <p>...</p>
+</div>
+
+
+

Quotes

+

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.

+
+
+

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.

+
+ 
<blockquote>...</blockquote>
+
+

Use small tag for attribution. It's a prefer way for semantic code.

+
+
+

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.

— Bender +
+ 
<blockquote>
+    <p>Quotation content</p>
+    <small>Author attribution</small>
+</blockquote>
+
+
+

Pre-formatted

+

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.

+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+ 
<pre>...</pre>
+
+

You feel free to use code tag inside pre.

+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+ 
<pre><code>...</code></pre>
+
+

Inline Elements

+

Kube features various inline formatting elements. They all have their own semantic meaning, but you're free to use them just for their style.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExampleTagExampleTag
CSS<abbr>Cite<cite>
Code<code>Sample<samp>
Variable<var>Mark<mark>
Shortcut<kbd> + Deleted + <del>
Italic<i>Emphasis<em>
Highlighted<strong>Bold<b>
xsuperscript<sup>xsubscript<sub>
Small<small> + Inserted + <ins>
+

Modifiers

+

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.

+

Modifiers can be applied to any tags as inline elements, links or block tags.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExampleModifier
Muted.muted
+ Muted link + .muted
+ Black link + .black
Highlight.highlight
upper.upper
LOWER.lower
Italic.italic
Strong.strong
Not strong.normal
Monospace.monospace
Nowrap.nowrap
Remove margin bottom.end
Highlight.highlight
Small.small
Smaller.smaller
Large.large
Big.big
Text left.text-left
Text center.text-center
Text right.text-right
+

Figure

+

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 .video-container class.

+
Images
+
+ Image +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit... +
+
+

HTML

+
<figure>
+    <img src="image.jpg">
+    <figcaption>...</figcaption>
+</figure>
+
+
Video
+
+
+ +
+
+ Journey Through The Ice | National Geographic +
+
+

HTML

+
<figure>
+    <div class="video-container">
+        <iframe>...</iframe>
+    </div>
+    <figcaption>...</figcaption>
+</figure>
+
+
Code
+
+ 
Function.prototype.inherits = function(parent)
+{
+    for (var key in parent.prototype)
+    {
+        this.prototype[key] = parent.prototype[key];
+    }
+};
+
+
+ One of the implementations of inheritance +
+
+

HTML

+
<figure>
+    <pre>...</pre>
+    <figcaption>...</figcaption>
+</figure>
+
+

Lists

+

Although you most likely will not ever need to do so, you can still nest as many list levels as you like.

+
+
+
+
    +
  • list item 1
    • +
  • list item 2 +
      +
    • list item 2.1
      • +
    • list item 2.2 +
        +
      • list item 2.2.1
        • +
      • list item 2.2.2
        • +
      +
      • +
    • list item 2.3
      • +
    • list item 2.4
      • +
    +
    • +
  • list item 3
    • +
  • list item 4
    • +
+ 
<ul>
+    <li>...</li>
+</ul>
+
+
+
+
+
+
    +
  1. list item 1
    2. +
  2. list item 2 +
      +
    1. list item 2.1
      2. +
    2. list item 2.2 +
        +
      1. list item 2.2.1
        2. +
      2. list item 2.2.2
        3. +
      +
      3. +
    3. list item 2.3
      4. +
    4. list item 2.4
      5. +
    +
    3. +
  3. list item 3
    4. +
  4. list item 4
    5. +
+ 
<ol>
+    <li>...</li>
+</ol>
+
+
+
+
+
Unstyled List
+

To remove default list styling, use .unstyled.

+
+
    +
  • list item 1
    • +
  • list item 2 +
      +
    • list item 2.1
      • +
    • list item 2.2
      • +
    +
    • +
  • list item 3
    • +
  • list item 4
    • +
+ 
<ul class="unstyled">
+    <li>...</li>
+</ul>
+
+
+
Definition List
+

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.

+
+
+
Term 1
+
Description 1
+
Term 2
+
Description 2
+
Term 3
+
Description 3
+
+ 
<dl>
+    <dt>Term</dt>
+    <dd>Description</dd>
+</dl>
+
+
\ No newline at end of file diff --git a/docs/content/docs/utils.md b/docs/content/docs/utils.md new file mode 100644 index 00000000..3e58bcc4 --- /dev/null +++ b/docs/content/docs/utils.md @@ -0,0 +1,124 @@ ++++ +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 ++++ + +

Group

+

Combines float elements to group with a clearfix.

+
+
+
+ This text is visibly floating left +
+
+ This text looks like a case of right float +
+
+ 
<div class="group">
+    <div class="float-left">...</div>
+    <div class="float-right">...</div>
+</div>
+
+
+

Visibility

+

Below is an invisible div with class invisible. You can't see it, because it is invisible. You can't see invisible things.

+
+ +
+ But you can see this div because it has visible class. +
+ 
<div class="invisible">...</div>
+<div class="visible">...</div>
+
+
+

Display

+

This is a very useful little bit. Whenever you need to hide some text or an element on a small screen, just throw in hide-sm class. Or, if you need to specifically show something only on small screens, show-sm class is yours for the job. You can also just plain hide stuff with hide class. Can you see red words "I'm hidden" below? Exactly.

+
+
+ I'm hidden +
+
+ This text will not show up on a small screen. +
+

Resize your window and trust us on this ↑ â†“

+
+ This text will only show up on a small screen +
+ 
<div class="hide">I'm hidden</div>
+<div class="hide-sm">This text will not show up on a small screen.</div>
+<div class="show-sm">This will only show up on a small screen</div>
+
+
+

Print

+

One more neat feature of Kube. It helps you produce better ready-to-print pages by simply hiding irrelevant things.

+
+
+ This will be hidden on print, because it is some sort of web-specific thing. +
+
+ This will be printed, because this text is somehow more relevant on paper than on screen. +
+ 
<div class="hide-print">...</div>
+<div class="show-print">...</div>
+
+
+

Video Container

+

Helps to serve responsive video to various devices.

+
+
+ +
+ 
<div class="video-container">
+    <iframe>...</iframe>
+</div>
+
+
+

Close

+

Closing icon to close anything you want.

+
+ + 
<span class="close small"></span>
+
+
+ + 
<span class="close"></span>
+
+
+ + 
<span class="close big"></span>
+
+

Caret

+

Kube has already built-in four-direction caret.

+
+ + 
<span class="caret down"></span>
+<span class="caret up"></span>
+<span class="caret left"></span>
+<span class="caret right"></span>
+
+
+

Example of usage:

+
+     Link     Text     +
+

Icons

+

Some useful icons are already built-in to Kube.

+
+ + 
<i class="kube-search"></i>
+
+
+ + 
<i class="kube-menu"></i>
+
+
+ + 
<i class="kube-calendar"></i>
+
\ No newline at end of file diff --git a/docs/content/faq/_index.md b/docs/content/faq/_index.md new file mode 100644 index 00000000..17c8963c --- /dev/null +++ b/docs/content/faq/_index.md @@ -0,0 +1,39 @@ ++++ +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/docs/content/password-recovery.md b/docs/content/password-recovery.md new file mode 100644 index 00000000..73ae263c --- /dev/null +++ b/docs/content/password-recovery.md @@ -0,0 +1,17 @@ + ++++ +title = "Password Recovery" ++++ +
+ +
+ + +
+ +

+ +

+ +

Back to Log In

+
\ No newline at end of file diff --git a/docs/layouts/docs/single.html b/docs/layouts/docs/single.html new file mode 100644 index 00000000..ed942e9e --- /dev/null +++ b/docs/layouts/docs/single.html @@ -0,0 +1,23 @@ +{{ define "title"}} {{ .Title}} {{end}} +{{ define "header"}} {{ partial "header" .}} {{end}} +{{ define "main"}} +
+
+

{{ .Title}}

+

+ {{ .Params.bref | safeHTML }}. +

+ +
+
+ {{ partial "toc" .}} + + {{ .Content}} + + {{if .Params.script}} + {{ $script := (delimit (slice "scripts" .Params.script) "/")}} + {{ partial (string $script) .}} + {{end }} +
+
+{{ end }} diff --git a/docs/layouts/index.html b/docs/layouts/index.html new file mode 100644 index 00000000..255e8e33 --- /dev/null +++ b/docs/layouts/index.html @@ -0,0 +1,61 @@ +{{ define "title"}} {{ .Site.Title}} {{end}} +{{ define "header"}} {{ partial "header" .}} {{end}} +{{ define "main" }} + +
+
+

{{.Title}}

+

{{.Description}}

+
+
+ Download View on Github OSCAL on Github +

Download binaries for various platforms

+
+
+ macOS brew install oscalkit
+ {{/* oscalkit from imperavi is an awesome CSS & JS Framework and i designed this template for hugo with the same original philosophy ! */}} +
+ {{/*
+
+
+
+ Baseline +
+

Horizontal Rhythm

+

In Kube horizontal rhythm based on a 4px vertical grid is something that we are truly proud of.

+
+
+
+ Typography +
+

Typography

+

We obsess over typography, and it shows throughout Kube.

+
+
+
+ Minimalism +
+

Minimalism

+

We strongly believe in minimalism as a general concept as well as a practical approach to everyday life.

+
+
+
+
+

Mobile-first Design

+

Every element in kube is mobile-first and fully embraces latest and greatest tech.

+
+
+

Cross-browser

+

Kube works in all modern browsers, both desktop and mobile, including latest Chrome, Firefox, Safari, Opera, IE and Edge.

+
+
+

License

+

Kube licensed under MIT.
+ Kube Framework is absolutely free for personal or commercial use.

+
+
*/}} +
+
+ +{{ end }} +{{ define "footer"}} {{ partial "footer" .}} {{end}} \ No newline at end of file diff --git a/docs/layouts/partials/favicon.html b/docs/layouts/partials/favicon.html new file mode 100644 index 00000000..624b637d --- /dev/null +++ b/docs/layouts/partials/favicon.html @@ -0,0 +1 @@ + diff --git a/docs/layouts/partials/footer.html b/docs/layouts/partials/footer.html new file mode 100644 index 00000000..a1fc7c56 --- /dev/null +++ b/docs/layouts/partials/footer.html @@ -0,0 +1,17 @@ + \ No newline at end of file diff --git a/docs/layouts/partials/header.html b/docs/layouts/partials/header.html new file mode 100644 index 00000000..0bd3ed40 --- /dev/null +++ b/docs/layouts/partials/header.html @@ -0,0 +1,29 @@ +
+ +
+
+ + + +
diff --git a/docs/layouts/partials/meta/name-author.html b/docs/layouts/partials/meta/name-author.html new file mode 100644 index 00000000..974c77f8 --- /dev/null +++ b/docs/layouts/partials/meta/name-author.html @@ -0,0 +1,6 @@ + +{{ if isset .Params "author" }} + +{{ else }} + +{{ end }} diff --git a/docs/layouts/partials/meta/ogimage.html b/docs/layouts/partials/meta/ogimage.html new file mode 100644 index 00000000..7a87ff4a --- /dev/null +++ b/docs/layouts/partials/meta/ogimage.html @@ -0,0 +1,8 @@ + +{{ if and (.IsNode) (.Site.Params.images) }} + +{{ end }} + +{{ if and (.IsPage) (not .Params.images) (.Site.Params.images) }} + +{{ end }} diff --git a/docs/layouts/partials/page-summary.html b/docs/layouts/partials/page-summary.html new file mode 100644 index 00000000..79c72e38 --- /dev/null +++ b/docs/layouts/partials/page-summary.html @@ -0,0 +1,9 @@ +
  • +

    + {{ .Title }} +

    +
    + {{ if .Description }} +

    {{ .Description }}

    + {{ end }} +
    • diff --git a/docs/layouts/partials/pagination.html b/docs/layouts/partials/pagination.html new file mode 100644 index 00000000..95353e5f --- /dev/null +++ b/docs/layouts/partials/pagination.html @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/docs/layouts/partials/post/byauthor.html b/docs/layouts/partials/post/byauthor.html new file mode 100644 index 00000000..579a64d3 --- /dev/null +++ b/docs/layouts/partials/post/byauthor.html @@ -0,0 +1,20 @@ +

    + Published + {{ if ne .Site.Params.hide_author true }} + {{ with .Params.author }} + by + {{ else }} + by + {{ end }} + {{ end }} + + {{ with .Params.categories }} + in {{ delimit (apply (apply (sort .) "partial" "post/category-link" ".") "chomp" ".") ", " " and " }} + {{ end }} + {{ with .Params.tags }} + and tagged {{ delimit (apply (apply (sort .) "partial" "post/tag-link" ".") "chomp" ".") ", " " and " }} + {{ end }} + using {{ .WordCount }} words. +

    diff --git a/docs/layouts/partials/post/category-link.html b/docs/layouts/partials/post/category-link.html new file mode 100644 index 00000000..6bee96b1 --- /dev/null +++ b/docs/layouts/partials/post/category-link.html @@ -0,0 +1 @@ +{{ . }} diff --git a/docs/layouts/partials/post/meta.html b/docs/layouts/partials/post/meta.html new file mode 100644 index 00000000..62b4b451 --- /dev/null +++ b/docs/layouts/partials/post/meta.html @@ -0,0 +1,14 @@ + + + +{{ .ReadingTime }} minute read + + + +{{ if .PublishDate.IsZero }} + Published: +{{ else if lt .PublishDate .Lastmod }} + Modified: +{{ else }} + Published: +{{ end }} diff --git a/docs/layouts/partials/post/related-content.html b/docs/layouts/partials/post/related-content.html new file mode 100644 index 00000000..49310b60 --- /dev/null +++ b/docs/layouts/partials/post/related-content.html @@ -0,0 +1,16 @@ +{{ range first 1 (where (where .Site.Pages ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }} + {{ $.Scratch.Set "has_related" true }} +{{ end }} + +{{ if $.Scratch.Get "has_related" }} + +{{ end }} diff --git a/docs/layouts/partials/post/tag-link.html b/docs/layouts/partials/post/tag-link.html new file mode 100644 index 00000000..8c034210 --- /dev/null +++ b/docs/layouts/partials/post/tag-link.html @@ -0,0 +1 @@ +{{ . }} diff --git a/docs/layouts/partials/scripts/animation.html b/docs/layouts/partials/scripts/animation.html new file mode 100644 index 00000000..ee13095f --- /dev/null +++ b/docs/layouts/partials/scripts/animation.html @@ -0,0 +1,127 @@ + \ No newline at end of file diff --git a/docs/layouts/partials/site-verification.html b/docs/layouts/partials/site-verification.html new file mode 100644 index 00000000..c4d8b05d --- /dev/null +++ b/docs/layouts/partials/site-verification.html @@ -0,0 +1,12 @@ +{{ if .Site.Params.seo.webmaster_verifications.google }} + +{{ end }} +{{ if .Site.Params.seo.webmaster_verifications.bing }} + +{{ end }} +{{ if .Site.Params.seo.webmaster_verifications.alexa }} + +{{ end }} +{{ if .Site.Params.seo.webmaster_verifications.yandex }} + +{{ end }} diff --git a/docs/layouts/partials/toc.html b/docs/layouts/partials/toc.html new file mode 100644 index 00000000..ccc3f3d9 --- /dev/null +++ b/docs/layouts/partials/toc.html @@ -0,0 +1,21 @@ +{{ if and (isset .Params "toc") .Params.toc }} + + + +{{ end }} \ No newline at end of file diff --git a/docs/themes/oscalkit b/docs/themes/oscalkit new file mode 160000 index 00000000..5f68bf3e --- /dev/null +++ b/docs/themes/oscalkit @@ -0,0 +1 @@ +Subproject commit 5f68bf3e990eff4108fa251f3a3112d081fffba4