library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix #187

Browse Source
This commit is contained in:
Jeremy Thomas 2017-04-15 17:24:01 +01:00
parent ab286400d1
commit 3534149fa0
4 changed files with 95 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -26,6 +26,7 @@
* Fix #676 checkbox/radio wrapping
* Feature #479 has-icons placement
* Fix #442 selected table row
* Fix #187 add customize page
## 0.4.0

3
docs/_includes/subnav-overview.html
View File

@ -4,6 +4,9 @@
<a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
Start
</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/">
Classes
</a>

91
docs/documentation/overview/customize.html Normal file
View 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>

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

@ -66,84 +66,5 @@ npm install bulma
{% endhighlight %}
</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>
</section>