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 FREE CHAPTER

2. Understanding Bulma, terminology, and concepts

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

Chapter 11. Using Bulma with Angular

As you know, Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end-to-end tooling, and integrated best practices to solve developmental challenges. But it does not provide you with a rich UI experience. This is where Bulma comes in.

As illustrated in examples of using Bulma with JavaScript, it’s really easy right? Now let’s integrate our Bulma templates with the Angular framework! So, what do you need?

Knowledge of CLI
Node.js
Angular CLI

If you don’t have these installed, it’s easy to get up and running with Angular. You simply just need to download Node.js from the official website and follow the installation instructions. After Node is installed, you need to install the Angular CLI via NPM.

Node.js Website: https://nodejs.org/en/

# Install Angular CLI
npm install -g @angular/cli

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

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

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

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

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

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

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

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

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

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

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