0

Explore Products

Best Sellers

New Releases

Books

Videos

Audiobooks

Free Learning

Creating Interfaces with Bulma

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

Product type Paperback

Published in Nov 2019

Publisher

ISBN-13 9781800209374

Length 194 pages

Edition 1st Edition

Languages

CSS

Tools

Angular

Concepts

Web Design

Authors (6):

Oleksii Potiekhin

Dave Berning

Backstop Media LLC

Mikko Lauhakari

Jeremy Thomas

Aslam Shah

+2 more

View More author details

Table of Contents (15) Chapters

Preface

1. Introduction

2. Understanding Bulma, terminology, and concepts FREE CHAPTER

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

Updating the HTML

The taller navbar is now more prominent. But the logo is too wide:

To save horizontal space, split the icon and the type. Replace the logo.png with the icon.png:

<a class="navbar-item">
  <img src="images/icon.png">
</a>

Move the type with the tagline:

<div class="navbar-item">
  <div>
    <img src="images/type.png" width="250.5" height="21">
    <br>
    <small>Publishing at the speed of technology</small>
  </div>
</div>

The rest of the chapter is locked

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

Start free trial

Renews at $19.99/month. Cancel anytime

Authors (5)

Jeremy Thomas

Jeremy Thomas

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. Thats 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.

See other products by Jeremy Thomas

Aslam Shah

Aslam Shah

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 shouldnt be scared of moving from old things to new ones.

See other products by Aslam Shah

Mikko Lauhakari

Mikko Lauhakari

Mikko Lauhakari is a developing web-creative, or just simply a web nerd. Hes 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.

See other products by Mikko Lauhakari

Oleksii Potiekhin

Oleksii Potiekhin

Oleksii Potiekhin is a web developer by profession and by destiny with more than 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.

See other products by Oleksii Potiekhin

Dave Berning

Dave Berning

Dave Berning has been a front-end web developer for more than six years. He graduated from the University of Cincinnati with a Bachelor of Fine Arts (B.F.A) in electronic media. During his tenure as a UC Bearcat, he learned to create interactive websites with HTML, CSS, and JavaScript. In addition to his B.F.A., Dave has several awards and recognitions from his peers and co-workers. Dave currently builds rich progressive web applications with Vue.js for Drees Homes; a home builder located in Greater Cincinnati. He is also a contributing writer for Alligator, LogRocket, and ButterCMS. In June 2017, Dave started organizing the CodePen Cincinnati meetups where he lectures and leads workshops about the latest technologies in the field.

See other products by Dave Berning

Other recommended products

Related to this chapter

Server Side development with Node.js and Koa.js Quick Start Guide

Server Side development with Node.js and Koa.js Quick Start Guide

Every developer wants to build modular and scalable web applications. Modern versions of the JavaScript language have made this possible in Node.js, and Koa is a Node.js framework that makes it easy. This book is the ideal introduction for JavaScript developers who want to create scalable serverside applications using Node.js and Koa.js.

Nov 2018 4h 24m

Server Side development with Node.js and Koa.js Quick Start Guide

Server Side development with Node.js and Koa.js Quick Start Guide

Every developer wants to build modular and scalable web applications. Modern versions of the JavaScript language have made this possible in Node.js, and Koa is a Node.js framework that makes it easy. This book is the ideal introduction for JavaScript developers who want to create scalable serverside applications using Node.js and Koa.js.

Nov 2018 4h 24m

Learning Bootstrap 4 by Building Projects

Learning Bootstrap 4 by Building Projects

Bootstrap is the world's most popular frontend framework to build web applications. You will be using a template that will help you in building different kinds of real world websites such as a social media website, a company landing page, a media hosting website, and a profile page with ease.

Aug 2018 7h 16m

Angular Projects

Angular Projects

Angular has established itself to be one of the most popular framework of choice amongst the developers. This book aims to take you on a journey of developing and building applications using the latest version of Angular. You will develop a series of projects including web as well as mobile applications and will get to learn core concepts and techniques associated with the framework.

Sep 2019 11h 40m

Angular Projects

Angular Projects

Angular has established itself to be one of the most popular framework of choice amongst the developers. This book aims to take you on a journey of developing and building applications using the latest version of Angular. You will develop a series of projects including web as well as mobile applications and will get to learn core concepts and techniques associated with the framework.

Sep 2019 11h 40m

Angular Projects

Angular Projects

Angular has established itself to be one of the most popular framework of choice amongst the developers. This book aims to take you on a journey of developing and building applications using the latest version of Angular. You will develop a series of projects including web as well as mobile applications and will get to learn core concepts and techniques associated with the framework.

