mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Update responsiveness breakpoints values in docs (#1264)
* Add breakpoints variables in responsivness docs page * Update breakpoints list values by looping through page.breakpoints * Add link to responsiveness variables repo file * Add mixins variables in responsivness docs page * Update mixins list values by looping through page.mixins * Add link to responsiveness mixins repo file * Update responsivness demo table header * Add responsivness variables reference table * Add variables to repo files urls (dry) * Add breakpoints as jekyll data * Use responsiveness breakpoints from jekyll data * Replace breakpoints.yml with breakpoints.json and update relevant code accordingly * Update URLs to source files in responsiveness docs page
This commit is contained in:
bstashio
Jeremy Thomas
parent
d010b31c3f
commit
59fb1dba28
31
docs/_data/breakpoints.json
Normal file
31
docs/_data/breakpoints.json
Normal file
@ -0,0 +1,31 @@
|
||||
{
|
||||
"mobile": {
|
||||
"id": "mobile",
|
||||
"name": "Mobile",
|
||||
"from": 0,
|
||||
"to": 768
|
||||
},
|
||||
"tablet": {
|
||||
"id": "tablet",
|
||||
"name": "Tablet",
|
||||
"from": 769,
|
||||
"to": 1023
|
||||
},
|
||||
"desktop": {
|
||||
"id": "desktop",
|
||||
"name": "Desktop",
|
||||
"from": 1024,
|
||||
"to": 1215
|
||||
},
|
||||
"widescreen": {
|
||||
"id": "widescreen",
|
||||
"name": "Widescreen",
|
||||
"from": 1216,
|
||||
"to": 1407
|
||||
},
|
||||
"fullhd": {
|
||||
"id": "fullhd",
|
||||
"name": "FullHD",
|
||||
"from": 1408
|
||||
}
|
||||
}
|
||||
@ -1 +1 @@
|
||||
<span class="tag">>= 1008px</span>
|
||||
<span class="tag">>= {{ site.data.breakpoints.desktop.from }}px</span>
|
||||
|
||||
@ -1 +1 @@
|
||||
<span class="tag">>= 1392px</span>
|
||||
<span class="tag">>= {{ site.data.breakpoints.fullhd.from }}px</span>
|
||||
|
||||
@ -1 +1 @@
|
||||
<span class="tag">< 1008px</span>
|
||||
<span class="tag">< {{ site.data.breakpoints.desktop.from }}px</span>
|
||||
|
||||
@ -1 +1 @@
|
||||
<span class="tag">>= 1200px</span>
|
||||
<span class="tag">>= {{ site.data.breakpoints.widescreen.from }}px</span>
|
||||
|
||||
@ -3,6 +3,17 @@ title: Responsiveness
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: responsiveness
|
||||
variables:
|
||||
- name: $gap
|
||||
value: 32px
|
||||
- name: $tablet
|
||||
value: 769px
|
||||
- name: $desktop
|
||||
value: 960px + (2 * $gap)
|
||||
- name: $widescreen
|
||||
value: 1152px + (2 * $gap)
|
||||
- name: $fullhd
|
||||
value: 1344px + (2 * $gap)
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
@ -28,80 +39,70 @@ doc-subtab: responsiveness
|
||||
|
||||
{% include anchor.html name="Breakpoints" %}
|
||||
|
||||
{% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.github %}
|
||||
{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.github %}
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma has 5 breakpoints:</p>
|
||||
<p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p>
|
||||
<ul>
|
||||
<li><code>mobile</code>: up to <code>768px</code></li>
|
||||
<li><code>tablet</code>: from <code>769px</code></li>
|
||||
<li><code>desktop</code>: from <code>1008px</code></li>
|
||||
<li><code>widescreen</code>: from <code>1200px</code></li>
|
||||
<li><span class="tag is-success">New!</span> <code>fullhd</code>: from <code>1392px</code></li>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<li>{% if breakpoint.id == 'fullhd' %}<span class="tag is-success">New!</span> {% endif %}<code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'Mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<p>Bulma uses 9 responsive mixins:</p>
|
||||
|
||||
<p>Bulma uses <a href="{{ mixins_file_url }}" target="_blank">9 responsive mixins</a>:</p>
|
||||
<ul>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
{% case breakpoint.id %}
|
||||
{% when 'mobile' %}
|
||||
<li>
|
||||
<code>=mobile</code><br>
|
||||
until <code>768px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=tablet</code><br>
|
||||
from <code>769px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=tablet-only</code><br>
|
||||
from <code>769px</code> and until <code>1007px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=touch</code><br>
|
||||
until <code>1007px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop</code><br>
|
||||
from <code>1008px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop-only</code><br>
|
||||
from <code>1008px</code> and until <code>1199px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=widescreen</code><br>
|
||||
from <code>1200px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=widescreen-only</code><br>
|
||||
from <code>1200px</code> and until <code>1391px</code>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% when 'fullhd' %}
|
||||
<li>
|
||||
<span class="tag is-success">New!</span>
|
||||
<code>=fullhd</code><br>
|
||||
from <code>1392px</code>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code>
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}-only</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code> and until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% if breakpoint.id == 'tablet' %}
|
||||
<li>
|
||||
<code>=touch</code><br>
|
||||
until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endcase %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th style="width: 20%;">
|
||||
Mobile<br>
|
||||
Up to <code>768px</code>
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
Tablet<br>
|
||||
Between <code>769px</code> and <code>1007px</code>
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
Desktop<br>
|
||||
Between <code>1008px</code> and <code>1199px</code>
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
Widescreen<br>
|
||||
Between <code>1200px</code> and <code>1391px</code>
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
FullHD<br>
|
||||
<code>1392px</code> and above
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -188,5 +189,10 @@ doc-subtab: responsiveness
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% capture custom_message %}You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}
|
||||
|
||||
{% include variables.html custom_message = custom_message %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user