Init v1

docs/documentation/start/responsiveness.html

@@ -0,0 +1,114 @@
+---
+title: How to install Bulma
+layout: docs
+theme: start
+doc-tab: start
+doc-subtab: responsiveness
+breadcrumb:
+  - home
+  - documentation
+  - start
+  - start-responsiveness
+---
+{% capture scss_code %}
+// Disable the widescreen breakpoint
+$widescreen-enabled: false;
+
+// Disable the fullhd breakpoint
+$fullhd-enabled: false;
+{% endcapture %}
+
+{%
+  include docs/elements/anchor.html name="Vertical by
+  default"
+%}
+
+<div class="content">
+  <p>
+    Every element in Bulma is <strong>mobile-first</strong> and optimizes 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>
+    You can however enforce the <strong>horizontal</strong> layout for both <code>columns</code> or
+    <code>level</code> by appending the <code>is-mobile</code> modifier.
+  </p>
+</div>
+
+{% include docs/elements/anchor.html name="Breakpoints" %}
+{% assign variables_file_url = '/blob/master/sass/utilities/initial-variables.sass#L56,L64'
+  | prepend: site.data.meta.github
+%}
+{% assign mixins_file_url = '/blob/master/sass/utilities/mixins.sass#L81,L129' | prepend: site.data.meta.github %}
+
+<div class="content">
+  <p>
+    Bulma has
+    <a href="{{ variables_file_url }}" target="_blank">4 breakpoints</a> which defines <strong>5 screen sizes</strong>:
+  </p>
+  <ul>
+    {% for breakpoint_hash in site.data.breakpoints %}
+      {% assign breakpoint = breakpoint_hash[1] %}
+      <li>
+        <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>
+    To make use of these breakpoints, Bulma provides
+    <a href="{{ site.url }}/documentation/utilities/responsive-mixins/">9 responsive mixins</a>.
+  </p>
+</div>
+
+{% include docs/components/breakpoints-table.html %}
+{% assign urm_link = site.data.links.by_id['utilities-responsive-mixins'] %}
+
+<div class="content">
+  <p>
+    To simplify using these breakpoints, Bulma provides
+    <a href="{{ site.url }}{{ urm_link.path }}">easy-to-use responsive mixins</a>.
+  </p>
+</div>
+
+{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
+{% if vernum >= 70 %}
+  {%
+    include docs/elements/anchor.html name="Disabling
+    breakpoints"
+  %}
+
+  <div class="content">
+    <p>
+      By default, the <code>$widescreen</code> and <code>$fullhd</code> breakpoints are <strong>enabled</strong>. You
+      can disable them by setting the corresponding Sass boolean to <code>false</code>:
+    </p>
+  </div>
+
+  <div class="bd-highlight-full">
+    {% highlight sass -%}
+    {{- scss_code -}}
+    {%- endhighlight %}
+  </div>
+{% endif %}
+
+{% capture custom_message %}
+These are
+<a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a
+value that <strong>references</strong> another variable.
+{% endcapture %}
+
+{%
+  include docs/components/variables.html type='element'
+  variables_keys=page.variables_keys custom_message=custom_message
+  folder='utilities' file='initial-variables'
+%}