Shoelace - An Awesome Web Component Library

what's up everybody gary simon here so today we're going to be checking out actually for the very first time on this channel web components i've never talked about or showed how to use web components and that's going to be the purpose of this tutorial specifically and we're checking out something called shoelace all right so shoelace.style which is the web url for this site uh is what they call a forward thinking library of web components all right so basically what is a a web component you may have heard about it before but it's actually really simple it's basically i ui components of some sort that you can easily integrate into your project that has both uh ability to customize these things i in terms of the appearance usually and it includes i basically an entire encapsulated little element that you can include in your project uh it has the functionality that you can tie into through events uh and all this other stuff and so i'll just show you uh how to use their library of components right here so you can see there's like alerts there's the ability to animate these things um avatars just so much i'm not going to go through everyone just a few of them actually and i'll show you how you can you know really customize the look and feel of all of them uh through basically a macro perspective but also at the individual perspective as well in terms of customizing the individual components itself as you can see there's something called css parts there's custom css custom properties that you can tie into many of them there's slots events properties i'm going to show you how to essentially work with all of that and then in the future i'm going to show you how to make your own web components as well and probably create a crash course but that's for a different topic for now just get your feet wet with what web components are and integrating with this awesome library called shoelace so let's get started before we begin this video is sponsored by lenode now as a fronted developer or a designer you know that you need a personal portfolio and if you use a website builder like wix or squarespace they lack total customization and they lock you into using their platform but to be a pro you need to use the tools that the pros actually use so level up start building your own projects and your own portfolio on an enterprise level content management system like wordpress there's drupal now real web development sometimes requires knowledge of spinning up servers managing domain names and setting up an occasional staging environment and there's no better or simpler way to learn the ins and outs of hosting your website than with lenode cloud hosting the node cloud hosting makes it as easy as possible for you to deploy a wordpress or drupal website in seconds with the free lenode one-click app marketplace so click on the very top link here in the youtube description to get your free lenode account along with twenty dollars of free hosting and all the tools that you need to build enterprise class websites all right so we're going to get started here naturally looking at the documentation and you know like i said the whole point of this video is is more to help you guys understand how to use the documentation which is quite easy more so than just doing some type of railroad project so to get started the quickest way is going to be to just use the cdn right here so that means we're going to be importing this css file at the top within the head tags of our html document and then we're going to also take this after pasting that and paste this in a different location in the html document and that's all that's required to get it up and running now of course you may have different options uh or different maybe a more robust setup i where you're using uh you'd use npm the node package manager i'm not going to show you that process but again you know that's that's up to you in terms of what your requirements are so we're going to go back to quickstart here and i copied this top line now i'm going to use visual studio code with this i already have a new folder open called shu and there's an index.html which has nothing in it so exclamation point will give us the abbreviation where we can hit enter and that gives us just our basic html boilerplate and we're going to paste that css file right here all right after that we're going to go back and we're going to choose or copy rather this part and we're going to put that right here just beneath the closing body tag that's all we need to do to get it up and running so now as the documentation suggests we can use one of their components sl button save it and let's real quickly create our css folder so we're going to go css and we'll call main.css and then also we'll include that css file even though there's nothing in it yet we'll just get that out of the way there we go and also we're going to open this with live server that gives us i you know the the automatic reloading whenever we save something and if you want to use that come down here to extensions make sure you have the live server extension installed so let's go ahead right click open with live server and there we go we have our click me right here you as you can see it's custom styled it's not like a default button or whatever so we know that shoelace is now working and it's integrated all right so having said that we see that i the documentation is set up into a different areas we have to get started page right here where you can look at usage and customizing and all that um very helpful definitely read that and then all of their components that you can use and then also something called design tokens down here so the button let's just take a look at button for instance the way this is set up they give you a bunch of different options and this is a it's a really well set up documentation i like it a lot it'll show you an example and here's the source and there you go extremely simple if we come on over here we have different types of buttons that will show you that so along with all these other components it's going to show you just a lot of different iterations in terms of what they can do and all along with the source all right now mainly the source that i've seen for pretty much all of these is just showing you how to apply different properties so the properties are right here so there's a property section for each one of these for the most part and it tells you you know the properties are essentially uh the html attributes that you can apply to the component the custom html component so for instance uh sorry my throat is like getting all jacked up it's dry um so if we want to say to for instance we want to set um to true disable the button disabled all right well first you can look up here to see if they show you that which i'm sure they do let's control f disabled right here yes they do so if you want this you can show the source but also you can just put in disabled right here in the attribute so for instance if we put in disabled we're gonna see now that our button will be disabled all right so that's what the the uh the properties here are for now of course some of them i will show you that there's a type of boolean some will accept a string so like href equals whatever um loading uh or name you can set an optional name for this but there are other things outside of properties for some of these uh components we have events and i'll show you how to tie into an event on one of these uh different components there's also also methods like for instance you can remove the focus or set the focus for this particular component we have slots here and what something called css parts which we'll get to as well so i'm going to show you i just another example of one of these elements here we'll do the the switch element all right so if we come down here i over here rather we're going to put in sl switch and inside of here we're just going to say switch all right so we have our switch very exciting and i'm going to show you a little bit about css customization for this so one thing here outside of switch there are basically you can change any of the you can change the main color scheme that's associated with all these components all right and the way you do that we'll come out here we're going to say root and we're going to put in sl color primary hue and these are basically numerical values and then sl oops not sol sorry color primary saturation we can say like 90 percent and what happens is it will change for all these so notice how it has this color right here it's like an orange if we change this to like 50 40 or something we'll see it will go into a different hue yep into like more of like a yellowish orange so that's a really handy way to be able to on the fly you know change up the css for that and by the way we can go to customizing and this will show you that section that i just showed you there for changing um the hue and the saturation all right and then also we have what are called component parts all right so most of these uh components have parts associated with them so if we go to our switch where's our switch right there all right so we can see we have our properties events method slots css parts all right so this is really cool the way this works basically each component has uh these parts which allow you to use css properties to customize them specifically at the component level so we have a base we have a control we have a label and we have a thumb all right the the switch position indicator the way you use this is we're going to you could give this a class if you wanted to or we'll just because we only have one we're just going to use the html elements name as the selector itself and what we can do is we put in the part function here and we put in the name of the part so there is four different parts for this one this one will say base and we can add any property now to this so for instance if we want to give it like a custom background color around uh the the switch itself we can do background and we'll just say gray for now and you'll see that this now will turn sorry gray so it's just basically the the base part i it just encapsulates the whole area of the switch container itself um so to make that look a little bit better i'm going to go ahead and off screen i will paste in uh you know something that's more consistent with a real world use case so i'll give it these properties instead and we'll see how much better it looks right here very very cool stuff now just to show you further we can do like the thumb i i didn't mess with this but we'll see what happens when we take this and we change the part from base to thumb and i don't know we'll just do background green it's gonna look but ugly but that's okay there you go that's the actual thumb right here so we can add any css property to our heart's desire with this which really allows us to gain um you know a really high level control over these external components all right so next up let's see how we can tie into like events for instance in these components um so now let's go ahead and use uh a rating so the rating right here if i find it there we go it's right here so it's like your typical five star rating and it actually works you click it and it has logic applied to it down here because we have events so we can listen to these events that are designated for each of these html components so or these web components rather so this one has an event called sl change and this is emitted when the ratings value changes all right so how do we actually tie into that because obviously if we're using a web component like this that's interactive we want a way to capture the interactivity or any data that's coming from it for instance in this case if somebody clicks on four stars how would he know that they clicked on four stars all right so what we'll do let's create this real quick so sl switch all right so well sl rating rather look at the wrong area come on gary so unprofessional all right so sl rating so just by default you can see when we specify this we're going to have right here the default component already working at least you know on the front end level but we're not actually communicating anything with it like if we go to our dev inspector ctrl shift i we'll see nothing happens that's that's up to us to tie into that event and listen to that event when it happens all right so let's do that we'll go ahead and we'll put a script tag here and the first thing we need to need to do is to get access to this sl rating right here so what we're going to do is define a const here sl rating equals document.query selector and the query selector is the queries sl rating right here and then sl rating we do an add event listener now of course this would be a different approach if you're using react or view or anything like that but here's the vanilla javascript way we're going to do sl change and then we basically can console log e now that's not going to give us the actual rating but i wanted to show you this specifically so if we click this now we see this comes out over here and it happens every time so i'm going to make this big just so everybody can read it so it passes along a bunch of information that we could potentially tie into all these different properties here so what we want is the target no the source element rather and we come all the way down here and we see something called value three so what we can do is we can put e source element dot value now i shouldn't have minimized that we could see if we click this it's four three five two etc all right so what's really cool also about the ratings uh is that we can actually give them precision so if we want fine precision like three and a half stars again we just use the attributes here so we could put position precision as 0.5 and that should also reflect itself in the value that's being emitted down here so precision 0.5 we'll check out the result so you can see they're half halfway 3.5 four five four point five awesome awesome stuff and so basically i will show one more example here and this time i'm just going to copy from this source just to show that you know these i these components are you can embed components within components all right so for instance if we copy all this right here and then we paste this example oops let me leave that stuff there get rid of that we can see that we have an sl card here and it ends right here and then we also have an sl button so that's a component within a component and there's also a rating here as well and then also notice how it says slot footer all right so think of this as kind of like just like template markers um that are designated in each of the components so you can see how this works it works just fine and so with card we can see there are i think four different slots we have default which is the card's body we have footer header and image so that's how the slots essentially work it's pretty straightforward one thing we didn't really cover yet which i'll do finally is the css custom properties so of course we have parts down here but we also have css custom properties um that allow you to adjust the uh different elements of you know the the uh the component essentially sorry i'm being slow um so border color color how would you use this to change the border color so this is going to change the cards border color including borders that occur inside the card as well so um we'll take the css custom property called border color and what we can do is go to our main css so we know this is called sl card we can just restaurant side sl card itself or we can give it a class and do it that way and border color we'll just say green and now we'll see it's going to look really ugly by the way i just wanted to demonstrate that it will work and there we have our very ugly green border and so that way you can use custom properties of course to modify the different areas uh the border radius for instance the card edges let's let's do that just for the font of it just because i like messing around with this stuff border radius um 2m units i don't know let's see what happens all right there you go and now it's it's rounded and works very very well all right so hopefully you enjoyed that you'll learn something new let me know if you enjoyed it and let me also know if you want to see more web component content on my channel as always subscribe i'll see you soon goodbye

Channel: DesignCourse

Views: 28,486

Keywords: SHOELACE, shoelace.js, shoelace.style, shoelace web components, web components, web component tutorial, web components tutorial, web component framework, gary simon, designcourse

Id: TIdn8wXqwQE

Length: 19min 47sec (1187 seconds)

Published: Sat Aug 15 2020