- Since you are watching for changes, simply save the file to see the result: -
+ {% if include.build %} ++ Rebuild the CSS to see the result: +
+ {% else %} ++ Since you are watching for changes, simply save the file to see the result: +
+ {% endif %}
- Save this file as mypage.html.
+ Save this file as mypage.html{% if include.dist == true %} in the dist folder{% endif %}.
Notice the css/mystyles.css path for your stylesheet. This will be the location of the CSS file we will generate with Sass.
diff --git a/docs/_includes/steps/create-package.html b/docs/_includes/steps/create-package.html
new file mode 100644
index 00000000..2a162b61
--- /dev/null
+++ b/docs/_includes/steps/create-package.html
@@ -0,0 +1,26 @@
+{% capture init %}
+npm init
+{% endcapture %}
+
+{% capture step_1 %}
+
+ In your terminal, create a new folder called mybulma, navigate to it, then type the following command:
+
+ This will launch an interactive setup to create package.json. When prompted for an entry point, enter {{ include.entry }}.
+
package.json file' | prepend: include.number %}
+
+{% include components/step.html
+ title=step_title
+ content=step_1
+%}
diff --git a/docs/_includes/steps/create-sass-file.html b/docs/_includes/steps/create-sass-file.html
index ee999552..8e9daee0 100644
--- a/docs/_includes/steps/create-sass-file.html
+++ b/docs/_includes/steps/create-sass-file.html
@@ -1,6 +1,6 @@
{% capture scss_bulma %}
@charset "utf-8";
-@import "{{ include.path }}/bulma/bulma.sass";
+@import "{{ include.path }}";
{% endcapture %}
{% capture step_3 %}
@@ -19,9 +19,32 @@
+ Inside the same src folder, add a file called mystyles.scss:
+
+ Make sure to write the correct path to the bulma folder.
+
Bulma is highly customizable thanks to 415 Sass variables living across 28 files.
- These variables exist at 3 levels: + These variables exist at 4 levels:
To customize Bulma, you will need to:
@@ -54,4 +63,20 @@ breadcrumb:
create your own .scss or .sass file
+
+
+ This can be achieved with: +
+ +Bulma has two variable files divided into 4 sections:
+ +{{ initial_vars['$blue'].name }}: {{ initial_vars['$blue'].value }}{{ initial_vars['$size-1'].name }}: {{ initial_vars['$size-1'].value }}{{ initial_vars['$gap'].name }}: {{ initial_vars['$gap'].value }}{{ initial_vars['$easing'].name }}: {{ initial_vars['$easing'].value }} or {{ initial_vars['$radius-large'].name }}: {{ initial_vars['$radius-large'].value }}{{ derived_vars['$primary'].name }}: {{ derived_vars['$primary'].value }}{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}{{ derived_vars['$info'].name }}: {{ derived_vars['$info'].value }}{{ derived_vars['$success'].name }}: {{ derived_vars['$success'].value }}{{ derived_vars['$warning'].name }}: {{ derived_vars['$warning'].value }}{{ derived_vars['$danger'].name }}: {{ derived_vars['$danger'].value }}{{ derived_vars['$dark'].name }}: {{ derived_vars['$dark'].value }}{{ derived_vars['$text'].name }}: {{ derived_vars['$text'].value }}{{ derived_vars['$background'].name }}: {{ derived_vars['$background'].value }}: a general background color{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}: the links use the primary color{{ derived_vars['$family-primary'].name }}: {{ derived_vars['$family-primary'].value }}: the primary font family is the sans-serif one{{ derived_vars['$colors'].name }}: {{ derived_vars['$colors'].value }}{{ derived_vars['$shades'].name }}: {{ derived_vars['$shades'].value }}{{ derived_vars['$sizes'].name }}: {{ derived_vars['$sizes'].value }}+ To override any of these variables, just set them before importing Bulma. +
++ These are initial variables with a literal value. +
+
- In your terminal, create a new folder called mybulma, navigate to it, then type the following command:
-
- This will launch an interactive setup to create package.json. When prompted for an entry point, enter sass/mystyles.scss.
-
To test it out, go in your terminal and run the following command:
- - {% highlight bash %}{{ npm_build }}{% endhighlight %}
If set up correctly, you will see the following message:
@@ -149,9 +129,9 @@ npm start
{% highlight bash %}{{ npm_watch }}{% endhighlight %}
{% endcapture %}
-{% include components/step.html
- title='1. Create a package.json file'
- content=step_1
+{% include steps/create-package.html
+ number="1"
+ entry="sass/mystyles.scss"
%}
+ Install the packages required to parse and build your CSS: +
+
+ Your package.json should look like this at this point.
+
+ Create a webpack.config.js file:
+
+ This setup takes the src folder as input, and outputs in the dist folder.
+
+ Create a src folder in which you add a file called index.js with the following content:
+
+ Create a dist folder in which you add a css folder, and a js folder. Leave these last two folders empty. Their content will be generated by the webpack build.
+
+ In package.json, add the following:
+
+ To test it out, go in your terminal and run the following command: +
+src folder"
+ content=step_4
+%}
+
+dist folder"
+ content=step_6
+%}
+
+