Flowbite Crash Course in 20 mins | Introduction to UI components using Tailwind CSS

welcome to this crash course on flowbite if you haven't heard of it before it is an open source library of interactive ui components built on top of the utility classes of tailwind css we'll be exploring exactly how you can get started using flow by to save yourself time and effort to design a better website for a brand new project or even an existing project that you might be using with tailwind css on top of that we'll be exploring some of the features that flowbite provides such as their block system or even their figma design files now before we get started let's take a quick look at what flow bite currently is and some of the benefits of utilizing it when you land on the page you'll learn that flow bite is something that you can use with pretty much any type of framework whether it's react of you or schveldt or even if you're not even using a framework because it is built on top of tailwind css and it essentially is all of the different types of components that you're used to utilizing in a website design pre-made and designed in such a way as you can use them for your project let's have a look at this accordion example to see exactly what i mean when you land here you'll head over to the documentation which tells you a little bit more about the accordion as well as gives you a preview of it if you want to have a look at other components they're all on the left here and we'll get into those shortly but let's have a look at this accordion example to show what flow by does it essentially is the pre-made design for this component and you can see all the code that goes along with it just here below this is created in such a way as to all the classes from tailwind css being pre-made for you ready to be copied and utilized in your project this is a functional accordion and all you really need to do is update the content that you have inside of there you have the option to view in dark mode or in light mode you have the option here to have a look how the responsive design is on say for example tablet as well as mobile much like other libraries and packages the content that you have here can still be edited by you and customized however you want of course there are the functionalities pre-baked into this code such as having options like say always open available for you to utilize by simply passing in the data attribute here data-accordion-open this allows you to keep the accordion open when you open up different tabs or for example if you wanted to customize the active color with this blue outline you simply can pass in the data active classes with the options of what you're looking for for the colors now all of these are really available here for you to view in the documentation there's even javascript behaviors that you can apply depending on what you're after such as checking the options of always open or adding in methods and it's up to you to read the documentation and utilize it in which way you want but let's take another look at another example of these components by having a look at the buttons one of my favorite examples whenever looking at a component library buttons they're probably one of the most common html elements buttons are used from everything from forms to links to logins and lots more and they can come in a varying amount of sizes and colors and gradients but realistically the default theme for a button looks terrible on most browsers so here flow byte has taken the html element of a button and designed lots of alternative options here with the perfect amount of spacing and sizing and weight and the colors are already chosen for you as well based on tailwind css if we have a look at the syntax here it's another example of how flow byte works where we're using the html button element here and we're populating it with all the css classes from tailwinds to make it look good now if you have a look there are well quite a few classes here happening and realistically you don't have to worry too much about this you only really need to change the content inside what these classes are doing are everything from introducing the background color to the font color to the little border radius that you see around as well as the hover effect and lots more normally if you're building a website and you are using something like tailwind css by itself you would have to manually fill this out yourself and this is time consuming and you also have to have a little bit of an eye for design what the benefit here is is that all of this is done for you now there are other types of button designs here such as these rounded corners with buttons or even these ones with gradients across there is a lots and lots of options here on the right hand side and they're ready to go for you to use some examples are here this one with gradient with dual tones or for example gradient with outlines which actually looks kind of trendy and many many more the goal here is to know that you actually have all the options available for you to use depending on the situation that you need so you don't have to manually design them yourself moving on there is a lot more to flowbite than just all these different types of components there is the styling that goes along with it such as having all the options of colors pre-selected that often come from tailwind css as well as options like dark mode and light mode baked straight in and we even have options for better topography such as setting out all your headings as well as the sizings for them so that if you need to create a section here for maybe a hero or something else then you basically have all of this ready to go these are just some of the benefits but realistically you'll see a lot more when we begin using it so let's start here at the very top at the very beginning as an introduction to how to set up flow byte for your project whether it's new or existing it's actually quite simple and there is a quick start available for any type of project whether using something in react or schvelt or even angular but what we're going to be doing is not following the traditional method where we install the package by npm and import it into our project which actually requires a few more steps in case you're using something like a react we're gonna go nice and simple by just simply including the cdn package of the css file as well as the js file this will allow us to import it into any type of project immediately it'll be nice and simple on top of that if for example you do have a react project there is a react startup guide that you can follow with the packages that you need in order to get it up and running as well as the tailwind.config.js file which you can set up nice and simple and how to import it into your project we might cover this in future videos but for the time being let's have a look at our introduction here which will simply be to copy over these two files we'll begin by opening up vs code here i'm going to create a brand new file and this will be called index.html it'll be empty for the time being i'm also going to run a live server this is a plugin inside of vs code which you can download but what it's going to do is populate a brand new website here where anything i type into this section here will be updated and shown in the live browser but it's not ready yet to go because we need to add our html markup and so now let me close everything off and zoom in a little bit so that you guys can see what i'm doing i'm going to place an exclamation mark here and emmett will fill out the rest of this content here i'm going to have a nice simple html document with no title yet i'll call this the flow byte crash course here i'm gonna place the actual files that we have from our cdn the very first one will be the stylesheet which i don't think i copied the entire syntax of so let me just jump back in this goes inside the head of our document so i'm going to place it just below the title over here the next file here is the javascript file and this one needs to go at the end of our body element so i'm going to place it here at the very bottom adding in a few line breaks last but not least we need a copy of tailwind css so just head over to the tailwind website we're going to head over to the setup we're going to select a play with the cdn and we're going to copy the syntax to pull in the cdn into the project in this case their cdn currently exists as a script that is placed inside of the head tag and it downloads the cdn through this script it also has the benefit of allowing you to pull in different types of content here depending on whether you just want to pull in forms or topography but if we select the main one over here we're going to be pulling in everything now let's give this a test by actually jumping back into flow byte heading over to the button section and then selecting to copy the syntax for the buttons that we have just over here i'm going to jump back into vs code here and i'm going to paste all of this content which is quite a little bit let's zoom out a little bit so that you guys can see that and drag this window over here to the left hand side what i'm going to do is place this window here on the right hand side so that you can actually see the content that appears when we update the code and there we go we've got all those buttons that we previously had here in our example now existing inside of our demo here of our web page pretty cool so we've got this up and running i mentioned previously that these lines of codes are pre-baked and made ready for you to use to convert into actual content so all we need to do now is turn this into say a save button and the content here is updated if for example we wanted a different color we could jump in here and rename this blue to say maybe a purple and we can see that the button will automatically update this is one of the benefits to how quickly and easily it is to utilize flow by to work inside of an existing project as well as customize it to how you want if for example we were to take out some of these classes like the white text we would lose out on some of the styling this would be the same as for the padding and other elements which basically ruined the design it takes time and care to create these designs and this is why this is so useful to have now let's remove all of these buttons and have a look at a more interesting and common thing that we would normally start off on a web page which is a navbar if you ever feel lost or you're looking for a component or a design always jump onto the documentation which is really well presented here we've got our navbar which i'll select and over here we're going to have a few different examples of nav buyers that are used in different types of states as well depending on one what type of mobile responsiveness you're after personally i like usually the most basic default one because it's just the one where you have an icon on the left with the menu on the right hand side but if you're interested there are drop down menus there are even multi-level drop down menus there are sticky navigations and lots more lots more but let's have a look at the basic navbar here and we're going to copy over the syntax which is ready for us to use and place this into the project just over here i'm going to give it a little bit of mock-up here calling that the nav bar in comments and we're going to have a look at the project here which has now already created this navbar i'm zoomed in a little bit so you can see that we've already collapsed that navbar but if we select the button a drop down appears with all the navbar options let's zoom out of this project a little bit and you can see that as soon as we do the nav bar with its menu items have been populated if we wanted to change for example the logo then we simply just have to go to this section over here where this logo exists and we can swap out this svg that we have with our own logo as a quick example i've actually placed in a new svg just over here called blue logo let's see if we can update this logo right now to incorporate that instead of the exact existing one that we have online here i'm going to pass in the path blue logo hit save and we can see that we immediately have updated that we still have the span here with the text we can remove that and we've got our new logo placed in here the other thing i want you guys to be aware of is that the dark mode version of this navbar is currently active if for example i was to jump into my windows settings and set myself to light mode for my entire os this actually gets reflected in terms of the styling of flow bite and its components which is really cool the reason this happens is because we actually have all of these baked in in terms of the dark mode version as well as the light mode version and this is what i mean in terms of having a design for not only just components but their styling in terms of light mode and dark mode also available inside of flow flowbite if for example you wanted to have more fine grained control over the dark mode of flow bite you actually have those options available to be configured inside of the tailwind.config.js alternatively you can create your own scripts to swap from dark mode to light mode and attach them to buttons inside of your website and this is also quite useful we can try this out right now let's grab this script and place it into the head of our document here for our html file i'm just going to place it here below the next thing we'll want to do is a grab this button design here and place this into the code for our website so i'm just going to place it here into the body tag finally we're going to add this here which will allow us to do a toggle this is just plain javascript code so we should be able to place this anywhere what i'm going to do is just scroll over here to the bottom of the website open up a new script tag and paste this in below let's hit save on that and give that a test we now have this little dark icon here at the very top of the website when we select it we now have a dark version of the website and when we select it again we're back to the lite version we've now successfully implemented dark mode into the website and it only took us 45 seconds now let's take a look at how else we can customize the current navbar that we have here the other thing that we can do is have a look at the classes already available to us here inside of the tailwind css utility classes and we can customize them depending on what we want such as instead of having a background of white we could have a gray background with a value here weight of 100 allowing it to have a very slight opacity of a gray color so to speak or we could make that even stronger by pushing it up to 500 or 400 depending on what looks good for our website but since the white color works best in this example i'm going to leave it as white this is just some of the quick ways that you can customize the website based on the utility classes that we already have but in most cases the components are already designed in such a manner that they already look good now let me show you how we could quickly build out a dashboard maybe an admin dashboard based on what we already have we could for example throw in a breadcrumb here's a pretty simple one which i can place right below our section here of the navbar let me place it right here below the code and let's have a look at what that might look like in terms of our design which is just over here we can see that if we were to expand our design we don't actually have a container for it yet so this is where we could add in a little bit of our own code just to make sure that we have about the same type of container we could even reuse the container that we have currently inside of our nav bar to basically encapsulate the additional breadcrumb that we have so let me actually copy this out paste this div in here below refresh it and now you'll see that all the content here is aligning just the same as our logo here next up let's see if we can add a little bit of a section here of maybe a hero or something else there are drop downs and often after a breadcrumb you might have a few options for a person to select inside of an admin menu so let me actually copy this across and we're going to paste this in below this section but i'm going to keep it inside of the container let's hit save on that and let's give it a quick test we can see that the drop down button here is on the right hand side and it's working quite well now let's move on to see if we can continue to fill this out we're going to head over to topography and to headings now here i want to have a bit more of a hero section for the website we've got an example of one here which is nice and centered and we've got the code that we can copy paste across i'm gonna jump into the code and we're gonna place this at the very bottom just over here and hit save we can see that it currently exists but unfortunately it's not centered so let's actually fix that up right now we'll wrap this in its own div and this is where you can still add in your own code and pass something in like text center this should center the text and we can see that now it looks and feels much better in terms of its styling however we're still missing a little bit of padding from the top here and this is where we can do pt maybe something like 12 to add some padding to the top so what the goal here is is that some of these components are made ready for you to utilize but you can still do some of your own styling if you want to do that and the results look quite good one thing you'll notice is that when we implement dark mode now to this website it's not looking particularly good because of the fact that the background here for the entire page doesn't change we can fix that up by going back into the body here and adding a class here we'll start off with bg white since that's what we're using but for the dark version we could use something like bg gray say 800. let's hit save on that and now select the dark mode and we can see that all the elements including the background look a lot better with the implementation of this change now that we have a good idea of what flow by does in terms of its components and benefits let's take this one step further by having a look at blocks blocks are basically utilizing one or more components to create a section such as a hero section or a feature section it is essentially the exact same benefits we were getting before now take him to that next level so for example here if we wanted to have a look at this features section we basically have lots and lots of different types of examples of features sections that have been built out using the components we've been just learning about now we can pick one that we like and we basically can do the exact same thing we did previously we can have a look at what they look like at different viewports such as on tablet or even on mobile phone and they all work perfectly we can change their color from dark mode to light mode and even their colors as well as their fonts and once we've done all of this we can simply jump into the code and copy them and paste them straight into our project let's take this section here that we have for features and try and paste this into our own code to see what it looks like instead of the content that i previously had which was this section here i'm going to replace it with this feature section and have a look at what that looks like on our website and we can see here it is it's been designed and we've got all the content available for us to immediately use but on top of that if we were to set it to light mode as well as dark mode we can see most of that is working let's go back a page to have a look at some of the types of blocks that are available obviously we have our hero feature and header but we also have things like ctas and pricing tables and content sections i don't have a footer yet for my website so what i'm thinking here is to select the footer example here of a block and let's actually fill this out so that we have a website that's more or less done the footer has the icon as well as the topography and links as well as the copyright basically everything we would normally use for a copyright section and man this makes it so much easier i'm just going to jump back into the code i should be able to simply paste this in at the very bottom we can preview the website and i believe the website should be just over here you can scroll down and a mobile version works really well we can change to a dark version that looks good we can expand out the entire desktop and we can see that our footer is designed and complete which is awesome i think this pretty much covers blocks and it doesn't need much more for an explanation so let's move on to the other great feature that is a provider through flowbite which is through figma and figma is a design software that allows you to build websites but there is an integration of flow byte together with figma where you can start playing around with all the components that are normally available inside of flow byte that are easily copy and pasted and these components are actually available and hand crafted as designs inside of figma here is an example of what that looks like and we can simply duplicate and reuse a lot of these components which are available it comes with all the styling such as your fonts as well as your colors and then on top of that you have all your pre-made pages and components designed and ready to go so if for example you want to have a look at creating a section or integrating it into a website all of these things are ready and they're exactly the same as the coded html elements so this basically means that if you're building a website design using the flow by design here from vigma you'll be able to take this into the step of developing it and it'll look exactly the same all the colors here are available for you to be able to select all the topography that you might ever want to consider or look at is here if you want to have a look at your spacing all the grid structures are here if you want to be more specific such as have a look at button designs they're all here too if for example you want to have a look at the application ui similar to what is available if you purchase the pro version they're all available here too we'll get into that shortly but realistically there is a lot of content here ready for you to be able to use and this is the whole purpose of flow byte essentially making the flow from design to code one seamless practice and so one of the biggest benefits to flowbite is that it's entirely free to get started and use you even have access to blocks the way that the pricing and pro version works is by simply unlocking more and more content for you to be able to use this means that if for example you wanted to have more designs inside of figma more application ui sections pre-made or marketing ui sections pre-made this is basically what gets unlocked with the pro version essentially saving you time which does save you money the pricing for it is quite simple it's free to get started but for a developer edition it's 249 dollars and a designer edition is 149 if you want to find out more about that you can head over to flowbite.com for slash pro where you get to have a look at exactly what is included but i definitely recommend you try it out to get a feel of just how much time it will save you if you start using it i hope you guys enjoyed this small crash course into flowbite and it's given you an idea of exactly what you can start doing with it in the future we'll be covering videos and topics on how to build all sorts of stuff from building forms to dashboards to even entire websites a lot of the other links that we've covered today will also be in the description below but otherwise make sure you guys hit like and subscribe and i'll see you in the next one thank you

Channel: Flowbite

Views: 161,683

Keywords: flowbite, tailwind, tailwindcss, figma, ui, ux, webdev, developer, development, components, design system, design, ui kit, html, css, javascript, react, nextjs, reactjs, vue, vue3, vuejs, svelte, laravel, nuxt, django, flask

Id: KaLxCiilHns

Length: 22min 58sec (1378 seconds)

Published: Wed Aug 24 2022