This video is available to students only

Front End Component Libraries

Adopting a Frontend Component Library

Svelte is a frontend framework that focuses on reactivity and user interaction, but has no opinions about the look and feel of an application. We could create the look and feel of our app completely from scratch, but it usually makes sense to pick a frontend component library to accelerate the development process.

Frontend component libraries provide responsive layout grids and various UI components such as cards and modals. For this course, we are going to use Bulma which is a lightweight CSS-only framework.

Responsive layout grids are designed to work in both mobile and desktop environments with the HTML elements flowing and stacking properly based on screen resolution.

We looked at a couple of nascent Svelte community projects for both Bootstrap and Material Design, but ultimately decided that a lightweight CSS-only option would be the best way to keep forward momentum and build the application faster.

Adding Bulma to Index.html#

The easiest way to add Bulma to a web project is to use a Content Delivery Network (CDN) link to the Bulma CSS file. CDNs provide public links to static files and are performance-optimized for caching and reducing geographic latency.

Open the file /public/index.html and add a stylesheet reference to[email protected]/css/bulma.css. The full reference is:

While you are there, you can change the <title> element to something more fitting like Easily Publish Your School Lunch Menus.

At this point, index.html should look like this:

We want to leave bundle.js and bundle.css alone. These are references to the main JavaScript and CSS bundles that are built from the contents of our Svelte files. Bulma will give us a great base for styling, but later on, we'll see how to add more CSS rules directly in Svelte files.


This page is a preview of Fullstack Svelte

Start a new discussion. All notification go to the author.