forked from jgthms/bulma
-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.html
112 lines (71 loc) · 3.87 KB
/
README.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
<!DOCTYPE html><html><head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="./css/bulma.css">
</head><body><div class="container">
<section>
<div class="columns">
<div class="column is-1">
...
</div>
<div class="column has-text-centered">
Second column
</div>
<div class="column is-1">
...
</div>
</div>
</section>
<hr>
<section>
<div class="columns">
<div class="column">
<p>
<a href="https://www.npmjs.com/package/bulma"><img src="https://img.shields.io/npm/v/bulma.svg" alt="npm" /></a>
<a href="https://www.npmjs.com/package/bulma"><img src="https://img.shields.io/npm/dm/bulma.svg" alt="npm" /></a>
<a href="https://gitter.im/jgthms/bulma"><img src="https://badges.gitter.im/jgthms/bulma.svg" alt="Join the chat at https://gitter.im/jgthms/bulma" /></a>
</p>
<p>Bulma is a modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a>.</p>
<p><a href="http://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" alt="Bulma: a Flexbox CSS framework" /></a></p>
<h2 id="quickinstall">Quick install</h2>
<p>Bulma is in early but active development! Try it out now:</p>
<h3 id="npm">NPM</h3>
<pre><code class="sh">npm install bulma
</code></pre>
<h3 id="bower">Bower</h3>
<pre><code class="sh">bower install bulma
</code></pre>
<h3 id="cdn">CDN</h3>
<p><a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a></p>
<p>Feel free to raise an issue or submit a pull request.</p>
<h2 id="cssonly">CSS only</h2>
<p>Bulma is a <strong>CSS</strong> framework. As such, the sole output is a single CSS file: <a href="https://github.com/jgthms/bulma/blob/master/css/bulma.css">bulma.css</a></p>
<p>You can either use that file, “out of the box”, or download the Sass source files to customize the <a href="http://bulma.io/documentation/overview/variables/">variables</a>.</p>
<p>There is <strong>no</strong> JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered “environment agnostic”: it’s just the style layer on top of the logic.</p>
<h2 id="browsersupport">Browser Support</h2>
<p>Bulma uses <a href="https://github.com/postcss/autoprefixer">autoprefixer</a> to make (most) Flexbox features compatible with earlier browser versions. According to <a href="http://caniuse.com/#feat=flexbox">Can I use</a>, Bulma is compatible with <strong>recent</strong> versions of:</p>
<ul>
<li>Chrome</li>
<li>Edge</li>
<li>Firefox</li>
<li>Opera</li>
<li>Safari</li>
</ul>
<p>Internet Explorer (10+) is only partially supported.</p>
<h2 id="documentation">Documentation</h2>
<p>The documentation resides in the <a href="docs">docs</a> directory, and is built with the Ruby-based <a href="https://jekyllrb.com/">Jekyll</a> tool.</p>
<p>Browse the <a href="http://bulma.io/documentation/overview/start/">online documentation here.</a></p>
<h2 id="relatedprojects">Related projects</h2>
<ul>
<li>Bulma with Attribute Modules: https://github.com/j5bot/bulma-attribute-selectors</li>
<li>Bulma with Rails: https://github.com/joshuajansen/bulma-rails</li>
<li>iTemplate: <a href="http://itemplate.ga/dashboard.html">http://itemplate.ga/</a></li>
<li>Vue Admin powered by Bulma: https://github.com/vue-bulma/vue-admin</li>
<li>Bulmaswatch — Free themes for Bulma: https://github.com/jenil/bulmaswatch</li>
</ul>
<h2 id="copyrightandlicense">Copyright and license</h2>
<p>Code copyright 2017 Jeremy Thomas. Code released under <a href="https://github.com/jgthms/bulma/blob/master/LICENSE">the MIT license</a>.</p>
</div>
<div class="column"></div>
</div>
</section>
</div></body></html>