Change default font size

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Bulma Changelog
 
-## 0.3.3
+## 0.4
+
+* **Default font-size is 16px**
+* **New `.field` element ; `.control` repurposed**
 
 * Remove monospace named fonts
 * Remove icon spacing logic

docs/_layouts/post.html

@@ -17,6 +17,7 @@ route: blog
       <h1 class="title is-2">
         {{ page.title }}
       </h1>
+      <hr>
       <div class="content is-medium">
         {{ content }}
       </div>

docs/css/bulma-docs.css

@@ -95,7 +95,7 @@ th {
 
 html {
   background-color: white;
-  font-size: 14px;
+  font-size: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   min-width: 300px;
@@ -582,11 +582,11 @@ a.box:active {
   font-size: 1rem;
   height: 2.25em;
   justify-content: flex-start;
-  line-height: 1.5;
-  padding-bottom: 0.425em;
+  line-height: 1.25;
+  padding-bottom: 0.5em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.325em;
+  padding-top: 0.5em;
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;
@@ -624,11 +624,11 @@ a.box:active {
 
 .button .icon:first-child:not(:last-child) {
   margin-left: calc(-0.375em - 1px);
-  margin-right: 0.375em;
+  margin-right: 0.1875em;
 }
 
 .button .icon:last-child:not(:first-child) {
-  margin-left: 0.375em;
+  margin-left: 0.1875em;
   margin-right: calc(-0.375em - 1px);
 }
 
@@ -1253,7 +1253,7 @@ a.box:active {
 
 .button.is-small {
   border-radius: 2px;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
 }
 
 .button.is-medium {
@@ -1297,8 +1297,11 @@ a.box:active {
   position: absolute !important;
 }
 
-button.button {
+button.button,
+input[type="submit"].button {
   line-height: 1;
+  padding-bottom: 0.4em;
+  padding-top: 0.35em;
 }
 
 .content {
@@ -1442,7 +1445,7 @@ button.button {
 }
 
 .content.is-small {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
 }
 
 .content.is-medium {
@@ -1465,11 +1468,11 @@ button.button {
   font-size: 1rem;
   height: 2.25em;
   justify-content: flex-start;
-  line-height: 1.5;
-  padding-bottom: 0.425em;
+  line-height: 1.25;
+  padding-bottom: 0.5em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.325em;
+  padding-top: 0.5em;
   position: relative;
   vertical-align: top;
   background-color: white;
@@ -1594,7 +1597,7 @@ button.button {
 .input.is-small,
 .textarea.is-small {
   border-radius: 2px;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
 }
 
 .input.is-medium,
@@ -1702,11 +1705,11 @@ button.button {
   font-size: 1rem;
   height: 2.25em;
   justify-content: flex-start;
-  line-height: 1.5;
-  padding-bottom: 0.425em;
+  line-height: 1.25;
+  padding-bottom: 0.5em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.325em;
+  padding-top: 0.5em;
   position: relative;
   vertical-align: top;
   background-color: white;
@@ -1772,7 +1775,7 @@ button.button {
 
 .select.is-small {
   border-radius: 2px;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
 }
 
 .select.is-medium {
@@ -1803,7 +1806,7 @@ button.button {
 
 .help {
   display: block;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   margin-top: 0.25rem;
 }
 
@@ -1843,7 +1846,6 @@ button.button {
   color: #ff3860;
 }
 
-input[type="submit"].input,
 .select select {
   line-height: 1;
 }
@@ -1998,7 +2000,7 @@ input[type="submit"].input,
 }
 
 .control.has-icon .input.is-small + .icon {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
 }
 
 .control.has-icon .input.is-medium + .icon {
@@ -2335,7 +2337,7 @@ input[type="submit"].input,
 }
 
 .progress.is-small {
-  height: 0.85rem;
+  height: 0.75rem;
 }
 
 .progress.is-medium {
@@ -2422,7 +2424,7 @@ input[type="submit"].input,
   border-radius: 290486px;
   color: #4a4a4a;
   display: inline-flex;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   height: 2em;
   justify-content: center;
   line-height: 1.5;
@@ -2537,11 +2539,11 @@ input[type="submit"].input,
 }
 
 .title.is-1 {
-  font-size: 3.5rem;
+  font-size: 3rem;
 }
 
 .title.is-2 {
-  font-size: 2.75rem;
+  font-size: 2.5rem;
 }
 
 .title.is-3 {
@@ -2576,11 +2578,11 @@ input[type="submit"].input,
 }
 
 .subtitle.is-1 {
-  font-size: 3.5rem;
+  font-size: 3rem;
 }
 
 .subtitle.is-2 {
-  font-size: 2.75rem;
+  font-size: 2.5rem;
 }
 
 .subtitle.is-3 {
@@ -3400,9 +3402,9 @@ input[type="submit"].input,
 .nav-toggle {
   cursor: pointer;
   display: block;
-  height: 3.5rem;
+  height: 3.25rem;
   position: relative;
-  width: 3.5rem;
+  width: 3.25rem;
 }
 
 .nav-toggle span {
@@ -3467,6 +3469,7 @@ input[type="submit"].input,
   flex-shrink: 0;
   font-size: 1rem;
   justify-content: center;
+  line-height: 1.5;
   padding: 0.5rem 0.75rem;
 }
 
@@ -3516,10 +3519,10 @@ a.nav-item.is-active {
 a.nav-item.is-tab {
   border-bottom: 1px solid transparent;
   border-top: 1px solid transparent;
-  padding-bottom: calc(0.5rem - 1px);
+  padding-bottom: calc(0.75rem - 1px);
   padding-left: 1rem;
   padding-right: 1rem;
-  padding-top: calc(0.5rem - 1px);
+  padding-top: calc(0.75rem - 1px);
 }
 
 .nav-item a.is-tab:hover,
@@ -3532,7 +3535,7 @@ a.nav-item.is-tab:hover {
 a.nav-item.is-tab.is-active {
   border-bottom: 3px solid #00d1b2;
   color: #00d1b2;
-  padding-bottom: calc(0.5rem - 3px);
+  padding-bottom: calc(0.75rem - 3px);
 }
 
 @media screen and (min-width: 1000px) {
@@ -3607,7 +3610,7 @@ a.nav-item.is-tab.is-active {
   align-items: stretch;
   background-color: white;
   display: flex;
-  min-height: 3.5rem;
+  min-height: 3.25rem;
   position: relative;
   text-align: center;
   z-index: 2;
@@ -3616,7 +3619,7 @@ a.nav-item.is-tab.is-active {
 .nav > .container {
   align-items: stretch;
   display: flex;
-  min-height: 3.5rem;
+  min-height: 3.25rem;
   width: 100%;
 }
 
@@ -3646,11 +3649,11 @@ a.nav-item.is-tab.is-active {
   font-size: 1rem;
   height: 2.25em;
   justify-content: flex-start;
-  line-height: 1.5;
-  padding-bottom: 0.425em;
+  line-height: 1.25;
+  padding-bottom: 0.5em;
   padding-left: 0.625em;
   padding-right: 0.625em;
-  padding-top: 0.325em;
+  padding-top: 0.5em;
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;
@@ -3695,7 +3698,7 @@ a.nav-item.is-tab.is-active {
 .pagination-next,
 .pagination-link {
   border: 1px solid #dbdbdb;
-  min-width: 2.5em;
+  min-width: 2.25em;
 }
 
 .pagination-previous:hover,
@@ -4070,7 +4073,7 @@ label.panel-block:hover {
 }
 
 .tabs.is-small {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
 }
 
 .tabs.is-medium {
@@ -6134,7 +6137,7 @@ svg {
 
 #carbon {
   max-width: 340px;
-  min-height: 130px;
+  min-height: 150px;
   padding: 0;
   position: relative;
 }
@@ -6187,7 +6190,7 @@ svg {
 #carbonads .carbon-poweredby {
   bottom: 0;
   color: #7a7a7a;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   left: 160px;
   line-height: 20px;
   padding: 0 15px 10px 0;

docs/documentation/components/media-object.html

@@ -105,13 +105,15 @@ doc-subtab: media-object
     </p>
   </figure>
   <div class="media-content">
-    <p class="control">
-      <textarea class="textarea" placeholder="Add a comment..."></textarea>
-    </p>
+    <div class="field">
+      <p class="control">
+        <textarea class="textarea" placeholder="Add a comment..."></textarea>
+      </p>
+    </div>
     <nav class="level">
       <div class="level-left">
         <div class="level-item">
-          <a class="button is-info">Post comment</a>
+          <a class="button is-info">Submit</a>
         </div>
       </div>
       <div class="level-right">
@@ -210,12 +212,16 @@ doc-subtab: media-object
     </p>
   </figure>
   <div class="media-content">
-    <p class="control">
-      <textarea class="textarea" placeholder="Add a comment..."></textarea>
-    </p>
-    <p class="control">
-      <button class="button">Post comment</button>
-    </p>
+    <div class="field">
+      <p class="control">
+        <textarea class="textarea" placeholder="Add a comment..."></textarea>
+      </p>
+    </div>
+    <div class="field">
+      <p class="control">
+        <button class="button">Post comment</button>
+      </p>
+    </div>
   </div>
 </article>
 {% endcapture %}

docs/documentation/components/modal.html

@@ -55,7 +55,7 @@ doc-subtab: modal
         No JavaScript
       </div>
       <div class="message-body">
-        Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself
+        Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself.
       </div>
     </div>
 

docs/documentation/elements/button.html

@@ -354,16 +354,16 @@ doc-subtab: button
 {% capture button_only_icon_example %}
 <p class="field">
   <a class="button is-small">
-  <span class="icon is-small">
-    <i class="fa fa-header"></i>
-  </span>
+    <span class="icon is-small">
+      <i class="fa fa-header"></i>
+    </span>
   </a>
 </p>
 <p class="field">
   <a class="button">
-  <span class="icon is-small">
-    <i class="fa fa-header"></i>
-  </span>
+    <span class="icon is-small">
+      <i class="fa fa-header"></i>
+    </span>
   </a>
   <a class="button">
   <span class="icon">
@@ -373,9 +373,9 @@ doc-subtab: button
 </p>
 <p class="field">
   <a class="button is-medium">
-  <span class="icon is-small">
-    <i class="fa fa-header"></i>
-  </span>
+    <span class="icon is-small">
+      <i class="fa fa-header"></i>
+    </span>
   </a>
   <a class="button is-medium">
   <span class="icon">
@@ -383,16 +383,16 @@ doc-subtab: button
   </span>
   </a>
   <a class="button is-medium">
-  <span class="icon is-medium">
-    <i class="fa fa-header"></i>
-  </span>
+    <span class="icon is-medium">
+      <i class="fa fa-header"></i>
+    </span>
   </a>
 </p>
 <p class="field">
   <a class="button is-large">
-  <span class="icon is-small">
-    <i class="fa fa-header"></i>
-  </span>
+    <span class="icon is-small">
+      <i class="fa fa-header"></i>
+    </span>
   </a>
   <a class="button is-large">
   <span class="icon">
@@ -400,14 +400,14 @@ doc-subtab: button
   </span>
   </a>
   <a class="button is-large">
-  <span class="icon is-medium">
-    <i class="fa fa-header"></i>
-  </span>
+    <span class="icon is-medium">
+      <i class="fa fa-header"></i>
+    </span>
   </a>
   <a class="button is-large">
-  <span class="icon is-large">
-    <i class="fa fa-header"></i>
-  </span>
+    <span class="icon is-large">
+      <i class="fa fa-header"></i>
+    </span>
   </a>
 </p>
 {% endcapture %}

docs/sass/global.sass

@@ -6,7 +6,7 @@ $carbon-space: 15px
 
 #carbon
   max-width: 340px
-  min-height: 100px + ($carbon-space * 2)
+  min-height: 120px + ($carbon-space * 2)
   padding: 0
   position: relative
   &:hover

sass/components/nav.sass

@@ -1,4 +1,4 @@
-$nav-height: 3.5rem !default
+$nav-height: 3.25rem !default
 
 // Components
 
@@ -15,6 +15,7 @@ $nav-height: 3.5rem !default
   flex-shrink: 0
   font-size: $size-normal
   justify-content: center
+  line-height: 1.5
   padding: 0.5rem 0.75rem
   a
     flex-grow: 1
@@ -43,17 +44,17 @@ a.nav-item
   &.is-tab
     border-bottom: 1px solid transparent
     border-top: 1px solid transparent
-    padding-bottom: calc(0.5rem - 1px)
+    padding-bottom: calc(0.75rem - 1px)
     padding-left: 1rem
     padding-right: 1rem
-    padding-top: calc(0.5rem - 1px)
+    padding-top: calc(0.75rem - 1px)
     &:hover
       border-bottom-color: $primary
       border-top-color: transparent
     &.is-active
       border-bottom: 3px solid $primary
       color: $primary
-      padding-bottom: calc(0.5rem - 3px)
+      padding-bottom: calc(0.75rem - 3px)
   // Responsiveness
   +desktop
     &.is-brand

sass/components/pagination.sass

@@ -46,7 +46,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-next,
 .pagination-link
   border: 1px solid $pagination-border
-  min-width: 2.5em
+  min-width: 2.25em
   &:hover
     border-color: $pagination-hover-border
     color: $pagination-hover

sass/elements/button.sass

@@ -45,9 +45,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
       width: 1.5em
     &:first-child:not(:last-child)
       margin-left: calc(-0.375em - 1px)
-      margin-right: 0.375em
+      margin-right: 0.1875em
     &:last-child:not(:first-child)
-      margin-left: 0.375em
+      margin-left: 0.1875em
       margin-right: calc(-0.375em - 1px)
     &:first-child:last-child
       margin-left: calc(-0.375em - 1px)
@@ -154,5 +154,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
       +center(1em)
       position: absolute !important
 
-button.button
+// Adjustment for vertical spacing
+button.button,
+input[type="submit"].button
   line-height: 1
+  padding-bottom: 0.4em
+  padding-top: 0.35em

sass/elements/form.sass

@@ -158,7 +158,6 @@ $input-radius:              $radius !default
     &.is-#{$name}
       color: $color
 
-input[type="submit"].input,
 .select select
   line-height: 1
 

sass/utilities/controls.sass

@@ -12,11 +12,11 @@ $control-radius-small: $radius-small !default
   font-size: $size-normal
   height: 2.25em
   justify-content: flex-start
-  line-height: 1.5
-  padding-bottom: 0.425em
+  line-height: 1.25
+  padding-bottom: 0.5em
   padding-left: 0.625em
   padding-right: 0.625em
-  padding-top: 0.325em
+  padding-top: 0.5em
   position: relative
   vertical-align: top
   // States

sass/utilities/mixins.sass

@@ -167,10 +167,13 @@
 // 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
 

sass/utilities/variables.sass

@@ -29,13 +29,13 @@ $red:          hsl(348, 100%, 61%) !default
 $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
 $family-monospace: monospace !default
 
-$size-1: 3.5rem !default
-$size-2: 2.75rem !default
+$size-1: 3rem !default
+$size-2: 2.5rem !default
 $size-3: 2rem !default
 $size-4: 1.5rem !default
 $size-5: 1.25rem !default
 $size-6: 1rem !default
-$size-7: 0.85rem !default
+$size-7: 0.75rem !default
 
 $weight-light: 300 !default
 $weight-normal: 400 !default
@@ -44,7 +44,7 @@ $weight-bold: 700 !default
 
 // Body
 $body-background: $white !default
-$body-size: 14px !default
+$body-size: 16px !default
 
 // Miscellaneous
 $easing: ease-out !default