Cover image for Creating Interfaces with Bulma

Creating Interfaces with Bulma

Author Dave Berning , Aslam Shah , Mikko Lauhakari , Oleksii Potiekhin , creator of Bulma J
Release Date: 2018/02/01
ISBN: 9781939902498
Topic:
0%
19
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

This book, written by Jeremy Thomas (Bulma creator) and a team of Bulma experts, 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.

Table of Contents

  1. Foreword by Jeremy Thomas
    1. My Bulma journey
  2. Preface
    1. Who is this book for?
  3. 1. Introduction
    1. Simple columns system
    2. Readability
    3. Customizable
    4. Modular
    5. Summary
  4. 2. Understanding Bulma, terminology, and concepts
    1. How is Bulma unique?
    2. Simple columns system
    3. Readability
    4. Customizable
    5. Modular
    6. Columns
    7. Modifiers
    8. Components
    9. Helper classes
    10. Summary
  5. 3. Creating and controlling forms with Bulma
    1. Template requirements
    2. Centered layout
      1. Resizing the single column
    3. Implementing the form’s content
      1. Logo
      2. Email input
      3. Password input
      4. Remember me checkbox
      5. Login button
    4. Summary
  6. 4. Creating navigations and vertical menus
    1. Creating the navigation bar
      1. The navigation’s branding
      2. The navigation’s menu
      3. The Navigation’s dropdown menu
    2. The main section
    3. The sidebar menu
    4. Summary
  7. 5. Creating responsive grids with common components
    1. The toolbar
      1. Similarities between navbar and level
      2. Creating the toolbar
    2. The books grid
    3. The book item
    4. Pagination
    5. Summary
  8. 6. Creating breadcrumbs and file upload fields
    1. New book detail template
      1. Breadcrumb
      2. The book form
    2. Edit the book template
    3. Summary
  9. 7. Creating tables and selecting dropdowns
    1. The list of customers
      1. Updating the toolbar
      2. Implementing the table of customers
    2. New customer template
      1. Edit customer template
    3. Summary
  10. 8. Creating more tables and selecting dropdowns
    1. List of orders
    2. Edit Order
      1. Order information
      2. List of books
      3. Row Form
    3. Summary
  11. 9. Creating notifications and cards
    1. Title, time range
    2. Important metrics
    3. Latest orders
    4. Most popular books with cards
      1. Basic structure of a card
    5. Most loyal customers
    6. Summary
  12. 10. Using Bulma with Vanilla JavaScript
    1. Report a Bug - Modal
    2. Mobile menu toggle
    3. Notifications
    4. Dropdowns
    5. Delete a book item from books page
    6. Delete a customer from customer page
    7. Summary
  13. 11. Using Bulma with Angular
    1. Project preparation
    2. Application
    3. Components
    4. Summary
  14. 12. Using Bulma with VueJS
    1. Installing Vue-CLI
    2. Setting up the Vue project
      1. Preparing pages
      2. Vue-Router
    3. Installing Bulma
      1. Option 1: Adding Bulma via a CDN
      2. Option 2: Adding Bulma via NPM (Recommended)
      3. Make use of Font-Awesome
    4. Setting up components with Vue
    5. Admin skeleton
    6. Implementing the dashboard
    7. First Vue template: Login page
    8. Creating the “Report a Bug” component
      1. Creating a component
      2. Add the Modal to the App Template
    9. Books page
      1. Sorting books
      2. Filtering books
      3. Creating and editing a book
    10. Summary
  15. 13. Using Bulma with React
    1. What you will be making
    2. Installing “Create React App”
    3. Quick overview of Create-React-App
      1. The app structure
    4. Installing Bulma
      1. Option 1: Adding Bulma via a CDN
      2. Option 2: Adding Bulma via NPM
    5. Routing with React Router 4
      1. BrowserRouter
      2. Route
      3. Final App.js With Routes
    6. Creating the Login component
      1. Login.jsx
      2. Creating the Login form
    7. Creating the collection
      1. The Header
      2. Header.jsx
      3. HeaderBrand.jsx
      4. HeaderUserControls.jsx
      5. Putting the header together
    8. Footer.jsx
    9. The book collection body
      1. Collection.jsx
      2. CollectionSingleBook.jsx
      3. CollectionSingleBookDetail.jsx
      4. Tying the Collections Component Together
    10. Running the application
    11. Summary
  16. 14. Customizing Bulma
    1. Setting up node-sass
      1. Creating package.json
      2. Creating a sass/custom.scss file
    2. Importing Bulma
    3. Importing the Google fonts
    4. Introducing your own variables
    5. Understanding Bulma’s variables
    6. Overriding Bulma’s initial variables
    7. Overriding Bulma’s component variables
    8. Updating the HTML
    9. Custom rules
      1. Second font
      2. Bigger controls
      3. Using the Rubik font
      4. Updating the sidebar menu
      5. Fixing the navbar
      6. Better tables
      7. Bold titles
    10. Responsiveness with Bulma mixins
      1. Media
    11. Final Summary
18.117.196.184