Bulma CSS - Resources and short-introduction
Tags: bulma, css, appseed
Published: 2019-07-02 20:56:46

---
title: Bulma CSS - Resources and short-introduction
published: true
description: A short-list with Bulma resources, the open-source CSS framework based on Flexbox
cover_image: https://raw.githubusercontent.com/app-generator/bulma-starters/master/media/bulma-css-banner-apps.png
tags: bulma, css, appseed
---
Hello Coders, 

In this article, I will present a few resources and basic information about **[Bulma Css](https://appseed.us/apps/bulma-css/bulmaplay)** - the open-source **CSS framework** based on Flexbox. 
**Bulma** is a relatively new entrant to the battleground of CSS frameworks and has made a name for itself in a short time. 

> *Thanks for reading!* 

--- 

## [Bulma Play](https://appseed.us/apps/bulma-css/bulmaplay)

Simple, one-page starter styled with Bulma v0.9.1 released under the MIT license on Github. Being a simple Flask starter, this Bulma-based design can be integrated with ease into any Python-based framework like Django, FastAPI. 

---

- [BulmaPlay](https://appseed.us/apps/bulma-css/bulmaplay) - product page
- [BulmaPlay Demo](https://bulmaplay.appseed-srv1.com/) - LIVE deployment

--- 

![Bulma Css - BulmaPlay, open-source starter styled with Bulma.](https://raw.githubusercontent.com/app-generator/bulmaplay/master/media/bulmaplay-screen-features.png) 

---

## Bulma Fresh 

This is a super simple one-page starter with a hamburger menu and a popup for authentication forms. The UI is crafted by Css Ninja agency and the code can be downloaded directly from Github under the MIT License.

---

- [Bulma Fresh](https://github.com/cssninjaStudio/fresh) - source code
- [Bulma Fresh Demo](https://cssninjastudio.github.io/fresh/) - LIVE Deployment

---

![Bulma CSS Fresh - Open-source template project crafted by CSS Ninja](https://raw.githubusercontent.com/app-generator/bulma-css/master/media/fresh-screen-product.png)

---

## Bulma Krypton

Krypton is a one-page landing page starter built by Css Ninja Studio. Krypton is licensed under the MIT license and based on this permissive license, the UI can be used for unlimited hobby & commercial projects

---

- [Bulma Krypton](https://github.com/cssninjaStudio/krypton) - source code

---

![Bulma CSS Krypton - Open-source multi-page template styled with Bulma.](https://raw.githubusercontent.com/app-generator/bulma-css/master/media/krypton-screen.png)

---

## [Flask Dashkit](https://appseed.us/admin-dashboards/flask-dashboard-dashkit-pro)

Admin Dashboard coded in Flask Framework on top of **Dashkit Dashboard** design (PRO Version) designed by CssNinja. 

---

- [Flask Dashkit PRO](https://appseed.us/admin-dashboards/flask-dashboard-dashkit-pro) - product page
- [Flask Dashkit PRO - Demo](https://flask-dashboard-dashkit-pro.appseed.us/) - LIVE deployment

---

![Bulma Css - Flask Dashkit, premium starter styled with Bulma.](https://raw.githubusercontent.com/app-generator/flask-dashboard-dashkit-pro/master/media/flask-dashboard-dashkit-pro-screen.png) 

---

## [Django Dashkit](https://appseed.us/admin-dashboards/django-dashboard-dashkit-pro)

Admin Dashboard coded in Django Framework on top of **Dashkit Dashboard** design (PRO Version) designed by CssNinja. 

---

- [Django Dashkit PRO](https://appseed.us/admin-dashboards/django-dashboard-dashkit-pro) - product page
- [Django Dashkit PRO - Demo](https://django-dashboard-dashkit-pro.appseed.us/) - LIVE deployment

---

![Bulma Css - Django Dashkit, premium starter styled with Bulma.](https://raw.githubusercontent.com/app-generator/django-dashboard-dashkit-pro/master/media/django-dashboard-dashkit-pro-screen-4.png)

---

## Bulma Css

> Getting started

Coding a basic web page with Bulma it's quite easy. We need to include the CSS file, available on CDN: 

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bulma CSS - Starter Page</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"  crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous" />

</head>
<body>
    <div class="container is-fluid">
        <!-- Add here Bulma Stuff -->
    </div>
</body>
</html>
```

---

Bulma and Font-Awesome are loaded via CDN (no download required):

- [bulma.min.css](https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css) - minified version of Bulma 0.9.1
- [font-awesome](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css) - minified version v5.15

---

### Bulma Syntax

> Modifiers

The first thing you should learn about Bulma is the modifier classes. These allow you to set alternative styles to almost all of the Bulma elements. They all start with **is-*** or **has-***, and then you replace the * with the style you want. For instance, let's add a few styled buttons:

```
<!DOCTYPE html>
<html>
  <head>
  <body>
  ...
        <p>
            <button class="button">
              Button
            </button>

            <button class="button is-primary">
              Primary button
            </button>

            <button class="button is-large is-warning">
              Large button
            </button>
        </p>
  ...
  </body>
</html>
```

---

> And the result

![Bulma CSS - a minimum starter with buttons.](https://raw.githubusercontent.com/app-generator/static/master/css-frameworks/bulma-css-starter-with-buttons.jpg)

---

### More ... Buttons

The code snippet that code some simple buttons is fairly simple:

```html
<button class="button is-primary is-small">Small</button>
<button class="button is-link">Default</button>
<button class="button is-warning is-normal">Normal</button>
<button class="button is-success is-medium">Medium</button>
<button class="button is-danger  is-large">Large</button>
```

The output for this code looks like on this screenshot:

---

![Bulma CSS - UI Buttons.](https://raw.githubusercontent.com/app-generator/bulma-css/master/media/bulma-css-buttons.png)

---

### Bulma Responsiveness

Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile and uses 5 [breakpoints](https://bulma.io/documentation/overview/responsiveness/#breakpoints): mobile (up to 768px), tablet (from 769px), desktop (from 1024px), widescreen: from 1216px

![Bulma CSS - Image with the Gid system.](https://github.com/app-generator/static/blob/master/css-frameworks/bulma-css-grid.jpg?raw=true)

---

### Bulma Colors

To set the color of an element, we need to use the **is-*** in front of the desired color: 
```
.is-danger
.is-warning
```

---

![Bulma CSS - Framework Colors.](https://raw.githubusercontent.com/app-generator/static/master/css-frameworks/bulma-css-colors.jpg)

---

### Bulma - Hero Component

This component can be invoked by using class "hero" as the main container and this will code a full-width banner on the page.

---

![Bulma CSS - UI Hero Component.](https://raw.githubusercontent.com/app-generator/bulma-css/master/media/bulma-css-hero-component.png)

---

### Bulma - Team Cards

Using cards for our team or pricing is quite a common component used in many templates. Bulma helps us to code a team section using  a minimum CSS code:

---

![Bulma CSS - Team Cards](https://raw.githubusercontent.com/app-generator/bulma-css/master/media/bulma-css-team-cards.png)

---

Let's take a look at the first card and analyze the relevant CSS classes:

```html
<div class="column is-4">
    <div class="level">
        <div class="level-item">
            <figure class="image is-128x128">
                <img class="is-rounded" src="media/team-1.jpg" alt="">
            </figure>
        </div>
    </div>
    <h5 class="title is-5">Angelina Jolie</h5>
    <p class="subtitle is-6">CEO</p>
    <p>When I'm not obsessively stressing ...</p>
</div>
```

- The card width has **4 cells** (we need three cards on a row)
- The Image has the **figure** container and the inner "**is-rounded**" image
- The descriptors "**is-5**" and "**is-6**" are classes defined for [headings](https://bulma.io/documentation/elements/title/) objects

---
 
> Thanks for reading! For more resources, please access:

- [Bulma.io](https://bulma.io/) - the official website
- More [Bulma CSS](https://appseed.us/apps/bulma-css) starters provided by AppSeed

---

> Btw, my (nick) name is **Sm0ke** and I'm pretty active also on [Twitter](https://twitter.com/Sm0keDev).