Day 6: 100 days of code, Learning Bootstrap fundamentals and sass inheritance

#100daysofcode #webdev #github #git

There will be less content today as I am busy with academics.

Don't forget to use the `flex-wrap:wrap`

In my last some of the projects, I have to change almost the entire code in media queries so that my website look good on an mobile device. This can be avoided to a great extent by using:-

flex-wrap: wrap;

So, use it wisely whenever needed.

Bootstrap Basics

Bootstrap is a css library, which consists of code written by someone-else, taking care of all the styles and responsive web design. To use it in our projects, go to Bootstrap and copy the css link inside of your html file.
To use any-functionality of bootstrap, just link bootstrap with your html, and then just specify in the class of your html tag, what you want to do with that element, among some classes given in bootstrap website.

For example, if you want to design a warning button:-

<button class = "btn btn-warning">  Warning  </button>

Now practice and get your hands dirty ..

Bootstrap column model

This is a bootstrap way to make sure that our web-pages are mobile responsive. In this model, bootstrap divides its page into 12 distinct columns.

Large screen:-

as we shrink the size of the screen down.

Bootstrap also let us specify how many columns should an div take, depending on the size of the screen as small or large. Here is the example:-

This behaves as 4 div in 1 row on a large screen, and 2 div's in each row on a small screen.

SASS inheritance

Let's suppose we are designing 3 alert messages as below:-

If we write it using nesting in sass, then in the output css, the code will be copyed in the css styling of all the alert, this will increase the size of our css to a large extent in long term. To solve this problem, we use inheritance.

Hence, the better solution of the above problem will be :-

New things learnt about Git

When you clone an empty repository from github, and them modify it and commit in your local machine, then if you run the git status command, you will get some "error-looking" message, the reason for that is:-