Merge branch 'master' into new-docs

README.md

@@ -18,6 +18,7 @@ Bulma is constantly in development! Try it out now:
 ```sh
 npm install bulma
 ```
+
 **or**
 
 ### Yarn
@@ -32,6 +33,13 @@ yarn add bulma
 bower install bulma
 ```
 
+### Import
+After installation, you can import the CSS file into your project using this snippet:
+
+```sh
+import 'bulma/css/bulma.css'
+```
+
 ### CDN
 
 [https://cdnjs.com/libraries/bulma](https://cdnjs.com/libraries/bulma)

docs/_data/variables/elements/button.json

@@ -21,21 +21,6 @@
       "name": "$button-border-color",
       "value": "$grey-lighter"
     },
-    "button-border-width": {
-      "id": "button-border-width",
-      "name": "$button-border-width",
-      "value": "$control-border-width"
-    },
-    "button-padding-vertical": {
-      "id": "button-padding-vertical",
-      "name": "$button-padding-vertical",
-      "value": "calc(0.375em - #{$button-border-width})"
-    },
-    "button-padding-horizontal": {
-      "id": "button-padding-horizontal",
-      "name": "$button-padding-horizontal",
-      "value": "0.75em"
-    },
     "button-hover-color": {
       "id": "button-hover-color",
       "name": "$button-hover-color",

docs/_data/variables/utilities/controls.json

@@ -16,20 +16,15 @@
       "name": "$control-radius-small",
       "value": "$radius-small"
     },
-    "control-border-width": {
-      "id": "control-border-width",
-      "name": "$control-border-width",
-      "value": "1px"
-    },
     "control-padding-vertical": {
       "id": "control-padding-vertical",
       "name": "$control-padding-vertical",
-      "value": "calc(0.375em - #{$control-border-width})"
+      "value": "calc(0.375em - 1px)"
     },
     "control-padding-horizontal": {
       "id": "control-padding-horizontal",
       "name": "$control-padding-horizontal",
-      "value": "calc(0.625em - #{$control-border-width})"
+      "value": "calc(0.625em - 1px)"
     }
   }
 }

docs/documentation/modifiers/color-helpers.html

@@ -54,11 +54,11 @@ breadcrumb:
 
 {% assign vernum = site.version | downcase | remove: "." | plus: 0 %}
 
-{% if vernum >= 63 %}
+{% if vernum >= 70 %}
 
 {% include elements/anchor.html name="Background color" %}
 
-{% include elements/new-tag.html version="0.6.3" %}
+{% include elements/new-tag.html version="0.7.0" %}
 
 <div class="content">
   <p>

docs/documentation/overview/responsiveness.html

@@ -206,9 +206,132 @@ $fullhd-enabled: false
   </tbody>
 </table>
 
+<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>
+        <p class="notification is-success">mobile</p>
+      </td>
+      <td colspan="4">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <p class="notification">-</p>
+      </td>
+      <td colspan="4">
+        <p class="notification is-success">tablet</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="2">
+        <p class="notification">-</p>
+      </td>
+      <td colspan="3">
+        <p class="notification is-success">desktop</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="3">
+        <p class="notification">-</p>
+      </td>
+      <td colspan="2">
+        <p class="notification is-success">widescreen</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="4">
+        <p class="notification">-</p>
+      </td>
+      <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>
+      </td>
+      <td colspan="3">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="2">
+        <p class="notification">-</p>
+      </td>
+      <td>
+        <p class="notification is-success">desktop-only</p>
+      </td>
+      <td colspan="2">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+    <tr>
+      <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>
+      </td>
+      <td colspan="3">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="3">
+        <p class="notification is-success">until-widescreen</p>
+      </td>
+      <td colspan="2">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="4">
+        <p class="notification is-success">until-fullhd</p>
+      </td>
+      <td colspan="1">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+{% assign vernum = site.version | downcase | remove: "." | plus: 0 %}
+
+{% if vernum >= 70 %}
+
 {% include elements/anchor.html name="Disabling breakpoints" %}
 
-{% include elements/new-tag.html version="0.6.3" %}
+{% include elements/new-tag.html version="0.7.0" %}
 
 <div class="content">
   <p>
@@ -220,6 +343,8 @@ $fullhd-enabled: false
   {% highlight sass %}{{ scss_code }}{% endhighlight %}
 </div>
 
+{% endif %}
+
 {% include elements/anchor.html name="Variables" %}
 
 <div class="content">