Init v1

docs/documentation/layout/section.html

@@ -1,59 +1,68 @@
 ---
 title: Section
-layout: documentation
+layout: docs
+theme: library
 fullwidth: true
 doc-tab: layout
 doc-subtab: section
 breadcrumb:
-- home
-- documentation
-- layout
-- layout-section
+  - home
+  - documentation
+  - layout
+  - layout-section
 ---
-
 {% capture section_example %}
 <section class="section">
   <h1 class="title">Section</h1>
   <h2 class="subtitle">
-    A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
+    A simple container to divide your page into <strong>sections</strong>, like
+    the one you're currently reading.
   </h2>
 </section>
 {% endcapture %}
-
 {% capture section_medium_example %}
 <section class="section is-medium">
   <h1 class="title">Medium section</h1>
   <h2 class="subtitle">
-    A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
+    A simple container to divide your page into <strong>sections</strong>, like
+    the one you're currently reading.
   </h2>
 </section>
 {% endcapture %}
-
 {% capture section_large_example %}
 <section class="section is-large">
   <h1 class="title">Large section</h1>
   <h2 class="subtitle">
-    A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
+    A simple container to divide your page into <strong>sections</strong>, like
+    the one you're currently reading.
   </h2>
 </section>
 {% endcapture %}
 
 <div class="content">
   <p>
-    The <code>section</code> components are simple layout elements with responsive padding. They are best used as <strong>direct</strong> children of <code>body</code>.
+    The <code>section</code> components are simple layout elements with responsive padding. They are best used as
+    <strong>direct</strong> children of <code>body</code>.
   </p>
 </div>
 
-{% include elements/snippet.html content=section_example horizontal=true fullwidth=true %}
-
-{% include elements/anchor.html name="Sizes" %}
+{%
+  include docs/elements/snippet.html content=section_example horizontal=true
+  fullwidth=true
+%}
+{% include docs/elements/anchor.html name="Sizes" %}
 
 <div class="content">
-  <p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
+  <p>
+    You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.
+  </p>
 </div>
 
-{% include elements/snippet.html content=section_medium_example horizontal=true fullwidth=true %}
-
-{% include elements/snippet.html content=section_large_example horizontal=true fullwidth=true %}
-
-{% include components/variables.html %}
+{%
+  include docs/elements/snippet.html content=section_medium_example
+  horizontal=true fullwidth=true
+%}
+{%
+  include docs/elements/snippet.html
+  content=section_large_example horizontal=true fullwidth=true
+%}