Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Creating Interfaces with Bulma

You're reading from   Creating Interfaces with Bulma Create impressive web interfaces with this open-source Flexbox-based CSS framework

Arrow left icon
Product type Paperback
Published in Nov 2019
Publisher
ISBN-13 9781800209374
Length 194 pages
Edition 1st Edition
Languages
Tools
Concepts
Arrow right icon
Authors (6):
Arrow left icon
Oleksii Potiekhin Oleksii Potiekhin
Author Profile Icon Oleksii Potiekhin
Oleksii Potiekhin
Dave Berning Dave Berning
Author Profile Icon Dave Berning
Dave Berning
Backstop Media LLC Backstop Media LLC
Author Profile Icon Backstop Media LLC
Backstop Media LLC
Mikko Lauhakari Mikko Lauhakari
Author Profile Icon Mikko Lauhakari
Mikko Lauhakari
Jeremy Thomas Jeremy Thomas
Author Profile Icon Jeremy Thomas
Jeremy Thomas
Aslam Shah Aslam Shah
Author Profile Icon Aslam Shah
Aslam Shah
+2 more Show less
Arrow right icon
View More author details
Toc

Table of Contents (15) Chapters Close

Preface
1. Introduction FREE CHAPTER 2. Understanding Bulma, terminology, and concepts 3. Creating and controlling forms with Bulma 4. Creating navigations and vertical menus 5. Creating responsive grids with common components 6. Creating breadcrumbs and file upload fields 7. Creating tables and selecting dropdowns 8. Creating more tables and selecting dropdowns 9. Creating notifications and cards 10. Using Bulma with Vanilla JavaScript 11. Using Bulma with Angular 12. Using Bulma with VueJS 13. Using Bulma with React 14. Customizing Bulma

Who is this book for?

This book is for any designer or developer willing to understand how to use Bulma, and learn how to use Bulma’s components and layout system to create their own web interface.

Even if you are not already familiar with Bulma, it only takes a few minutes to get acquainted with the framework.

What do you need to know prior to reading?

You don’t need to know Bulma to read this book! You only need to have an understanding of how HTML and CSS work, but you don’t need an in-depth knowledge since Bulma’s purpose is to avoid writing CSS!

You also need a code editor: Sublime Text, Atom, Notepad++, IntelliJ, Vim, Emacs, etc. The only requirement is for your editor to have syntax highlighting and to be able to save a file with a specific extension (like .html or .css).

You will also need a modern browser: Google Chrome, Mozilla Firefox, Microsoft Edge or Apple Safari.

The online book publisher example

All of the code for the sample project in this book can be found at:

https://github.com/troymott/bulma-book-code

What will this book provide?

This book is a step-by-step guide that will teach you how to build a web interface from scratch using Bulma.

The example website that you will build is an administration interface for an online book publisher, where users can log in to manage three content types: Books, Customers, and Orders. This interface has been chosen because it satisfies all of the requirements for common CRUD (Create/Read/Update/Delete) functionalities, which exist in any type of website or CMS. You can access all of the code for this example on Github (https://github.com/troymott/bulma-book-code).

By the end of this book, you will understand how to:

  • Create layouts with Bulma
  • Work with components in Bulma
  • Design specific elements for your UI
  • Extend components with your own setup

The book will also show you how Bulma can be integrated with JavaScript through the following frameworks: React, Angular, VueJS, and Vanilla JS.

Author bios

Jeremy Thomas has been a web designer for more than 10 years. While studying graphic design in France, he discovered CSS during an accessibility class and instantly fell in love with the language. That’s when he decided to make a career out of it. He has worked with eCommerce companies, agencies (Sony, Microsoft, Louis Vuitton, freelancing, tech startups, code teaching).

By the beginning of 2016, Jeremy had developed a small framework that he was using himself for kickstarting his projects, and decided to share it for free to the world: Bulma was born. Still active in the open source community, he has launched other useful web resources like MarkSheet, CSS Reference, HTML Reference and Web Design in 4 minutes. His goal is to continuously share the knowledge he acquires through his daily work.

Book co-authors and contributors

Oleksii Potiekhin is a web developer by profession and by destiny with more then nine years of production experience in developing and designing GUIs on different platforms and technologies. He has worked with: Volvo, Scania, Volkswagen, Renault, John Lewis Partnership, Thomson Reuters, etc. He fell in love with Bulma in 2017 because it provides everything you need to build a modern UI for any kind of project.

Mikko Lauhakari is a developing web-creative, or just simply a web nerd. He’s had a passion for the web since the last bubble burst. With a background in web programming studies at Kalmar University, Sweden, he has a wide knowledge base of different programming languages.

Aslam Shah is a Senior JavaScript Developer at Risk.Ident GmbH. He has 5+ years of experience in developing front-end interfaces for small to large-sized companies and believes that technology never stops evolving, and that we have to learn new things every single day to keep ourselves up to date; we shouldn’t be scared of moving from old things to new ones. 

Dave Berning has been a front-end web developer for more than six years. He graduated from the University of Cincinnati where he learned to create interactive websites with HTML, CSS, and JavaScript. David builds rich progressive web applications with Vue and React. He is also a writer for Alligator.io, and organizer of the CodePen Cincinnati meetups where he leads workshops and discussions about the latest technology in the field. You can find him almost anywhere on the internet as @daveberning.

Technical Reviewers

We would like to the thank the following technical reviewers for their early feedback and generous, careful critiques: Ivan Ković, François-Xavier Costanzo, Dario Castañé, Stanley Eosakul, Samantha Baita, Aaron Ang, and Dave Berning.

lock icon The rest of the chapter is locked
Next Section arrow right
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image