Add new breakpoint, Explain card

CHANGELOG.md

@@ -5,6 +5,7 @@
 * **Default font-size is 16px**
 * **New `.field` element ; `.control` repurposed**
 * **New `.pagination` sizes**
+* **New `$fullhd` breakpoint (1344px)**
 
 * Remove monospace named fonts
 * Remove icon spacing logic

docs/css/bulma-docs.css

@@ -2632,6 +2632,12 @@ input[type="submit"].button {
   }
 }
 
+@media screen and (min-width: 1384px) {
+  .container {
+    max-width: 1344px;
+  }
+}
+
 .delete {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -2787,10 +2793,6 @@ input[type="submit"].button {
   padding: 1.5rem;
 }
 
-.card-content .title + .subtitle {
-  margin-top: -1.5rem;
-}
-
 .card-footer {
   border-top: 1px solid #dbdbdb;
   align-items: stretch;

docs/documentation/components/card.html

@@ -13,6 +13,44 @@ doc-subtab: card
 
     <hr>
 
+    <div class="content">
+      <p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
+      <ul>
+        <li>
+          <code>card</code>: the main container
+          <ul>
+            <li>
+              <code>card-header</code>: a horizontal bar with a shadow
+              <ul>
+                <li>
+                  <code>card-header-title</code>: a left-aligned bold text
+                </li>
+                <li>
+                  <code>card-header-icon</code>: a placeholder for an icon
+                </li>
+              </ul>
+            </li>
+            <li>
+              <code>card-image</code>: a fullwidth container for a reponsive image
+            </li>
+            <li>
+              <code>card-content</code>: a multi-purpose container for <em>any</em> other element
+            </li>
+            <li>
+              <code>card-footer</code>: a horizontal list of controls
+              <ul>
+                <li>
+                  <code>card-footer-item</code>: a repeatable list item
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <hr>
+
 {% capture card_example %}
 <div class="card">
   <div class="card-image">
@@ -90,6 +128,36 @@ doc-subtab: card
   <div class="column">
 {% highlight html %}
 {{card_header_example}}
+{% endhighlight %}
+  </div>
+</div>
+
+    <hr>
+
+{% capture card_title_example %}
+<div class="card">
+  <div class="card-content">
+    <p class="title">
+      If Tetris has taught me anything it's that errors pile up and accomplishments disappear.
+    </p>
+    <p class="subtitle">
+      Mark Twain
+    </p>
+  </div>
+  <footer class="card-footer">
+    <p class="card-footer-item">
+      <span>More quotes by <a href="#">Mark Twain</a></span>
+    </p>
+  </footer>
+</div>
+{% endcapture %}
+<div class="columns">
+  <div class="column is-one-third">
+{{card_title_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{card_title_example}}
 {% endhighlight %}
   </div>
 </div>

docs/documentation/elements/tag.html

@@ -38,42 +38,42 @@ doc-subtab: tag
         Like with buttons, there are <strong>9 different colors</strong> available.
       </div>
       <div class="column is-2">
-        <p class="control">
+        <p class="field">
           <span class="tag is-black">
             Black
           </span>
         </p>
-        <p class="control">
+        <p class="field">
           <span class="tag is-dark">
             Dark
           </span>
         </p>
-        <p class="control">
+        <p class="field">
           <span class="tag is-light">
             Light
           </span>
         </p>
-        <p class="control">
+        <p class="field">
           <span class="tag is-white">
             White
           </span>
         </p>
-        <p class="control">
+        <p class="field">
           <span class="tag is-primary">
             Primary
           </span>
         </p>
-        <p class="control">
+        <p class="field">
           <span class="tag is-info">
             Info
           </span>
         </p>
-        <p class="control">
+        <p class="field">
           <span class="tag is-success">
             Success
           </span>
         </p>
-        <p class="control">
+        <p class="field">
           <span class="tag is-warning">
             Warning
           </span>
@@ -102,12 +102,12 @@ doc-subtab: tag
         And <strong>2 additional</strong> sizes.
       </div>
       <div class="column is-2">
-        <p class="control">
+        <p class="field">
           <span class="tag is-primary is-medium">
             Medium
           </span>
         </p>
-        <p class="control">
+        <p class="field">
           <span class="tag is-info is-large">
             Large
           </span>
@@ -126,19 +126,19 @@ doc-subtab: tag
         You can also append a <strong>delete button</strong>.
       </div>
       <div class="column is-2">
-        <p class="control">
+        <p class="field">
           <span class="tag is-success">
             Bar
             <button class="delete is-small"></button>
           </span>
         </p>
-        <p class="control">
+        <p class="field">
           <span class="tag is-warning is-medium">
             Hello
             <button class="delete is-small"></button>
           </span>
         </p>
-        <p class="control">
+        <p class="field">
           <span class="tag is-danger is-large">
             World
             <button class="delete"></button>

docs/documentation/modifiers/responsive-helpers.html

@@ -29,7 +29,7 @@ doc-subtab: responsive-helpers
       <p>For example, here's what the <code>is-flex</code> helper works:</p>
     </div>
 
-    <table class="table">
+    <table class="table is-bordered">
       <thead>
         <tr>
           <th>
@@ -188,7 +188,7 @@ doc-subtab: responsive-helpers
 
     <h3 class="title">Hide</h3>
 
-    <table class="table">
+    <table class="table is-bordered">
       <thead>
         <tr>
           <th>

docs/documentation/modifiers/syntax.html

@@ -67,19 +67,19 @@ doc-subtab: syntax
         </div>
       </div>
       <div class="column">
-        <p class="control">
+        <p class="field">
           <a class="button is-primary">Button</a>
         </p>
-        <p class="control">
+        <p class="field">
           <a class="button is-info">Button</a>
         </p>
-        <p class="control">
+        <p class="field">
           <a class="button is-success">Button</a>
         </p>
-        <p class="control">
+        <p class="field">
           <a class="button is-warning">Button</a>
         </p>
-        <p class="control">
+        <p class="field">
           <a class="button is-danger">Button</a>
         </p>
       </div>
@@ -115,16 +115,16 @@ doc-subtab: syntax
         </div>
       </div>
       <div class="column">
-        <p class="control">
+        <p class="field">
           <a class="button is-small">Button</a>
         </p>
-        <p class="control">
+        <p class="field">
           <a class="button">Button</a>
         </p>
-        <p class="control">
+        <p class="field">
           <a class="button is-medium">Button</a>
         </p>
-        <p class="control">
+        <p class="field">
           <a class="button is-large">Button</a>
         </p>
       </div>
@@ -157,13 +157,13 @@ doc-subtab: syntax
         </div>
       </div>
       <div class="column">
-        <p class="control">
+        <p class="field">
           <a class="button is-primary is-outlined">Button</a>
         </p>
-        <p class="control">
+        <p class="field">
           <a class="button is-primary is-loading">Button</a>
         </p>
-        <p class="control">
+        <p class="field">
           <a class="button is-primary is-disabled">Button</a>
         </p>
       </div>

sass/components/card.sass

@@ -24,8 +24,6 @@
 
 .card-content
   padding: 1.5rem
-  .title + .subtitle
-    margin-top: -1.5rem
 
 .card-footer
   border-top: 1px solid $border

sass/elements/other.sass

@@ -5,13 +5,15 @@
   position: relative
   +desktop
     margin: 0 auto
-    max-width: $desktop - 40px // 960px
+    max-width: $desktop - 40px
     // Modifiers
     &.is-fluid
       margin: 0 20px
       max-width: none
   +widescreen
-    max-width: $widescreen - 40px // 1152px
+    max-width: $widescreen - 40px
+  +fullhd
+    max-width: $fullhd - 40px
 
 .delete
   +delete

sass/utilities/mixins.sass

@@ -166,17 +166,6 @@
 
 // Responsiveness
 
-$tablet: 769px !default
-
-// 960px container + 40px
-$desktop: 1000px !default
-
-// 1152px container + 40
-$widescreen: 1192px !default
-
-// 960 and 1152 have been chosen because
-// they are divisible by both 12 and 16
-
 =from($device)
   @media screen and (min-width: $device)
     @content
@@ -212,3 +201,11 @@ $widescreen: 1192px !default
 =widescreen
   @media screen and (min-width: $widescreen)
     @content
+
+=widescreen-only
+  @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
+    @content
+
+=fullhd
+  @media screen and (min-width: $fullhd)
+    @content

sass/utilities/variables.sass

@@ -46,6 +46,17 @@ $weight-bold: 700 !default
 $body-background: $white !default
 $body-size: 16px !default
 
+// Responsiveness
+// 960, 1152, and 1344 have been chosen because
+// they are divisible by both 12 and 16
+$tablet: 769px !default
+// 960px container + 40px
+$desktop: 1000px !default
+// 1152px container + 40
+$widescreen: 1192px !default
+// 1344px container + 40
+$fullhd: 1384px !default
+
 // Miscellaneous
 $easing: ease-out !default
 $radius-small: 2px !default