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

Installing Bulma

There are a few ways that you can initialize Bulma inside the React app. You can certainly add it to your index.html file inside the _public/ directory, or...you can add it via NPM and import it with ES6.

Note: You will want to add Bulma globally to refer to it once and use it throughout the entire application.

Option 1: Adding Bulma via a CDN

After Create-React-App is done installing, start the application with npm start and open the files in a text editor. In your project structure, you will see a public/ directory. Navigate to the public/ directory and open the index.html file.

You can remove the pre-rendered comments if you’d like, but these aren’t too important.

Inside the <head>, add Bulma via a CDN just like any other stylesheet in a website.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet">

Option 2: Adding Bulma via NPM

This is the recommended way of adding...