/
alternative-to-bootstrap.html
210 lines (193 loc) · 9.22 KB
/
alternative-to-bootstrap.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
---
bulma:
- type: "bulma"
icon: "css3"
icon_brand: true
title: "Modern features"
content: "By using the latest CSS3 features such as **Flexbox**, and planning on using **CSS Variables** and **CSS Grid**, Bulma aims to stay on the bleeding edge of browser technology."
- type: "bulma"
icon: "pause"
title: "Simple grid system"
content: "To build a Bulma grid, you only need a single `.columns` container to wrap as many `.column` items as you want."
- type: "bulma"
icon: "heart"
title: "Easy-to-learn syntax"
content: "With simple readable **class names** like `.button` or `.title`, and a straightforward **modifiers system** like `.is-primary` or `.is-large`, it's easy to pick up Bulma in **minutes**.<br>[More about modifiers](/documentation/modifiers/syntax/)"
- type: "bulma"
icon: "font-awesome"
icon_brand: true
title: "Font Awesome 5 support"
content: "Bulma is compatible with both [Font Awesome 4](http://fontawesome.io/) and [Font Awesome 5](https://fontawesome.com/) thanks to the `.icon` element."
- type: "bulma"
icon: "plus"
title: "100+ useful CSS helpers"
content: 'Bulma ships with more than **100 helpers** to specify color, display, and spacing.<br>[Responsive helpers](/documentation/modifiers/responsive-helpers/) <span class="separator">–</span> [Typography helpers](/documentation/modifiers/typography-helpers/) <span class="separator">–</span> [Other helpers](/documentation/modifiers/helpers/)'
- type: "bulma"
icon: "code"
title: "No JavaScript"
content: '<p>By focusing only on <strong>CSS</strong>, Bulma provides a lightweight solution that can easily be implemented in <strong>any development context</strong>.</p><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/vY1ZsRScYM">https://t.co/vY1ZsRScYM</a> -- a CSS framework by <a href="https://twitter.com/jgthms">@jgthms</a> -- is lovely! No JS included, which means no JS opinions included!</p>— Robert Stuttaford (@RobStuttaford) <a href="https://twitter.com/RobStuttaford/status/860885116909998080">May 6, 2017</a></blockquote>'
bootstrap:
- type: "bootstrap"
icon: "plug"
title: "jQuery plugins"
content: "Bootstrap includes useful jQuery plugins to add **interaction** to your website."
- type: "bootstrap"
icon: "users"
title: "Big community"
content: "Considering how long it has been around, Bootstrap has a **larger community** than Bulma. As a result, more tools (like theming and plugins) are available, and more questions are answered around the internet."
- type: "bootstrap"
icon: "internet-explorer"
icon_brand: true
title: "Internet Explorer compatibility"
content: "While 90% of Bulma works in IE11, Bootstrap has better **compatibility** with this browser."
- type: "bootstrap"
icon: "list"
title: "Additional elements"
content: "Bootstrap has some **elements** like [list group](https://getbootstrap.com/components/#list-group), [wells](https://getbootstrap.com/components/#wells), or [page header](https://getbootstrap.com/components/#page-header) that Bulma doesn't have."
---
<!DOCTYPE html>
<html lang="en" class="has-navbar-fixed-top">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<title>Bulma: an alternative to Bootstrap</title>
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
<meta property="og:url" content="{{site.url}}">
<meta property="og:type" content="website">
<meta property="og:title" content="{{site.title}}">
<meta property="og:image" content="{{site.url}}/images/bulma-banner.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="{{site.description}}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@jgthms">
<meta name="twitter:creator" content="@jgthms">
<meta name="twitter:title" content="{{site.title}}">
<meta name="twitter:image" content="{{site.url}}/images/bulma-banner.png">
<meta name="twitter:description" content="{{site.description}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{site.url}}/favicons/apple-touch-icon.png?v=201701041855">
<link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
<link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
<link rel="manifest" href="{{site.url}}/favicons/manifest.json?v=201701041855">
<link rel="mask-icon" href="{{site.url}}/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
<link rel="shortcut icon" href="{{site.url}}/favicons/favicon.ico?v=201701041855">
<meta name="msapplication-config" content="{{site.url}}/favicons/browserconfig.xml?v=201701041855">
<meta name="theme-color" content="#00d1b2">
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
</head>
<body>
{% include navbar.html id="Documentation" %}
<main class="bd-bootstrap">
<section class="hero is-medium">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h1 class="title">
Bulma: an alternative to Bootstrap
</h1>
<p class="subtitle">
Learn how Bulma can become a replacement for <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>
</p>
</div>
<div class="column is-narrow">
{% include carbon.html %}
</div>
</div>
</div>
</div>
</section>
</main>
<div class="section notification is-radiusless">
<h2 class="subtitle">
<div class="container">
Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.
</div>
</h2>
</div>
<section class="section">
<div class="container">
<div class="columns is-desktop">
<div class="column is-half-desktop">
<h3 class="subtitle is-3 has-text-centered pros-heading">
Why choose <strong>Bulma</strong>
</h3>
<figure class="bd-pros-icon">
{% include svg/bulma-b.svg %}
</figure>
<div class="bd-pros-list">
{% for pro in page.bulma %}
{%
include pro.html
type=pro.type
icon=pro.icon
icon_brand=pro.icon_brand
title=pro.title
content=pro.content
%}
{% endfor %}
</div>
</div>
<div class="column is-half-desktop">
<h3 class="subtitle is-3 has-text-centered pros-heading">
Why choose <strong>Bootstrap</strong>
</h3>
<figure class="bd-pros-icon">
{% include svg/bootstrap-icon.svg %}
</figure>
<div class="bd-pros-list">
{% for pro in page.bootstrap %}
{%
include pro.html
type=pro.type
icon=pro.icon
icon_brand=pro.icon_brand
title=pro.title
content=pro.content
%}
{% endfor %}
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="section">
<div class="container">
<div class="bd-comparison">
<header class="bd-comparison-header has-text-centered">
<h2 class="title">
Comparison table
</h2>
<p class="subtitle">
See which elements of the framework exist (or not) in the other
</p>
</header>
<table class="table is-bordered is-fullwidth">
<thead>
<tr>
<th>{% include svg/bulma-b.svg %}Bulma</th>
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
</tr>
</thead>
<tfoot>
<tr>
<th>{% include svg/bulma-b.svg %}Bulma</th>
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
</tr>
</tfoot>
<tbody>
{% include comparison.html %}
</tbody>
</table>
</div>
</div>
</section>
{% include footer.html %}
</body>
</html>