-From one newbie to another
If you've asked anyone what Bootstrap (or CSS Tailwind, or any other variation) actually is, they probably replied 'a framework'. Which is perfectly correct, but as a complete newbie, I struggled to get my head around what it actually is...
Guess who finally gets what bootstrap is!!!!!09:54 AM - 05 Aug 2020
I posted on Twitter yesterday that Bootstrap had finally clicked with me, after 3 days of using it but not knowing what it is, and I had even created a landing page for my project using it. I suspected I couldn't be the only newbie having the issue of struggling to understand, and I was soon replying to DM messages asking me to explain this epiphany that I'd had!
So I'm going to try and have a go at explaining how the click happened for me, and what we actually use these frameworks for (it probably isn't as difficult as you're trying to imagine!)
Bootstrap is, as you've likely heard before, a framework. There are many others too, and front end developers will sometimes create their own.
The below likely applies to any framework, but I'm using Bootstrap as an example.
A framework is, essentially, a little package of pre-made code that you can link in your code. Say you make a html file for a basic webpage and then you want to add CSS to make it visually pleasing and JavaScript to make it functional. You will probably require buttons, sliders, navigation bars, you might want alert pop ups - the list could be endless.
That's a lot of code! This is where frameworks come in...
If you're 'using Bootstrap', this means that you've pasted in the link at the top of your html page and you now use certain code to 'link' to a 'class' of property (a thing, like a navbar etc) in these pre-made sheets (it's primarily a CSS framework with JavaScript too, so you need a few links).
CSS:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
JS :
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
As you can see, the CSS one has a link to 'stylesheet', which you may recognise if you've done CSS before.
The JavaScript one is a little longer and more complicated (as you'd expect), but has some recognisable terms like 'script' and 'jquery' in there.
Pre-made functional buttons and sliders and nav bars?! A dream!!
You 'know Bootstrap' when you can use the code required to access the material.
These can be found on the bootstrap website, and if you've got this far and are still unsure or still a bit confused - I implore you to look at the official Bootstrap site
In the 'components' section, you will find everything that Bootstrap does (it does A LOT!!!), and if you go back to the 'getting started' section (panel on the left), you will find the starter code I put in earlier.
Bootstrap can do carousels, dropdowns, forms, badges, you name it!
Responsive!!!
One thing that I am very glad that Bootstrap does BY DEFAULT is responsiveness. It is automatically mobile friendly!!
If you've ever done any CSS or html, you may recognise something like this:
@media screen(max-width: 320px){code} @media (min-width: 320px)
(max-width: 480px) {code} @media (min-width: 480px) (max-width: 640px) {code}
This is all the code you need to think really hard about when you are making a page responsive. This means you can view it on a desktop, and then view it on your mobile and it doesn't look like a mess.
The very first page I created (the florist page if you remember that) wasn't responsive, and I'm sorry if you tried to view that on mobile!
Well worry no more, Bootstrap has you covered on responsiveness! It is already built in, so if you use Bootstrap then you're good to go! Of course you should check that what you have made is able to be seen on mobile and other size screens.
Accessibility
Bootstrap has default colours that it uses for its buttons etc, and these actually have insufficient colour contrast as recommended by WCAG when used on a light background, so you must look into this as you're designing. Bootstrap also a particular class that you can use for content which should be visually hidden but remain readable by screen readers or other assistive technologies. Bootstrap Accessibility <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
Top comments (0)