mirror of
https://github.com/jgthms/bulma
synced 2026-03-21 04:34:30 -07:00
Fix #187
This commit is contained in:
Jeremy Thomas
@@ -26,6 +26,7 @@
|
|||||||
* Fix #676 checkbox/radio wrapping
|
* Fix #676 checkbox/radio wrapping
|
||||||
* Feature #479 has-icons placement
|
* Feature #479 has-icons placement
|
||||||
* Fix #442 selected table row
|
* Fix #442 selected table row
|
||||||
|
* Fix #187 add customize page
|
||||||
|
|
||||||
## 0.4.0
|
## 0.4.0
|
||||||
|
|
||||||
|
|||||||
@@ -4,6 +4,9 @@
|
|||||||
<a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
|
<a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
|
||||||
Start
|
Start
|
||||||
</a>
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'customize' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/customize/">
|
||||||
|
Customize
|
||||||
|
</a>
|
||||||
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
|
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
|
||||||
Classes
|
Classes
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
91
docs/documentation/overview/customize.html
Normal file
91
docs/documentation/overview/customize.html
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: overview
|
||||||
|
doc-subtab: customize
|
||||||
|
---
|
||||||
|
|
||||||
|
{% 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 styles...
|
||||||
|
</p>
|
||||||
|
{% highlight sass %}
|
||||||
|
// 1. Import the initial variables
|
||||||
|
@import "../sass/utilities/initial-variables"
|
||||||
|
|
||||||
|
// 2. Set your own initial variables
|
||||||
|
// Update blue
|
||||||
|
$blue: #72d0eb
|
||||||
|
// Add pink
|
||||||
|
$pink: #ffb3b3
|
||||||
|
// Add a serif family
|
||||||
|
$family-serif: "Merriweather", "Georgia", serif
|
||||||
|
|
||||||
|
// 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
|
||||||
|
|
||||||
|
// 4. Import the rest of Bulma
|
||||||
|
@import "../bulma"
|
||||||
|
{% endhighlight %}
|
||||||
|
</p>
|
||||||
|
</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">
|
||||||
|
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>
|
||||||
|
</section>
|
||||||
@@ -66,84 +66,5 @@ npm install bulma
|
|||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<h3 class="title">Customizing with Sass</h3>
|
|
||||||
|
|
||||||
<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 styles...
|
|
||||||
</p>
|
|
||||||
{% highlight sass %}
|
|
||||||
// 1. Import the initial variables
|
|
||||||
@import "../sass/utilities/initial-variables"
|
|
||||||
|
|
||||||
// 2. Set your own initial variables
|
|
||||||
// Update blue
|
|
||||||
$blue: #72d0eb
|
|
||||||
// Add pink
|
|
||||||
$pink: #ffb3b3
|
|
||||||
// Add a serif family
|
|
||||||
$family-serif: "Merriweather", "Georgia", serif
|
|
||||||
|
|
||||||
// 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
|
|
||||||
|
|
||||||
// 4. Import the rest of Bulma
|
|
||||||
@import "../bulma"
|
|
||||||
{% endhighlight %}
|
|
||||||
</p>
|
|
||||||
</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">
|
|
||||||
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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user