Starting today, I will be posting a series of posts in which I will be teaching how to build a responsive grid system from scratch using CSS. Every week, I will try to add one post. This is the first post and we will be reviewing some basic concepts related to CSS.
Introduction
In these days, many people are browsing the web using many other devices other than personal computers and laptops. For that reason, one factor to consider while developing a website is to make it adaptive to different screen sizes. One way would be to create variants of the website for each device which is not good idea. The best option is to go with creating a responsive grid system for the website. Once you have the grid ready, you can use it to build the UI of the web site.
Before we continue with the process of building the grid system, you must have the basic knowledge of the following topics:
- HTML Basics.
- CSS Basics.
- Using Web Browser Inspector (optional but very helpful).
Review: Box Model
Before we start building the grid system, let’s review some basic concepts that we need. The one and most important concept is the “Box Model”. The idea of box model is that HTML elements are represented as a rectangle. The rectangle has 5 important properties. The 5 properties are used to specify the Real width and height of HTML element. The 5 properties are:
- Width
- Height
- Border
- Margin
- Padding
The width and height properties are used to specify the width and height of the content area within the HTML element. The border is simply a visible line that is used to show the shape of HTML element. The margin is used to specify how far the given HTML element from the other elements. The padding is used to specify how far the content area of HTML element from the border.
The border, the margin and padding are represented as boxes that surround the content area as illustrated by the next image.
By default, web browsers use only the content area width and height to compute the total width and height of HTML element. Basically this means that width property of HTML element = content width. This means that if we add a border of size 2px and a padding of size 5px to an element with width property = 100px, the total visible width will be 114px. We can see that in the next example.
HTML Code
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<style type="text/css">
.div1{
border: 2px black solid;
background-color: #2d8659;
width: 200px
}
.childDiv1{
border: 2px black solid;
background-color: #99e6e6;
width: 100px;
padding: 5px
}
.childDiv2{
border: 2px black solid;
background-color: #EEEEFF;
width: 100px;
padding: 5px
}
</style>
</head>
<body>
<div class="div1">
<div class="childDiv1">
Child Div1
</div>
<div class="childDiv1">
Child Div2
</div>
</div>
</body>
</html>
What we have in here is one DIV element with two DIV elements inside it. What we care about is the width of the inner two DIV elements. The “width” property is set to 100px. The border property is set to 2px and the padding is set to 5px. When we use the inspector of a web browser, we can see that the total element width is 114px.
This behavior can be overridden by specifying the value of the CSS property “box-sizing”. This property is used to tell the web browser how to calculate the width and height of HTML element. The default value for this property is “content-box” which means that the value of “width” property will be the width of content area. Another possible value for this property is “border-box”. If the value of the “box-sizing” property is set to “border-box”, the value of the property width will be content width + border + padding. For example, if we set the width property to be 100px with a border of size 2px and a padding of 5px, the total element width will be 100px. 10 of the 100 will be for the padding and 4 will be for the border and 86px for the content.
Let’s modify the code above and change the value of the property “box-sizing” and set it to “border box” and observe the effect.
HTML Code
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<style type="text/css">
/*This selector is used to
*selects all HTML elements
*/
*{
box-sizing: border-box;
}
.div1{
border: 2px black solid;
background-color: #2d8659;
width: 200px
}
.childDiv1{
border: 2px black solid;
background-color: #99e6e6;
width: 100px;
padding: 5px
}
.childDiv2{
border: 2px black solid;
background-color: #EEEEFF;
width: 100px;
padding: 5px
}
</style>
</head>
<body>
<div class="div1">
<div class="childDiv1">
Child Div1
</div>
<div class="childDiv1">
Child Div2
</div>
</div>
</body>
</html>
As we can see, the width of the element is the same as we set even when we have border and padding. This will be useful as we build our grid system later. For that reason, we will set the “box-sizing” for all elements to “border-box” including pseudo -elements. To do that, we use the following CSS ruleset:
CSS Code
*, *::before,*::after{
box-sizing:border-box;
}
Just a reminder, pseudo-elements uses double semi-colon and pseudo-classes uses single semi-colon. Next, we will start by understanding the idea behind the grid system.
One thing to note is that we did not talk about the margin. One thing to mention about the margin is that it will be added up to the element total width regardless of the property "box-sizing".
In the next post, we will be learning about the basic idea behind grids and we will be interdicting a new concept which is the CSS At-Rule.
No comments:
Post a Comment
Feel free to write any thing in your mind here 😉