blob: 1d6ca577806d45584397a13409e41bcd79621d65 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: With sass-cli
layout: documentation
doc-tab: customize
doc-subtab: sass-cli
breadcrumb:
- home
- documentation
- customize
- customize-sass-cli
---
{% capture gem_install %}
gem install sass
{% endcapture %}
{% capture gem_test %}
Sass 3.5.3 (Bleeding Edge)
{% endcapture %}
{% capture step_1 %}
<div class="content">
<p>
In your terminal, create a new folder called <code>mybulma</code>, navigate to it, then install the <strong>Sass gem</strong>:
</p>
</div>
{% highlight bash %}{{ gem_install }}{% endhighlight %}
<div class="content">
<p>
To try it out, run <code>sass -v</code> and you should see the following:
</p>
</div>
{% highlight bash %}{{ gem_test }}{% endhighlight %}
<div class="message is-info">
<div class="message-body">
<p>
If you are on <strong>Windows</strong> and use <strong>Chocolatey</strong>, you can try <code>choco install sass</code>.
</p>
<p>
If you are on <strong>Mac</strong> and use <strong>Homebrew</strong>, you can try <code>brew install sass/sass/sass</code>.
</p>
</div>
</div>
{% endcapture %}
{% capture step_2 %}
<div class="content">
<p>
Get the latest version of Bulma:
</p>
<p>
<a class="button is-primary" href="{{ site.data.meta.download }}">
<strong>Download</strong>
</a>
</p>
<p>
Unzip it and put the <code>bulma-{{ site.data.meta.version }}</code> folder inside your <code>mybulma</code> folder.
</p>
</div>
{% endcapture %}
{% capture build_sass %}
sass --no-source-map sass/mystyles.scss:css/mystyles.css
{% endcapture %}
{% capture watch_sass %}
sass --watch --no-source-map sass/mystyles.scss:css/mystyles.css
{% endcapture %}
{% capture step_5 %}
<div class="content">
<p>
In your terminal, type the following command:
</p>
</div>
{% highlight bash %}{{ build_sass }}{% endhighlight %}
<div class="content">
<p>
<strong>Reload</strong> the page and it should be styled like this:
</p>
</div>
{%
include components/figure.html
path="customize/custom-bulma-02-default"
extension="png"
alt="Bulma default styles"
width="600"
height="300"
caption="Bulma's default styles"
%}
<div class="content">
<p>
To <strong>watch for changes</strong>, just launch the following command:
</p>
</div>
{% highlight bash %}{{ watch_sass }}{% endhighlight %}
{% endcapture %}
{% include components/step.html
title='1. Install Sass'
content=step_1
%}
<hr>
{% include components/step.html
title='2. Download Bulma'
content=step_2
%}
<hr>
{% assign bulma_path = site.data.meta.version | prepend: "../bulma-" | append: "/bulma.sass" %}
{% include steps/create-sass-file.html
number="3"
path=bulma_path
%}
<hr>
{% include steps/create-html-page.html
number="4"
%}
<hr>
{% include components/step.html
title='5. Build the CSS file'
content=step_5
%}
<hr>
{% include steps/add-custom-styles.html
number="6"
%}
|
