Init v1

2026-03-17 19:04:30 -07:00 · 2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
--- a/docs/documentation/columns/sizes.html
+++ b/docs/documentation/columns/sizes.html
@@ -1,15 +1,16 @@
 ---
 title: Column sizes
-layout: documentation
+layout: docs
+theme: library
+doc-library: true
 doc-tab: columns
 doc-subtab: sizes
 breadcrumb:
- home
- documentation
- columns
- columns-sizes
+  - home
+  - documentation
+  - columns
+  - columns-sizes
 ---
-
 {% capture columns_sizes %}
 <div class="columns">
  <div class="column is-four-fifths">is-four-fifths</div>
@@ -65,7 +66,6 @@ breadcrumb:
  <div class="column">Auto</div>
 </div>
 {% endcapture %}
-
 {% capture columns_offset %}
 <div class="columns is-mobile">
  <div class="column is-half is-offset-one-quarter"></div>
@@ -83,11 +83,10 @@ breadcrumb:
  <div class="column is-11 is-offset-1"></div>
 </div>
 {% endcapture %}
-
 {% capture columns_narrow %}
 <div class="columns">
  <div class="column is-narrow">
-    <div class="box" style="width: 200px;">
+    <div class="box" style="width: 200px">
      <p class="title is-5">Narrow column</p>
      <p class="subtitle">This column is only 200px wide.</p>
    </div>
@@ -95,7 +94,9 @@ breadcrumb:
  <div class="column">
    <div class="box">
      <p class="title is-5">Flexible column</p>
-      <p class="subtitle">This column will take up the remaining space available.</p>
+      <p class="subtitle">
+        This column will take up the remaining space available.
+      </p>
    </div>
  </div>
 </div>
@@ -159,10 +160,10 @@ breadcrumb:
    </p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
 </div>

@@ -173,10 +174,10 @@ breadcrumb:
    </p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
 </div>

@@ -187,10 +188,10 @@ breadcrumb:
    </p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
 </div>

@@ -201,10 +202,10 @@ breadcrumb:
    </p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
 </div>

@@ -215,10 +216,10 @@ breadcrumb:
    </p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
 </div>

@@ -229,10 +230,10 @@ breadcrumb:
    </p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
 </div>

@@ -243,10 +244,10 @@ breadcrumb:
    </p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
 </div>

@@ -257,10 +258,10 @@ breadcrumb:
    </p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
 </div>

@@ -271,18 +272,20 @@ breadcrumb:
    </p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij">Auto</p>
+    <p class="bd-notification">Auto</p>
  </div>
 </div>

 <div class="bd-highlight-full">
-  {% highlight html %}{{ columns_sizes }}{% endhighlight %}
+  {% highlight html -%}
+  {{- columns_sizes -}}
+  {%- endhighlight %}
 </div>

-{% include elements/anchor.html name="12 columns system" %}
+{% include docs/elements/anchor.html name="12 columns system" %}

 <div class="content">
  <p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
@@ -304,7 +307,10 @@ breadcrumb:

 <div class="message is-info">
  <p class="message-header">Naming convention</p>
-  <p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
+  <p class="message-body">
+    Each modifier class is named after
+    <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.
+  </p>
 </div>
 <div class="columns">
  <div class="column is-1">
@@ -349,34 +355,34 @@ breadcrumb:
    <p class="bd-notification is-primary"><code>is-2</code></p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
 </div>
 <div class="columns">
@@ -384,31 +390,31 @@ breadcrumb:
    <p class="bd-notification is-primary"><code>is-3</code></p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
 </div>
 <div class="columns">
@@ -416,28 +422,28 @@ breadcrumb:
    <p class="bd-notification is-primary"><code>is-4</code></p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
 </div>
 <div class="columns">
@@ -445,25 +451,25 @@ breadcrumb:
    <p class="bd-notification is-primary"><code>is-5</code></p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
 </div>
 <div class="columns">
@@ -471,22 +477,22 @@ breadcrumb:
    <p class="bd-notification is-primary"><code>is-6</code></p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
 </div>
 <div class="columns">
@@ -494,19 +500,19 @@ breadcrumb:
    <p class="bd-notification is-primary"><code>is-7</code></p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
 </div>
 <div class="columns">
@@ -514,16 +520,16 @@ breadcrumb:
    <p class="bd-notification is-primary"><code>is-8</code></p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
 </div>
 <div class="columns">
@@ -531,13 +537,13 @@ breadcrumb:
    <p class="bd-notification is-primary"><code>is-9</code></p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
 </div>
 <div class="columns">
@@ -545,10 +551,10 @@ breadcrumb:
    <p class="bd-notification is-primary"><code>is-10</code></p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
  <div class="column">
-    <p class="bd-notification is-wajofij has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
 </div>
 <div class="columns">
@@ -556,7 +562,7 @@ breadcrumb:
    <p class="bd-notification is-primary"><code>is-11</code></p>
  </div>
  <div class="column">
-    <p class="bd-notification is-fojeisj has-text-centered">1</p>
+    <p class="bd-notification has-text-centered">1</p>
  </div>
 </div>
 <div class="columns">
@@ -565,11 +571,13 @@ breadcrumb:
  </div>
 </div>

-{% include elements/anchor.html name="Offset" %}
+{% include docs/elements/anchor.html name="Offset" %}

 <div class="content">
  <p>
-    While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
+    While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create
+    horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like
+    <code>.is-offset-x</code>:
  </p>
 </div>

@@ -610,18 +618,23 @@ breadcrumb:
 </div>

 <div class="bd-highlight-full">
-  {% highlight html %}{{ columns_offset }}{% endhighlight %}
+  {% highlight html -%}
+  {{- columns_offset -}}
+  {%- endhighlight %}
 </div>

-{% include elements/anchor.html name="Narrow column" %}
+{% include docs/elements/anchor.html name="Narrow column" %}

 <div class="content">
-  <p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
+  <p>
+    If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The
+    other column(s) will fill up the remaining space.
+  </p>
 </div>

 <div class="columns">
  <div class="column is-narrow">
-    <div class="box" style="width: 200px;">
+    <div class="box" style="width: 200px">
      <p class="title is-5">Narrow column</p>
      <p class="subtitle">This column is only 200px wide.</p>
    </div>
@@ -635,11 +648,16 @@ breadcrumb:
 </div>

 <div class="bd-highlight-full">
-  {% highlight html %}{{ columns_narrow }}{% endhighlight %}
+  {% highlight html -%}
+  {{- columns_narrow -}}
+  {%- endhighlight %}
 </div>

 <div class="content">
-  <p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
+  <p>
+    As for the size modifiers, you can have narrow columns for different
+    <strong>breakpoints</strong>:
+  </p>
  <ul>
    <li>
      <code>.is-narrow-mobile</code>