Scribd
Upload
55 views

Getting Started With Bulma - Bulma - Free, Open Source, and Modern CSS Framework Based On Flexbox

Code requirements The document provides instructions for getting started with Bulma, an open source CSS Starter template framework. There are three main ways to use Bulma: by installing it with NPM, linking to bulma-start the CDN stylesheet, or downloading it from GitHub. The document also includes a starter Back to top HTML template and recommendations for including responsive meta tags and Font Awesome icons.

Uploaded by

Enrique Mingorro
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
55 views

Getting Started With Bulma - Bulma - Free, Open Source, and Modern CSS Framework Based On Flexbox

Code requirements The document provides instructions for getting started with Bulma, an open source CSS Starter template framework. There are three main ways to use Bulma: by installing it with NPM, linking to bulma-start the CDN stylesheet, or downloading it from GitHub. The document also includes a starter Back to top HTML template and recommendations for including responsive meta tags and Font Awesome icons.

Uploaded by

Enrique Mingorro
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

29/7/2020 Getting started with Bulma | Bulma: Free, open source, and modern CSS framework based on Flexbox

Bulma
On this 0.9.0 is out! With RTL support and spacing helpers.
page Release notes – Download it now

Code requirements

Starter template
bulma-start
Home / Documentation / Overview / Start
Back to top

Getting started with Bulma


You only need 1 CSS file to use Bulma
Limited time offer: Get
10 free Adobe Stock
images.

ads via Carbon

Start CSS classes Modifiers syntax Modularity Responsiveness Colors

Functions Mixins

There are several ways to get started with Bulma. You can either:

1. use npm to install the Bulma package


2. use the jsDelivr CDN to link to the Bulma stylesheet
3. use the GitHub repository to get the latest development version

1 Use NPM (recommended):


Copy
npm install bulma

2 Use the jsDelivr CDN


https://www.jsdelivr.com/package/npm/bulma

3 Download from the repository


https://github.com/jgthms/bulma/tree/master/css
https://bulma.io/documentation/overview/start/ 1/7
29/7/2020 Getting started with Bulma | Bulma: Free, open source, and modern CSS framework based on Flexbox

On this page
Font Awesome icons
Code requirements

Starter template
If you want to use icons with Bulma, don't forget to include Font Awesome 5:
bulma-start
Copy
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
Back to top
</script>

Code requirements
For Bulma to work correctly, you need to make your webpage responsive.

1 Use the HTML5 doctype


Copy
<!DOCTYPE html>

2 Add the responsive viewport meta tag


Copy
<meta name="viewport" content="width=device-width, initial-scale=1">

Starter template
If you want to get started right away, you can use this HTML starter template. Just copy/paste this
code in a file and save it on your computer.
EX AMPLE

Copy
<!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://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
https://bulma.io/documentation/overview/start/ 2/7
29/7/2020 Getting started with Bulma | Bulma: Free, open source, and modern CSS framework based on Flexbox

</head>
<body>
On this page
<section class="section">
Code requirements
<div class="container">
Starter template<h1 class="title">
Hello World
bulma-start </h1>
<p class="subtitle">
Back to top
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.

Check it out

CSS classes →

This page is open source. Noticed a typo? Or something unclear?


Improve this page on GitHub
Overview
Start

CSS classes
Modifiers syntax

Modularity

Responsiveness
Colors

Functions

https://bulma.io/documentation/overview/start/ 3/7
29/7/2020 Getting started with Bulma | Bulma: Free, open source, and modern CSS framework based on Flexbox

Mixins
On this page
Customize
Code requirements
Helpers New!
Starter template
Columns
bulma-start

Layout
Back to top
Form

Elements

Components

My CSS ebook

Buy now →

Support Bulma 😃

One-time donation Visit our Sponsors Monthly donation

Sponsor

https://bulma.io/documentation/overview/start/ 4/7
29/7/2020 Getting started with Bulma | Bulma: Free, open source, and modern CSS framework based on Flexbox

On this page

Code requirements
Starter template New! The official Bulma
bulma-start
book! 😲
Back to top by Jeremy Thomas, creator of Bulma, Oleksii
Potiekhin,
Mikko Lauhakari, Aslam Shah and David
Berning

A step-by-step guide that teaches


you how to build a web interface
from scratch using Bulma.

Formats available: PDF Epub Mobi or

Kindle

PDF + Epub + Mobi Kindle version

Buy from Buy from

Or download a free sample !

Newsletter
Features, releases, email address Subscribe
showcase… stay in the loop!

https://bulma.io/documentation/overview/start/ 5/7
29/7/2020 Getting started with Bulma | Bulma: Free, open source, and modern CSS framework based on Flexbox

On this page

Bulma
Code by Jeremy
requirements Contribute on GitHub Share on social media
Thomas.
Starter template Star 40,610 Tweet
bulma-start
Follow @jgthms 11.7K followers
Follow @jgthms Like Share
Back to top
Source code licensed MIT.
Website content licensed CC
BY-NC-SA 4.0

Coming from Expo Love


Bootstrap See what you can Fans of Bulma
An alternative to build with Bulma
Bootstrap

Home Documentation More


Overview Expo Official Bulma showcase

Blog Customize Love Fans of Bulma around the world

Light/Dark colors, Helpers Patreon and Everyone who is


better look, larger GitHub Backers supporting Bulma
Columns
controls
Blog Stay updated with new features
Layout
Automatic variables
Form Made with The official community
docs
Bulma badge
Migrating to v0.7.0 Elements
Coming from See how Bulma is an
Website redesign Components Bootstrap alternative to Bootstrap

https://bulma.io/documentation/overview/start/ 6/7
29/7/2020 Getting started with Bulma | Bulma: Free, open source, and modern CSS framework based on Flexbox

View all posts Bulma Side projects to enhance


On this page extensions Bulma

Code requirements Bulma A tiny npm package to get


Starter template start started

bulma-start

Back to top

https://bulma.io/documentation/overview/start/ 7/7

You might also like