bulma/docs/documentation/overview/customize.html

114 lines
3.6 KiB
HTML
Raw Normal View History

2017-04-15 16:24:01 +00:00
---
2017-07-29 12:02:00 +00:00
title: Customize Bulma
2017-04-15 16:24:01 +00:00
layout: documentation
doc-tab: overview
doc-subtab: customize
---
2017-12-04 19:28:07 +00:00
{% capture scss_code %}
2017-07-28 21:57:51 +00:00
// 1. Import the initial variables
2017-12-04 19:28:07 +00:00
@import "../sass/utilities/initial-variables";
@import "../sass/utilities/functions";
2017-07-28 21:57:51 +00:00
// 2. Set your own initial variables
// Update blue
2017-12-04 19:28:07 +00:00
$blue: #72d0eb;
2017-07-28 21:57:51 +00:00
// Add pink and its invert
2017-12-04 19:28:07 +00:00
$pink: #ffb3b3;
$pink-invert: #fff;
2017-07-28 21:57:51 +00:00
// Add a serif family
2017-12-04 19:28:07 +00:00
$family-serif: "Merriweather", "Georgia", serif;
2017-07-28 21:57:51 +00:00
// 3. Set the derived variables
// Use the new pink as the primary color
2017-12-04 19:28:07 +00:00
$primary: $pink;
$primary-invert: $pink-invert;
2017-07-28 21:57:51 +00:00
// Use the existing orange as the danger color
2017-12-04 19:28:07 +00:00
$danger: $orange;
2017-07-28 21:57:51 +00:00
// Use the new serif family
2017-12-04 19:28:07 +00:00
$family-primary: $family-serif;
2017-07-28 21:57:51 +00:00
// 4. Setup your Custom Colors
2017-12-04 19:28:07 +00:00
$linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin);
$twitter: #55acee;
$twitter-invert: findColorInvert($twitter);
$github: #333;
$github-invert: findColorInvert($github);
// 5. Add new color variables to the color map.
@import "../sass/utilities/derived-variables";
$addColors: (
2017-11-06 12:39:36 +00:00
"twitter":($twitter, $twitter-invert),
"linkedin": ($linkedin, $linkedin-invert),
"github": ($github, $github-invert)
2017-12-04 19:28:07 +00:00
);
$colors: map-merge($colors, $addColors);
// 6. Import the rest of Bulma
2017-12-04 19:28:07 +00:00
@import "../bulma";
2017-07-28 21:57:51 +00:00
{% endcapture %}
2018-03-26 13:46:39 +00:00
{% include subnav/subnav-overview.html %}
2017-04-15 16:24:01 +00:00
<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>
2017-07-28 21:57:51 +00:00
{% highlight bash %}npm install bulma{% endhighlight %}
2017-04-15 16:24:01 +00:00
<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">
2017-12-04 19:28:07 +00:00
Create a file called <code>mystyles.scss</code> and add your own colors, set new fonts, override Bulma's default styles...
2017-04-15 16:24:01 +00:00
</p>
2017-07-28 21:57:51 +00:00
<div class="highlight-full">
2017-12-04 19:28:07 +00:00
{% highlight sass %}{{ scss_code }}{% endhighlight %}
2017-07-28 21:57:51 +00:00
</div>
2017-04-15 16:24:01 +00:00
</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">
2017-05-05 12:04:16 +00:00
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>
2017-04-15 16:24:01 +00:00
</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>