Front End Component Libraries
Adopting a Frontend Component Library
Front End Component Libraries#
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
https://cdn.jsdelivr.net/npm/[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: