diff options
| author | Mohamed <jeblister@gmail.com> | 2021-07-08 13:42:23 +0300 |
|---|---|---|
| committer | Mohamed <jeblister@gmail.com> | 2021-07-08 13:42:23 +0300 |
| commit | 65db9282c8c14e70d736429db85cdb52366c5ac1 (patch) | |
| tree | 0e1e8b946b2ff8ff6eab3657622b73b67de3398a | |
| parent | d46f09692047e47bf03b9b1c56506b99c090d550 (diff) | |
Simply render the inner content HTML on Docs
32 files changed, 276 insertions, 144 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 280e9e4..2ad073d 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -6,7 +6,7 @@ description = "Kube is a professional and a responsive Hugo theme for developer Paginate = 4 [Params] RSSLink = "/index.xml" - author = "newpixcom" # add your company name + author = "elemnts.net" # add your company name github = "" # add your github profile name twitter = "" # add your twitter profile email = "myemail@myaddress.xxx" diff --git a/exampleSite/content/account.md b/exampleSite/content/account.md index ad1f583..b25006f 100644 --- a/exampleSite/content/account.md +++ b/exampleSite/content/account.md @@ -1,6 +1,9 @@ +++
title = "Sign In"
+++
+
+{{< rawhtml >}}
+
<form action="" data-component="validate" method="post" class="form form-centered"><input type="hidden" name="authorize-token" value="">
<div class="form-item">
@@ -18,3 +21,5 @@ title = "Sign In" <p class="small">If you have any questions about authorization or you're our customer but haven't receive your login credentials, just send us a short email at <b>support@company.com</b> and we'll fix it right away.</p>
</form>
+
+{{< /rawhtml >}}
diff --git a/exampleSite/content/blog/collapse.md b/exampleSite/content/blog/collapse.md index 55e431b..a593e0b 100644 --- a/exampleSite/content/blog/collapse.md +++ b/exampleSite/content/blog/collapse.md @@ -8,6 +8,8 @@ bref = "A demo to collapsable elements" +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> <div class="example"> <div class="my-collapse" data-component="collapse" id="my-collapse"> @@ -191,6 +193,7 @@ bref = "A demo to collapsable elements" <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + </pre> </div> <h5>open</h5> @@ -204,4 +207,5 @@ bref = "A demo to collapsable elements" </pre> <h5>closeAll</h5> <pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'closeAll'</span>); -</pre>
\ No newline at end of file +</pre> +{{< /rawhtml >}} diff --git a/exampleSite/content/blog/messages.md b/exampleSite/content/blog/messages.md index 5b884b7..014f3f0 100644 --- a/exampleSite/content/blog/messages.md +++ b/exampleSite/content/blog/messages.md @@ -7,6 +7,8 @@ title = "Messages" bref = "Messages are an essential part of modern web and messages in Kube look nice" +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-usage"><a href="#h-usage">Usage</a></h3> <div class="example"> <div class="message open" data-component="message" data-loaded="true"> @@ -156,3 +158,4 @@ bref = "Messages are an essential part of modern web and messages in Kube look n <span class="hljs-comment">// do something</span> }) </pre> +{{< /rawhtml >}} diff --git a/exampleSite/content/blog/prototyping.md b/exampleSite/content/blog/prototyping.md index f55d46a..f15f19e 100644 --- a/exampleSite/content/blog/prototyping.md +++ b/exampleSite/content/blog/prototyping.md @@ -8,16 +8,17 @@ draft = false weight = 30 +++ +{{< rawhtml >}} <img data-src="https://cldup.com/3tov0aCFh8.png" class="lazyload"> +{{< rawhtml >}} 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. - +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 + +> For small, fast projects or prototyping Markdown, with Hugo, have proven to be an excellent solution. diff --git a/exampleSite/content/blog/typography.md b/exampleSite/content/blog/typography.md index e5b631b..20fc37c 100644 --- a/exampleSite/content/blog/typography.md +++ b/exampleSite/content/blog/typography.md @@ -7,6 +7,8 @@ bref = "Typography is perhaps one of the most important and most visible things +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-get-started"><a href="#h-get-started">Get Started</a></h3> <p>Typography of Kube based on the 4px horizontal grid, it means that for the headers, paragraphs, quotes and any other texts chosen are a combination of line-height, that fit into the 4px grid and help set the horizontal rhythm of design by default.</p> <figure> @@ -449,4 +451,5 @@ bref = "Typography is perhaps one of the most important and most visible things <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>Description<span class="hljs-tag"></<span class="hljs-name">dd</span>></span> <span class="hljs-tag"></<span class="hljs-name">dl</span>></span> </pre> -</div>
\ No newline at end of file +</div> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/animation.md b/exampleSite/content/docs/animation.md index 3ff71e4..945da1f 100644 --- a/exampleSite/content/docs/animation.md +++ b/exampleSite/content/docs/animation.md @@ -9,6 +9,8 @@ toc = true script = 'animation' +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-slide"><a href="#h-slide">Slide</a></h3> <div class="example"> <div class="demo-animation-wrap"> @@ -160,4 +162,5 @@ script = 'animation' <pre class="code">$(<span class="hljs-string">'#element'</span>).animation(<span class="hljs-string">'fadeIn'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// code ...</span> -});</pre>
\ No newline at end of file +});</pre> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/breadcrumbs.md b/exampleSite/content/docs/breadcrumbs.md index b195c9e..d3d06fb 100644 --- a/exampleSite/content/docs/breadcrumbs.md +++ b/exampleSite/content/docs/breadcrumbs.md @@ -8,6 +8,8 @@ bref= "Breadcrumbs in Kube are formed as lists with default separator. This sepa toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> <div class="example"> <nav class="breadcrumbs"> @@ -90,10 +92,12 @@ toc = true <span class="hljs-comment">// html</span> <span class="hljs-params"><nav id="breadcrumbs-custom-separator" class="breadcrumbs"></span> - <span class="hljs-params"><ul></span> - <span class="hljs-params"><li></span><span class="hljs-params"><a href=""></span>...<span class="hljs-params"></a></span><span class="hljs-params"></li></span> - <span class="hljs-params"><li></span><span class="hljs-params"><span></span>...<span class="hljs-params"></span></span><span class="hljs-params"></li></span> - <span class="hljs-params"></ul></span> +<span class="hljs-params"><ul></span> +<span class="hljs-params"><li></span><span class="hljs-params"><a href=""></span>...<span class="hljs-params"></a></span><span class="hljs-params"></li></span> +<span class="hljs-params"><li></span><span class="hljs-params"><span></span>...<span class="hljs-params"></span></span><span class="hljs-params"></li></span> +<span class="hljs-params"></ul></span> <span class="hljs-params"></nav></span> + </pre> -</div>
\ No newline at end of file +</div> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/buttons.md b/exampleSite/content/docs/buttons.md index 3027dc7..eb09c2b 100644 --- a/exampleSite/content/docs/buttons.md +++ b/exampleSite/content/docs/buttons.md @@ -8,6 +8,8 @@ bref = "Buttons in Kube are minimalistic, designed for instant and convenient c toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-primary"><a href="#h-primary">Primary</a></h3> <div class="example"> <button class="button">Button</button> <a class="button" href="#">Button</a> @@ -91,6 +93,7 @@ toc = true <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button outline"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kube-search"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary outline"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kube-search"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span></pre> + </div> <h3 class="section-head" id="h-custom"><a href="#h-custom">Custom</a></h3> <p>With some Sass magic, you can customize your buttons in a snap. Just include a color class declaration and set the color itself, and you're done.</p> @@ -105,4 +108,6 @@ toc = true <span class="hljs-comment">// html</span> <<span class="hljs-keyword">button</span> class=<span class="hljs-string">"button red"</span>><span class="hljs-keyword">Button</span></<span class="hljs-keyword">button</span>> <<span class="hljs-keyword">button</span> class=<span class="hljs-string">"button red outline"</span>><span class="hljs-keyword">Button</span></<span class="hljs-keyword">button</span>></pre> -</div>
\ No newline at end of file + +</div> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/collapse.md b/exampleSite/content/docs/collapse.md index fdc4029..afe4b87 100644 --- a/exampleSite/content/docs/collapse.md +++ b/exampleSite/content/docs/collapse.md @@ -8,6 +8,8 @@ bref="Collapsable elements are horizontally aligned tabs, in a way. Jokes aside, toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> <div class="example"> <div class="my-collapse" data-component="collapse" id="my-collapse"> @@ -191,6 +193,7 @@ toc = true <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + </pre> </div> <h5>open</h5> @@ -204,4 +207,5 @@ toc = true </pre> <h5>closeAll</h5> <pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-collapse'</span>).collapse(<span class="hljs-string">'closeAll'</span>); -</pre>
\ No newline at end of file +</pre> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/colors.md b/exampleSite/content/docs/colors.md index d59e0fc..e5a085d 100644 --- a/exampleSite/content/docs/colors.md +++ b/exampleSite/content/docs/colors.md @@ -8,6 +8,8 @@ bref="Kube has a basic set of colors for text, links, buttons, states and gray p toc = true +++ +{{< rawhtml >}} + <h3 class="section-head">Text</h3> <p>Contrasting black color for headings and less intense dark gray for the text helps to improve readability.</p> <div class="example"> @@ -138,4 +140,5 @@ toc = true <p>$color-aluminum</p> </div> </div> -</div>
\ No newline at end of file +</div> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/custom-plugins.md b/exampleSite/content/docs/custom-plugins.md index 49e0b67..ebc155e 100644 --- a/exampleSite/content/docs/custom-plugins.md +++ b/exampleSite/content/docs/custom-plugins.md @@ -7,6 +7,8 @@ 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."
+++
+{{< rawhtml >}}
+
<h3 class="section-head" id="h-plugin"><a href="#h-plugin">Plugin Template</a></h3>
<p>Here's what a generic plugin looks like. This template gives an overall idea of what you can do with plugins in Kube. Feel free to use this one as a boilerplate for your custom plugins.</p>
<pre class="code skip">(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">Kube</span>)
@@ -60,6 +62,7 @@ bref = "Kube has a lot to offer in terms of extensibility and flexibility, and p Kube.Plugin.autoload(<span class="hljs-string">'Myplugin'</span>);
}(Kube));
+
</pre>
<h3 class="section-head" id="h-call"><a href="#h-call">Call</a></h3>
<p>Calling a plugin is very easy, just add the <code>data-component</code> with the name of your plugin and it will start automatic.</p>
@@ -68,8 +71,9 @@ bref = "Kube has a lot to offer in terms of extensibility and flexibility, and p <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-element"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
- $(<span class="hljs-string">'#my-element'</span>).myplugin();
+$(<span class="hljs-string">'#my-element'</span>).myplugin();
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
+
</pre>
<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3>
<p>Kube plugins can react on events with callbacks. Whenever you need your plugin to do something in response to an action or an event, just use a callback.</p>
@@ -78,9 +82,10 @@ bref = "Kube has a lot to offer in terms of extensibility and flexibility, and p <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
$(<span class="hljs-string">'#myplugin'</span>).on(<span class="hljs-string">'show.myplugin'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
</span>{
- <span class="hljs-comment">// do something...</span>
+<span class="hljs-comment">// do something...</span>
});
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
+
</pre>
<p>All plugin methods and variables are available within the plugin via <var>this</var>:</p>
<pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
@@ -91,6 +96,9 @@ $(<span class="hljs-string">'#myplugin'</span>).on(<span class="hljs-string">'sh <span class="hljs-comment">// call plugin method</span>
<span class="hljs-keyword">this</span>.method();
+
});
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
-</pre>
\ No newline at end of file +
+</pre>
+{{< /rawhtml >}}
diff --git a/exampleSite/content/docs/dropdown.md b/exampleSite/content/docs/dropdown.md index 2c2eaf5..e62d2a4 100644 --- a/exampleSite/content/docs/dropdown.md +++ b/exampleSite/content/docs/dropdown.md @@ -8,6 +8,8 @@ bref= "Dropdown menus in Kube are simple and intuitive. You've got a link with < toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> <div class="example"> <p><a data-component="dropdown" data-loaded="true" data-target="#dropdown1" href="#">Show Dropdown <span class="caret down"></span></a></p> @@ -39,11 +41,12 @@ toc = true // Dropdown <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-dropdown"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close show-sm"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close show-sm"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> +<span class="hljs-tag"><<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + </pre> </div> <div class="example"> @@ -63,6 +66,7 @@ toc = true <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-action</span>=<span class="hljs-string">"dropdown-close"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + </pre> </div> <h3 class="section-head">Navigation Fixed</h3> @@ -118,10 +122,11 @@ toc = true // Dropdown <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-fixed"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"><<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + </pre> </div> <h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> @@ -169,4 +174,5 @@ toc = true <pre class="code">$(<span class="hljs-string">'#my-dropdown'</span>).on(<span class="hljs-string">'closed.dropdown'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// do something...</span> -});</pre>
\ No newline at end of file +});</pre> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/forms.md b/exampleSite/content/docs/forms.md index 2055793..051350f 100644 --- a/exampleSite/content/docs/forms.md +++ b/exampleSite/content/docs/forms.md @@ -8,6 +8,8 @@ bref = 'Forms come in all forms and shapes in Kube, and you can do all sorts of toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> <p>This is the most basic form with all the basic inputs.</p> <div class="example"> @@ -797,4 +799,5 @@ toc = true <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </pre> -</div>
\ No newline at end of file +</div> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/grid.md b/exampleSite/content/docs/grid.md index f750657..f72dc32 100644 --- a/exampleSite/content/docs/grid.md +++ b/exampleSite/content/docs/grid.md @@ -7,6 +7,8 @@ bref = "Kube uses fully responsive, flexbox-enabled 12-column grid. You can comb toc = true +++ +{{< rawhtml >}} + <div id="main"> <h3 class="section-head" id="h-columns"><a href="#h-columns">Columns</a></h3> <p>Columns are building blocks for many websites. Here's how columns are formed in Kube, and here's how you can use them right away.</p> @@ -512,8 +514,8 @@ toc = true <span class="hljs-comment"><!-- html --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sidebar"</span>></span>Sidebar<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"content"</span>></span>Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sidebar"</span>></span>Sidebar<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"content"</span>></span>Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </pre> @@ -568,21 +570,24 @@ toc = true & > div:nth-child(5n) { height: 120px; } + } <span class="hljs-comment"><!-- html --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"media-grid"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>1<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>2<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>3<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>4<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>5<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>7<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>8<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>9<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span>></span>10<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span>></span>1<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span>></span>2<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span>></span>3<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span>></span>4<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span>></span>5<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span>></span>6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span>></span>7<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span>></span>8<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span>></span>9<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span>></span>10<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + </pre> </div> </div> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/labels.md b/exampleSite/content/docs/labels.md index 2069ff6..2c4a3ef 100644 --- a/exampleSite/content/docs/labels.md +++ b/exampleSite/content/docs/labels.md @@ -8,6 +8,8 @@ bref = "Labels have all standard Kube styling options available: outline, states toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> <div class="example"> <span class="label">Default</span> <span class="label success">Success</span> <span class="label error">Error</span> <span class="label warning">Warning</span> <span class="label focus">Focus</span> <span class="label black">Black</span> <span class="example-inverted-box"><span class="label inverted">Inverted</span></span> @@ -47,5 +49,7 @@ toc = true <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label custom"</span>></span>Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label badge custom"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label tag custom"</span>></span>Tag<span class="hljs-tag"></<span class="hljs-name">span</span>></span> + </pre> -</div>
\ No newline at end of file +</div> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/messages.md b/exampleSite/content/docs/messages.md index 11bc2ec..61b6e99 100644 --- a/exampleSite/content/docs/messages.md +++ b/exampleSite/content/docs/messages.md @@ -8,6 +8,8 @@ bref = "Messages are an essential part of modern web, and they can provide inval toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-usage"><a href="#h-usage">Usage</a></h3> <div class="example"> <div class="message open" data-component="message" data-loaded="true"> @@ -157,3 +159,4 @@ toc = true <span class="hljs-comment">// do something</span> }) </pre> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/mixins.md b/exampleSite/content/docs/mixins.md index 70a3b93..3c90555 100644 --- a/exampleSite/content/docs/mixins.md +++ b/exampleSite/content/docs/mixins.md @@ -8,6 +8,8 @@ bref="Mixins are a great way to produce things and effects way faster with Sass toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-get-started"><a href="#h-get-started">Get Started</a></h3> <p>Kube has been designed to help you with web development, that's why it's so easy to use Kube when building websites. To move forward quickly and efficiently, just link <code>kube.scss</code> from Kube package: this file contains variables, mixins and everything you need to simplify daily routine tasks.</p> <p>For example, import <code>kube.scss</code> into your <code>master.scss</code> styles file, which you will later compile into <code>master.css</code></p> @@ -20,13 +22,14 @@ toc = true <span class="hljs-comment">// use mixins</span> <span class="hljs-selector-id">#my-layout</span> { - @<span class="hljs-keyword">include</span> flex; +@<span class="hljs-keyword">include</span> flex; } <span class="hljs-comment">// use variables</span> <span class="hljs-selector-id">#my-layout</span> { - <span class="hljs-attribute">padding</span>: <span class="hljs-variable">$base-line</span>; +<span class="hljs-attribute">padding</span>: <span class="hljs-variable">$base-line</span>; } + </pre> <h3 class="section-head" id="h-fonts"><a href="#h-fonts">Fonts</a></h3> <p>Generates a font-family declarations for text, headings, buttons or inputs.</p> @@ -38,6 +41,7 @@ toc = true @<span class="hljs-keyword">include</span> headings-font(<span class="hljs-string">"Lato, 'Helvetica Neue', sans-serif"</span>); @<span class="hljs-keyword">include</span> buttons-font(<span class="hljs-string">"Lato, 'Helvetica Neue', sans-serif"</span>); @<span class="hljs-keyword">include</span> inputs-font(<span class="hljs-string">"Lato, 'Helvetica Neue', sans-serif"</span>); + </pre> <p>CSS Output</p> <pre class="code skip"><span class="hljs-comment">// Text</span> @@ -47,18 +51,19 @@ toc = true <span class="hljs-comment">// Headings</span> <span class="hljs-selector-tag">h1</span><span class="hljs-selector-class">.title</span>, <span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-tag">h2</span>, <span class="hljs-selector-tag">h3</span>, <span class="hljs-selector-tag">h4</span>, <span class="hljs-selector-tag">h5</span>, <span class="hljs-selector-tag">h6</span>, <span class="hljs-selector-class">.h1</span>, <span class="hljs-selector-class">.h2</span>, <span class="hljs-selector-class">.h3</span>, <span class="hljs-selector-class">.h4</span>, <span class="hljs-selector-class">.h5</span>, <span class="hljs-selector-class">.h6</span> { - <span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; +<span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; } <span class="hljs-comment">// Buttons</span> <span class="hljs-selector-tag">button</span>, <span class="hljs-selector-class">.button</span> { - <span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; +<span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; } <span class="hljs-comment">// Inputs</span> <span class="hljs-selector-tag">input</span>, <span class="hljs-selector-tag">textarea</span>, select { - <span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; +<span class="hljs-attribute">font-family</span>: Lato, <span class="hljs-string">'Helvetica Neue'</span>, sans-serif; } + </pre> <h3 class="section-head" id="h-breakpoints"><a href="#h-breakpoints">Breakpoints</a></h3> <p>Breakpoint for small screens (max-width 768px by default).</p> @@ -91,6 +96,7 @@ toc = true <span class="hljs-comment">// max-width 1024px;</span> <span class="hljs-variable">@include</span> breakpoint(<span class="hljs-number">0</span>, <span class="hljs-number">1024px</span>) {} + </pre> <h3 class="section-head" id="h-grid"><a href="#h-grid">Grid</a></h3> <h5 id="h-grid-row">Row</h5> @@ -112,7 +118,9 @@ toc = true <span class="hljs-attribute">-ms-flex-wrap</span>: wrap; <span class="hljs-attribute">-webkit-flex-wrap</span>: wrap; <span class="hljs-attribute">flex-wrap</span>: wrap; + } + </pre> <h5 id="h-grid-media">Media Grid</h5> <p>Generates a media grid. See <a href="/kube/docs/grid/#h-media-grid">live example</a>.</p> @@ -131,20 +139,22 @@ toc = true -webkit-<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>; -moz-<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>; <span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>; + } <span class="hljs-selector-class">.my-media-grid</span> > <span class="hljs-selector-tag">div</span> { - <span class="hljs-attribute">display</span>: inline-block; - <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; +<span class="hljs-attribute">display</span>: inline-block; +<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; } @<span class="hljs-keyword">media</span> (max-width: 768px) { - <span class="hljs-selector-class">.my-media-grid</span> { - -webkit-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; - -moz-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; - <span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; - } +<span class="hljs-selector-class">.my-media-grid</span> { +-webkit-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; +-moz-<span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; +<span class="hljs-attribute">column-count</span>: <span class="hljs-number">1</span>; } +} + </pre> <h3 class="section-head" id="h-flex"><a href="#h-flex">Flex</a></h3> <pre class="code skip"><span class="hljs-variable">@include</span> flex; @@ -170,6 +180,7 @@ toc = true <span class="hljs-variable">@include</span> flex-item-one; <span class="hljs-variable">@include</span> flex-item-shrink($shrink); <span class="hljs-variable">@include</span> flex-item-width($width); + </pre> <h3 class="section-head" id="h-gradients"><a href="#h-gradients">Gradients</a></h3> <h5 id="h-gradients-vertical">Vertical</h5> @@ -207,6 +218,7 @@ toc = true <span class="hljs-comment">// custom transitions</span> <span class="hljs-meta">@include</span> transition(all .<span class="hljs-number">2</span>s ease-<span class="hljs-keyword">in</span>-<span class="hljs-keyword">out</span>); <span class="hljs-meta">@include</span> transition(opacity <span class="hljs-number">1</span>s ease-<span class="hljs-keyword">in</span>, width .<span class="hljs-number">2</span>s ease-<span class="hljs-keyword">in</span>); + </pre> <h5 id="h-utils-transform">Transform</h5> <p>Provides a shorthand syntax for transforms.</p> @@ -242,6 +254,7 @@ toc = true // $<span class="hljs-built_in">image</span>-type - jpg, png, gif // $<span class="hljs-built_in">image</span>-<span class="hljs-built_in">height</span> - optional + </pre> <p>Example:</p> <pre class="code skip"><span class="hljs-selector-class">.brand</span> { @@ -265,4 +278,5 @@ toc = true <span class="hljs-attribute">background-size</span>: <span class="hljs-number">100px</span> auto; } } -</pre>
\ No newline at end of file +</pre> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/modal.md b/exampleSite/content/docs/modal.md index 1321b83..235a0df 100644 --- a/exampleSite/content/docs/modal.md +++ b/exampleSite/content/docs/modal.md @@ -8,6 +8,8 @@ bref="Modal windows are used for various reasons and purposes. Kube makes the wa toc = true +++ +{{< rawhtml >}} + <h4 class="demo-head" id="h-calling">Calling</h4> <p>Here you add an actual call to the modal window. Clicking the "Open" button below will launch a <var>modal</var> with content of a <var>#my-modal</var> div. You can use buttons or links to open modals in Kube. Clicking anywhere outside of the modal or hitting <kbd>ESC</kbd> will close the window.</p> <div class="example"> @@ -17,12 +19,13 @@ toc = true // Markup <<span class="hljs-keyword">div</span> <span class="hljs-keyword">id</span>=<span class="hljs-string">"my-modal"</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-box hide"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal"</span>> - <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"close"</span>></span> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-header"</span>>Modal Header</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-body"</span>>...</<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> +<<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal"</span>> +<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"close"</span>></span> +<<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-header"</span>>Modal Header</<span class="hljs-keyword">div</span>> +<<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-body"</span>>...</<span class="hljs-keyword">div</span>> </<span class="hljs-keyword">div</span>> +</<span class="hljs-keyword">div</span>> + </pre> </div> <p>Open from url</p> @@ -33,16 +36,17 @@ toc = true // Markup <<span class="hljs-keyword">div</span> <span class="hljs-keyword">id</span>=<span class="hljs-string">"ui-modal"</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-box hide"</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal"</span>> - <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"close"</span>></span> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-header"</span>>UI Modal</<span class="hljs-keyword">div</span>> - <<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-body"</span>>... <span class="hljs-keyword">content</span> <span class="hljs-keyword">from</span> modal.html ...</<span class="hljs-keyword">div</span>> - </<span class="hljs-keyword">div</span>> +<<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal"</span>> +<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"close"</span>></span> +<<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-header"</span>>UI Modal</<span class="hljs-keyword">div</span>> +<<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"modal-body"</span>>... <span class="hljs-keyword">content</span> <span class="hljs-keyword">from</span> modal.html ...</<span class="hljs-keyword">div</span>> +</<span class="hljs-keyword">div</span>> </<span class="hljs-keyword">div</span>> // modal.html <p>...</p> <a href=<span class="hljs-string">"#"</span> <span class="hljs-keyword">data</span>-<span class="hljs-keyword">action</span>=<span class="hljs-string">"modal-close"</span>><span class="hljs-keyword">Close</span></a> + </pre> </div> <p>Direct open</p> @@ -186,4 +190,5 @@ toc = true <p>Content of the modal window can be set up on the fly as well. No need for a <code>div</code> with <var>modal</var> class.</p> <h5>setWidth</h5> <pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-modal'</span>).modal(<span class="hljs-string">'setWidth'</span>, <span class="hljs-string">'800px'</span>); -</pre>
\ No newline at end of file +</pre> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/offcanvas.md b/exampleSite/content/docs/offcanvas.md index 37ed858..57621bd 100644 --- a/exampleSite/content/docs/offcanvas.md +++ b/exampleSite/content/docs/offcanvas.md @@ -8,6 +8,8 @@ bref="Offcanvas makes it look like a menu is sliding from the outside of the pag toc= true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> <p>This feature is very easy to set up. It is based on <code>data-component</code> set to <var>offcanvas</var>, <code>data-target</code> set to the menu layer (<var>#offcanvas-right</var> in example below) and a feature-specific <code>data-direction</code> which is required for right menu to be set to <var>right</var>.</p> <p><a class="button outline" data-component="offcanvas" data-target="#offcanvas-left" href="#"><i class="kube-menu"></i> Open Left</a> <a class="button outline" data-component="offcanvas" data-direction="right" data-target="#offcanvas-right" href="#">Open Right <i class="kube-menu"></i></a></p> @@ -58,24 +60,25 @@ toc= true <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#offcanvas-left"</span>></span>Open Left<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvas-left"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">nav</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> +<span class="hljs-tag"><<span class="hljs-name">nav</span>></span> +<span class="hljs-tag"><<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> // Right + Close <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"offcanvas"</span> <span class="hljs-attr">data-target</span>=<span class="hljs-string">"#offcanvas-right"</span> <span class="hljs-attr">data-direction</span>=<span class="hljs-string">"right"</span>></span>Open Right<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"offcanvas-right"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">nav</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> +<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> +<span class="hljs-tag"><<span class="hljs-name">nav</span>></span> +<span class="hljs-tag"><<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + </pre> <h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> <h5>target</h5> @@ -137,4 +140,5 @@ toc= true </span>{ <span class="hljs-comment">// do something...</span> }); -</pre>
\ No newline at end of file +</pre> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/pagination.md b/exampleSite/content/docs/pagination.md index e5a3d05..af757a9 100644 --- a/exampleSite/content/docs/pagination.md +++ b/exampleSite/content/docs/pagination.md @@ -8,6 +8,8 @@ bref= "Default pagination in Kube is organized using lists, with visual cues for toc =true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> <div class="example"> <nav class="pagination"> @@ -193,4 +195,5 @@ toc =true <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> </pre> -</div>
\ No newline at end of file +</div> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/quick-start.md b/exampleSite/content/docs/quick-start.md index dc75490..7b10142 100644 --- a/exampleSite/content/docs/quick-start.md +++ b/exampleSite/content/docs/quick-start.md @@ -7,6 +7,8 @@ toc = true bref = "As a complete and self-sufficient web framework, Kube is here to help you get the most out of your daily work. Kube takes care of routine stuff, saving you precious time for things that you love. Starting up with Kube is ridiculously fast you can start in under a minute. Here's how to set up Kube, and what basic customization are available out-of-the-box."
+++
+{{< rawhtml >}}
+
<h3 class="section-head" id="h-basic-template"><a href="#h-basic-template">Basic Template</a></h3>
<p>With Kube, you can set up your web framework and be on your way in under a minute. Just add this code to your web page for the basic template to take effect immediately.</p>
@@ -32,7 +34,6 @@ bref = "As a complete and self-sufficient web framework, Kube is here to help yo <span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span></pre>
-
<h3 class="section-head" id="h-supported-browsers"><a href="#h-supported-browsers">Supported Browsers</a></h3>
<p>Kube supports the latest, stable releases of all major browsers:</p>
@@ -45,7 +46,6 @@ bref = "As a complete and self-sufficient web framework, Kube is here to help yo <li>Internet Explorer 11</li>
</ul>
-
<h3 class="section-head" id="h-development"><a href="#h-development">Development with Kube</a></h3>
<p>Kube has been designed to help you with web development, that's why it's so easy to use Kube when building websites. To move forward quickly and efficiently, just link <code>kube.scss</code> from Kube package: this file contains variables, mixins and everything you need to simplify daily routine tasks.
@@ -72,10 +72,11 @@ bref = "As a complete and self-sufficient web framework, Kube is here to help yo <p>Also, you could use settings from <code>variables.scss</code>:</p>
-
<pre class="code"><span class="hljs-comment">// master.scss</span>
@<span class="hljs-keyword">import</span> <span class="hljs-string">"dist/scss/kube.scss"</span>;
<span class="hljs-selector-id">#my-layout</span> {
<span class="hljs-attribute">padding</span>: <span class="hljs-variable">$base-line</span>;
}</pre>
+
+{{< /rawhtml >}}
diff --git a/exampleSite/content/docs/sizing.md b/exampleSite/content/docs/sizing.md index be164b9..f503284 100644 --- a/exampleSite/content/docs/sizing.md +++ b/exampleSite/content/docs/sizing.md @@ -8,6 +8,8 @@ bref="Helper tools for elements width and height." toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-width"><a href="#h-width">Width</a></h3> <div class="example demo-sizing"> <div class="w5"> @@ -97,3 +99,4 @@ toc = true <div class="example"> .min-w5 — .min-w100 </div> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/sticky.md b/exampleSite/content/docs/sticky.md index 9779ed5..6917d01 100644 --- a/exampleSite/content/docs/sticky.md +++ b/exampleSite/content/docs/sticky.md @@ -8,6 +8,8 @@ bref="Sticky navigation makes it easy to affix menus to the top of the page when toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> <p>Scroll down to fix the navigation.</p> <div data-component="sticky" id="navbar-demo"> @@ -63,4 +65,5 @@ toc = true <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
\ No newline at end of file +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/tables.md b/exampleSite/content/docs/tables.md index 0bc6c26..4f07345 100644 --- a/exampleSite/content/docs/tables.md +++ b/exampleSite/content/docs/tables.md @@ -8,6 +8,8 @@ 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." +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> <div class="example"> <table> @@ -193,4 +195,5 @@ bref = "Tables are an essential part of many different contexts. Kube serves the <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w20"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> <span class="hljs-tag"></<span class="hljs-name">table</span>></span></pre> -</div>
\ No newline at end of file +</div> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/tabs.md b/exampleSite/content/docs/tabs.md index 95b6e23..d8f213b 100644 --- a/exampleSite/content/docs/tabs.md +++ b/exampleSite/content/docs/tabs.md @@ -8,6 +8,8 @@ bref= "Tabs in Kube are crafted the way one would expect from the world's best C toc= true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> <p>Here's an example of basic tabs setup. Tabs bar is an unordered list, and each tab in tabs bar is a list item. For each tab there's a corresponding div, which contains the body of the tab (it can be any kind of HTML).</p> <div class="example"> @@ -60,7 +62,8 @@ toc= true <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - </pre> +</pre> + </div> <h3 class="section-head" id="h-javaScript-behavior"><a href="#h-javaScript-behavior">JavaScript behavior</a></h3> <p>Tabs are interactive elements, and can be opened, closed, switched, destroyed and selected programmatically via JavaScript. Try this example, poke around and then have a look at the self-explanatory code example below.</p> @@ -113,13 +116,13 @@ toc= true <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"$('#tabs').tabs('closeAll');"</span>></span>closeAll<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"tabs"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab1"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab2"</span>></span>Shop<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab3"</span>></span>Catalog<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab4"</span>></span>T-Shirts<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab5"</span>></span>Brand<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"><<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab1"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab2"</span>></span>Shop<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab3"</span>></span>Catalog<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab4"</span>></span>T-Shirts<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tab5"</span>></span>Brand<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> @@ -127,6 +130,7 @@ toc= true <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab3"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab4"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab4"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + </pre> </div> <h3 class="section-head" id="h-equals"><a href="#h-equals">Equals</a></h3> @@ -159,6 +163,7 @@ toc= true <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab1"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab2"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + </pre> </div> <h3 class="section-head" id="h-livetabs"><a href="#h-livetabs">Livetabs</a></h3> @@ -177,6 +182,7 @@ toc= true <<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"tab-general"</span> data-title=<span class="hljs-string">"General"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"tab-live"</span>>...</<span class="hljs-keyword">div</span>> <<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"tab-additional"</span> data-title=<span class="hljs-string">"Additional"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"tab-live"</span>>...</<span class="hljs-keyword">div</span>> + </pre> </div> <h3 class="section-head" id="h-active"><a href="#h-active">Active</a></h3> @@ -264,6 +270,7 @@ toc= true <span class="hljs-regexp">//</span> <span class="hljs-keyword">or</span> <span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'open'</span>, <span class="hljs-string">'#tab1'</span>); + </pre> <h5>close</h5> <pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'close'</span>, <span class="hljs-number">1</span>); @@ -271,6 +278,7 @@ toc= true <span class="hljs-regexp">//</span> <span class="hljs-keyword">or</span> <span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'close'</span>, <span class="hljs-string">'#tab1'</span>); + </pre> <h5>closeAll</h5> <pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'closeAll'</span>); @@ -283,4 +291,5 @@ toc= true </pre> <h5>destroy</h5> <pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#tabs'</span>).tabs(<span class="hljs-string">'destroy'</span>); -</pre>
\ No newline at end of file +</pre> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/toggleme.md b/exampleSite/content/docs/toggleme.md index a5bda7d..7c611e9 100644 --- a/exampleSite/content/docs/toggleme.md +++ b/exampleSite/content/docs/toggleme.md @@ -8,6 +8,8 @@ bref= "Toggleme is a great way to add a binary option to either display some con toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-demo"><a href="#h-demo">Demo</a></h3> <p>Toggleme works on mobile devices as well as on desktops. To see Toggleme in action, just resize this window or open this page on a mobile device.</p> <div class="example"> @@ -45,10 +47,11 @@ toc = true <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navbar"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide-sm"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"><<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> + </pre> </div> <h3 class="section-head" id="h-usage"><a href="#h-usage">Usage</a></h3> @@ -61,8 +64,9 @@ toc = true <pre class="code skip"><button data-component=<span class="hljs-string">"toggleme"</span> data-target=<span class="hljs-string">"#togglebox-target"</span> data-<span class="hljs-built_in">text</span>=<span class="hljs-string">"Hide Me"</span>>Show Me</button> <<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"togglebox-target"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide"</span>> - ... +... </<span class="hljs-keyword">div</span>> + </pre> </div> <h3 class="section-head" id="h-multiple-targets"><a href="#h-multiple-targets">Multiple targets</a></h3> @@ -79,12 +83,13 @@ toc = true <pre class="code skip"><button data-component=<span class="hljs-string">"toggleme"</span> data-target=<span class="hljs-string">"#togglebox-target-3, #togglebox-target-4"</span> data-<span class="hljs-built_in">text</span>=<span class="hljs-string">"Hide Me"</span>>Show Me</button> <<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"togglebox-target-1"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide"</span>> - ... +... </<span class="hljs-keyword">div</span>> <<span class="hljs-keyword">div</span> <span class="hljs-built_in">id</span>=<span class="hljs-string">"togglebox-target-2"</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"hide"</span>> - ... +... </<span class="hljs-keyword">div</span>> + </pre> </div> <h3 class="section-head" id="h-settings"><a href="#h-settings">Settings</a></h3> @@ -155,3 +160,4 @@ toc = true <h5>destroy</h5> <pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#togglebox-target'</span>).toggleme(<span class="hljs-string">'destroy'</span>); </pre> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/typography.md b/exampleSite/content/docs/typography.md index 40f30ef..2c35a0d 100644 --- a/exampleSite/content/docs/typography.md +++ b/exampleSite/content/docs/typography.md @@ -7,6 +7,8 @@ bref = "Typography is perhaps one of the most important and most visible things toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-get-started"><a href="#h-get-started">Get Started</a></h3> <p>Typography of Kube based on the 4px horizontal grid, it means that for the headers, paragraphs, quotes and any other texts chosen are a combination of line-height, that fit into the 4px grid and help set the horizontal rhythm of design by default.</p> <figure> @@ -449,4 +451,5 @@ toc = true <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>Description<span class="hljs-tag"></<span class="hljs-name">dd</span>></span> <span class="hljs-tag"></<span class="hljs-name">dl</span>></span> </pre> -</div>
\ No newline at end of file +</div> +{{< /rawhtml >}} diff --git a/exampleSite/content/docs/utils.md b/exampleSite/content/docs/utils.md index 3e58bcc..90d053a 100644 --- a/exampleSite/content/docs/utils.md +++ b/exampleSite/content/docs/utils.md @@ -8,6 +8,8 @@ bref= "Here you can find over a dozen of examples of little tiny utilities, that toc = true +++ +{{< rawhtml >}} + <h3 class="section-head" id="h-group"><a href="#h-group">Group</a></h3> <p>Combines float elements to group with a clearfix.</p> <div class="example"> @@ -121,4 +123,5 @@ toc = true <div class="example"> <i class="kube-calendar"></i> <pre class="code skip"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"kube-calendar"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></pre> -</div>
\ No newline at end of file +</div> +{{< /rawhtml >}} diff --git a/exampleSite/content/password-recovery.md b/exampleSite/content/password-recovery.md index 73ae263..cc066ff 100644 --- a/exampleSite/content/password-recovery.md +++ b/exampleSite/content/password-recovery.md @@ -1,7 +1,9 @@ -
+++
title = "Password Recovery"
+++
+
+{{< rawhtml >}}
+
<form id="form-recovery-form" action="" data-component="validate" method="post" class="form form-centered"><input type="hidden" name="authorize-token" value="">
<div class="form-item">
@@ -14,4 +16,6 @@ title = "Password Recovery" </p>
<p><a href="/account/" class="small muted">Back to Log In</a></p>
-</form>
\ No newline at end of file +
+</form>
+{{< /rawhtml >}}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html index de7788a..c3cc7a6 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -1,58 +1,63 @@ -{{ define "title"}} {{ .Title}} {{end}} -{{ define "header"}} {{ partial "header" .}} {{end}} - -{{ define "main"}} +{{ define "title"}} {{ .Title}} {{end}} {{ define "header"}} {{ partial "header" +.}} {{end}} {{ define "main"}} <div class="push-center" itemscope itemtype="http://schema.org/BlogPosting"> - {{ template "_internal/schema.html" . }} -<div id="hero"> - <h1 itemprop="headline"> {{.Title}}</h1> + {{ template "_internal/schema.html" . }} + <div id="hero"> + <h1 itemprop="headline">{{.Title}}</h1> {{ if .Description }} -<blockquote itemprop="description">{{ .Description }}</blockquote> -{{ end }} -<time class="post-time">{{ partial "post/meta" . }}</time> -</div> -<div id="post-box"> -<div id="post" itemprop="articleBody"> - - {{.Content | safeHTML}} - -</div> + <blockquote itemprop="description">{{ .Description }}</blockquote> + {{ end }} + <time class="post-time">{{ partial "post/meta" . }}</time> + </div> + <div id="post-box"> + <div id="post" itemprop="articleBody">{{.Content | safeHTML}}</div> -<div class="form-subscribe"> - <div id="form-subscribe-success" style="display: none;"></div> -<div id="form-subscribe-box"> + <div class="form-subscribe"> + <div id="form-subscribe-success" style="display: none"></div> + <div id="form-subscribe-box"> <h4>All about Redactor, Grafs and Kube.</h4> <p>Monthly news & updates. Just straight to the point.</p> - <form action="" name="mc-embedded-subscribe-form" method="post" class="form"><input type="hidden" name="authorize-token" value=""> - <div id="subscribe-email-validation-error"></div> - <div class="form-item"> - <div class="append"> - <input type="email" name="EMAIL" id="mce-EMAIL" placeholder="Email"> - <button class="button">Subscribe</button> - </div> + <form + action="" + name="mc-embedded-subscribe-form" + method="post" + class="form" + > + <input type="hidden" name="authorize-token" value="" /> + <div id="subscribe-email-validation-error"></div> + <div class="form-item"> + <div class="append"> + <input + type="email" + name="EMAIL" + id="mce-EMAIL" + placeholder="Email" + /> + <button class="button">Subscribe</button> </div> - - <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> - <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="" tabindex="-1" value=""></div> + </div> + + <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> + <div style="position: absolute; left: -5000px" aria-hidden="true"> + <input type="text" name="" tabindex="-1" value="" /> + </div> </form> - <div class="form-subscribe-twitter"><div>or</div> <a href="http://twitter.com/jebli_7">Follow us on Twitter</a></div> + <div class="form-subscribe-twitter"> + <div>or</div> + <a href="http://twitter.com/jebli_7">Follow us on Twitter</a> + </div> + </div> </div> -</div> <div class=""> - {{ partial "post/byauthor" . }} - {{ partial "post/related-content" . }} + {{ partial "post/byauthor" . }} {{ partial "post/related-content" . }} </div> - + {{ if .Site.DisqusShortname }} - <article> - {{ template "_internal/disqus.html" . }} - </article> + <article>{{ template "_internal/disqus.html" . }}</article> {{ end }} - -</div> + </div> </div> -{{ end }} -{{ define "footer"}} {{ partial "footer.html" .}} {{ end }}
\ No newline at end of file +{{ end }} {{ define "footer"}} {{ partial "footer.html" .}} {{ end }} diff --git a/layouts/shortcodes/rawhtml.html b/layouts/shortcodes/rawhtml.html new file mode 100644 index 0000000..b90bea2 --- /dev/null +++ b/layouts/shortcodes/rawhtml.html @@ -0,0 +1,2 @@ +<!-- raw html --> +{{.Inner}} |