Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 11:54:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add column sizes specs

Browse Source
This commit is contained in:
Jeremy Thomas
2022-05-07 22:16:09 +01:00
parent 895e17ab14
commit 0e7659d624
3 changed files with 247 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
docs/cyp/grid/columns.html
View File

@@ -1,6 +1,12 @@
---
layout: cypress
title: Grid/Columns
screens:
- mobile
- tablet
- desktop
- widescreen
- fullhd
widths:
- three-quarters
- two-thirds
@@ -54,6 +60,12 @@ widths:
Column {{ width }}
</div>
{% endfor %}
{% for i in (1..12) %}
<div class="column is-{{ i }}">
Column {{ i }}
</div>
{% endfor %}
{% endcapture %}
<div id="columns" class="columns">
@@ -105,5 +117,63 @@ widths:
</div>
<div id="columns-special" class="columns is-multiline">
{{ special_columns }}
<div class="column is-narrow">
Column narrow
</div>
<div class="column is-full">
Column full
</div>
{% for width in page.widths %}
<div class="column is-{{ width }}">
Column {{ width }}
</div>
<div class="column is-offset-{{ width }}">
Column {{ width }}
</div>
{% endfor %}
{% for i in (1..12) %}
<div class="column is-{{ i }}">
Column {{ i }}
</div>
<div class="column is-offset-{{ i }}">
Column {{ i }}
</div>
{% endfor %}
</div>
{% for screen in page.screens %}
<div id="columns-special-{{ screen }}" class="columns is-multiline is-{{ screen }}">
<div class="column is-narrow-{{ screen }}">
Column narrow
</div>
<div class="column is-full-{{ screen }}">
Column full
</div>
{% for width in page.widths %}
<div class="column is-{{ width }}-{{ screen }}">
Column {{ width }}
</div>
<div class="column is-offset-{{ width }}-{{ screen }}">
Column {{ width }}
</div>
{% endfor %}
{% for i in (1..12) %}
<div class="column is-{{ i }}-{{ screen }}">
Column {{ i }}
</div>
<div class="column is-offset-{{ i }}-{{ screen }}">
Column {{ i }}
</div>
{% endfor %}
</div>
{% endfor %}