Bulma Lightweight CSS (Simplified)

sanjay.adhikari (25)in #utopian-io • 7 years ago (edited)

What Will you Learn?

Lightweight responsive css use.

What is bulma ?

Get Started
Requires single CSS file only.
There are several ways to integrate BULMA framework on your project. You can :: :: :::
• use npm

npm install bulma

• use the cdnjs CDN to link

https://cdnjs.com/libraries/bulma

• use the GitHub repository

https://github.com/jgthms/bulma/tree/master/css

Requirement
• HTML5 doctype

• Responsive viewport meta tag

Starter template

starter template.png

For more source :: <a href=” https://bulma.io/documentation/overview/start/”> Go to official documentation for starter template

Responsive Columns
• Add .columns class container
• Add as many .column element as you want.

auto adjusts the column according to screen size.
Each column will have an equal width, no matter the number of columns.

Defining the width of columns
You can easily adjust the size of the column on quarter

• is-three-quarters

• is-two-thirds

• is-half

• is-one-third

• is-one-quarter

column - 1.png

The other columns will fill up the remaining space automatically.
New version make you available the column width according to multiple 20% of screen width.

• is-four-fifths

• is-three-fifths

• is-two-fifths

• is-one-fifth

column - 2.png
**Example **
grid column.png

12 columns system

As the grid can be divided into 12 columns, there are size classes for each division:

• is-2

• is-3

• is-4

• is-5

• is-6

• is-7

• is-8

• is-9

• is-10

• is-11

**Example ::: **
columnnn -2 3.png
Source ::: For column sizes and responsive