Fix #637

CHANGELOG.md

@@ -19,6 +19,7 @@
 * Fix #605 container example
 * Fix #458 select expanded
 * Fix #403 separate animations
+* Fix #637 customize Bulma
 
 ## 0.4.0
 

docs/documentation/overview/start.html

@@ -96,21 +96,33 @@ npm install bulma
       </div>
       <div class="media-content">
         <p class="title is-5">
-          <strong>Set</strong> your variables:<br>
+          <strong>Set</strong> your variables
+        </p>
+        <p class="subtitle is-6">
+          Add your own colors, set new fonts, override Bulma styles...
+        </p>
 {% highlight sass %}
-// Override initial variables here
+// 1. Import the initial variables
-// You can add new ones or update existing ones:
+@import "../sass/utilities/initial-variables"
 
-$blue: #72d0eb // Update blue
+// 2. Set your own initial variables
-$pink: #ffb3b3 // Add pink
+// Update blue
-$family-serif: "Georgia", serif // Add a serif family
+$blue: #72d0eb
+// Add pink
+$pink: #ffb3b3
+// Add a serif family
+$family-serif: "Merriweather", "Georgia", serif
 
-// Override generated variables here
+// 3. Set the derived variables
-// For example, by default, the $danger color is $red and the font is sans-serif
+// Use the new pink as the primary color
-// You can change these values:
+$primary: $pink
+// Use the existing orange as the danger color
+$danger: $orange
+// Use the new serif family
+$family-primary: $family-serif
 
-$danger: $orange // Use the existing orange
+// 4. Import the rest of Bulma
-$family-primary: $family-serif // Use the new serif family
+@import "../bulma"
 {% endhighlight %}
         </p>
       </div>
@@ -122,25 +134,15 @@ $family-primary: $family-serif // Use the new serif family
       </div>
       <div class="media-content">
         <p class="title is-5">
-          <strong>Import</strong> Bulma <em>after</em> having set your variables:<br>
+          See the <strong>result</strong>: before and after
-{% highlight sass %}
-// Override initial variables here
-// You can add new ones or update existing ones:
-
-$blue: #72d0eb // Update blue
-$pink: #ffb3b3 // Add pink
-$family-serif: "Georgia", serif // Add a serif family
-
-// Override generated variables here
-// For example, by default, the $danger color is $red and the font is sans-serif
-// You can change these values:
-
-$danger: $orange // Use the existing orange
-$family-primary: $family-serif // Use the new serif family
-
-@import "bulma"
-{% endhighlight %}
         </p>
+        <p class="subtitle is-6">
+          Notice how the <code>$blue-invert</code> is now black instead of white, based on <code>findColorInvert(#72d0eb)</code></p>
+        </p>
+        <figure>
+          <img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">
+          <img width="640" height="640" src="{{site.url}}/images/customize-after.png" alt="Customizing Bulma with Sass">
+        </figure>
       </div>
     </article>
   </div>

sass/utilities/_all.sass

@@ -1,7 +1,8 @@
 @charset "utf-8"
 
+@import "initial-variables.sass"
 @import "functions.sass"
-@import "variables.sass"
+@import "derived-variables.sass"
 @import "animations.sass"
 @import "mixins.sass"
 @import "controls.sass"

sass/utilities/derived-variables.sass

@@ -0,0 +1,80 @@
+$primary: $turquoise !default
+
+$info: $blue !default
+$success: $green !default
+$warning: $yellow !default
+$danger: $red !default
+
+$light: $white-ter !default
+$dark: $grey-darker !default
+
+// Invert colors
+
+$orange-invert: findColorInvert($orange) !default
+$yellow-invert: findColorInvert($yellow) !default
+$green-invert: findColorInvert($green) !default
+$turquoise-invert: findColorInvert($turquoise) !default
+$blue-invert: findColorInvert($blue) !default
+$purple-invert: findColorInvert($purple) !default
+$red-invert: findColorInvert($red) !default
+
+$primary-invert: $turquoise-invert !default
+$info-invert: $blue-invert !default
+$success-invert: $green-invert !default
+$warning-invert: $yellow-invert !default
+$danger-invert: $red-invert !default
+$light-invert: $dark !default
+$dark-invert: $light !default
+
+// General colors
+
+$background: $white-ter !default
+
+$border: $grey-lighter !default
+$border-hover: $grey-light !default
+
+// Text colors
+
+$text: $grey-dark !default
+$text-invert: findColorInvert($text) !default
+$text-light: $grey !default
+$text-strong: $grey-darker !default
+
+// Code colors
+
+$code: $red !default
+$code-background: $background !default
+
+$pre: $text !default
+$pre-background: $background !default
+
+// Link colors
+
+$link: $primary !default
+$link-invert: $primary-invert !default
+$link-visited: $purple !default
+
+$link-hover: $grey-darker !default
+$link-hover-border: $grey-light !default
+
+$link-focus: $grey-darker !default
+$link-focus-border: $primary !default
+
+$link-active: $grey-darker !default
+$link-active-border: $grey-dark !default
+
+// Typography
+
+$family-primary: $family-sans-serif !default
+$family-code: $family-monospace !default
+
+$size-small: $size-7 !default
+$size-normal: $size-6 !default
+$size-medium: $size-5 !default
+$size-large: $size-4 !default
+
+// Lists and maps
+
+$colors: (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default
+
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default

sass/utilities/initial-variables.sass

@@ -0,0 +1,66 @@
+// Colors
+
+$black:        hsl(0, 0%, 4%) !default
+$black-bis:    hsl(0, 0%, 7%) !default
+$black-ter:    hsl(0, 0%, 14%) !default
+
+$grey-darker:  hsl(0, 0%, 21%) !default
+$grey-dark:    hsl(0, 0%, 29%) !default
+$grey:         hsl(0, 0%, 48%) !default
+$grey-light:   hsl(0, 0%, 71%) !default
+$grey-lighter: hsl(0, 0%, 86%) !default
+
+$white-ter:    hsl(0, 0%, 96%) !default
+$white-bis:    hsl(0, 0%, 98%) !default
+$white:        hsl(0, 0%, 100%) !default
+
+$orange:       hsl(14,  100%, 53%) !default
+$yellow:       hsl(48,  100%, 67%) !default
+$green:        hsl(141, 71%,  48%) !default
+$turquoise:    hsl(171, 100%, 41%) !default
+$blue:         hsl(217, 71%,  53%) !default
+$purple:       hsl(271, 100%, 71%) !default
+$red:          hsl(348, 100%, 61%) !default
+
+// Typography
+
+$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-monospace: monospace !default
+$render-mode: optimizeLegibility !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.75rem !default
+
+$weight-light: 300 !default
+$weight-normal: 400 !default
+$weight-semibold: 500 !default
+$weight-bold: 700 !default
+
+// Body
+
+$body-background: #fff !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
+$radius: 3px !default
+$radius-large: 5px !default
+$speed: 86ms !default

sass/utilities/variables.sass

@@ -26,7 +26,7 @@ $purple:       hsl(271, 100%, 71%) !default
 $red:          hsl(348, 100%, 61%) !default
 
 // Typography
-$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
 $family-monospace: monospace !default
 $render-mode: optimizeLegibility !default
 
@@ -44,12 +44,11 @@ $weight-semibold: 500 !default
 $weight-bold: 700 !default
 
 // Body
-$body-background: $white !default
+$body-background: #fff !default
 $body-size: 16px !default
 
 // Responsiveness
-// 960, 1152, and 1344 have been chosen because
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
-// they are divisible by both 12 and 16
 $tablet: 769px !default
 // 960px container + 40px
 $desktop: 1000px !default