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

Add utilities documentation

Browse Source
This commit is contained in:
Jeremy Thomas
2021-09-19 23:36:15 +01:00
parent e145c9d680
commit f6c0cfc813
19 changed files with 1227 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
docs/documentation/utilities/responsive-mixins.html
View File

@@ -1,11 +1,231 @@
---
title: Mixins
title: Responsive Mixins
layout: documentation
doc-tab: utilities
doc-subtab: mixins
doc-subtab: responsive-mixins
fullmain: true
breadcrumb:
- home
- documentation
- utilities
- utilities-responsive-mixins
---
<div class="content">
<p>
Bulma is <strong>responsive by default</strong>. <a href="{{ site.url}}/overview/responsiveness/">Learn more about Bulma's responsiveness</a>.
</p>
<div class="content">
By having <strong>4 breakpoints</strong> and supporting <strong>5 screen sizes</strong>, Bulma can support a lot of different setups. To simplify your development process, the framework provides several <strong>responsive mixins</strong> that you can use to create a <strong>responsive design</strong>:
</div>
</div>
{% capture inc-mobile %}
@include mobile {
// Styles applied
// below $tablet
}
{% endcapture %}
{% capture inc-tablet %}
@include tablet {
// Styles applied
// above $tablet
}
{% endcapture %}
{% capture inc-tablet-only %}
@include tablet-only {
// Styles applied
// between $tablet
// and $desktop
}
{% endcapture %}
{% capture inc-desktop-only %}
@include desktop-only {
// Styles applied
// between $desktop
// and $widescreen
}
{% endcapture %}
{% capture inc-widescreen-only %}
@include widescreen-only {
// Styles applied
// between $widescreen
// and $fullhd
}
{% endcapture %}
{% capture inc-desktop %}
@include desktop {
// Styles applied
// above $desktop
}
{% endcapture %}
{% capture inc-widescreen %}
@include widescreen {
// Styles applied
// above $widescreen
}
{% endcapture %}
{% capture inc-fullhd %}
@include fullhd {
// Styles applied
// above $fullhd
}
{% endcapture %}
{% capture inc-touch %}
@include touch {
// Styles applied
// below $desktop
}
{% endcapture %}
{% capture inc-until-widescreen %}
@include until-widescreen {
// Styles applied
// below $widescreen
}
{% endcapture %}
{% capture inc-until-fullhd %}
@include until {
// Styles applied
// below $fullhd
}
{% endcapture %}
<div class="table-container">
<table class="table is-bordered">
<thead>
<tr>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<th style="width: 20%;">
{{ 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>
<tr>
<td>
{% highlight sass %}{{ inc-mobile }}{% endhighlight %}
</td>
<td colspan="4">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td>
<p class="notification">-</p>
</td>
<td colspan="4">
{% highlight sass %}{{ inc-tablet }}{% endhighlight %}
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification">-</p>
</td>
<td colspan="3">
{% highlight sass %}{{ inc-desktop }}{% endhighlight %}
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification">-</p>
</td>
<td colspan="2">
{% highlight sass %}{{ inc-widescreen }}{% endhighlight %}
</td>
</tr>
<tr>
<td colspan="4">
<p class="notification">-</p>
</td>
<td>
{% highlight sass %}{{ inc-fullhd }}{% endhighlight %}
</td>
</tr>
<tr>
<td>
<p class="notification">-</p>
</td>
<td>
{% highlight sass %}{{ inc-tablet-only }}{% endhighlight %}
</td>
<td colspan="3">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification">-</p>
</td>
<td>
{% highlight sass %}{{ inc-desktop-only }}{% endhighlight %}
</td>
<td colspan="2">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification">-</p>
</td>
<td>
{% highlight sass %}{{ inc-widescreen-only }}{% endhighlight %}
</td>
<td>
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="2">
{% highlight sass %}{{ inc-touch }}{% endhighlight %}
</td>
<td colspan="3">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="3">
{% highlight sass %}{{ inc-until-widescreen }}{% endhighlight %}
</td>
<td colspan="2">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="4">
{% highlight sass %}{{ inc-until-fullhd }}{% endhighlight %}
</td>
<td colspan="1">
<p class="notification">-</p>
</td>
</tr>
</tbody>
</table>
</div>
{% assign or_link = site.data.links.by_id['overview-responsiveness'] %}
<div class="content">
<p>
Learn more about <a href="{{ site.url }}{{ or_link.path }}">Bulma responsiveness</a>.
</p>
</div>