Add comparison table

docs/_includes/comparison.html

@@ -0,0 +1,592 @@
+
+<tr>
+  <th colspan="2">
+    Grid system
+  </th>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/grid/columns/">
+      columns
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/css/#grid" target="_blank">
+      row
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/grid/columns/">
+      column
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/css/#grid" target="_blank">
+       col
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/grid/tiles/">
+      tile
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>
+<tr>
+  <th colspan="2">
+    Form
+  </th>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/form/general/">
+      field
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/form/general/">
+      field is-grouped
+    </a>
+  </td>
+  <td>
+     <a href="http://getbootstrap.com/components/#btn-groups" target="_blank">
+       button groups
+      </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/form/general/">
+      field is-grouped
+    </a>
+  </td>
+  <td>
+     <a href="http://getbootstrap.com/components/#input-groups" target="_blank">
+       input groups
+      </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/form/general/">
+      control
+    </a>
+  </td>
+  <td>
+     <a href="http://getbootstrap.com/css/#forms" target="_blank">
+       form-group
+      </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/form/general/">
+      label
+    </a>
+  </td>
+  <td>
+     <a href="http://getbootstrap.com/css/#forms" target="_blank">
+       label
+      </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/form/input/">
+      input
+    </a>
+  </td>
+  <td>
+     <a href="http://getbootstrap.com/css/#forms" target="_blank">
+       form-control
+      </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/form/textarea/">
+      textarea
+    </a>
+  </td>
+  <td>
+     <a href="http://getbootstrap.com/css/#forms" target="_blank">
+       form-control
+      </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/form/select/">
+      select
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/form/checkbox/">
+      checkbox
+    </a>
+  </td>
+  <td>
+     <a href="http://getbootstrap.com/css/#forms" target="_blank">
+       checkbox
+      </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/form/radio/">
+      radio
+    </a>
+  </td>
+  <td>
+     <a href="http://getbootstrap.com/css/#forms" target="_blank">
+       radio
+      </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/form/file/">
+      file
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/button/">
+      button is-static
+    </a>
+  </td>
+  <td>
+     <a href="http://getbootstrap.com/css/#forms" target="_blank">
+       form-control-static
+      </a>
+  </td>
+</tr>
+<tr>
+  <th colspan="2">
+    Elements
+  </th>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/box/">
+      box
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/button/">
+      button
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/css/#buttons" target="_blank">
+      button
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/content/">
+      content
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/delete/">
+      delete
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/css/#helper-classes-close" target="_blank">
+      close
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/icon/">
+      icon
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#glyphicons" target="_blank">
+      glyphicon
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/image/">
+      image
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#thumbnails" target="_blank">
+      thumbnails
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/image/">
+      image is-16by9
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#responsive-embed" target="_blank">
+      responsive embed
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/notification/">
+      notification
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#alerts" target="_blank">
+      alerts
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/progress/">
+      progress
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#progress" target="_blank">
+      progress bars
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/table/">
+      table
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/css/#tables" target="_blank">
+      table
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/tag/">
+      tag
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#labels" target="_blank">
+      labels
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/tag/">
+      tag is-rounded
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#badges" target="_blank">
+      badges
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/title/">
+      title
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/css/#type" target="_blank">
+      h1 .. h6
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/elements/title/">
+      subtitle
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/css/#type" target="_blank">
+      h1 .. h6
+    </a>
+  </td>
+</tr>
+<tr>
+  <td class="is-empty">
+    –
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/css/#type-lists" target="_blank">
+      lists
+    </a>
+  </td>
+</tr>
+<tr>
+  <td class="is-empty">
+    –
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/css/#caret" target="_blank">
+      caret
+    </a>
+  </td>
+</tr>
+<tr>
+  <th colspan="2">
+    Components
+  </th>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/breadcrumb/">
+      breadcrumb
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#breadcrumbs" target="_blank">
+      breadcrumbs
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/card/">
+      card
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/dropdown/">
+      dropdown
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#btn-dropdowns" target="_blank">
+      dropdowns
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/level/">
+      level
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>
+<tr>
+  <td class="is-empty">
+    –
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#list-group" target="_blank">
+      list group
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/media-object/">
+      media object
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#media" target="_blank">
+      media object
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/menu/">
+      menu
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/message/">
+      message
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#panels" target="_blank">
+      panels
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/modal/">
+      modal
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/javascript/#modals" target="_blank">
+      modal
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/navbar/">
+      navbar
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#navbar" target="_blank">
+      navbar
+    </a>
+  </td>
+</tr>
+<tr>
+  <td class="is-empty">
+    –
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#page-header" target="_blank">
+      page header
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/pagination/">
+      pagination
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#pagination" target="_blank">
+      pagination
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/panel/">
+      panel
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/components/tabs/">
+      tabs
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#navs" target="_blank">
+      navs
+    </a>
+  </td>
+</tr>
+<tr>
+  <td class="is-empty">
+    –
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#wells" target="_blank">
+      wells
+    </a>
+  </td>
+</tr>
+<tr>
+  <th colspan="2">
+    Layout
+  </th>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/layout/container/">
+      container
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/css/#overview-container" target="_blank">
+      container
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/layout/hero/">
+      hero
+    </a>
+  </td>
+  <td>
+    <a href="http://getbootstrap.com/components/#jumbotron" target="_blank">
+      jumbotron
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/layout/section/">
+      section
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="{{ site.url }}/documentation/layout/footer/">
+      footer
+    </a>
+  </td>
+  <td class="is-empty">
+    <span>–</span>
+  </td>
+</tr>

