mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
c7c1a99afa
* Addition of Sass Color Map to Customize Page Added verbiage to Customization page to demonstrate how to add new colors to the color map. Using this methodology allows for the dev to use `<i class="fa fa-github has-text-github"></i>` or use `is-github` in a class for a background. * Change map-merge of $color to only merge once, Sass Complience - Changed map-merge of $color to import from another map rather than adding each line individually. - Made it Sass Compliant Updating based on #1394 comments from @jgthms
111 lines
3.5 KiB
HTML
111 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"
|
|
|
|
// 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)
|
|
// Add new color variables to the color map.
|
|
$addColors: (
|
|
"twitter":($twitter, $twitter-invert),
|
|
"linkedin": ($linkedin, $linkedin-invert),
|
|
"github": ($github, $github-invert)
|
|
)
|
|
$colors: map-merge($colors, $addColors)
|
|
|
|
// 5. 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>
|