mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Fix #637
This commit is contained in:
Jeremy Thomas
parent
1e4f2bd67b
commit
9feff3d821
@ -19,6 +19,7 @@
|
||||
* Fix #605 container example
|
||||
* Fix #458 select expanded
|
||||
* Fix #403 separate animations
|
||||
* Fix #637 customize Bulma
|
||||
|
||||
## 0.4.0
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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
|
||||
// You can add new ones or update existing ones:
|
||||
// 1. Import the initial variables
|
||||
@import "../sass/utilities/initial-variables"
|
||||
|
||||
$blue: #72d0eb // Update blue
|
||||
$pink: #ffb3b3 // Add pink
|
||||
$family-serif: "Georgia", serif // Add a serif family
|
||||
// 2. Set your own initial variables
|
||||
// Update blue
|
||||
$blue: #72d0eb
|
||||
// Add pink
|
||||
$pink: #ffb3b3
|
||||
// Add a serif family
|
||||
$family-serif: "Merriweather", "Georgia", serif
|
||||
|
||||
// Override generated variables here
|
||||
// For example, by default, the $danger color is $red and the font is sans-serif
|
||||
// You can change these values:
|
||||
// 3. Set the derived variables
|
||||
// Use the new pink as the primary color
|
||||
$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
|
||||
$family-primary: $family-serif // Use the new serif family
|
||||
// 4. Import the rest of Bulma
|
||||
@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>
|
||||
{% 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 %}
|
||||
See the <strong>result</strong>: before and after
|
||||
</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>
|
||||
|
||||
BIN
docs/images/customize-after.png
Normal file
BIN
docs/images/customize-after.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
docs/images/customize-before.png
Normal file
BIN
docs/images/customize-before.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
@ -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"
|
||||
|
||||
80
sass/utilities/derived-variables.sass
Normal file
80
sass/utilities/derived-variables.sass
Normal file
@ -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
|
||||
66
sass/utilities/initial-variables.sass
Normal file
66
sass/utilities/initial-variables.sass
Normal file
@ -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
|
||||
@ -26,9 +26,9 @@ $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-monospace: monospace !default
|
||||
$render-mode: optimizeLegibility !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
|
||||
|
||||
$size-1: 3rem !default
|
||||
$size-2: 2.5rem !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
|
||||
// they are divisible by both 12 and 16
|
||||
// 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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user