mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
fb1ce8eeff
Actually, the default code will result in an unexepected behavior: the `$color` map is defined in `derived-variables.sass` before setting the custom colors. IMHO the lists and maps should be defined in a dedicated sass file to avoid confusion in customisation.
114 lines
3.5 KiB
HTML
114 lines
3.5 KiB
HTML
---
|
|
title: Customize Bulma
|
|
layout: documentation
|
|
doc-tab: overview
|
|
doc-subtab: customize
|
|
---
|
|
|
|
{% capture sass %}
|
|
// 1. Import the initial variables
|
|
@import "../sass/utilities/initial-variables"
|
|
@import "../sass/utilities/functions"
|
|
|
|
// 2. Set your own initial variables
|
|
// Update blue
|
|
$blue: #72d0eb
|
|
// Add pink and its invert
|
|
$pink: #ffb3b3
|
|
$pink-invert: #fff
|
|
// Add a serif family
|
|
$family-serif: "Merriweather", "Georgia", serif
|
|
|
|
// 3. Set the derived variables
|
|
// Use the new pink as the primary color
|
|
$primary: $pink
|
|
$primary-invert: $pink-invert
|
|
// Use the existing orange as the danger color
|
|
$danger: $orange
|
|
// Use the new serif family
|
|
$family-primary: $family-serif
|
|
|
|
// 4. Setup your Custom Colors
|
|
$linkedin: #0077B5
|
|
$linkedin-invert: findColorInvert($linkedin)
|
|
$twitter: #1DA1F2
|
|
$twitter-invert: findColorInvert($twitter)
|
|
$github: #222222
|
|
$github-invert: findColorInvert($github)
|
|
|
|
// 5. Add new color variables to the color map.
|
|
@import "../sass/utilities/derived-variables.sass"
|
|
$addColors: (
|
|
"twitter":($twitter, $twitter-invert),
|
|
"linkedin": ($linkedin, $linkedin-invert),
|
|
"github": ($github, $github-invert)
|
|
)
|
|
$colors: map-merge($colors, $addColors)
|
|
|
|
// 6. Import the rest of Bulma
|
|
@import "../bulma"
|
|
{% endcapture %}
|
|
|
|
{% include subnav-overview.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Customizing with Sass</h1>
|
|
<h2 class="subtitle">Create your <strong>own theme</strong> with a simple set of <strong>variables</strong></h2>
|
|
|
|
<hr>
|
|
|
|
<div class="content">
|
|
<p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
|
|
</div>
|
|
|
|
<article class="media is-large">
|
|
<div class="media-left">
|
|
<p class="title is-5">1</p>
|
|
</div>
|
|
<div class="media-content">
|
|
<p class="title is-5">
|
|
<strong>Download</strong> the source files:
|
|
</p>
|
|
{% highlight bash %}npm install bulma{% endhighlight %}
|
|
<div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="media is-large">
|
|
<div class="media-left">
|
|
<p class="title is-5">2</p>
|
|
</div>
|
|
<div class="media-content">
|
|
<p class="title is-5">
|
|
<strong>Set</strong> your variables
|
|
</p>
|
|
<p class="subtitle is-6">
|
|
Add your own colors, set new fonts, override Bulma's default styles...
|
|
</p>
|
|
<div class="highlight-full">
|
|
{% highlight sass %}{{ sass }}{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="media is-large">
|
|
<div class="media-left">
|
|
<p class="title is-5">3</p>
|
|
</div>
|
|
<div class="media-content">
|
|
<p class="title is-5">
|
|
See the <strong>result</strong>: before and after
|
|
</p>
|
|
<p class="subtitle is-6">
|
|
As <code>$blue</code> has been updated, and since <code>$blue-invert</code> is automatically calculated with the <strong>function</strong> <code>$blue-invert: findColorInvert($blue)</code>, the <code>$blue-invert</code> is now black instead of white</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>
|
|
</section>
|