Bulma CSS Tutorial (Product Page Build) #1 - Intro & Setup

Key Takeaways

hey gang and welcome to your very first bulma css tutorial [Music] now just really quickly before we start the tutorial for those of you who want to support the channel and join the gang officially you can do by clicking that join button right here it's just 99 cents or pence per month and you get these cool little ninja loyalty badges next to your name in the comments down below when you leave a comment you can also join by clicking the button right beneath the video if you're watching one now which i'm guessing you are it does exactly the same thing all right so now that's at the way let's get on with the tutorial so then in this tutorial series we're going to build this product landing page using bulmet css and it's going to be fully responsive so it looks good on smaller screen sizes as well as large ones and it's going to also include a couple of different interactive elements like modules and also tabbed content so bulma css is a css framework much in the same vein as things like bootstrap and materialize in that it gives us a load of different utility and component classes and tools to style our websites with to create things like breadcrumbs cards drop downs menus etc but whereas frameworks like bootstrap also come bundled with javascript files for controlling things like modals tabs or mobile menus bulma doesn't do that it just focuses on the css and in that sense it has less of an opinion about how we implement the functionality of any ui components now i'm not one for forcing my opinion on you as to which framework or what type of framework is best personally i like using a bunch of them for different projects and i do like bulma because it's pretty simple and it lets me decide how to implement interactive components myself and it also takes a mobile first approach towards layout meaning content always generally looks good on smaller devices too so in this course we're going to be learning all the basics of bulma first fonts sizes colors and spacing all that kind of jazz and then after that we're going to dive into creating our product page using the bulma layout system which is based on flexbox and we're also going to use components like models tabs nav bars and cards and by the end of it you're going to have a pretty nice looking product page design and hopefully enough knowledge to go out and make your own web pages with bulma before you start however i would suggest that you already have a decent understanding of html and css and that's because we'll be writing html to create the web page and i would always recommend learning the basics of css before you learn any css framework so that the framework makes more sense to you and that you understand what's actually happening under the hood when we use one now i do have a full html and css crash course on this channel and you can check that out if you need to the link is going to be down below now i'd also recommend knowing at least the very basics of javascript and that's because we'll be using it to control some interactive elements like the opening and closing of modals again i've got a free modern javascript tutorial on this channel which you can check out too and again the link is going to be down below in the description all right then so first things first we want to get set up to use bulma in our project now i'm going to use vs code as my text editor of choice you don't have to but if you want it you can get it for free at code.visualstudio.com i'm also going to use a package for vs code which is going to spin up a local development server for us so we can preview our work in a browser and to install that go to the packages icon down here type in live server and search for that and it's this package right here you need to install so i'm going to show you how to use that in a second but first of all if we go to the files you can see i've already created this index.html file that's where we're going to do all of our code and inside here i'm going to type in doc and if you have vs code you can press tab and that's going to boilerplate a very simple html file for us i'm just going to change the title to ninja coffee right here and then down here i'll do a simple h1 and type in hello bulmer all right then so if i were to preview this in a browser now using that package that i've got installed live server i can just right click and go to open with live server and that's going to open up in a browser right here and now whenever i make a change over here like this and save it it's going to auto refresh in the browser so we can see that change okay so the next thing we need to do is grab the bumper framework and link it inside our index file so to do that go to the bulmer docs right here this link is going to be down below then go to overview and then start and we want to scroll down to this snippet right here it shows you how to set up a starter project and it's this link we need right here to the bulma framework so this is just a cdn link to the css file paste it in right there and press save now if i do that and then preview this again over here you're gonna see that h1 has changed styles so all of the default browser styles have been stripped out and we can see that that comes from bulmer if we inspect this elements you can see right here all of the h tags all have a font size of 100 and a font weight of 400 and that's coming from the bulmer css file so bulma strips out a lot of the default browser styles for elements like headings anchor tags paragraphs etc so that we don't have to wrestle with them when we style our web page and it applies some very simple base styles to them instead so all the font sizes are the same for different elements and they all use the same simple font family as well so i'm going to now add in an anchor tag and we can see that this as well is going to be different than a normal anchor tag so let me just type in hello and save that and we can see we don't have an underline under the anchor tag anymore it stripped out those styles and it's just applied some basic default styles instead so we're going to learn much more about all of this as we go on finally though i just wanted to mention the course files for this project they're all here on this github repo right here bulmer ui build and because i'm a super ninja i've created course files for every single lesson in this series so if you want to see the code for lesson five for example you go to the branch drop down and choose lesson five and you're gonna see all of the different files and the code in those files right here if you wanted to download a zip folder of this lesson you go to code click that and then download the zip folder or if you're proficient with git and github you can just clone the repo to your desktop so that my friends that is your introduction to bulmer i really hope you enjoyed this series if you do do not forget to share subscribe and like that really means a lot and we're going to see you in the very next tutorial where we're going to take a look at fonts and colors you