Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 10:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix #637

Browse Source
This commit is contained in:
Jeremy Thomas
2017-04-13 00:28:35 +01:00
parent 1e4f2bd67b
commit 9feff3d821
9 changed files with 537 additions and 1250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
docs/documentation/overview/start.html
View File

@@ -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>