Bulma
Bulma is a free and open source frontend CSS framework based on Flexbox. It contains HTML and CSS-based design templates for typography, forms, buttons, tables, grid systems, navigation and other interface design elements.
Features
- 100% Responsive.
- Modular.
- Modern.
- Free (Source code on GitHub).
- growing community.
- Easy to learn.
- Quick Customization.
- No JavaScript Required
Getting started
There are three ways for you to start using Bulma. You can use npm to install the Bulma package (recommended), you can link the Bulma stylesheet via CDN or you can clone the GitHub repository of Bulma to get the latest development version.
Using NPM
Just type the following in your terminal:
$ npm install bulma
Using a CDN
Take one of the links from this page and embed them in your project.
Get Started
There are several ways to get started with Bulma.
- Installing the Bulma package with npm
- Using a CDN to link to the Bulma stylesheet.
- Use the GitHub Repository to get the latest development version.
- Using npm
$ npm install bulma
- Use the cdnjs CDN https://cdnjs.com/libraries/bulma
- Download from the repository https://github.com/jgthms/bulma/tree/master/css
Code requirements
For Bulma to work correctly, you need to make your webpage responsive.
- Use HTML5 doctype
<!DOCTYPE html>
- Add the responsive viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
- Starter Template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</section>
</body>
</html>
Bulma-start
bulma-start
is a tiny npm
package that includes the npm dependencies you need to build your own website with Bulma.