mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 10:14:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
153
docs/documentation/grid/fixed-grid.html
Normal file
153
docs/documentation/grid/fixed-grid.html
Normal file
@@ -0,0 +1,153 @@
|
||||
---
|
||||
title: Fixed Grid
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: grid
|
||||
breakpoints:
|
||||
- mobile
|
||||
- tablet
|
||||
- desktop
|
||||
- widescreen
|
||||
- fullhd
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- grid
|
||||
- grid-fixed
|
||||
---
|
||||
|
||||
{% capture markdown %}
|
||||
If instead of having a minimum column width you want a **fixed** number of columns, wrap your grid in a `fixed-grid` container.
|
||||
|
||||
By default, this fixed grid has **2 columns**:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% capture fixed_count_code %}
|
||||
<div class="fixed-grid">
|
||||
<div class="grid">
|
||||
{% for i in (1..11) %}<div class="cell">Cell {{ i }}</div>
|
||||
{% endfor %}<div class="cell">Cell 12</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture fixed_count %}
|
||||
<div class="fixed-grid">
|
||||
<div class="grid">
|
||||
{% for i in (1..12) %}
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">
|
||||
Cell {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{{ fixed_count }}
|
||||
|
||||
{% include docs/elements/snippet.html content=fixed_count_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Applying fixed grid modifiers" %}
|
||||
|
||||
{% capture markdown %}
|
||||
You can change the **column count** by adding the `has-$n-cols` modifier class with a value ranging from `1` to `12`:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Column Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for i in (0..12) %}
|
||||
<tr>
|
||||
<td><code>has-{{ i }}-cols</code></td>
|
||||
<td><code>{{ i }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include docs/elements/anchor.html name="Container breakpoints" %}
|
||||
|
||||
{% capture markdown %}
|
||||
You can specify a different column count **per breakpoint**:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Column Count</th>
|
||||
<th>Mobile</th>
|
||||
<th>Tablet</th>
|
||||
<th>Desktop</th>
|
||||
<th>Widescreen</th>
|
||||
<th>Full HD</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Until <code>{{ site.data.breakpoints.mobile.to }}px</code></td>
|
||||
<td>From <code>{{ site.data.breakpoints.tablet.from }}px</code></td>
|
||||
<td>From <code>{{ site.data.breakpoints.desktop.from }}px</code></td>
|
||||
<td>From <code>{{ site.data.breakpoints.widescreen.from }}px</code></td>
|
||||
<td>From <code>{{ site.data.breakpoints.fullhd.from }}px</code></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for i in (1..12) %}
|
||||
<tr>
|
||||
<th>{{ i }}</th>
|
||||
{% for bp in page.breakpoints %}
|
||||
<td><code>has-cols-{{ i }}-{{ bp }}</code></td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include docs/elements/anchor.html name="Auto Count Fixed Grid" %}
|
||||
|
||||
{% capture markdown %}
|
||||
By adding the `has-auto-count` modifier, the fixed grid will **automatically** change its count for each **breakpoint**:
|
||||
|
||||
* 2 on mobile
|
||||
* 4 on tablet
|
||||
* 8 on desktop
|
||||
* 12 on widescreen
|
||||
* 16 on fullhd
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% capture auto_count %}
|
||||
<div class="fixed-grid has-auto-count">
|
||||
<div class="grid">
|
||||
{% for i in (1..16) %}
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">
|
||||
Cell {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture auto_count_code %}
|
||||
<div class="fixed-grid has-auto-count">
|
||||
<div class="grid">
|
||||
{% for i in (1..15) %}<div class="cell">Cell {{ i }}</div>
|
||||
{% endfor %}<div class="cell">Cell 16</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{{ auto_count }}
|
||||
|
||||
{% include docs/elements/snippet.html content=auto_count_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
304
docs/documentation/grid/grid-cells.html
Normal file
304
docs/documentation/grid/grid-cells.html
Normal file
@@ -0,0 +1,304 @@
|
||||
---
|
||||
title: Grid Cells
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: grid
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- grid
|
||||
- grid-cells
|
||||
---
|
||||
|
||||
{% capture markdown %}
|
||||
Each Bulma grid is comprised of several **cells**. You can adjust the width and height of each of these cells individually, and for each separate breakpoint.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<th>Class</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Which column the cell <strong>starts</strong> at</td>
|
||||
<td><code>is-col-start</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-col-start-2"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Which column the cell <strong>ends</strong> at, counting <em>from the end</em></td>
|
||||
<td><code>is-col-from-end</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-col-from-end-1"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>How many columns</strong> the cell will span</td>
|
||||
<td><code>is-col-span</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-col-span-3"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Which row the cell <strong>starts</strong> at</td>
|
||||
<td><code>is-row-start</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-row-start-2"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Which row the cell <strong>ends</strong> at, counting <em>from the end</em></td>
|
||||
<td><code>is-row-from-end</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-row-from-end-1"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>How many rows</strong> the cell will span</td>
|
||||
<td><code>is-row-span</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-row-span-3"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Column Start" %}
|
||||
|
||||
{% capture col_start_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-col-start-3">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture col_start %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-col-start-3">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change which column a cell ends at, counting from the end.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ col_start }}
|
||||
|
||||
{% include docs/elements/snippet.html content=col_start_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Column From End" %}
|
||||
|
||||
{% capture col_end_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-col-from-end-2">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture col_end %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-col-from-end-2">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change which column a cell starts at.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ col_end }}
|
||||
|
||||
{% include docs/elements/snippet.html content=col_end_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Column Span" %}
|
||||
|
||||
{% capture col_span_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-col-span-2">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture col_span %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-col-span-2">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change how many columns a cell spans.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ col_span }}
|
||||
|
||||
{% include docs/elements/snippet.html content=col_span_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Row Start" %}
|
||||
|
||||
{% capture row_start_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-row-start-3">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture row_start %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-row-start-3">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change which row a cell ends at, counting from the end.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ row_start }}
|
||||
|
||||
{% include docs/elements/snippet.html content=row_start_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Row From End" %}
|
||||
|
||||
{% capture row_end_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-row-from-end-1">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture row_end %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-row-from-end-1">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change which row a cell starts at.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ row_end }}
|
||||
|
||||
{% include docs/elements/snippet.html content=row_end_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Row Span" %}
|
||||
|
||||
{% capture row_span_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-row-span-2">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture row_span %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-row-span-2">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change how many rows a cell spans.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ row_span }}
|
||||
|
||||
{% include docs/elements/snippet.html content=row_span_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
|
||||
113
docs/documentation/grid/playground.html
Normal file
113
docs/documentation/grid/playground.html
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: Bulma Grid Playground
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: grid
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- grid
|
||||
- grid-playground
|
||||
---
|
||||
|
||||
{% include docs/elements/anchor.html name="Smart Grid" %}
|
||||
|
||||
<div class="content">You can use this example to try out the Smart Grid with different column widths and different gap values.</div>
|
||||
|
||||
<div class="block js-modifier" data-target="js-grid" data-output="js-output-grid" data-property="is-col-min">
|
||||
<div class="buttons are-small has-addons">
|
||||
<span class="button is-static">
|
||||
Minimum Column Width
|
||||
</span>
|
||||
<button class="js-modifier-property dn" data-property="is-col-min"></button>
|
||||
<button class="button js-modifier-value is-link">Default</button>
|
||||
{% for i in (1..12) %}
|
||||
<button class="button js-modifier-value" data-value="{{ i }}">{{ i }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block js-modifier" data-target="js-grid" data-output="js-output-grid">
|
||||
<div class="buttons are-small has-addons">
|
||||
<span class="button is-static">
|
||||
Property
|
||||
</span>
|
||||
<button class="button is-link js-modifier-property" data-property="is-gap">Gap</button>
|
||||
<button class="button js-modifier-property" data-property="is-column-gap">Column Gap</button>
|
||||
<button class="button js-modifier-property" data-property="is-row-gap">Row Gap</button>
|
||||
<span class="button is-static">
|
||||
Value
|
||||
</span>
|
||||
<button class="button js-modifier-value is-link">Default</button>
|
||||
{% for i in (0..7) %}
|
||||
<button class="button js-modifier-value" data-value="{{ i }}">{{ i }}</button>
|
||||
<button class="button js-modifier-value" data-value="{{ i }}.5">{{ i }}.5</button>
|
||||
{% endfor %}
|
||||
<button class="button js-modifier-value" data-value="8">8</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block flex has-text-small">
|
||||
<strong>
|
||||
HTML
|
||||
</strong>
|
||||
<code><div class="<span id="js-output-grid">grid</span>"></code>
|
||||
</div>
|
||||
|
||||
{% capture auto_grid %}
|
||||
<div id="js-grid" class="grid">
|
||||
{% for i in (1..24) %}
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">
|
||||
Cell {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{{ auto_grid }}
|
||||
|
||||
{% include docs/elements/anchor.html name="Fixed Grid" %}
|
||||
|
||||
<div class="content">You can use these controls to try out the Fixed Grid with different columns counts.</div>
|
||||
|
||||
<div class="block js-modifier" data-target="js-fixed-grid" data-output="js-output-fixed-grid" data-property-start="has" data-property-end="cols">
|
||||
<div class="buttons are-small has-addons">
|
||||
<span class="button is-static">
|
||||
Column Count
|
||||
</span>
|
||||
<button class="js-modifier-property dn" data-property-start="has" data-property-end="cols"></button>
|
||||
<button class="button js-modifier-value is-link">Default</button>
|
||||
{% for i in (1..12) %}
|
||||
<button class="button js-modifier-value" data-value="{{ i }}">{{ i }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block flex has-text-small">
|
||||
<strong>
|
||||
HTML
|
||||
</strong>
|
||||
<code><div class="<span id="js-output-fixed-grid">fixed-grid</span>"></code>
|
||||
</div>
|
||||
|
||||
{% capture fixed_grid_playground %}
|
||||
<div id="js-fixed-grid" class="fixed-grid js-resizable" data-target="js-resize-value">
|
||||
<button class="js-resizable-handle"><div></div><div></div></button>
|
||||
<div class="grid">
|
||||
{% for i in (1..24) %}
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">
|
||||
Cell {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
Use the <strong>handle</strong> on the right side to change the container's width: <code id="js-resize-value">1200</code>
|
||||
</div>
|
||||
|
||||
{{ fixed_grid_playground }}
|
||||
|
||||
<div style="padding-top: 50vh;"><em>Space intentionally left blank to prevent layout jumps</em></div>
|
||||
110
docs/documentation/grid/smart-grid.html
Normal file
110
docs/documentation/grid/smart-grid.html
Normal file
@@ -0,0 +1,110 @@
|
||||
---
|
||||
title: Smart Grid
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: grid
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- grid
|
||||
- grid-smart
|
||||
---
|
||||
|
||||
{% capture markdown %}
|
||||
Bulma v1 comes with a new **Smart Grid**. This grid is a 2 dimensional layout component that features **flexible columns**: Bulma will _fit_ as many columns as possible, given a minimum column width and a column and row gap.
|
||||
|
||||
By default, the Smart Grid has:
|
||||
|
||||
* a minimum column width of `9rem`
|
||||
* a gap of `0.75rem`
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% capture basic_grid_code %}
|
||||
<div class="grid">
|
||||
{% for i in (1..23) %}<div class="cell">Cell {{ i }}</div>
|
||||
{% endfor %}<div class="cell">Cell 24</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture basic_grid %}
|
||||
<div class="grid">
|
||||
{% for i in (1..24) %}<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">Cell {{ i }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{{ basic_grid }}
|
||||
|
||||
{% include docs/elements/snippet.html content=basic_grid_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Smart Grid modifiers" %}
|
||||
|
||||
{% capture markdown %}
|
||||
You can change the minimum column width by increments of `1.5rem`, by adding the `is-col-min` modifier class with a value ranging from `0` to `12`:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for i in (1..12) %}
|
||||
<tr>
|
||||
<td><code>is-col-min-{{ i }}</code></td>
|
||||
<td><code>{{ i | times: 1.5 }}rem</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% capture markdown %}
|
||||
You can also change the `gap`, `column-gap` and/or `row-gap` by increments of `0.5rem`:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Gap Class</th>
|
||||
<th>Column Gap</th>
|
||||
<th>Row Gap</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for i in (0..8) %}
|
||||
<tr>
|
||||
<td><code>gap-{{ i }}</code></td>
|
||||
<td><code>column-gap-{{ i }}</code></td>
|
||||
<td><code>row-gap-{{ i }}</code></td>
|
||||
<td><code>{{ i | times: 0.5 }}rem</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% capture auto_grid_code %}
|
||||
<div class="grid">
|
||||
{% for i in (1..23) %}<div class="cell">Cell {{ i }}</div>
|
||||
{% endfor %}<div class="cell">Cell 24</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture auto_grid %}
|
||||
<div id="js-grid" class="grid">
|
||||
{% for i in (1..24) %}
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">
|
||||
Cell {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endcapture %}
|
||||
Reference in New Issue
Block a user