What is Bootstrap?
Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
My quick opinion and thoughts on choosing this CSS framework. Bootstrap has been around since 2010 and has matured through revisions and submitted issues on Github. The major use of Bootstrap only helps crowd test through all the web browsers and sizes it will come across. I've built many sites on Bootstrap that look completely different from each other, in my experience the CSS framework should be used a foundation for your website and you must add in your creative details. Bootstrap, or any other framework, is probably the best choice if you are on a small team, or the only developer, at your current job. I'm biased because my preference is Bootstrap and have used it throughout my career, but only because it is so popular with great documentation and it has an active community. Most of the problems I Google have been already answered, this cannot be said about some lesser known frameworks like Semantic UI: I had the hardest time getting just a mobile menu working. Building out your own CSS seems like a tremendous work load if you are doing it for a company that doesn't have a dedicated developer just for CSS. Again, you have to stamp out all the years of issues Bootstrap has encountered and on all active browsers. I do want to hear another developer's perspective on their preferred choice of tackling a CSS framework, but please include evidence and purpose in your answers. Okay, now let's get back to work.
Adding Bootstrap is simple, but must be handled with care because of the error prone implications of ordering the styles and scripts on our global template. Once we get it right and the purpose of the ordering it will be easy to manage and handle. I do suggest skimming over the overview of the framework to get up to speed on its abilities.
Reviewing the guidelines on the Bootstrap we see that the CSS must be in between the <head> tags.
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Joe Pichardo</title>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
{{ content_for_header }}
</head>To add the optional Javascript, it must be placed before the closing body tag. The order is jQuery first, then Popper.js, then Bootstrap JS, for the dependencies to work correctly together. My purpose for adding it is because it handles navbars and dropdowns, critical for showing menus.
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap 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.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>Now we are set to use the framework. In our index.liquid file we can add bootstrap classes. Here are the contents of the file:
<div class="container">
<div class="row">
<div class="col-12">
<h1>Homepage template</h1>
</div>
</div>
</div>And the result:
We see a glimpse of the CSS, where the "Homepage template" is within the container of our new class and the other text is not. That's it we have added our helper css framework.
Bonus! I want to quickly add a fluid, flexible, and dynamic slider, Slick Slider! From the documentation it is recommended to add the theme CSS for the slider in the head tags and the javascript before the body tags. I'm adding the CSS before the Bootstrap CSS to prevent any overwriting styles and the Slick Slider JS after the Bootstrap because it depends on jQuery. I highly suggest adding any custom JS after all these dependencies to prevent errors of missing functions. You can verify there are no errors, by right clicking and inspecting the page, then going to the console tab of your developer tools. Notice: I am using the Google Chrome browser. Here's the final theme.liquid outcome, example slider included:
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Joe Pichardo</title>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
{{ content_for_header }}
</head>
<body>
<h1>Testing Bootlace theme</h1>
{{ content_for_layout }}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap 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.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- slick slider js -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
infinite: true,
dots: true,
});
});
</script>
</body>
</html>And the preview for our site:
In the next blog, we will add Themekit, an automatic deployment command line tool for Shopify themes.
Having trouble? Ask for help.