diff --git a/CHANGELOG.md b/CHANGELOG.md index ca603141..63d78eba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/docs/_includes/subnav-overview.html b/docs/_includes/subnav-overview.html index c4de1e9e..516449bf 100644 --- a/docs/_includes/subnav-overview.html +++ b/docs/_includes/subnav-overview.html @@ -4,6 +4,9 @@ Start + + Customize + Classes diff --git a/docs/documentation/overview/customize.html b/docs/documentation/overview/customize.html new file mode 100644 index 00000000..6ca9ccb5 --- /dev/null +++ b/docs/documentation/overview/customize.html @@ -0,0 +1,91 @@ +--- +layout: documentation +doc-tab: overview +doc-subtab: customize +--- + +{% include subnav-overview.html %} + +
+
+

Customizing with Sass

+

Create your own theme with a simple set of variables

+ +
+ +
+

If you're familiar with Sass and want to customize Bulma with your own colors and variables, just install Bulma via npm:

+
+ +
+
+

1

+
+
+

+ Download the source files: +

+{% highlight bash %} +npm install bulma +{% endhighlight %} +
or clone the repository: https://github.com/jgthms/bulma
+
+
+ +
+
+

2

+
+
+

+ Set your variables +

+

+ Add your own colors, set new fonts, override Bulma styles... +

+{% 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 %} +

+
+
+ +
+
+

3

+
+
+

+ See the result: before and after +

+

+ Notice how the $blue-invert is now black instead of white, based on findColorInvert(#72d0eb)

+

+
+ Customizing Bulma with Sass + Customizing Bulma with Sass +
+
+
+
+
diff --git a/docs/documentation/overview/start.html b/docs/documentation/overview/start.html index 2b0f9ded..51b520d2 100644 --- a/docs/documentation/overview/start.html +++ b/docs/documentation/overview/start.html @@ -66,84 +66,5 @@ npm install bulma {% endhighlight %} - -
- -

Customizing with Sass

- -
-

If you're familiar with Sass and want to customize Bulma with your own colors and variables, just install Bulma via npm:

-
- -
-
-

1

-
-
-

- Download the source files: -

-{% highlight bash %} -npm install bulma -{% endhighlight %} -
or clone the repository: https://github.com/jgthms/bulma
-
-
- -
-
-

2

-
-
-

- Set your variables -

-

- Add your own colors, set new fonts, override Bulma styles... -

-{% 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 %} -

-
-
- -
-
-

3

-
-
-

- See the result: before and after -

-

- Notice how the $blue-invert is now black instead of white, based on findColorInvert(#72d0eb)

-

-
- Customizing Bulma with Sass - Customizing Bulma with Sass -
-
-