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

Explain functions

Browse Source
This commit is contained in:
Jeremy Thomas
2017-01-04 14:05:24 +01:00
parent 82e7672458
commit e66684c514
7 changed files with 87 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,8 +19,8 @@ doc-subtab: responsiveness
<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>980px</code></li>
<li><code>widescreen</code>: from <code>1180px</code></li>
<li><code>desktop</code>: from <code>1000px</code></li>
<li><code>widescreen</code>: from <code>1192px</code></li>
</ul>
<p>Bulma uses 7 responsive mixins:</p>
<ul>
@@ -34,23 +34,23 @@ doc-subtab: responsiveness
</li>
<li>
<code>=tablet-only</code><br>
from <code>769px</code> and until <code>979px</code>
from <code>769px</code> and until <code>999px</code>
</li>
<li>
<code>=touch</code><br>
until <code>979px</code>
until <code>999px</code>
</li>
<li>
<code>=desktop</code><br>
from <code>980px</code>
from <code>1000px</code>
</li>
<li>
<code>=desktop-only</code><br>
from <code>980px</code> and until <code>1179px</code>
from <code>1000px</code> and until <code>1191px</code>
</li>
<li>
<code>=widescreen</code><br>
from <code>1180px</code>
from <code>1192px</code>
</li>
</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>
@@ -65,15 +65,15 @@ doc-subtab: responsiveness
</th>
<th>
Tablet<br>
Between <code>769px</code> and <code>979px</code>
Between <code>769px</code> and <code>999px</code>
</th>
<th>
Desktop<br>
Between <code>980px</code> and <code>1179px</code>
Between <code>1000px</code> and <code>1191px</code>
</th>
<th>
Widescreen<br>
<code>1180px</code> and above
<code>1192px</code> and above
</th>
</tr>
</thead>