forked from Wikiki/wikiki.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
211 lines (189 loc) · 8.31 KB
/
index.html
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
---
layout: default
route: index
fixed_navbar: true
doc-tab: overview
doc-subtab: start
---
{% include navbar.html id="Index" fixed=true has_container=true boxed=true transparent=true %}
{% include subnav-overview.html %}
<section class="section">
<div class="container">
{% include anchor.html name="Getting started" %}
<div class="content">
<p>
There are several ways to <strong>get started</strong> with Bulma-extensions. You can either:
</p>
<ol>
<li>
Use <strong>npm</strong> to install the <u>global Bulma-extensions</u> package (which includes all the extensions)
</li>
<li>
Use <strong>npm</strong> to install <u>Bulma-extension individually</u>
</li>
<li>
Use the <strong>GitHub repository</strong> to get the latest development version
</li>
</ol>
</div>
<div class="content">
<p>
Each extension contains a <strong>dist</strong> folder which includes all available files for integration into your project (example for Calendar extension):
</p>
<ul>
<li>
bulma-calendar.js
</li>
<li>
bulma-calendar.min.js
</li>
<li>
bulma-calendar.sass
</li>
<li>
bulma-calendar.min.css
</li>
</ul>
</div>
<div class="notification is-info">You can find npm package information related to a specific extension by clicking on the <strong>npm</strong> tag in the top right of each documentation page.</div>
{% include anchor.html name="Installation" %}
<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">
Use <strong>NPM</strong> to install all extensions:
</p>
<p>This package gathers all extensions in one package.</p>
{% highlight bash %}npm install bulma-extensions{% endhighlight %}
</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">
Use <strong>NPM</strong> to install extension individually:
</p>
<p>Using this method you can install only wanted extensions.</p>
<div class="has-text-info"><strong class="has-text-info">This is an example</strong> to integrate the <strong class="has-text-info">calendar</strong> extension.</div>
{% highlight bash %}npm install bulma-calendar{% endhighlight %}
</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">
Use <strong>GitHub repository</strong>:
</p>
<div>To integrate <strong class="has-text-info">all extensions</strong> use following command.</div>
{% highlight bash %}git clone git://github.com/Wikiki/bulma-extensions.git{% endhighlight %}
<div>To integrate the <strong class="has-text-info">calendar</strong> extension use following command.</div>
{% highlight bash %}git clone git://github.com/Wikiki/bulma-calendar.git{% endhighlight %}
</div>
</article>
{% include anchor.html name="Integration" %}
<hr>
<div class="content">
<p>Once installed the integration process depends on the way you installed the package and your project configuration.</p>
<p>You will find examples below based on most projects' common configurations</p>
<div class="message is-warning">
<div class="message-body">Bulma must be included first <strong>before</strong> you include bulma-extensions</div>
</div>
</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">
From NPM
</p>
<div class="has-text-info">
<strong class="has-text-info">This is an example</strong> to integrate the <strong class="has-text-info">calendar</strong> extension.</div>
<p>Open you application's main sass file and add the following line:</p>
{% highlight bash %}@import 'bulma';
@import '~bulma-calendar';{% endhighlight %}
<p>Now you can build the bulma project with <code>npm run build</code> and the output will be available in the <code>css folder</code>.</p>
</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">
From GitHub repository
</p>
<div class="content">
<ul>
<li>Clone the <a href="https://github.com/jgthms/bulma" target="_blank">bulma repo</a> following <a href="https://bulma.io/documentation/overview/start/" target="_blank">Bulma's documentation</a></li>
<li>Under the <code>sass</code> folder, create a new folder called <code>extensions</code></li>
<li>In this new folder, create a new file named <code>bulma-calendar.sass</code></li>
<li>Copy the code from the <code>bulma-calendar</code> repository's <code>sass</code> file (<a href="https://github.com/Wikiki/bulma-calendar/blob/master/dist/bulma-calendar.sass" target="_blank">bulma-calendar.sass</a>) into your new file</li>
<li>In the same folder create a new file <code>_all.sass</code> (this is not required, but will help when you add more extensions)</li>
<li>In this file add this code:
{% highlight sass %}
@charset "utf-8"
// Import Calendar extension
@import 'bulma-calendar.sass'
{% endhighlight %}</li>
<li>
<p>Open your main application's sass file and add the following line:</p>
{% highlight sass %}
@charset "utf-8"
// Import Bulma core
@import 'bulma.sass'
// Import Extensions
@import "sass/extensions/_all"
{% endhighlight %}
</li>
</ul>
</div>
</div>
</article>
<article class="media is-large">
<div class="media-content">
<p class="title is-5">
JavaScript integration
</p>
<div class="has-text-info"><strong class="has-text-info">This is an example</strong> to integrate the <strong class="has-text-info">calendar</strong> extension from NPM.</div>
<p>Open you application's main JavaScript file and add the following line:</p>
{% highlight javascript %}
import bulmaCalendar from '/node_modules/bulma-extensions/bulma-calendar/dist/bulma-calendar.min.js';
{% endhighlight %}
<p>Or integrate the JavaScript file in your HTML source:</p>
{% highlight html %}
<script src="/node_modules/bulma-extensions/bulma-calendar/dist/bulma-calendar.min.js"></script>
{% endhighlight %}
</div>
</article>
{% include anchor.html name="Development" %}
<div class="content">
<p>Each extension now integrates <a href="https://gulpjs.com/" target="_blank">Gulp</a> and <a href="https://rollupjs.org" target="_blank">Rollup</a> to automate build tasks and JavaScript code transpilation.</p>
<p class="title is-5">Compile SASS to CSS</p>
{% highlight bash %}gulp build:styles{% endhighlight %}
<p class="title is-5">Compile and Transpile JavaScript</p>
<p>You can use the following options
<ul>
<li><code>--jsFormat</code> to choose the output format (umd by default)</li>
<li><code>--babelTarget</code> to choose which browser to target (latest 2 versions by default)</li>
</ul>
</p>
{% highlight shell %}gulp build:scripts --jsFormat umd --babelTarget "latest 2 versions"{% endhighlight %}
<p class="title is-5">Build the whole project</p>
{% highlight shell %}gulp build{% endhighlight %}
<p>or use the following shortcut</p>
{% highlight shell %}gulp{% endhighlight %}
</div>
{% include anchor.html name="Need an extension?" %}
<div class="content">
<p>Are you looking for a specific extension that you feel is missing but you did not find it?</p>
<p>Don't hesitate to send me a request by <a href="https://github.com/Wikiki/bulma-extensions/issues" target="_blank">opening and issue</a> on my GitHub repository.</p>
</div>
</div>
</section>