Using Front End Component Libraries for Svelte Development

[00:00 - 00:17] Welcome back friends. In this lesson we're going to work on our front end styling. Svelte is a front end framework that focuses on reactivity and user interaction , but it has no opinions about the look and feel of an application.

[00:18 - 00:37] So our current app is very plain. We haven't done anything to enhance the styling, the colors, the fonts, or the look and feel. There's a lot of really nice front end component libraries out there, bootstrap being the most popular.

[00:38 - 00:49] And for this course we're going to use BOMA. And BOMA contains various UI components like cards and modals. And also responsive layout grids.

[00:50 - 01:16] Responsive layout grids are designed to work with both mobile and desktop environments, where the HTML elements flow automatically when the window size is resized, or for example when going from a desktop to a tablet to a mobile phone. Here's a quick look at the BOMA website. There's a really nice site here at BOM A.IO and some great documentation.

[01:17 - 01:26] So check here if you need to reference this. And the easiest way to get started is to use a CDN link to the BOMA.css file.

[01:27 - 01:42] CDNs are content delivery networks, and they're designed to provide very good performance to static files. And also they optimize caching and reduce geographic latency depending on where you are in the world.

[01:43 - 01:51] So to get started with BOMA, we need to copy this link and add it to the index. html file.

[01:52 - 02:04] So I've copied that link and going over to VS code under front end public index .html. Up here in the head section we'll add the BOMA style sheet.

[02:05 - 02:16] And we're going to leave the bundle.css style sheet alone, because that's the one that is automatically built from Svelte. And we'll also leave the bundle.js file alone as well.

[02:17 - 02:35] So save that, and then let me start up my local dev environment. And so we can immediately see a little bit of a change.

[02:36 - 03:02] And this is because we've used header elements here, and the BOMA styles are automatically being applied now to those header elements. So one thing we can do to get started with BOMA is use a section and then a container.

[03:03 - 03:19] And both of these will apply a nice amount of spacing to our app and just kind of improve the look and feel a little bit. So what we want to do is copy this bit of markup right here, section, class, section, div, class, section.

[03:20 - 03:33] And we'll put this in app.spelt, so it will wrap our whole entire application. So going over to app.spelt, right now we just have main and then our router.

[03:34 - 03:54] So now we add these, and then make sure you close them with the closing tags. Now our whole app, which is represented here by the router, will always have a section and a container element around it.

[03:55 - 04:01] So let's take a look at that. And so now we've got some nice spacing at the top here and on the left.

[04:02 - 04:12] Okay. Moving right along. Another thing that BOMA has are breadcrumbs.

[04:13 - 04:21] Click here and see the documentation for breadcrumbs. So there's something, there's kind of a navigational element that you would use at the top of a page.

[04:22 - 04:32] And it helps the user return back to a previous spot and also understand where they are in the higher arc you have your application. So we're going to add that to our pages now.

[04:33 - 04:43] So here's, for example, the lunch menu admin component. So we'll have a div and then a nav with class breadcrumb.

[04:44 - 04:51] And then an unordered list with that makes up the breadcrumbs. So it'll have several different items in it.

[04:52 - 05:02] Let's copy this over. Copy this piece and we can kind of see how to add it in to our lunch menu admin component.

[05:03 - 05:08] So right now we just have the div and the simple header. So let's see here.

[05:09 - 05:20] So this is the whole thing. And so at the top, yeah, we're going to replace the whole header with our bread crumbs.

[05:21 - 05:33] We'll get rid of that section entirely and put in the breadcrumbs there. And now let's have a look at that page.

[05:34 - 05:44] So now you can see that we've translated this into breadcrumbs instead of the simple header. And it's starting to look a little bit better.

[05:45 - 05:52] And the breadcrumbs are actually functional. So a user can click on the home button and return back home.

[05:53 - 06:04] And that's basically it for this lesson. So we added BOMA and BOMA is going to provide us a nice style foundation and we 'll use some other components from it later.

[06:05 - 06:15] And it'll make the app have a little bit better of a look and feel as well. In the next lesson, we're going to continue with BOMA and create a landing page .