3 |
11 |
12 |
--------------------------------------------------------------------------------
/_includes/subnav-layout.html:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/_includes/subnav-modifiers.html:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/_includes/subnav-overview.html:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% include head.html %}
4 |
5 | {{ content }}
6 | {% include footer.html %}
7 |
8 |
9 |
--------------------------------------------------------------------------------
/_layouts/documentation.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | route: documentation
4 | ---
5 |
6 |
7 |
8 |
9 | {% include header.html %}
10 |
11 |
14 |
15 |
16 |
17 |
18 | Documentation
19 |
20 |
21 | Everything you need to create a website with Bulma
22 |
23 |
24 |
25 | {% include carbon.html %}
26 |
27 |
28 |
29 |
58 |
59 | {{ content }}
60 |
--------------------------------------------------------------------------------
/_layouts/post.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | route: blog
4 | ---
5 |
6 | {% include blog-hero.html %}
7 |
8 |
9 |
10 |
11 |
12 | Back
13 |
14 |
15 | {{ page.date | date_to_string }}
16 |
17 |
18 | {{ page.title }}
19 |
20 |
21 | {{ content }}
22 |
23 |
24 |
26 |
--------------------------------------------------------------------------------
/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Blog launched, new responsive columns, new helpers"
4 | ---
5 |
6 | First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes.
7 |
8 | ### Columns on mobile too
9 |
10 | By default, columns are only activated on **tablet** and **desktop**. If you want to use columns on mobile _too_, add the `is-mobile` modifier on the `columns` container.
11 |
12 | {% highlight html %}
13 |
19 | {% endhighlight %}
20 |
21 | ### Responsive columns
22 |
23 | You can now apply different **column size** for each **breakpoint**.
24 |
25 | For example, let's say you want a column to take half the width on mobile, a third on tablet, and a quarter on desktop:
26 |
27 |
28 |
29 |
30 | is-half-mobile
31 | is-one-third-tablet
32 | is-one-quarter-desktop
33 |
34 |
35 |
38 |
41 |
44 |
47 |
48 |
49 | {% highlight html %}
50 |
54 | {% endhighlight %}
55 |
56 |
57 |
60 |
61 | If you use mobile modifiers on single column elements, make sure to use the is-mobile modifier on the columns container.
62 |
63 |
64 |
65 | ### Multiline columns
66 |
67 | By default, if you want to start a new **row**, you just need to close a `columns` container and open a new one.
68 |
69 | But you can also add the `is-multiline` **modifier** on the `columns` container, and use **column size** modifiers (like `is-half` or `is-3`) to define size on multiple rows within the _same_ container.
70 |
71 |
72 |
75 |
78 |
81 |
84 |
87 |
90 |
93 |
96 |
99 |
100 |
101 | {% highlight html %}
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 | {% endhighlight %}
114 |
115 | ### Helpers section
116 |
117 | While modifiers are specific to each Bulma element, **helpers** are general utility classes that can be applied on almost _any_ element. Check out the new [helpers documentation](/documentation/modifiers/helpers/)!
118 |
--------------------------------------------------------------------------------
/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Metro UI CSS grid with Bulma tiles"
4 | ---
5 |
6 | Have you ever wanted to build a **Metro-UI-like grid in CSS**?
7 | Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element.
8 |
9 | [](http://bulma.io/documentation/grid/tiles/)
10 |
11 | Check out the [documentation](http://bulma.io/documentation/grid/tiles/)!
12 |
--------------------------------------------------------------------------------
/atom.xml:
--------------------------------------------------------------------------------
1 | ---
2 | ---
3 |
4 |
5 |
6 | {{ site.name | xml_escape }}
7 | {% if site.description %}{{ site.description | xml_escape }}{% endif %}
8 | {{ site.url }}
9 | {{ site.url }}
10 | {{ site.time | date_to_xmlschema }}
11 |
12 | {{ site.name }}
13 | bbxdesign@gmail.com
14 |
15 |
16 | {% for post in site.posts limit:10 %}
17 | -
18 | {{ post.title | xml_escape }}
19 | {% if post.author.name %}
20 | {{ post.author.name | xml_escape }}
21 | {% endif %}
22 | {% if post.introduction %}
23 | {{ post.introduction | xml_escape }}
24 | {% else %}
25 | {{ post.content | xml_escape }}
26 | {% endif %}
27 | {{ post.date | date_to_rfc822 }}
28 | {{ site.url }}{{ post.url }}
29 | {{ site.url }}{{ post.url }}
30 |
31 | {% endfor %}
32 |
33 |
34 |
--------------------------------------------------------------------------------
/blog.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | route: blog
4 | ---
5 |
6 | {% include blog-hero.html %}
7 |
8 | {% for post in site.posts %}
9 |
10 |
11 |
12 |
13 |
14 | {{ post.date | date_to_string }}
15 |
16 |
21 |
22 | {{ post.content }}
23 |
24 |
25 |
26 |
28 | {% endfor %}
29 |
--------------------------------------------------------------------------------
/documentation/components/card.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: components
4 | doc-subtab: card
5 | ---
6 |
7 | {% include subnav-components.html %}
8 |
9 |
10 |
11 |
Card
12 |
An all-around flexible and composable component
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 
22 |
23 |
24 |
25 |
36 |
37 |
38 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
@bulmaio.
#css #responsive
39 |
40 |
11:09 PM - 1 Jan 2016
41 |
42 |
43 |
44 |
45 |
46 | {% highlight html %}
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
65 |
66 |
67 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
68 | Phasellus nec iaculis mauris.
@bulmaio.
69 |
#css #responsive
70 |
71 |
11:09 PM - 1 Jan 2016
72 |
73 |
74 |
75 | {% endhighlight %}
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
92 |
93 |
94 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
@bulmaio.
#css #responsive
95 |
96 |
11:09 PM - 1 Jan 2016
97 |
98 |
99 |
104 |
105 |
106 |
107 | {% highlight html %}
108 |
109 |
117 |
118 |
119 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
@bulmaio.
#css #responsive
120 |
121 |
11:09 PM - 1 Jan 2016
122 |
123 |
124 |
129 |
130 | {% endhighlight %}
131 |
132 |
133 |
135 |
--------------------------------------------------------------------------------
/documentation/components/level.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: components
4 | doc-subtab: level
5 | ---
6 |
7 | {% include subnav-components.html %}
8 |
9 |
10 |
11 |
Level
12 |
A multi-purpose horizontal level, which can contain almost any other element
13 |
14 |
15 |
16 |
17 |
The structure of a level is the following:
18 |
19 | -
20 |
level: main container
21 |
22 | level-left for the left side-
24 |
level-right for the right side
25 |
26 | level-item for each individual element
28 |
29 |
30 |
31 |
32 |
In a level-item, you can then insert almost anything you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma level, they will always be vertically centered.
33 |
34 |
35 |
36 |
72 |
73 |
74 |
75 |
111 |
112 |
113 | {% highlight html %}
114 |
115 |
142 | {% endhighlight %}
143 |
144 |
145 |
Centered level
146 |
147 |
148 | If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container.
149 |
150 |
151 |
152 |
170 |
171 |
172 | {% highlight html %}
173 |
191 | {% endhighlight %}
192 |
193 |
194 |
211 |
212 |
213 | {% highlight html %}
214 |
231 | {% endhighlight %}
232 |
233 |
234 |
Mobile level
235 |
236 | By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container.
237 |
238 |
239 |
240 |
258 |
259 |
261 |
--------------------------------------------------------------------------------
/documentation/components/menu.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: components
4 | doc-subtab: menu
5 | ---
6 |
7 | {% include subnav-components.html %}
8 |
9 |
10 |
11 |
Menu
12 |
A simple menu, for any type of vertical navigation
13 |
14 |
15 |
16 |
17 |
18 |
51 |
52 |
53 | {% highlight html %}
54 |
87 | {% endhighlight %}
88 |
89 |
90 |
92 |
--------------------------------------------------------------------------------
/documentation/components/modal.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: components
4 | doc-subtab: modal
5 | ---
6 |
7 | {% include subnav-components.html %}
8 |
9 |
10 |
11 |
Modal
12 |
A classic modal overlay, in which you can include any content you want
13 |
14 |
15 |
16 |
17 |
The modal structure is very simple:
18 |
19 | -
20 |
modal: the main container
21 |
22 | -
23 |
modal-background: a transparent overlay that can act as a click target to close the modal
24 |
25 | -
26 |
modal-content: a horizontally and verticaly centered container, with a maximum width of 640px, in which you can include any content
27 |
28 | -
29 |
modal-close: a simple cross located in the top right corner
30 |
31 |
32 |
33 |
34 |
35 | Launch example modal
36 |
37 |
38 |
39 | {% highlight html %}
40 |
49 | {% endhighlight %}
50 |
51 |
52 |
To activate the modal, just add the is-active modifier on the .modal container
53 |
54 |
55 |
56 |
59 |
60 | Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself
61 |
62 |
63 |
64 |
65 |
66 |
Image modal
67 |
68 |
69 |
Because a modal can contain anything you want, you can very simply use it to build an image gallery for example:
70 |
71 | Launch image modal
72 |
73 |
74 |
75 | {% highlight html %}
76 |
77 |
78 |
79 |
80 | 
81 |
82 |
83 |
84 |
85 | {% endhighlight %}
86 |
87 |
88 |
89 |
Modal card
90 |
91 |
92 |
If you want a more classic modal, with a head, a body and a foot, use the modal-card.
93 |
94 | Launch modal card
95 |
96 |
97 |
98 | {% highlight html %}
99 |
100 |
101 |
102 |
103 | Modal title
104 |
105 |
106 |
109 |
113 |
114 |
115 | {% endhighlight %}
116 |
117 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
130 |
131 |
132 |
133 | John Smith @johnsmith 31m
134 |
135 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
136 |
137 |
138 |
151 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 | Modal title
173 |
174 |
175 |
176 |
177 |
Hello World
178 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
179 |
Second level
180 |
Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
181 |
182 | - In fermentum leo eu lectus mollis, quis dictum mi aliquet.
183 | - Morbi eu nulla lobortis, lobortis est in, fringilla felis.
184 | - Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
185 | - Ut non enim metus.
186 |
187 |
Third level
188 |
Quisque ante lacus, malesuada ac auctor vitae, congue non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
189 |
190 | - Donec blandit a lorem id convallis.
191 | - Cras gravida arcu at diam gravida gravida.
192 | - Integer in volutpat libero.
193 | - Donec a diam tellus.
194 | - Aenean nec tortor orci.
195 | - Quisque aliquam cursus urna, non bibendum massa viverra eget.
196 | - Vivamus maximus ultricies pulvinar.
197 |
198 |
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.
199 |
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
200 |
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.
201 |
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.
202 |
Fourth level
203 |
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.
204 |
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
205 |
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
206 |
Fifth level
207 |
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
208 |
Sixth level
209 |
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
210 |
211 |
213 |
217 |
218 |
219 |
--------------------------------------------------------------------------------
/documentation/components/nav.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: components
4 | doc-subtab: nav
5 | ---
6 |
7 | {% include subnav-components.html %}
8 |
9 |
10 |
11 |
Nav
12 |
13 | A responsive horizontal nav bar that can contain links, tabs, buttons, icons, and a logo
14 |
15 |
16 |
17 |
18 |
19 |
20 | The nav container can have 3 parts:
21 |
22 |
23 | nav-leftnav-centernav-right
27 |
28 | For responsiveness, 2 additional classes are available:
29 |
30 |
31 | nav-toggle for the hamburger menu on mobilenav-menu for menu that is collapsable on mobile (you can combine it with nav-right)
34 |
35 |
36 |
37 |
90 |
91 |
92 | {% highlight html %}
93 |
151 |
152 | {% endhighlight %}
153 |
154 |
155 |
156 |
Modifiers
157 |
158 |
159 |
160 | - the
nav container can have a shadow by adding the has-shadow modifier
161 | - the
nav-item can become active by adding the is-active modifier
162 | - the
nav-item can become a tab by adding the is-tab modifier
163 |
164 |
165 |
206 |
--------------------------------------------------------------------------------
/documentation/components/pagination.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: components
4 | doc-subtab: pagination
5 | ---
6 |
7 | {% include subnav-components.html %}
8 |
9 |
10 |
11 |
Pagination
12 |
A responsive, usable, and flexible pagination
13 |
14 |
15 |
16 |
17 |
44 |
45 | {% highlight html %}
46 |
73 | {% endhighlight %}
74 |
76 |
--------------------------------------------------------------------------------
/documentation/components/panel.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: components
4 | doc-subtab: panel
5 | ---
6 |
7 | {% include subnav-components.html %}
8 |
9 |
10 |
11 |
Panel
12 |
A composable panel, for compact controls
13 |
14 |
15 |
16 |
115 |
117 |
--------------------------------------------------------------------------------
/documentation/elements/box.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: elements
4 | doc-subtab: box
5 | ---
6 |
7 | {% include subnav-elements.html %}
8 |
9 |
10 |
11 |
Box
12 |
13 | A white box to contain other elements
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | The .box element is simply a container with a shadow, a border, a radius, and some padding.
23 |
24 | For example, you can include a media object:
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
37 |
38 |
39 |
40 | John Smith @johnsmith 31m
41 |
42 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
43 |
44 |
45 |
58 |
60 |
61 |
62 |
63 |
64 | {% highlight html %}
65 |
66 |
67 |
72 |
73 |
74 |
75 | John Smith @johnsmith 31m
76 |
77 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
78 |
79 |
80 |
93 |
95 |
96 | {% endhighlight %}
97 |
98 |
100 |
--------------------------------------------------------------------------------
/documentation/elements/icon.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: elements
4 | doc-subtab: icon
5 | ---
6 |
7 | {% include subnav-elements.html %}
8 |
9 |
10 |
11 |
Icons
12 |
13 | Bulma is compatible with Font Awesome icons.
14 |
15 |
16 |
17 |
18 |
19 |
Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class:
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | {% highlight html %}
29 |
30 |
31 |
32 | {% endhighlight %}
33 |
34 |
35 |
The icon container will take up exactly 24 x 24 pixels. The icon itself is sized at 21px.
36 |
37 |
38 |
39 |
40 |
Sizes
41 |
42 |
43 |
Font Awesome icons use a font-size of 28px by default, and are best rendered when using multiples of 7.
44 |
The Bulma icon container is always slightly bigger than the font-size used:
45 |
46 |
47 |
48 |
49 |
50 | | Class |
51 | Font-size |
52 | Container size |
53 |
54 |
55 |
56 |
57 | icon is-small |
58 | |
59 | 14px |
60 | 16x16px |
61 |
62 |
63 | icon |
64 | |
65 | 21px |
66 | 24x24px |
67 |
68 |
69 | icon is-medium |
70 | |
71 | 28px |
72 | 32x32px |
73 |
74 |
75 | icon is-large |
76 | |
77 | 42px |
78 | 48x48px |
79 |
80 |
81 |
82 |
84 |
--------------------------------------------------------------------------------
/documentation/elements/image.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: elements
4 | doc-subtab: image
5 | ---
6 |
7 | {% include subnav-elements.html %}
8 |
9 |
10 |
11 |
Images
12 |
13 | A container for responsive images
14 |
15 |
16 |
17 |
18 |
19 |
Because images can take a few seconds to load (or not at all), use the .image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.
20 |
21 |
22 |
23 |
24 | 
25 |
26 |
27 |
28 | {% highlight html %}
29 |
30 |
31 |
32 | {% endhighlight %}
33 |
34 |
35 |
36 |
Fixed square images
37 |
38 |
There are 7 dimensions to choose from, useful for avatars:
39 |
40 |
41 |
42 |
43 |
44 | image is-16x16 |
45 |  |
46 | 16x16px |
47 |
48 |
49 | image is-24x24 |
50 |  |
51 | 24x24px |
52 |
53 |
54 | image is-32x32 |
55 |  |
56 | 32x32px |
57 |
58 |
59 | image is-48x48 |
60 |  |
61 | 48x48px |
62 |
63 |
64 | image is-64x64 |
65 |  |
66 | 64x64px |
67 |
68 |
69 | image is-96x96 |
70 |  |
71 | 96x96px |
72 |
73 |
74 | image is-128x128 |
75 | |
76 | 128x128px |
77 |
78 |
79 |
80 |
81 |
Retina images
82 |
83 |
84 |
Because the image is fixed in size, you can use an image that is twice as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.
85 |
86 |
87 |
88 |
89 | 
90 |
91 |
92 |
93 | {% highlight html %}
94 |
95 |
96 |
97 | {% endhighlight %}
98 |
99 |
100 |
101 |
Responsive images with ratios
102 |
103 |
104 |
If you don't know the exact dimensions but know the ratio instead, you can use one of the 5 ratio modifers:
105 |
106 |
107 |
108 |
109 |
110 | image is-square |
111 |  |
112 | Square (or 1by1) |
113 |
114 |
115 | image is-1by1 |
116 | |
117 | 1 by 1 |
118 |
119 |
120 | image is-4by3 |
121 |  |
122 | 4 by 3 |
123 |
124 |
125 | image is-3by2 |
126 |  |
127 | 3 by 2 |
128 |
129 |
130 | image is-16by9 |
131 |  |
132 | 16 by 9 |
133 |
134 |
135 | image is-2by1 |
136 |  |
137 | 2 by 1 |
138 |
139 |
140 |
141 |
142 |
143 |
The .image container will take up the whole width while maintaining the perfect ratio.
144 |
145 |
147 |
--------------------------------------------------------------------------------
/documentation/elements/notification.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: elements
4 | doc-subtab: notification
5 | ---
6 |
7 | {% include subnav-elements.html %}
8 |
9 |
10 |
11 |
Notifications
12 |
13 | Bold notification blocks, to alert your users of something
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
23 |
24 |
25 |
26 | Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
27 |
28 |
29 |
30 | Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
31 |
32 |
33 |
34 | Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
35 |
36 |
37 |
38 | Warning lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
39 |
40 |
41 |
42 | Danger lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
43 |
44 |
45 |
46 | {% highlight html %}
47 |
48 |
49 | Lorem ipsum dolor sit amet, consectetur
50 | adipiscing elit lorem ipsum dolor sit amet,
51 | consectetur adipiscing elit
52 |
53 |
54 |
55 |
56 | Primar lorem ipsum dolor sit amet, consectetur
57 | adipiscing elit lorem ipsum dolor sit amet,
58 | consectetur adipiscing elit
59 |
60 |
61 |
62 |
63 | Info lorem ipsum dolor sit amet, consectetur
64 | adipiscing elit lorem ipsum dolor sit amet,
65 | consectetur adipiscing elit
66 |
67 |
68 |
69 |
70 | Success lorem ipsum dolor sit amet, consectetur
71 | adipiscing elit lorem ipsum dolor sit amet,
72 | consectetur adipiscing elit
73 |
74 |
75 |
76 |
77 | Warning lorem ipsum dolor sit amet, consectetur
78 | adipiscing elit lorem ipsum dolor sit amet,
79 | consectetur adipiscing elit
80 |
81 |
82 |
83 |
84 | Danger lorem ipsum dolor sit amet, consectetur
85 | adipiscing elit lorem ipsum dolor sit amet,
86 | consectetur adipiscing elit
87 |
88 | {% endhighlight %}
89 |
90 |
91 |
93 |
--------------------------------------------------------------------------------
/documentation/elements/progress.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: elements
4 | doc-subtab: progress
5 | ---
6 |
7 | {% include subnav-elements.html %}
8 |
9 |
10 |
11 |
Progress bars
12 |
13 | Native HTML progress bars
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | {% highlight html %}
27 |
28 |
29 |
30 |
31 |
32 |
33 | {% endhighlight %}
34 |
35 |
36 |
37 |
Sizes
38 |
39 |
40 |
41 |
42 |
43 |
44 | {% highlight html %}
45 |
46 |
47 |
48 |
49 | {% endhighlight %}
50 |
51 |
53 |
--------------------------------------------------------------------------------
/documentation/elements/table.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: elements
4 | doc-subtab: table
5 | ---
6 |
7 | {% include subnav-elements.html %}
8 |
9 |
10 |
11 |
Tables
12 |
The inevitable HTML table, with special case cells
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | |
21 | Open source projects |
22 | Year started |
23 | Links |
24 |
25 |
26 |
27 |
28 | |
29 | Open source projects |
30 | Year started |
31 | Links |
32 |
33 |
34 |
35 |
36 | |
37 |
38 | |
39 |
40 | Android
41 | |
42 |
43 | 2003
44 | |
45 |
46 |
47 |
48 |
49 | |
50 |
51 |
52 |
53 |
54 | |
55 |
56 |
57 |
58 |
59 | |
60 |
61 |
62 | |
63 |
64 | |
65 |
66 | Firefox
67 | |
68 |
69 | 2003
70 | |
71 |
72 |
73 |
74 |
75 | |
76 |
77 |
78 |
79 |
80 | |
81 |
82 |
83 |
84 |
85 | |
86 |
87 |
88 | |
89 |
90 | |
91 |
92 | Linux
93 | |
94 |
95 | 2003
96 | |
97 |
98 |
99 |
100 |
101 | |
102 |
103 |
104 |
105 |
106 | |
107 |
108 |
109 |
110 |
111 | |
112 |
113 |
114 | |
115 |
116 | |
117 |
118 | WordPress
119 | |
120 |
121 | 2003
122 | |
123 |
124 |
125 |
126 |
127 | |
128 |
129 |
130 |
131 |
132 | |
133 |
134 |
135 |
136 |
137 | |
138 |
139 |
140 |
141 |
142 |
143 | {% highlight html %}
144 |
145 |
146 |
147 | | Name |
148 | Instrument |
149 | |
150 | |
151 |
152 |
153 |
154 |
155 | | Name |
156 | Instrument |
157 | |
158 | |
159 |
160 |
161 |
162 |
163 | | Misty Abbott |
164 | Bass Guitar |
165 |
166 |
167 |
168 |
169 | |
170 |
171 |
172 |
173 |
174 | |
175 |
176 |
177 | | John Smith |
178 | Rhythm Guitar |
179 |
180 |
181 |
182 |
183 | |
184 |
185 |
186 |
187 |
188 | |
189 |
190 |
191 | | Robert Mikels |
192 | Lead Guitar |
193 |
194 |
195 |
196 |
197 | |
198 |
199 |
200 |
201 |
202 | |
203 |
204 |
205 | | Karyn Holmberg |
206 | Drums |
207 |
208 |
209 |
210 |
211 | |
212 |
213 |
214 |
215 |
216 | |
217 |
218 |
219 |
220 | {% endhighlight %}
221 |
222 |
223 |
224 |
Modifiers
225 |
226 |
227 |
228 |
Add borders to all the cells.
229 |
230 |
231 | table is-bordered
232 |
233 |
234 |
235 |
236 |
237 | | One |
238 | Two |
239 |
240 |
241 |
242 |
243 | | Three |
244 | Four |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
Add stripes to the table.
254 |
255 |
256 | table is-striped
257 |
258 |
259 |
260 |
261 |
262 | | One |
263 | Two |
264 |
265 |
266 |
267 |
268 | | Three |
269 | Four |
270 |
271 |
272 | | Five |
273 | Six |
274 |
275 |
276 | | Seven |
277 | Eight |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
Make the cells narrower.
287 |
288 |
289 | table is-narrow
290 |
291 |
292 |
293 |
294 |
295 | | One |
296 | Two |
297 |
298 |
299 |
300 |
301 | | Three |
302 | Four |
303 |
304 |
305 | | Five |
306 | Six |
307 |
308 |
309 | | Seven |
310 | Eight |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
You can combine all three modifiers.
320 |
321 |
322 | table is-bordered is-striped is-narrow
323 |
324 |
325 |
326 |
327 |
328 | | One |
329 | Two |
330 |
331 |
332 |
333 |
334 | | Three |
335 | Four |
336 |
337 |
338 | | Five |
339 | Six |
340 |
341 |
342 | | Seven |
343 | Eight |
344 |
345 |
346 |
347 |
348 |
349 |
351 |
--------------------------------------------------------------------------------
/documentation/elements/tag.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: elements
4 | doc-subtab: tag
5 | ---
6 |
7 | {% include subnav-elements.html %}
8 |
9 |
10 |
11 |
Tags
12 |
13 | Small tag labels to insert anywhere
14 |
15 |
16 |
17 |
18 |
19 |
20 | By default, a tag is a 24px high label.
21 |
22 |
23 |
24 | Tag label
25 |
26 |
27 |
28 | {% highlight html %}
29 |
30 | Tag label
31 |
32 | {% endhighlight %}
33 |
34 |
35 |
36 |
37 |
38 | There are 6 different colors available.
39 |
40 |
41 |
42 |
43 | Dark
44 |
45 |
46 |
47 |
48 | Primary
49 |
50 |
51 |
52 |
53 | Info
54 |
55 |
56 |
57 |
58 | Success
59 |
60 |
61 |
62 |
63 | Warning
64 |
65 |
66 |
67 | Danger
68 |
69 |
70 |
71 | {% highlight html %}
72 | Dark
73 | Primary
74 | Info
75 | Success
76 | Warning
77 | Danger
78 | {% endhighlight %}
79 |
80 |
81 |
82 |
83 |
84 | And 3 additional sizes.
85 |
86 |
87 |
88 |
89 | Small
90 |
91 |
92 |
93 |
94 | Medium
95 |
96 |
97 |
98 |
99 | Large
100 |
101 |
102 |
103 |
104 | {% highlight html %}
105 | Medium
106 | Large
107 | {% endhighlight %}
108 |
109 |
110 |
111 |
112 |
113 | You can also append a delete button.
114 |
115 |
116 |
117 |
118 | Foo
119 |
120 |
121 |
122 |
123 |
124 | Bar
125 |
126 |
127 |
128 |
129 |
130 | Hello
131 |
132 |
133 |
134 |
135 |
136 | World
137 |
138 |
139 |
140 |
141 |
142 | {% highlight html %}
143 |
144 | Foo
145 |
146 |
147 |
148 | Bar
149 |
150 |
151 |
152 | Foo bar
153 |
154 |
155 | {% endhighlight %}
156 |
157 |
158 |
160 |
--------------------------------------------------------------------------------
/documentation/elements/title.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: elements
4 | doc-subtab: title
5 | ---
6 |
7 | {% include subnav-elements.html %}
8 |
9 |
10 |
11 |
Titles
12 |
13 | Simple headings to add depth to your page
14 |
15 |
16 |
17 |
18 |
There are 2 types of heading:
19 |
20 |
21 |
Title
22 |
Subtitle
23 |
24 |
25 | {% highlight html %}
26 |
Title
27 | Subtitle
28 | {% endhighlight %}
29 |
30 |
31 |
32 |
33 |
34 |
There are 6 sizes available:
35 |
36 |
37 |
Title 1
38 |
Title 2
39 |
Title 3 (default size)
40 |
Title 4
41 |
Title 5
42 |
Title 6
43 |
44 |
45 | {% highlight html %}
46 |
Title 1
47 | Title 2
48 | Title 3
49 | Title 4
50 | Title 5
51 | Title 6
52 | {% endhighlight %}
53 |
54 |
55 |
56 |
57 |
58 |
Subtitle 1
59 |
Subtitle 2
60 |
Subtitle 3
61 |
Subtitle 4
62 |
Subtitle 5 (default size)
63 |
Subtitle 6
64 |
65 |
66 | {% highlight html %}
67 |
Subtitle 1
68 | Subtitle 2
69 | Subtitle 3
70 | Subtitle 4
71 | Subtitle 5
72 | Subtitle 6
73 | {% endhighlight %}
74 |
75 |
76 |
77 |
78 |
79 |
80 |
When you combine a title and a subtitle, they move closer together.
81 |
As a rule of thumb, it is recommended to use a size difference of two. So if you use a title is-1, combine it with a subtitle is-3.
82 |
83 |
84 |
85 |
86 |
Title 1
87 |
Subtitle 3
88 |
89 |
90 |
Title 2
91 |
Subtitle 4
92 |
93 |
94 |
Title 3
95 |
Subtitle 5
96 |
97 |
98 |
99 | {% highlight html %}
100 |
Title 1
101 |
Subtitle 3
102 |
103 |
Title 2
104 |
Subtitle 4
105 |
106 |
Title 3
107 |
Subtitle 5
108 | {% endhighlight %}
109 |
110 |
111 |
113 |
--------------------------------------------------------------------------------
/documentation/layout/container.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: layout
4 | doc-subtab: container
5 | ---
6 |
7 | {% include subnav-layout.html %}
8 |
9 |
10 |
11 |
Container
12 |
13 | A simple container to center your content horizontally
14 |
15 |
16 |
17 |
18 |
19 |
The .container class can be used in any context, but mostly as a direct child of either:
20 |
21 | .header.hero.section.footer
26 |
On mobile and tablet, the container will have a margin of 20px on both the left and right sides.
27 |
On desktop (> 980px), the container will have a maximum width of 960px and will be horizontally centered.
28 |
29 |
32 |
33 |
34 | This container is centered on desktop.
35 |
36 |
37 |
41 |
42 | This container is centered on desktop.
43 |
44 |
48 |
49 |
Fluid container
50 |
51 |
If you don't want to have a maximum width but want to keep the 20px margin on the left and right sides, add the is-fluid modifier:
52 |
53 |
56 |
57 |
58 | This container is fluid: it will have a 20px gap on either side.
59 |
60 |
61 |
65 |
66 | This container is fluid: it will have a 20px gap on either side, on any viewport size.
67 |
68 |
71 |
--------------------------------------------------------------------------------
/documentation/layout/footer.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: layout
4 | doc-subtab: footer
5 | ---
6 |
7 | {% include subnav-layout.html %}
8 |
9 |
10 |
11 |
Footer
12 |
13 | A simple responsive footer which can include anything: lists, headings, columns, icons, buttons...
14 |
15 |
16 |
17 |
33 |
34 |
35 | {% highlight html %}
36 |
52 | {% endhighlight %}
53 |
55 |
--------------------------------------------------------------------------------
/documentation/layout/section.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: layout
4 | doc-subtab: section
5 | ---
6 |
7 | {% include subnav-layout.html %}
8 |
9 |
10 |
11 |
Section
12 |
13 | A simple container to divide your page into sections, like the one you're currently reading
14 |
15 |
16 |
17 |
18 |
19 |
Use sections as direct children of body.
20 |
21 |
22 | {% highlight html %}
23 |
24 |
25 |
26 |
27 |
Section
28 |
29 | A simple container to divide your page into sections, like the one you're currently reading
30 |
31 |
32 |
34 |
35 | {% endhighlight %}
36 |
37 |
38 |
You can use the modifiers is-medium and is-large to change the spacing.
39 |
40 |
41 |
43 |
--------------------------------------------------------------------------------
/documentation/modifiers/helpers.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: modifiers
4 | doc-subtab: helpers
5 | ---
6 |
7 | {% include subnav-modifiers.html %}
8 |
9 |
10 |
11 |
Helpers
12 |
You can apply responsive helper classes to almost any element, in order to alter its style based upon the browser's width.
13 |
14 |
15 |
16 |
17 | | Float |
18 | is-clearfix |
19 | Fixes an element's floating children |
20 |
21 |
22 | is-pulled-left |
23 | Moves an element to the left |
24 |
25 |
26 | is-pulled-right |
27 | Moves an element to the right |
28 |
29 |
30 | | Overlay |
31 | is-overlay |
32 | Completely covers the first positioned parent |
33 |
34 |
35 | | Size |
36 | is-fullwidth |
37 | Takes up the whole width (100%) |
38 |
39 |
40 | | Text |
41 | has-text-centered |
42 | Centers the text |
43 |
44 |
45 | has-text-left |
46 | Text is left-aligned |
47 |
48 |
49 | has-text-right |
50 | Text is right-aligned |
51 |
52 |
53 | | Other |
54 | is-disabled |
55 | Removes any click event |
56 |
57 |
58 | is-marginless |
59 | Removes any margin |
60 |
61 |
62 | is-unselectable |
63 | Prevents the text from being selectable |
64 |
65 |
66 |
67 |
69 |
--------------------------------------------------------------------------------
/documentation/modifiers/responsive-helpers.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: modifiers
4 | doc-subtab: responsive-helpers
5 | ---
6 |
7 | {% include subnav-modifiers.html %}
8 |
9 |
10 |
11 |
Responsive helpers
12 |
Show/hide content depending on the width of the viewport
13 |
14 |
15 |
16 |
Show
17 |
18 |
19 |
20 | You can use one of the following display classes:
21 |
22 |
23 | blockflexinlineinline-blockinline-flex
29 |
For example, here's what the is-flex helper works:
30 |
31 |
32 |
33 |
34 |
35 | |
36 | Class
37 | |
38 |
39 | Mobile
40 | Up to 768px
41 | |
42 |
43 | Tablet
44 | Between 769px and 979px
45 | |
46 |
47 | Desktop
48 | Between 980px and 1179px
49 | |
50 |
51 | Widescreen
52 | Above 1180px
53 | |
54 |
55 |
56 |
57 |
58 |
59 | is-flex-mobile
60 | |
61 |
62 | flex
63 | |
64 |
65 | unchanged
66 | |
67 |
68 | unchanged
69 | |
70 |
71 | unchanged
72 | |
73 |
74 |
75 |
76 | is-flex-tablet-only
77 | |
78 |
79 | unchanged
80 | |
81 |
82 | flex
83 | |
84 |
85 | unchanged
86 | |
87 |
88 | unchanged
89 | |
90 |
91 |
92 |
93 | is-flex-desktop-only
94 | |
95 |
96 | unchanged
97 | |
98 |
99 | unchanged
100 | |
101 |
102 | flex
103 | |
104 |
105 | unchanged
106 | |
107 |
108 |
109 |
110 | is-flex-widescreen
111 | |
112 |
113 | unchanged
114 | |
115 |
116 | unchanged
117 | |
118 |
119 | unchanged
120 | |
121 |
122 | flex
123 | |
124 |
125 |
126 | |
127 | Classes to display up to or from a specific breakpoint
128 | |
129 |
130 |
131 |
132 | is-flex-touch
133 | |
134 |
135 | flex
136 | |
137 |
138 | flex
139 | |
140 |
141 | unchanged
142 | |
143 |
144 | unchanged
145 | |
146 |
147 |
148 |
149 | is-flex-tablet
150 | |
151 |
152 | unchanged
153 | |
154 |
155 | flex
156 | |
157 |
158 | flex
159 | |
160 |
161 | flex
162 | |
163 |
164 |
165 |
166 | is-flex-desktop
167 | |
168 |
169 | unchanged
170 | |
171 |
172 | unchanged
173 | |
174 |
175 | flex
176 | |
177 |
178 | flex
179 | |
180 |
181 |
182 |
183 |
184 |
185 |
For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex
186 |
187 |
188 |
189 |
Hide
190 |
191 |
192 |
193 |
194 | |
195 | Class
196 | |
197 |
198 | Mobile
199 | Up to 768px
200 | |
201 |
202 | Tablet
203 | Between 769px and 979px
204 | |
205 |
206 | Desktop
207 | Between 980px and 1179px
208 | |
209 |
210 | Widescreen
211 | Above 1180px
212 | |
213 |
214 |
215 |
216 |
217 |
218 | is-hidden-mobile
219 | |
220 |
221 | hidden
222 | |
223 |
224 | visible
225 | |
226 |
227 | visible
228 | |
229 |
230 | visible
231 | |
232 |
233 |
234 |
235 | is-hidden-tablet-only
236 | |
237 |
238 | visible
239 | |
240 |
241 | hidden
242 | |
243 |
244 | visible
245 | |
246 |
247 | visible
248 | |
249 |
250 |
251 |
252 | is-hidden-desktop-only
253 | |
254 |
255 | visible
256 | |
257 |
258 | visible
259 | |
260 |
261 | hidden
262 | |
263 |
264 | visible
265 | |
266 |
267 |
268 |
269 | is-hidden-widescreen
270 | |
271 |
272 | visible
273 | |
274 |
275 | visible
276 | |
277 |
278 | visible
279 | |
280 |
281 | hidden
282 | |
283 |
284 |
285 | |
286 | Classes to hide up to or from a specific breakpoint
287 | |
288 |
289 |
290 |
291 | is-hidden-touch
292 | |
293 |
294 | hidden
295 | |
296 |
297 | hidden
298 | |
299 |
300 | visible
301 | |
302 |
303 | visible
304 | |
305 |
306 |
307 |
308 | is-hidden-tablet
309 | |
310 |
311 | visible
312 | |
313 |
314 | hidden
315 | |
316 |
317 | hidden
318 | |
319 |
320 | hidden
321 | |
322 |
323 |
324 |
325 | is-hidden-desktop
326 | |
327 |
328 | visible
329 | |
330 |
331 | visible
332 | |
333 |
334 | hidden
335 | |
336 |
337 | hidden
338 | |
339 |
340 |
341 |
342 |
343 |
344 |
--------------------------------------------------------------------------------
/documentation/modifiers/syntax.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: modifiers
4 | doc-subtab: syntax
5 | ---
6 |
7 | {% include subnav-modifiers.html %}
8 |
9 |
10 |
11 |
Modifiers syntax
12 |
Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes.
13 |
14 | They all start with is- or has-.
15 |
16 |
17 |
18 |
Let's start with a simple button that uses the "button" CSS class:
19 |
20 |
25 |
32 |
33 |
34 |
35 |
By adding the "is-primary" CSS class, you can modify the color:
36 |
37 |
42 |
49 |
50 |
51 |
52 |
53 |
You can use one of the 5 main colors:
54 |
55 | is-primaryis-infois-successis-warningis-danger
61 |
62 |
63 |
80 |
99 |
100 |
101 |
102 |
103 |
You can also alter the size:
104 |
105 | is-smallis-mediumis-large
109 |
110 |
111 |
125 |
126 | {% highlight html %}
127 |
128 | Button
129 |
130 |
131 | Button
132 |
133 |
134 | Button
135 |
136 |
137 | Button
138 |
139 | {% endhighlight %}
140 |
141 |
142 |
143 |
144 |
145 |
Or the style or state:
146 |
147 | is-outlinedis-loadingis-disabled
151 |
152 |
153 |
164 |
177 |
178 |
180 |
--------------------------------------------------------------------------------
/documentation/navbar.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: navbar
4 | ---
5 |
6 |
7 |
8 |
Navbar
9 |
A multi-purpose horizontal navbar, which can contain almost any other element
10 |
11 |
12 |
13 |
14 |
The structure of a navbar is the following:
15 |
16 | -
17 |
navbar: main container
18 |
19 | navbar-left for the left side-
21 |
navbar-right for the right side
22 |
23 | navbar-item for each individual element
25 |
26 |
27 |
28 |
29 |
In a navbar-item, you can then insert almost anything you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma navbar, they will always be vertically aligned.
30 |
31 |
32 |
33 |
69 |
70 |
71 |
72 |
108 |
109 |
110 | {% highlight html %}
111 |
112 |
139 | {% endhighlight %}
140 |
141 |
142 |
Centered navbar
143 |
144 |
145 | If you want a centered navbar, you can use as many navbar-item as you want, as long as they are direct children of the navbar container.
146 |
147 |
148 |
149 |
167 |
168 |
169 | {% highlight html %}
170 |
188 | {% endhighlight %}
189 |
190 |
191 |
208 |
209 |
210 | {% highlight html %}
211 |
228 | {% endhighlight %}
229 |
230 |
231 |
Mobile navbar
232 |
233 | By default, for space concerns, the navbar is vertical on mobile. If you want the navbar to be horizontal on mobile as well, add the is-mobile modifier on the navbar container.
234 |
235 |
236 |
237 |
255 |
256 |
258 |
--------------------------------------------------------------------------------
/documentation/overview/classes.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: overview
4 | doc-subtab: classes
5 | ---
6 |
7 | {% include subnav-overview.html %}
8 |
9 |
10 |
11 |
Classes
12 |
Bulma is simply a collection of CSS classes. Write the HTML code you want.
13 |
14 |
15 |
16 |
17 |
18 | Bulma is a CSS framework, meaning that the end result is simply a single .css file:
19 |
20 | https://github.com/jgthms/bulma/blob/master/css/bulma.css
21 |
22 | Because Bulma solely comprises CSS classes, the HTML code you write has no impact on the styling of your page. That's why .input exists as a class, so you can choose which <input type="text"> elements you want to style.
23 |
24 |
25 | Bulma only styles generic tags directly twice:
26 |
27 |
28 | -
29 |
generic.sass to define a basic style for your page
30 |
31 | -
32 | the
.content class to use for any textual content, like WYSIWYG
33 |
34 |
35 |
36 |
38 |
--------------------------------------------------------------------------------
/documentation/overview/responsiveness.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: overview
4 | doc-subtab: responsiveness
5 | ---
6 |
7 | {% include subnav-overview.html %}
8 |
9 |
10 |
11 |
Responsiveness
12 |
Bulma is a mobile-first framework
13 |
14 |
15 |
16 |
Breakpoints
17 |
18 |
Bulma has 4 breakpoints:
19 |
20 | mobile: up to 768pxtablet: from 769pxdesktop: from 980pxwidescreen: from 1180px
25 |
Bulma uses 7 responsive mixins:
26 |
27 | -
28 |
=mobile
29 | until 768px
30 |
31 | -
32 |
=tablet
33 | from 769px
34 |
35 | -
36 |
=tablet-only
37 | from 769px and until 979px
38 |
39 | -
40 |
=touch
41 | until 979px
42 |
43 | -
44 |
=desktop
45 | from 980px
46 |
47 | -
48 |
=desktop-only
49 | from 980px and until 1179px
50 |
51 | -
52 |
=widescreen
53 | from 1180px
54 |
55 |
56 |
How Bulma works is that everything is mobile-first by default, and responsive mixins act as minimum viewport widths where some alternative styles are applied.
57 |
58 |
59 |
60 |
61 |
62 |
63 | Mobile
64 | Up to 768px
65 | |
66 |
67 | Tablet
68 | Between 769px and 979px
69 | |
70 |
71 | Desktop
72 | Between 980px and 1179px
73 | |
74 |
75 | Widescreen
76 | Above 1180px
77 | |
78 |
79 |
80 |
81 |
82 | |
83 | mobile
84 | |
85 |
86 | -
87 | |
88 |
89 |
90 | |
91 | -
92 | |
93 |
94 | tablet
95 | |
96 |
97 |
98 | |
99 | -
100 | |
101 |
102 | desktop
103 | |
104 |
105 |
106 | |
107 | -
108 | |
109 |
110 | widescreen
111 | |
112 |
113 |
114 | |
115 | -
116 | |
117 |
118 | tablet-only
119 | |
120 |
121 | -
122 | |
123 |
124 |
125 | |
126 | -
127 | |
128 |
129 | desktop-only
130 | |
131 |
132 | -
133 | |
134 |
135 |
136 | |
137 | touch
138 | |
139 |
140 | -
141 | |
142 |
143 |
144 |
145 |
146 |
147 |
148 | Vertical by default
149 |
150 |
151 | Every element in Bulma is mobile-first and optmizes for vertical reading, so by default on mobile:
152 |
153 |
154 | columns are stacked vertically- the
level component will show its children stacked vertically
156 | - the
nav menu will be hidden
157 |
158 |
For example, you can enforce the horizontal layout for both columns or nav by appending the is-mobile modifer.
159 |
162 |
--------------------------------------------------------------------------------
/documentation/overview/start.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: documentation
3 | doc-tab: overview
4 | doc-subtab: start
5 | ---
6 |
7 | {% include subnav-overview.html %}
8 |
9 |
10 |
11 |
3 ways to start
12 |
You only need 1 CSS file to use Bulma
13 |
14 |
15 |
16 |
17 | 1
18 |
19 |
20 | Use NPM (recommended):
21 |
22 | {% highlight bash %}
23 | npm install bulma
24 | {% endhighlight %}
25 |
27 |
28 |
29 | 2
30 |
37 |
38 |
39 |
40 | 3
41 |
48 |
49 |
50 |
51 |
52 |
53 |
56 |
57 |
If you want to use icons with Bulma, don't forget to include Font Awesome:
58 | {% highlight html %}
59 |
60 | {% endhighlight %}
61 |
62 |
63 |
64 |
65 |
66 |
Customizing with Sass
67 |
68 |
69 |
If you're familiar with Sass and want to customize Bulma with your own colors and variables, just install Bulma via npm:
70 |
71 |
72 |
73 | 1
74 |
75 |
76 | Download the source files:
77 |
78 | {% highlight bash %}
79 | npm install bulma
80 | {% endhighlight %}
81 |
82 |
84 |
85 |
86 | 2
87 |
88 |
89 | Set your variables:
90 | {% highlight sass %}
91 | // Override initial variables here
92 | // You can add new ones or update existing ones:
93 |
94 | $blue: #72d0eb // Update blue
95 | $pink: #ffb3b3 // Add pink
96 | $family-serif: "Georgia", serif // Add a serif family
97 |
98 | // Override generated variables here
99 | // For example, by default, the $danger color is $red and the font is sans-serif
100 | // You can change these values:
101 |
102 | $danger: $orange // Use the existing orange
103 | $family-primary: $family-serif // Use the new serif family
104 | {% endhighlight %}
105 |
106 |
108 |
109 |
110 | 3
111 |
112 |
113 | Import Bulma after having set your variables:
114 | {% highlight sass %}
115 | // Override variables here
116 | // You can add new ones or update existing ones:
117 |
118 | $blue: #72d0eb // Update blue
119 | $pink: #ffb3b3 // Add pink
120 | $family-serif: "Georgia", serif // Add a serif family
121 |
122 | // Override generated variables here
123 | // For example, by default, the $danger color is $red and the font is sans-serif
124 | // You can change these values:
125 |
126 | $danger: $orange // Use the existing orange
127 | $family-primary: $family-serif // Use the new serif family
128 |
129 | @import "bulma"
130 | {% endhighlight %}
131 |
132 |
134 |
136 |
--------------------------------------------------------------------------------
/examples/apple.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Apple template
3 | ---
4 |
5 |
6 |
7 |
8 |
9 |
10 |
Apple
11 |
12 |
13 |
14 |
15 |
62 |
63 |
64 |
65 |
66 |
67 | Start something new
68 |
69 |
70 | See what other designers are creating with Bulma
71 |
72 |
73 | View the examples
74 |
75 |
76 |
81 |
82 |
83 |
88 |
93 |
98 |
103 |
104 |
105 |
110 |
111 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
--------------------------------------------------------------------------------
/examples/launch.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Launch template
3 | ---
4 |
5 |
6 |
7 | {% include head.html %}
8 |
9 |
10 |
11 |
12 |
13 |
14 |
26 |
27 |
28 |
29 |
Explore the World
30 |
Discover a new way to travel
31 |
32 |
33 |
34 |
35 |
36 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/examples/login.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Login template
3 | ---
4 |
5 |
6 |
7 | {% include head.html %}
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | 
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
30 |
31 |
32 |
36 |
37 |
39 |
40 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/examples/sparrow.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Sparrow template
3 | ---
4 |
5 |
6 |
7 |
8 |
9 |
10 |
Sparrow
11 |
12 |
13 |
14 |
15 |
49 |
50 |
51 |
52 |
53 |
Sparrow
54 | The last email app you'll ever need
55 |
56 |
63 |
64 |
65 |
66 |
As seen on
67 |
73 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
87 |
88 |
89 |
Inbox
90 | A smart list of all the emails you get, organised automatically to fit your needs
91 |
92 |
93 |
94 |
95 |
96 |
101 |
102 |
103 |
Favorites
104 | Have some favorite people in your contacts? Star them for quick access
105 |
106 |
107 |
108 |
109 |
110 |
115 |
116 |
117 |
Tags
118 | Label all your emails to easily organize them by words and colors
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
132 |
133 |
134 |
Conversations
135 | A nested dynamic view when several recipients are engaged in a conversation
136 |
137 |
138 |
139 |
140 |
141 |
146 |
147 |
148 |
Calendar
149 | Keep track of when things happen with the integrated calendar view
150 |
151 |
152 |
153 |
154 |
155 |
160 |
161 |
162 |
Backups
163 | With automatic backups in the cloud, never worry again about losing anything
164 |
165 |
166 |
167 |
168 |
169 |
171 |
172 |
173 |
174 |
177 |
178 |
179 | Get it now.
180 |
181 |
182 | 
183 | 
184 |
185 |
186 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
--------------------------------------------------------------------------------
/favicons/android-chrome-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/android-chrome-144x144.png
--------------------------------------------------------------------------------
/favicons/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/android-chrome-192x192.png
--------------------------------------------------------------------------------
/favicons/android-chrome-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/android-chrome-36x36.png
--------------------------------------------------------------------------------
/favicons/android-chrome-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/android-chrome-48x48.png
--------------------------------------------------------------------------------
/favicons/android-chrome-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/android-chrome-72x72.png
--------------------------------------------------------------------------------
/favicons/android-chrome-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/android-chrome-96x96.png
--------------------------------------------------------------------------------
/favicons/apple-touch-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/apple-touch-icon-114x114.png
--------------------------------------------------------------------------------
/favicons/apple-touch-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/apple-touch-icon-120x120.png
--------------------------------------------------------------------------------
/favicons/apple-touch-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/apple-touch-icon-144x144.png
--------------------------------------------------------------------------------
/favicons/apple-touch-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/apple-touch-icon-152x152.png
--------------------------------------------------------------------------------
/favicons/apple-touch-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/apple-touch-icon-180x180.png
--------------------------------------------------------------------------------
/favicons/apple-touch-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/apple-touch-icon-57x57.png
--------------------------------------------------------------------------------
/favicons/apple-touch-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/apple-touch-icon-60x60.png
--------------------------------------------------------------------------------
/favicons/apple-touch-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/apple-touch-icon-72x72.png
--------------------------------------------------------------------------------
/favicons/apple-touch-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/apple-touch-icon-76x76.png
--------------------------------------------------------------------------------
/favicons/apple-touch-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/apple-touch-icon-precomposed.png
--------------------------------------------------------------------------------
/favicons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/apple-touch-icon.png
--------------------------------------------------------------------------------
/favicons/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | #1fc8db
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/favicons/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/favicon-16x16.png
--------------------------------------------------------------------------------
/favicons/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/favicon-32x32.png
--------------------------------------------------------------------------------
/favicons/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/favicon-96x96.png
--------------------------------------------------------------------------------
/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/favicon.ico
--------------------------------------------------------------------------------
/favicons/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Bulma",
3 | "icons": [
4 | {
5 | "src": "\/favicons\/android-chrome-36x36.png",
6 | "sizes": "36x36",
7 | "type": "image\/png",
8 | "density": 0.75
9 | },
10 | {
11 | "src": "\/favicons\/android-chrome-48x48.png",
12 | "sizes": "48x48",
13 | "type": "image\/png",
14 | "density": 1
15 | },
16 | {
17 | "src": "\/favicons\/android-chrome-72x72.png",
18 | "sizes": "72x72",
19 | "type": "image\/png",
20 | "density": 1.5
21 | },
22 | {
23 | "src": "\/favicons\/android-chrome-96x96.png",
24 | "sizes": "96x96",
25 | "type": "image\/png",
26 | "density": 2
27 | },
28 | {
29 | "src": "\/favicons\/android-chrome-144x144.png",
30 | "sizes": "144x144",
31 | "type": "image\/png",
32 | "density": 3
33 | },
34 | {
35 | "src": "\/favicons\/android-chrome-192x192.png",
36 | "sizes": "192x192",
37 | "type": "image\/png",
38 | "density": 4
39 | }
40 | ]
41 | }
42 |
--------------------------------------------------------------------------------
/favicons/mstile-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/mstile-144x144.png
--------------------------------------------------------------------------------
/favicons/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/mstile-150x150.png
--------------------------------------------------------------------------------
/favicons/mstile-310x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/mstile-310x150.png
--------------------------------------------------------------------------------
/favicons/mstile-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/mstile-310x310.png
--------------------------------------------------------------------------------
/favicons/mstile-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/favicons/mstile-70x70.png
--------------------------------------------------------------------------------
/favicons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
20 |
--------------------------------------------------------------------------------
/images/arc-de-triomphe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/arc-de-triomphe.png
--------------------------------------------------------------------------------
/images/b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/b.png
--------------------------------------------------------------------------------
/images/bulma-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/bulma-white.png
--------------------------------------------------------------------------------
/images/bulma.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/bulma.png
--------------------------------------------------------------------------------
/images/metro-ui-css-grid-tiles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/metro-ui-css-grid-tiles.png
--------------------------------------------------------------------------------
/images/sparrow/business-insider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/sparrow/business-insider.png
--------------------------------------------------------------------------------
/images/sparrow/google-play-badge.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/sparrow/google-play-badge.png
--------------------------------------------------------------------------------
/images/sparrow/iphone-perspective.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/sparrow/iphone-perspective.png
--------------------------------------------------------------------------------
/images/sparrow/iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/sparrow/iphone.png
--------------------------------------------------------------------------------
/images/sparrow/logo-grayscale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/sparrow/logo-grayscale.png
--------------------------------------------------------------------------------
/images/sparrow/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/sparrow/logo.png
--------------------------------------------------------------------------------
/images/sparrow/techcrunch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/sparrow/techcrunch.png
--------------------------------------------------------------------------------
/images/sparrow/venture-beat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/sparrow/venture-beat.png
--------------------------------------------------------------------------------
/images/sparrow/wired.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/bulma-website/8f363cea005475a40f9df20aa307443feb79571c/images/sparrow/wired.png
--------------------------------------------------------------------------------
/javascript/bulma.js:
--------------------------------------------------------------------------------
1 | jQuery(document).ready(function ($) {
2 |
3 | var $toggle = $('#nav-toggle');
4 | var $menu = $('#nav-menu');
5 |
6 | $toggle.click(function() {
7 | $(this).toggleClass('is-active');
8 | $menu.toggleClass('is-active');
9 | });
10 |
11 | $('.modal-button').click(function() {
12 | var target = $(this).data('target');
13 | $('html').addClass('is-clipped');
14 | $(target).addClass('is-active');
15 | });
16 |
17 | $('.modal-background, .modal-close').click(function() {
18 | $('html').removeClass('is-clipped');
19 | $(this).parent().removeClass('is-active');
20 | });
21 |
22 | $('.modal-card-head .delete, .modal-card-foot .button').click(function() {
23 | $('html').removeClass('is-clipped');
24 | $('#modal-ter').removeClass('is-active');
25 | });
26 |
27 | var $highlights = $('.highlight');
28 |
29 | $highlights.each(function() {
30 | var $el = $(this);
31 | var copy = '
';
32 | var expand = '
';
33 | $el.append(copy);
34 |
35 | if ($el.find('pre code').innerHeight() > 600) {
36 | $el.append(expand);
37 | }
38 | });
39 |
40 | var $highlightButtons = $('.highlight .copy, .highlight .expand');
41 |
42 | $highlightButtons.hover(function() {
43 | $(this).parent().css('box-shadow', '0 0 0 1px #ed6c63');
44 | }, function() {
45 | $(this).parent().css('box-shadow', 'none');
46 | });
47 |
48 | $('.highlight .expand').click(function() {
49 | $(this).parent().children('pre').css('max-height', 'none');
50 | });
51 |
52 | new Clipboard('.copy', {
53 | target: function(trigger) {
54 | return trigger.previousSibling;
55 | }
56 | });
57 |
58 | });
59 |
--------------------------------------------------------------------------------
/javascript/clipboard.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * clipboard.js v1.5.9
3 | * https://zenorocha.github.io/clipboard.js
4 | *
5 | * Licensed MIT © Zeno Rocha
6 | */
7 | !function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.Clipboard=t()}}(function(){var t,e,n;return function t(e,n,o){function r(c,s){if(!n[c]){if(!e[c]){var a="function"==typeof require&&require;if(!s&&a)return a(c,!0);if(i)return i(c,!0);var l=new Error("Cannot find module '"+c+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[c]={exports:{}};e[c][0].call(u.exports,function(t){var n=e[c][1][t];return r(n?n:t)},u,u.exports,t,e,n,o)}return n[c].exports}for(var i="function"==typeof require&&require,c=0;c
o;o++)n[o].fn.apply(n[o].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),o=n[t],r=[];if(o&&e)for(var i=0,c=o.length;c>i;i++)o[i].fn!==e&&o[i].fn._!==e&&r.push(o[i]);return r.length?n[t]=r:delete n[t],this}},e.exports=o},{}],8:[function(e,n,o){!function(r,i){if("function"==typeof t&&t.amd)t(["module","select"],i);else if("undefined"!=typeof o)i(n,e("select"));else{var c={exports:{}};i(c,r.select),r.clipboardAction=c.exports}}(this,function(t,e){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r=n(e),i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},c=function(){function t(t,e){for(var n=0;n<div class="columns">');
24 | $markup.append('\n');
25 |
26 | for(i = 0; i < showing; i++) {
27 | $markup.append(' <div class="column">');
28 | $markup.append(i + 1);
29 | $markup.append('</div>');
30 | $markup.append('\n');
31 | }
32 |
33 | $markup.append('</div>');
34 | }
35 |
36 | $add.click(function() {
37 | showing++;
38 | showColumns();
39 | });
40 |
41 | $remove.click(function() {
42 | showing--;
43 | showColumns();
44 | });
45 |
46 | });
47 |
--------------------------------------------------------------------------------
/styles/.gitignore:
--------------------------------------------------------------------------------
1 | bulma-website.local.css
2 | bulma-website.local.sass
3 | node_modules
4 |
--------------------------------------------------------------------------------
/styles/apple.sass:
--------------------------------------------------------------------------------
1 | @charset "utf-8"
2 |
3 | $grey-dark: #666
4 | $grey-lighter: #f2f2f2
5 | $blue: #08c
6 | $primary: $blue
7 |
8 | $family-sans-serif: "Myriad Set Pro", "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif
9 |
10 | $size-5: 20px
11 | $size-6: 16px
12 |
13 | $nav-height: 44px
14 |
15 | @import "../bulma/bulma"
16 |
17 | .header
18 | background: rgba($black, 0.8)
19 | a
20 | color: $white
21 | font-weight: 300
22 | transition: color $speed $easing
23 | &:hover
24 | color: rgba($white, 0.7)
25 |
26 | .header-menu
27 | +mobile
28 | background: rgba($black, 0.9)
29 |
30 | .hamburger
31 | span
32 | background: $white
33 | &:hover
34 | background: rgba($white, 0.1)
35 | &.is-active
36 | span
37 | background: $white
38 |
39 | .hero-foot
40 | height: 261px
41 | text-align: center
42 | img
43 | display: inline-block
44 | height: 261px
45 | vertical-align: top
46 | width: 347px
47 |
48 | .footer
49 | a:not(.icon)
50 | border-bottom-color: transparent
51 | color: $primary
52 | &:hover
53 | color: $text-strong
54 | strong
55 | font-weight: normal
56 | ul + p
57 | margin-top: 1em
58 | li
59 | margin-top: 5px
60 | a:not(.icon)
61 | color: $text
62 | .level
63 | a
64 | color: $text-strong
65 | +desktop
66 | font-size: 11px
67 | hr
68 | margin: 10px 0
69 |
--------------------------------------------------------------------------------
/styles/bulma-website.sass:
--------------------------------------------------------------------------------
1 | @charset "utf-8"
2 |
3 | @import "../bulma/bulma"
4 |
5 | // Override
6 |
7 | .button
8 | +tablet
9 | small
10 | color: $text
11 | left: 0
12 | margin-top: 10px
13 | position: absolute
14 | top: 100%
15 | width: 100%
16 |
17 | body.page-grid .column > .notification
18 | padding-left: 0
19 | padding-right: 0
20 | text-align: center
21 |
22 | +tablet
23 | .header-item .button + .button
24 | margin-left: 10px
25 |
26 | // Additional
27 |
28 | $carbon-space: 15px
29 |
30 | #carbon
31 | max-width: 340px
32 | min-height: 100px + ($carbon-space * 2)
33 | min-width: 300px
34 | padding: $carbon-space
35 | +tablet
36 | margin-left: auto
37 | margin-right: auto
38 | width: 340px
39 |
40 | #carbonads
41 | text-align: left
42 | a:hover
43 | text-decoration: underline
44 | span
45 | display: block
46 | .carbon-img
47 | float: left
48 | height: 100px
49 | width: 130px
50 | img
51 | display: block
52 | .carbon-text
53 | display: block
54 | color: $text-strong
55 | margin-bottom: 5px
56 | margin-left: 130px + $carbon-space
57 | .carbon-poweredby
58 | font-size: $size-small
59 | margin-left: $carbon-space
60 |
61 | $github: #333333
62 | $twitter: #55acee
63 |
64 | #github
65 | color: $github
66 | border-color: $github
67 | &:hover
68 | background: $github
69 | border-color: $github
70 | color: $white
71 |
72 | #twitter
73 | color: $twitter
74 | border-color: $twitter
75 | &:hover
76 | background: $twitter
77 | border-color: $twitter
78 | color: $white
79 |
80 | #b
81 | border-radius: 20px
82 | box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
83 | display: inline-block
84 | height: 240px
85 | margin-bottom: 40px
86 | vertical-align: top
87 | width: 240px
88 | +mobile
89 | border-radius: 10px
90 | height: 120px
91 | width: 120px
92 |
93 | #npm
94 | background: none
95 | margin: -10px 0 20px
96 | code
97 | border-radius: $radius
98 | color: $link
99 | display: inline-block
100 | font-size: 16px
101 | padding: 16px 32px
102 |
103 | #grid
104 | .notification
105 | padding-left: 0
106 | padding-right: 0
107 |
108 | #message
109 | display: none
110 |
111 | #tweet
112 | background: $white
113 | border-radius: $radius-large
114 | box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
115 | padding: 20px
116 |
117 | #mc_embed_signup
118 | .control
119 | margin-bottom: 0
120 | .notification
121 | margin-top: 10px
122 |
123 | #social
124 | align-items: center
125 | display: flex
126 | height: 20px
127 | margin-bottom: 1em
128 | justify-content: center
129 | a
130 | display: inline-block
131 | font-size: 11px
132 | height: 20px
133 | line-height: 20px
134 | iframe:last-child
135 | margin-left: 10px
136 |
137 | #images
138 | tr
139 | td:nth-child(2)
140 | width: 320px
141 |
142 | .color
143 | display: inline-block
144 | float: left
145 | height: 18px
146 | margin-right: 5px
147 | width: 18px
148 |
149 | .example,
150 | .structure
151 | border: 1px solid $warning
152 | border-top-right-radius: $radius
153 | color: $warning-invert
154 | padding: 15px 20px
155 | position: relative
156 | &:not(:first-child)
157 | margin-top: 30px
158 | &:not(:last-child)
159 | margin-bottom: 20px
160 | &:before
161 | background: $warning
162 | border-radius: $radius $radius 0 0
163 | bottom: 100%
164 | content: "Example"
165 | display: inline-block
166 | font-size: 7px
167 | font-weight: bold
168 | left: -1px
169 | letter-spacing: 1px
170 | padding: 3px 5px
171 | position: absolute
172 | text-transform: uppercase
173 | vertical-align: top
174 | +tablet
175 | &.is-fullwidth
176 | border-left: none
177 | border-right: none
178 | padding: 0
179 |
180 | .example
181 | & + .highlight
182 | border: 1px solid $warning
183 | border-radius: 0 0 $radius $radius
184 | border-top: none
185 | margin-top: -20px
186 | pre
187 | max-height: 600px
188 | &:not(:last-child)
189 | margin-bottom: 40px
190 |
191 | $structure: $danger
192 | $structure-invert: $danger-invert
193 |
194 | .structure
195 | border-color: $structure
196 | border-radius: $radius
197 | padding: 20px
198 | &:before
199 | background: $structure
200 | color: $structure-invert
201 | content: "Structure"
202 |
203 | .structure-item
204 | position: relative
205 | &:before
206 | +overlay
207 | background: rgba($black, 0.7)
208 | background: $background
209 | border: 1px solid $border
210 | content: ""
211 | display: block
212 | z-index: 1
213 | &:after
214 | +overlay
215 | align-items: center
216 | content: attr(title)
217 | display: flex
218 | font-family: $family-monospace
219 | font-size: 11px
220 | justify-content: center
221 | padding: 3px 5px
222 | z-index: 2
223 | &.is-structure-container
224 | padding: 20px 10px 10px
225 | &:after
226 | align-items: flex-start
227 | justify-content: flex-start
228 | padding: 5px 10px
229 |
230 | .highlight
231 | position: relative
232 | .copy,
233 | .expand
234 | @extend .unselectable
235 | background: $white
236 | border: solid $border
237 | border-width: 0 0 1px 1px
238 | color: $text-light
239 | outline: none
240 | position: absolute
241 | right: 0
242 | top: 0
243 | &:hover
244 | border-color: $code
245 | color: $code
246 | .expand
247 | border-right-width: 1px
248 | right: 50px
249 |
250 | +tablet
251 | .section > .example:not(.is-fullwidth)
252 | margin-left: 20px
253 | margin-right: 20px
254 | & + .highlight
255 | margin-left: 20px
256 | margin-right: 20px
257 |
258 | #newsletter
259 | .input
260 | border-color: $white
261 | box-shadow: none
262 |
--------------------------------------------------------------------------------
/styles/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styles",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "bulma-website.sass",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "autoprefixer": "^6.3.3",
13 | "node-sass": "^3.4.2",
14 | "postcss-cli": "^2.5.1"
15 | },
16 | "scripts": {
17 | "autoprefix": "postcss --use autoprefixer --output bulma-website.css bulma-website.css",
18 | "build": "npm run clean && npm run build-sass && npm run autoprefix",
19 | "build-sass": "node-sass --output-style expanded bulma-website.sass bulma-website.css",
20 | "clean": "rm bulma-website.css"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/styles/sparrow.sass:
--------------------------------------------------------------------------------
1 | @charset "utf-8"
2 |
3 | $pink: #db4086
4 | $primary: $pink
5 |
6 | $family-sans-serif: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif
7 |
8 | $column-gap: 40px
9 | $nav-height: 100px
10 |
11 | $body-background: white
12 |
13 | @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,400italic,700)
14 |
15 | @import "../bulma/bulma"
16 |
17 | // Overrides
18 |
19 | .header
20 | background: none
21 | box-shadow: none
22 | .container
23 | box-shadow: none
24 |
25 | .header-item img
26 | +tablet
27 | max-height: 40px
28 |
29 | .hero
30 | &:not(:last-child)
31 | &:after
32 | background: rgba($border, 0.5)
33 | content: ""
34 | display: block
35 | height: 1px
36 | margin: 0 auto
37 | max-width: 960px
38 |
39 | .icon
40 | color: $primary
41 |
42 | .title strong
43 | font-weight: 400
44 |
45 | .columns:not(:last-child)
46 | margin-bottom: 80px
47 |
48 | // Unique
49 |
50 | .iphone
51 | background: url("/images/sparrow/iphone.png") no-repeat center top
52 | background-size: 320px 640px
53 | display: inline-block
54 | height: 480px
55 | overflow: hidden
56 | position: relative
57 | vertical-align: top
58 | width: 320px
59 | img
60 | display: none
61 | height: 640px
62 | width: 320px
63 |
64 | .badges
65 | a,
66 | img
67 | height: 45px
68 | img
69 | display: block
70 | a
71 | display: inline-block
72 | vertical-align: top
73 |
74 | .press
75 | align-items: center
76 | display: flex
77 | flex-wrap: wrap
78 | justify-content: center
79 | img
80 | display: block
81 | margin: 10px 20px
82 | max-height: 60px
83 | max-width: 180px
84 |
85 | #perspective
86 | background: url("/images/sparrow/iphone-perspective.png") no-repeat right bottom
87 | background-size: 546px 340px
88 | height: 280px
89 | img
90 | display: block
91 | +mobile
92 | display: none
93 |
94 | #download
95 | +tablet
96 | height: 280px
97 | padding: 0
98 |
--------------------------------------------------------------------------------
/templates.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | route: templates
4 | ---
5 |
6 |
7 |
8 |
9 | {% include header.html %}
10 |
11 |
14 |
15 |
16 | Templates
17 |
18 |
19 | Free HTML templates that make use of Bulma out of the box
20 |
21 |
22 |
52 |
53 |
87 |
88 |
90 |
91 |
92 |
93 |
94 | Business
95 |
96 |
97 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id risus turpis. Proin ut eleifend ligula. Cras euismod erat ullamcorper, condimentum tortor eget, gravida lacus.
98 |
99 |
111 |
112 |
113 |
114 | 
115 |
116 |
117 |
118 |
119 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
Simple
133 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id risus turpis. Proin ut eleifend ligula.
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
Powerful
142 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id risus turpis. Proin ut eleifend ligula.
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
Secure
151 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id risus turpis. Proin ut eleifend ligula.
152 |
153 |
154 |
155 |
160 |
161 |
162 |
163 | Scale
164 |
165 |
166 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id risus turpis. Proin ut eleifend ligula. Cras euismod erat ullamcorper, condimentum tortor eget, gravida lacus.
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 | Scale
184 |
185 |
186 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id risus turpis. Proin ut eleifend ligula. Cras euismod erat ullamcorper, condimentum tortor eget, gravida lacus.
187 |
188 |
189 |
190 |
195 |
196 |
Get in touch
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
222 |
223 |
224 |
225 |
226 | Are volume discounts available?
227 | We offer customized pricing for larger businesses. If you accept more than £30,000 per month, get in touch
228 |
229 |
230 | Are volume discounts available?
231 | We offer customized pricing for larger businesses. If you accept more than £30,000 per month, get in touch
232 |
233 |
234 |
235 |
236 | Are volume discounts available?
237 | We offer customized pricing for larger businesses. If you accept more than £30,000 per month, get in touch
238 |
239 |
240 |
241 |
242 |
8 |
9 |
10 | Thank you!
11 |
12 |
13 | Go back to the homepage
14 |
15 |
16 |