Book Image

Creating Interfaces with Bulma

By : Jeremy Thomas, Oleksii Potiekhin, Mikko Lauhakari, Aslam Shah, Dave Berning
Book Image

Creating Interfaces with Bulma

By: Jeremy Thomas, Oleksii Potiekhin, Mikko Lauhakari, Aslam Shah, Dave Berning

Overview of this book

Bulma is a lightweight configurable CSS framework that handles all the hard work of Flexbox for you. Bulma makes creating web interfaces an easy and interesting job. This book begins with an overview of the basics of Bulma ? its terms and its concepts. Then, while designing a login page for your application, you’ll learn how to use the various tools provided by Bulma to create HTML forms and control their layout and flow. In the later chapters, you’ll design an admin area for your application, thus learning to use Bulma’s navigation and menu components. You will also add the components to your user interface for common things such as boxes, lists, and media groups, and then create pagination. As you progress through the book, you’ll create and layout some other components for your interface, including tables, design dropdown lists, and finally to integrate your web application with JavaScript. By the end of this book, you’ll be able to use the features of Bulma to your advantage and build web interfaces quickly and easily.

Related Content you might be interested in

Current Title:

Small book image
Creating Interfaces with Bulma
Jeremy Thomas | Oleksii Potiekhin | Mikko Lauhakari | Aslam Shah | Dave Berning
Nov, 2019 | 194 pages
Small book image
Server Side development with Node.js and Koa.js Quick Start Guide
Olayinka Omole
Nov, 2018 | 132 pages
Small book image
Learning Bootstrap 4 by Building Projects
Eduonix Learning Solutions
Aug, 2018 | 218 pages
Small book image
Vue.js: Understanding its Tools and Ecosystem
Dave Berning
Nov, 2019 | 194 pages
Table of Contents (15 chapters)
Preface
Who is this book for?
Free Chapter
1
1. Introduction
1. Introduction
Simple columns system
Readability
Customizable
Modular
Summary
2
2. Understanding Bulma, terminology, and concepts
2. Understanding Bulma, terminology, and concepts
How is Bulma unique?
Simple columns system
Readability
Customizable
Modular
Columns
Modifiers
Components
Helper classes
Summary
3
3. Creating and controlling forms with Bulma
3. Creating and controlling forms with Bulma
Template requirements
Centered layout
Implementing the form’s content
Summary
4
4. Creating navigations and vertical menus
4. Creating navigations and vertical menus
Creating the navigation bar
The main section
The sidebar menu
Summary
5
5. Creating responsive grids with common components
5. Creating responsive grids with common components
The toolbar
The books grid
The book item
Pagination
Summary
6
6. Creating breadcrumbs and file upload fields
6. Creating breadcrumbs and file upload fields
New book detail template
Edit the book template
Summary
7
7. Creating tables and selecting dropdowns
7. Creating tables and selecting dropdowns
The list of customers
New customer template
Summary
8
8. Creating more tables and selecting dropdowns
8. Creating more tables and selecting dropdowns
List of orders
Edit Order
Summary
9
9. Creating notifications and cards
9. Creating notifications and cards
Title, time range
Important metrics
Latest orders
Most popular books with cards
Most loyal customers
Summary
10
10. Using Bulma with Vanilla JavaScript
10. Using Bulma with Vanilla JavaScript
Report a Bug - Modal
Mobile menu toggle
Notifications
Dropdowns
Delete a book item from books page
Delete a customer from customer page
Summary
11
11. Using Bulma with Angular
11. Using Bulma with Angular
Project preparation
Application
Components
Summary
12
12. Using Bulma with VueJS
12. Using Bulma with VueJS
Installing Vue-CLI
Setting up the Vue project
Installing Bulma
Setting up components with Vue
Admin skeleton
Implementing the dashboard
First Vue template: Login page
Creating the “Report a Bug” component
Books page
Summary
13
13. Using Bulma with React
13. Using Bulma with React
What you will be making
Installing “Create React App”
Quick overview of Create-React-App
Installing Bulma
Routing with React Router 4
Creating the Login component
Creating the collection
Footer.jsx
The book collection body
Running the application
Summary
14
14. Customizing Bulma
14. Customizing Bulma
Setting up node-sass
Importing Bulma
Importing the Google fonts
Introducing your own variables
Understanding Bulma’s variables
Overriding Bulma’s initial variables
Overriding Bulma’s component variables
Updating the HTML
Custom rules
Responsiveness with Bulma mixins
Final Summary

Setting up node-sass

Bulma is built with Sass, a CSS preprocessor. Although it’s originally written in Ruby (and available as a Ruby gem), it’s recommended to use the faster C/C++ compiler LibSass.

Most developers actually use node-sass, which provides binding for Node.js to LibSass. This is the library we’re going to use here.

You need to have NodeJS installed on your computer.

Creating package.json

With your terminal, go to the folder where you’ve saved your HTML files (alongside books.html, customers.html, etc.), and type the following:

npm init

Follow the instructions. This will create a package.json file.

Then type the following:

npm i bulma node-sass --save-dev

This will add the dev dependencies to your package.json:

"devDependencies": {
  "bulma": "^0.6.2",
  "node-sass": "^4.7.2"
}

Right now, the list of scripts only has one called test, which simply echos an error message and exits.

Replace that...

Previous Section
End of Section 2
Next Section