library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Explain responsiveness

Browse Source
This commit is contained in:
Jeremy Thomas 2017-03-14 21:19:06 +00:00
parent 38d29ca5b0
commit 8203999949
1 changed files with 71 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
docs/documentation/overview/responsiveness.html
View File

@ -13,16 +13,32 @@ doc-subtab: responsiveness
<hr> <hr>
<h3 class="title">Vertical by default</h3>
<div class="content">
<p>
Every element in Bulma is <strong>mobile-first</strong> and optmizes for <strong>vertical reading</strong>, so by default on mobile:
</p>
<ul>
<li><code>columns</code> are stacked vertically</li>
<li>the <code>level</code> component will show its children stacked vertically</li>
<li>the <code>nav</code> menu will be hidden</li>
</ul>
<p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifer.</p>
</div>
<hr>
<h3 class="title">Breakpoints</h3> <h3 class="title">Breakpoints</h3>
<div class="content"> <div class="content">
<p>Bulma has 4 breakpoints:</p> <p>Bulma has 5 breakpoints:</p>
<ul> <ul>
<li><code>mobile</code>: up to <code>768px</code></li> <li><code>mobile</code>: up to <code>768px</code></li>
<li><code>tablet</code>: from <code>769px</code></li> <li><code>tablet</code>: from <code>769px</code></li>
<li><code>desktop</code>: from <code>1000px</code></li> <li><code>desktop</code>: from <code>1000px</code></li>
<li><code>widescreen</code>: from <code>1192px</code></li> <li><code>widescreen</code>: from <code>1192px</code></li>
<li><code>fullhd</code>: from <code>1384px</code></li>
</ul> </ul>
<p>Bulma uses 7 responsive mixins:</p> <p>Bulma uses 9 responsive mixins:</p>
<ul> <ul>
<li> <li>
<code>=mobile</code><br> <code>=mobile</code><br>
@ -52,110 +68,125 @@ doc-subtab: responsiveness
<code>=widescreen</code><br> <code>=widescreen</code><br>
from <code>1192px</code> from <code>1192px</code>
</li> </li>
<li>
<code>=widescreen-only</code><br>
from <code>1192px</code> and until <code>1383px</code>
</li>
<li>
<code>=fullhd</code><br>
from <code>1384px</code>
</li>
</ul> </ul>
<p>How Bulma works is that <strong>everything is mobile-first</strong> by default, and responsive mixins act as <em>minimum viewport widths</em> where some alternative styles are applied.</p>
</div> </div>
<table class="table"> <table class="table is-bordered">
<thead> <thead>
<tr> <tr>
<th> <th style="width: 20%;">
Mobile<br> Mobile<br>
Up to <code>768px</code> Up to <code>768px</code>
</th> </th>
<th> <th style="width: 20%;">
Tablet<br> Tablet<br>
Between <code>769px</code> and <code>999px</code> Between <code>769px</code> and <code>999px</code>
</th> </th>
<th> <th style="width: 20%;">
Desktop<br> Desktop<br>
Between <code>1000px</code> and <code>1191px</code> Between <code>1000px</code> and <code>1191px</code>
</th> </th>
<th> <th style="width: 20%;">
Widescreen<br> Widescreen<br>
<code>1192px</code> and above Between <code>1192px</code> and <code>1383px</code>
</th>
<th style="width: 20%;">
FullHD<br>
<code>1384px</code> and above
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="is-narrow"> <td>
<p class="notification is-success">mobile</p> <p class="notification is-success">mobile</p>
</td> </td>
<td class="is-narrow" colspan="3"> <td colspan="4">
<p class="notification">-</p> <p class="notification">-</p>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-narrow"> <td>
<p class="notification">-</p> <p class="notification">-</p>
</td> </td>
<td class="is-narrow" colspan="3"> <td colspan="4">
<p class="notification is-success">tablet</p> <p class="notification is-success">tablet</p>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-narrow" colspan="2"> <td colspan="2">
<p class="notification">-</p> <p class="notification">-</p>
</td> </td>
<td class="is-narrow" colspan="3"> <td colspan="3">
<p class="notification is-success">desktop</p> <p class="notification is-success">desktop</p>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-narrow" colspan="3"> <td colspan="3">
<p class="notification">-</p> <p class="notification">-</p>
</td> </td>
<td class="is-narrow"> <td colspan="2">
<p class="notification is-success">widescreen</p> <p class="notification is-success">widescreen</p>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-narrow"> <td colspan="4">
<p class="notification">-</p> <p class="notification">-</p>
</td> </td>
<td class="is-narrow"> <td>
<p class="notification is-success">fullhd</p>
</td>
</tr>
<tr>
<td>
<p class="notification">-</p>
</td>
<td>
<p class="notification is-success">tablet-only</p> <p class="notification is-success">tablet-only</p>
</td> </td>
<td class="is-narrow" colspan="2"> <td colspan="3">
<p class="notification">-</p> <p class="notification">-</p>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-narrow" colspan="2"> <td colspan="2">
<p class="notification">-</p> <p class="notification">-</p>
</td> </td>
<td class="is-narrow"> <td>
<p class="notification is-success">desktop-only</p> <p class="notification is-success">desktop-only</p>
</td> </td>
<td class="is-narrow"> <td colspan="2">
<p class="notification">-</p> <p class="notification">-</p>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-narrow" colspan="2"> <td colspan="3">
<p class="notification">-</p>
</td>
<td>
<p class="notification is-success">widescreen-only</p>
</td>
<td>
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification is-success">touch</p> <p class="notification is-success">touch</p>
</td> </td>
<td class="is-narrow" colspan="2"> <td colspan="3">
<p class="notification">-</p> <p class="notification">-</p>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4>
<h3 class="title">Vertical by default</h3>
<div class="content">
<p>
Every element in Bulma is <strong>mobile-first</strong> and optmizes for <strong>vertical reading</strong>, so by default on mobile:
</p>
<ul>
<li><code>columns</code> are stacked vertically</li>
<li>the <code>level</code> component will show its children stacked vertically</li>
<li>the <code>nav</code> menu will be hidden</li>
</ul>
<p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifer.</p>
</div>
</div> </div>
</section> </section>