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

Chapter 14. Customizing Bulma

Bulma comes with default styles that are carefully chosen to satisfy most users, and ensure that any interface built with Bulma looks great.

But even if the layout of the page is naturally balanced and the components are clear enough to be used straight out of the box, you probably don’t want your website to end up looking like every other Bulma instance. First, because you probably already have defined colors and typography rules, which is especially true when you are using Bulma in a business context, where branding guidelines have already been defined and need to be strictly followed. Secondly, because no matter what the purpose of the website you’re building with Bulma, you’ll still want to add your own personal touch. And one design can’t satisfy everyone!

Luckily, Bulma is a CSS framework that is very easy to customize, and it can be done in several ways:

  1. Overriding Bulma’s initial and derived variables
  2. Overriding...