70 lines
2.2 KiB
HTML
70 lines
2.2 KiB
HTML
---
|
|
layout: cypress
|
|
title: Grid/Grid
|
|
breakpoints:
|
|
- name: mobile
|
|
visibility: mobile
|
|
count: 2
|
|
suffix: '-mobile'
|
|
- name: tablet
|
|
visibility: tablet-only
|
|
count: 4
|
|
suffix: '-tablet'
|
|
- name: desktop
|
|
visibility: desktop-only
|
|
count: 8
|
|
suffix: '-desktop'
|
|
- name: widescreen
|
|
visibility: widescreen-only
|
|
count: 12
|
|
suffix: '-widescreen'
|
|
- name: fullhd
|
|
visibility: fullhd
|
|
count: 16
|
|
suffix: '-fullhd'
|
|
---
|
|
|
|
<script src="{{ site.url }}/lib/playground.js"></script>
|
|
|
|
<section style="padding: 3rem;">
|
|
{% for breakpoint in page.breakpoints %}
|
|
<p style="display: none;" class="block is-block-{{ breakpoint.visibility }}">
|
|
Current breakpoint: <strong>{{ breakpoint.name }}</strong>
|
|
</p>
|
|
{% endfor %}
|
|
|
|
<div style="display: flex; flex-wrap: wrap;">
|
|
{% for breakpoint in page.breakpoints %}
|
|
<div style="margin: 0 1.5em 1.5em 0; position: relative; width: 180px;">
|
|
<p style="border: 2px solid hsl(153, 53%, 53%); border-radius: 1em; pointer-events: none; display: none; position: absolute; left: -1em; right: -1em; top: -1em; bottom: -1em;" class="has-background-success-light is-block-{{ breakpoint.visibility }}"></p>
|
|
<div style="position: relative;">
|
|
<p style="font-size: 0.75em"><strong>{{ breakpoint.count }}</strong> columns on {{ breakpoint.name }}</p>
|
|
<input id="columns" class="jsColumns" type="range" min="1" max="16" value="{{ breakpoint.count }}" data-suffix="{{ breakpoint.suffix }}">
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div id="grid" class="grid">
|
|
<div class="cell">#1</div>
|
|
<div class="cell">#2</div>
|
|
<div class="cell">#3</div>
|
|
<div class="cell">#4</div>
|
|
<div class="cell">#5</div>
|
|
<div class="cell">#6</div>
|
|
<div class="cell">#7</div>
|
|
<div class="cell">#8</div>
|
|
<div class="cell">#9</div>
|
|
<div class="cell">#10</div>
|
|
<div class="cell">#11</div>
|
|
<div class="cell">#12</div>
|
|
<div class="cell">#13</div>
|
|
<div class="cell">#14</div>
|
|
<div class="cell">#15</div>
|
|
<div class="cell">#16</div>
|
|
<div class="cell">#17</div>
|
|
<div class="cell">#18</div>
|
|
<div class="cell">#19</div>
|
|
<div class="cell">#20</div>
|
|
</div>
|
|
</section>
|