- Click Demo to see demo of my tutorial.
- Click Here Tutorial_Zip to download my tutorial.
Tutorial Bulma
~ This webpage is designed completely in Bulma
What is Bulma
Bulma is a open source CSS framework based on Flexbox. Bulma is built by Jeremy Thomas.
Bulma provides many great features like:-
Responsive:
Mobile first framework similar to Bootstrap.
-
Well documented:
This sounds like a boring reason but is so very important Solid looking foundation: All the typography, buttons, tables, forms, and basic CSS goodies you'd expect.
-
Tons of components:
Comes with layouts, a vertical alignment level, and media objects
-
Modular:
Built with Sass. Only import the features that you'll use for your project I've found that building out sites/apps with Bulma (including)
Bulma Used in this project
- Install bulma by visiting Bulma.io
-
We started by developing a main Login Page. (Find the code for adding the header)
Login Page
Sign Up Page
Profile Page
Visiting Someone elses page
classes used in this section were Hero, body, container, login and columns.
I have used columns throughout this web application since it is a very powerful css tool in Bulma. It organizes the information in a nice clean format. The list of all the columns can be found Here
Every Page in this application has a footer. Bulma makes it easy for the developer by having a footer class. As seen in the picture above.Images
There are various type of pictures used in this project. the "is-rounded" class turns the pictures into a circle. Please see the various screenshots below of how the images classes are being used.
Demo
Click Demo
to see demo of my tutorial.
Click Here Tutorial_Zip to download my tutorial.