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.
Table of Contents (15 chapters)
8
8. Creating more tables and selecting dropdowns

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.