I am a junior web developer recently learned Bootstrap 4 and try to explore the possibility of the framework in a real world frontend project.
Before Start …
To tell the possibility, I decided to do a real-world project with Bootstrap 4 to get the experiences.
I choose to clone the website of an Online Coding School (Microverse.org) I am attending to for this project, because:
- It is a Single Page Application which is common for today’s job market.
- It has about 7 ~ 8 sections to introduce its features and services which make it complicated enough compared to other real-world projects.
- It uses #Bootstrap4 and custom CSS for its fronted decoration, which is exactly what I am looking for.
- I didn’t build the website from scratch, but I tried not to get any help from the school or any other people to ensure that is how I will work in the real world project.
I finished this project in about a month, but I was doing a few other projects and studying during the period, so the total hours I spent on this project are about 30 ~ 40 hours.
The final project is not completely identical to the original one (and I am not intend to), you can see it from this link.
Below are how I have accomplished this project and what conclusion I came out of it.
Let’s start => First Part — Project Setup
At first, I go to GetBootstrap.com to download the latest version of Bootstrap Source Files. (It is V.4.2.1), unzip it, and I saw the following files inside the folder. (There are many sub-folders and files I have omitted).
bootstrap-4.2.1 tree -L 2
.
├── CNAME
├── CODE_OF_CONDUCT.md
├── ...
├── build
│ ├── banner.js
│ ├── ...
│ └── vnu-jar.js
├── composer.json
├── dist
│ ├── css
│ └── js
├── js
│ ├── dist
│ ├── src
│ └── tests
├── nuget
├── package-lock.json
├── package.js
├── package.json
├── scss
│ ├── _alert.scss
│ ├── _badge.scss
│ ├── _breadcrumb.scss
│ ├── _button-group.scss
│ ├── ...
└── site
├── _data
├── ...
└── sw.js
17 directories, 67 files
For my purpose, I only focus on one major folder — ./scss, because I will compile my own version of CSS through Sass. I copied the entire ./scss folder to my project folder, below are my project folder structure.
➜ clone-microverse git:(development) tree
.
├── [1.0K] LICENSE
├── [ 736] README.md
├── [ 224] assets
│ ├── [ 128] bootstrap
│ │ └── [1.4K] scss
│ │ ├── [1.1K] _alert.scss
│ │ ├── [1.0K] _badge.scss
│ │ ├── [1.2K] ...
│ │ ├── [ 920] bootstrap.scss
│ │ ├── [1.0K] mixins
│ │ └── [ 576] utilities
│ ├── [ 128] css
│ │ ├── [438K] custom.css
│ │ └── [452K] custom.map
│ ├── [2.0K] images
│ │ ├── [9.8K] 1-r-kn-gdqsl-5-lie-3-l-r-7-j-n-0-a-zq-2-x.png
│ │ ├── [9.5K] 2000-px-stack-overflow-logo-svg.png
│ │ ├── ...
│ └── [ 128] scss
│ ├── [ 27K] _style.scss
│ └── [1.2K] custom.scss
└── [ 48K] index.html
7 directories, 47 files
There are 2 /scss folders in this project, one is ./asset/bootstrap/scss (from Bootstrap source files) and another one is ./asset/scss (for me to write customized code inside), and the output folder is ./asset/css (Where my HTML will refer link to).
For Sass compiler, I use Scout-App to help, it is a Sass GUI so it is very straightforward and easy to set up.
Once I finish the project setup, I start my coding in HTML & Sass files.
Second Part => Coding … (the hardest part)
Base on Bootstrap Official Documentation, I created a custom.scss file to add my customized elements and bootstrap base file together.
// Custom.scss
// Option A: Include all of Bootstrap
/* -------begin customization-------- */
$theme-colors: (primary: #6f23ff,
secondary: #ffd540);
:root {
--dusk: #3e396b;
--very-light-blue: #f8faff;
--purplish-blue: rgb(111, 35, 255);
--tealish: rgb(65, 211, 189);
--light-tan: #f9f1ae;
--padding-sm: calc((100vw - 540px) / 2);
--padding-md: calc((100vw - 720px) / 2);
--padding-lg: calc((100vw - 960px) / 2);
--padding-xl: calc((100vw - 1140px) / 2);
--oPadding: calc(0.16 * 100vw);
--oHeight: calc(0.16 * (100vw - var(--padding-xl)));
--oHalfHeight: calc(0.16 * (50vw -var(--padding-xl)));
}
/* -------end customization-------- */
/* import Bootstrap to set the changes! */
@import "../bootstrap/scss/bootstrap.scss";
/* ----------- custom font import ------------ */
@import url("https://fonts.googleapis.com/css?family=Domine:400,700|Maven+Pro:400,500,700,900|Montserrat:400,500,600,700,900&display=swap");
/* ------------ Self-styling -------------- */
@import "./style";
I used “Option A” — to include all the bootstrap components in this project, put all self-styling customization into a separated file ./style.scss, Sass will compile all sass files into one big giant CSS output to ./asset/css/custom.css, which I refer it back in my index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./assets/css/custom.css" type="text/css" />
<title>clone-Microverse - Online Coding School</title>
</head>
So far all the steps above are very clear and easy to follow ( I finish them in about an hour), but what coming in next is out of my calculation.
I spent the first few hours trying to re-create the navigation bar and landing page by myself. The more I tried, the more I found it is hard and complex. I tried to utilize more bootstrap 4 classes and less customize CSS, but it seemed impossible.
The original website looks pretty slick and stylish, isn’t it? Yes, but the price is very specified and complex frontend code.
I finally gave it up and try to look at the original website’s code to see how they actually come together, the result is shocking — there are more stacks or layers to make up one component than I originally thought, there are more custom CSS than use Bootstrap 4 class directly, they intend to use more #id rather than class for specificity of CSS style. Below are a peek on the code -
# Index.html
<div id="homepage" class="row bg-primary">
<div class="content">
<div id="homepage-navbar-container" class="container-fluid p-0">
<nav id="homepage-navbar" class="navbar navbar-expand-lg w-100">
<div class="container">
<a href="#" class="navbar-band logo">microverse</a>
....
<div id="navbarToggler"
class="collapse navbar-collapse w-100 align-items-baseline">
<ul class="nav navbar-nav w-100 justify-content-end">
<li class="nav-item pr-3">
<a
class="nav-link font-weight-bold text-white text-capitalize"
href="#"
>curriculum</a
>
</li>
\\ _style.scss
#homepage-header {
margin-top: 163px;
position: relative;
z-index: 105;
.head-line {
font-family: "Domine", serif;
font-size: 3rem;
font-weight: bold;
line-height: 1.27;
}
.head-text {
font-size: 1.25rem;
line-height: 1.65;
margin-top: 15px;
margin-right: 30px;
color: #fff;
}
Because of these complexities, I spent almost one month to finish all the coding, there are some on and off time and I just do this project on my spare time, but it still overly difficult than most of the frontend project I have done before. The final finished index.html file has 1204 lines, _style.scss file has 1512 lines,
├── [1.0K] LICENSE
├── [ 736] README.md
├── [ 224] assets
│ ├── [ 128] bootstrap
│ │ └── [1.4K] scss
│ ├── [ 128] css
│ │ ├── [437K] custom.css
│ │ └── [451K] custom.map
│ └── [ 128] scss
│ ├── [ 27K] _style.scss
│ └── [1.1K] custom.scss
└── [ 48K] index.html
Finally, You can check out all the code in here. I have clone about 95% of the code from the original website, but it still took me many hours to accomplish it. I can’t image how much hours I have to spend if I need to do this project from scratch.
Lesson Learn & Conclusion …
At first, after finishing this project, I think I can answer the question I raise at the beginning now — How much Bootstrap 4 Can help for a real-world project?
- A short answer is — “Not much”
- A longer answer is — “It help on its grid system and some spacing utilities, but the project still needs a lot of customizing CSS to help make the website look unique and outstanding.”
- An even longer answer is — “Bootstrap framework help provide a solid foundation for the project, it contributed about 20 ~ 30 % of the code base, but a real-world project needs more unique design and differentiation, imaginations and creativities are needed as a Frontend Developer!”
Second, below are some lesson learned I got from this project -
- A Real-world FrontEnd Project is usually complex and challenging. (It will be much more complex than the projects in Odin project or any other online learning platforms).
- A Frontend framework such as Bootstrap 4 might help, but diligentness and creativities are still the main contributors.
- Frontend development mainly involves repetitive coding and being requested to update frequently, make sure I like this kind of working style before I jump in.
- There are still much more to learn about SASS, CSS & HTML.
Finally, due to the limitation of my knowledge and resources, I might do this project in a completely wrong way or an immature way, hence I got a completely wrong answer from it. But so what? I did it and write about it anyway, I definitely learn a lot from it.
There are free resource can help customize Bootstrap 4 theme too, but they seem no fit for this project, so I might try them in the next project.
I will do it again if there is a question I can’t get the answer from google or any other sources, I think that is how a self-taught programmer learn to evolve in today’s environment.
PS: I am open to your critiques and suggestion for this project, thanks again for reading this whole story.