From the course: CSS and JavaScript Library Integration

Unlock the full course today

Join today to access over 24,000 courses taught by industry experts.

Implementing a basic UI with Bulma and Vue.js

Implementing a basic UI with Bulma and Vue.js - JavaScript Tutorial

From the course: CSS and JavaScript Library Integration

Start my 1-month free trial Buy for my team

Implementing a basic UI with Bulma and Vue.js

“

- [Instructor] The landing page you'll be building in this lesson is made up of three different components, the Navigation, the Hero component, and the Features component. Start by creating each component and then assemble them in the app, the Vue file. You start by creating a component folder in the src folder to house all of your components. At the src folder, you create a components folder, then create the Navbar component file, NavBar.vue. To make your work faster, since Bulma already has a Navbar component design readily available for use in the documentation, you simply select the pre-designed Navbar component you want and customize it to your design. This is the one I picked. It has a nav element with a class navbar and the color will be light, and you apply that using is-light. navbar-brand, navbar-item, this navbar-item includes the Navbar logo and it will be positioned on the left. For the mobile devices,…

Contents