Sep 2019 11h 40m

Angular Projects

Angular Projects

Angular has established itself to be one of the most popular framework of choice amongst the developers. This book aims to take you on a journey of developing and building applications using the latest version of Angular. You will develop a series of projects including web as well as mobile applications and will get to learn core concepts and techniques associated with the framework.

Sep 2019 11h 40m

Angular Projects

Angular Projects

Angular has established itself to be one of the most popular framework of choice amongst the developers. This book aims to take you on a journey of developing and building applications using the latest version of Angular. You will develop a series of projects including web as well as mobile applications and will get to learn core concepts and techniques associated with the framework.

Sep 2019 11h 40m

Angular Projects

Angular Projects

Angular has established itself to be one of the most popular framework of choice amongst the developers. This book aims to take you on a journey of developing and building applications using the latest version of Angular. You will develop a series of projects including web as well as mobile applications and will get to learn core concepts and techniques associated with the framework.

Sep 2019 11h 40m

Angular Projects

Angular Projects

Angular has established itself to be one of the most popular framework of choice amongst the developers. This book aims to take you on a journey of developing and building applications using the latest version of Angular. You will develop a series of projects including web as well as mobile applications and will get to learn core concepts and techniques associated with the framework.

Sep 2019 11h 40m

Angular Projects

Angular Projects

Angular has established itself to be one of the most popular framework of choice amongst the developers. This book aims to take you on a journey of developing and building applications using the latest version of Angular. You will develop a series of projects including web as well as mobile applications and will get to learn core concepts and techniques associated with the framework.

Sep 2019 11h 40m

Angular Projects

Angular Projects

Angular has established itself to be one of the most popular framework of choice amongst the developers. This book aims to take you on a journey of developing and building applications using the latest version of Angular. You will develop a series of projects including web as well as mobile applications and will get to learn core concepts and techniques associated with the framework.

Sep 2019 11h 40m

Personalised recommendations for you

Based on your interests and search pattern

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Reactive Patterns with RxJS and Angular Signals

Reactive Patterns with RxJS and Angular Signals

This RxJS book will help you understand the core concepts of RxJS and provide practical patterns to make your code more reactive and declarative. You'll also understand Angular Signals, which provide another way to improve code reactivity.

Jul 2024 8h 28m

API Testing and Development with Postman

API Testing and Development with Postman

Whether you are a tester or a developer working with APIs, you'll be able to put your knowledge to work with this practical guide to using Postman. The book provides a hands-on approach to implementing and learning the associated methodologies that will have you up-and-running and productive in no time.

Jun 2024 11h 56m

API Testing and Development with Postman

API Testing and Development with Postman

Whether you are a tester or a developer working with APIs, you'll be able to put your knowledge to work with this practical guide to using Postman. The book provides a hands-on approach to implementing and learning the associated methodologies that will have you up-and-running and productive in no time.

Jun 2024 11h 56m

FastAPI Cookbook

FastAPI Cookbook

This book helps you unlock the power of FastAPI to build high-performing web apps and APIs by taking you through the basics like routing and data validation through to advanced topics, such as custom middleware and WebSockets.

Aug 2024 11h 56m

Mastering Spring Boot 3.0

Mastering Spring Boot 3.0

This hands-on guide empowers you to develop scalable and efficient applications. You'll also learn microservices patterns, reactive programming, and security measures for building robust backend systems.

Jun 2024 8h 32m

Nuxt 3 Projects

Nuxt 3 Projects

This book is a comprehensive guide to Nuxt.js, which takes you from the basics to advanced topics. Uniquely, this book emphasizes practical, project-based learning, tackling real-world problems.

Jun 2024 7h 40m

Vue.js 3 for Beginners

Vue.js 3 for Beginners

Learning a new language by following video tutorials, blog posts, and documentation is a tiresome activity. This book will take you on an exciting journey of becoming a proficient Vue.js developer through a practical, step-by-step approach.

Sep 2024 10h 4m

Full-Stack Web Development with TypeScript 5

Full-Stack Web Development with TypeScript 5

The book emphasizes best practices, debugging, performance optimization, and scalable code structure, helping you develop practical skills in frontend and backend development, database integration, and AI integration.

Mastering Flask Web and API Development

Mastering Flask Web and API Development

The book is an introduction to Flask that will showcase its baseline, core, and advanced integration features to enable you to solve enterprise-related problems and issues in both web and API development.

Aug 2024 16h 28m