docs/_includes/svg/bootstrap-icon.svg

@@ -1,9 +1,9 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">
-<g id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
-  <path id="bg" fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
+<g odipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
+  <path fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
     c56.1,0,102,45.9,102,102V510z"/>
-  <g id="B" enable-background="new    ">
+  <g enable-background="new">
     <path fill="#FFFFFF" d="M166.3,133h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
       c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
       c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,133L166.3,133z M228.8,282.5h102

docs/_sass/bootstrap.sass

@@ -17,12 +17,11 @@ $bootstrap-invert: #fff
         color: $bootstrap-invert
 
 .pros-heading
-  padding: 2rem
-  padding-bottom: 0
+  padding: 0 2rem
   text-align: center
 
 .pros-icon
-  margin-bottom: 2rem
+  margin-bottom: 3rem
   text-align: center
   svg
     height: 3rem
@@ -57,4 +56,30 @@ $bootstrap-invert: #fff
 
 .separator
   color: $border
-  margin: 0 0.25em
+  margin: 0 0.25em
+
+.comparison
+  margin: 0 auto
+  max-width: 42rem
+  .table
+    svg
+      float: left
+      height: 1rem
+      margin-right: 0.5rem
+      margin-top: 0.25rem
+      width: auto
+    tbody
+      th[colspan]
+        font-size: 1.25em
+      a
+        color: $red
+        font-family: $family-monospace
+        &:hover
+          color: $text-strong
+          text-decoration: underline
+    .is-empty
+      background-color: $background
+      color: $text-light
+
+.comparison-header
+  margin-bottom: 3rem

docs/alternative-to-bootstrap.html

@@ -107,11 +107,16 @@ bootstrap:
       </section>
     </main>
 
+    <div class="section notification">
+      <h2 class="subtitle">
+        <div class="container">
+        Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.
+        </div>
+      </h2>
+    </div>
+
     <section class="section">
       <div class="container">
-        <h2 class="subtitle">
-          Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.
-        </h2>
 
         <div class="columns is-desktop">
           <div class="column is-half-desktop">
@@ -154,6 +159,41 @@ bootstrap:
             </div>
           </div>
         </div>
+
+      </div>
+    </section>
+
+    <hr>
+
+    <section class="section">
+      <div class="container">
+        <div class="comparison">
+          <header class="comparison-header has-text-centered">
+            <h2 class="title">
+              Comparison table
+            </h2>
+            <p class="subtitle">
+              See which elements of the framework exist (or not) in the other
+            </p>
+          </header>
+          <table class="table is-bordered is-fullwidth">
+            <thead>
+              <tr>
+                <th>{% include svg/bulma-b.svg %}Bulma</th>
+                <th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
+              </tr>
+            </thead>
+            <tfoot>
+              <tr>
+                <th>{% include svg/bulma-b.svg %}Bulma</th>
+                <th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
+              </tr>
+            </tfoot>
+            <tbody>
+              {% include comparison.html %}
+            </tbody>
+          </table>
+        </div>
       </div>
     </section>