Step 0: Prepare a rough layout diagram of the major containers inside the webpage
Step 1: Create a <section> structure on the basis of the layout diagram
Step 2: Add breakpoints inside the <section> structure and name those tags as <div class="container-fluid"> These container-fluids can have additional classes like d-flex d-md-block and so on..
Step 3: create inner content of the container-fluid on the same basis
Step 4: Breakpoints for the inner-content of container-fluid
Till this point you have used bootstrap classes for
- Display properties
- Paddings
Step 5: Positioning: Add classes for the positioning of the objects and make it similar to the actual layout. In this step always make sure to have
At this point you have used custom position properties but haven't passed the values on top,bottom,left,right
Step 6: Formatting with custom classes
Css custom classes to be applied here
- Colors
- Font size
- Font Weight
- line height
- border-radius
- box-shadow with color
At this point you will definitely have an idea of where to position the objects after their font sizes have been set as per requirement and layout is working fine
Step 7: Add top,bottom,left properties for positioned elements
Step 8: Component Level Design In this procedure add a new <span> for the components which need css properties and give them some meaningful name
Css properties
- border-radius
- box-shadow
- padding
- z-index
- height
- width
- object-fit
- overflow
- margin(use very carefully)
- transforms, etc.
Points to be noted
-
Desktop Website should look similar at zoom levels 70-150%, any browser, any window and any desktop(small laptops, medium laptops, large laptops, 2k, 4k laptops as well) to achieve this, the height and width and many other properties are supposed to be in percentages instead of px, em or any absolute sizing -
Mobile websites should cover the smallest size to 600px, the smallest size could be width of samsung fold and height of iPhone SE
Learn the difference between container and container-fluid
As per the simple and most used websites exist, container is used almost everywhere and container-fluid's usage might be limited to navigation and footer content