Hey! Hello there!
The goal of this blog is to tell you how I 'upgraded' my practice project from my first blog from this...
To this!
Did you see that? Below I would be sharing how I was able to use a little Bootstrap styling on those pages and show you what other sources I found interesting if you're looking into adding a little pizzazz into your project's HTML framework.
First, what is Bootstrap?
Bootstrap is an open-source toolkit for your styling needs. There is a lot of styling framework to choose from but unfortunately, not all come for free.
There are a lot more open-source websites to get style formats from too! I have browsed and experiment on a couple like the ones below:
--> Foundation by Zurb - they have a good basic HTML layout/framework you can download and play around with.
--> Bulma -free and open-source for CSS framework. Installed through npm.
--> GroundworkCSS - has a good amount of other sources within the website to try! Even animations!
--> Animate.css - easy installation instruction! Just needs to be installed using npm or yarn, or add the stylesheet link on your HTML head.
But since I got to apply styling with Bootstrap first, I'll show you how I utilize it in code first.
BOOTSTRAP
Documentation:
Click the “Documentation” link above the page and copy the stylesheet link on the CSS section. Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
Disclaimer: Doing it this way won't make you have access to the full scope of Bootstrap. Some elements like dropdowns or carousel will require popper.js/util.js.
Application:
Once you copied the stylesheet link to your HTML file, you are now ready to start and play around with Bootstrap!
Let’s try an easy one to apply… maybe a navbar?
From the documentation page, go to Components, then a list of elements would dropdown. Let's click Navbar.
On that page, it should show you a detailed description of how it works. When you scroll down, it has a lists of options to choose from for just navbars, let’s try and choose the first one which has this HTML layout;
Copy the HTML code snippet and paste that inside your <body> tags, change the necessary values, and viola! A working navbar!
Up next is that big display card with a big text on it. It's a thing called jumbotron. Identical pattern as to how we got the navbar styled, we copy the HTML of want we want it to look like and replace the values! Cat Ipsum link here.
See that set of colorful buttons on our newly built jumbotron? Alright next up, are buttons!
So, same procedure, from components, click Buttons. There would also be a list to choose from on what styling you want. Well, I'm gonna try them all for demonstration purposes! The HTML syntax on making a button should be familiar, the only difference would be that it needs to be a specific class type.
Add all the elements you need, in my case, I added a form at the bottom of the page, some badges, and I changed the photos plus styled them. The next thing we can tackle are those pretty funky animations!
That's where Animate.css comes in handy!
They really mean it when they say "Just-add-water CSS animations"!
Installation & Usage:
There are 3 easy ways to install animate, and that's through npm, yarn, or stylesheet.
We're choosing the stylesheet route for demonstration.
You know the drill, copy and paste it inside your <head> tag!
Now since the elements we want to animate have their individual class types from Bootstrap, we would need to tack animate's class in the current class type of our elements. Our HTML syntax would look like this;
Then now you can do the same to the elements you want animated. The only thing you would need to change is the last part of the class which is the animation name.
And there you have it!
Another good source that I mentioned was Bulma, GroundworkCSS, and Foundation By Zurb. I tried to make another page using Foundation and here's what the result is;
I kept my CSS styling about the same and just used the HTML formatting required by Foundation. Here's a good snippet of the Bootstrap and Foundation attribute differences on HTML.
Pretty similar isn't it? I haven't done any research on performance but if you're just really looking into other alternatives to style your projects, maybe look into these!
I hope this helped you get your engines going in styling!
Links:
~ Alternatives for Bootstrap
~ Bootstrap cheat sheet - all Bootstrap class in one page.
~ GroundworkCSS Github repo - for readme on how to get started.
~ Freepik - my source for the cute photos!
~ Cat Ipsum
Top comments (0)