Lecture # 10

CSC336 Web Technologies

Credit Hours: 3(2, 1)

Course Instructor: SAIF ULLAH IJAZ

Lecturer CS Dept, CUI Vehari
MSc University of Leicester, UK
BSc COMSATS University Islamabad

Ethics in Information Technology, Sixth Edition 1

 • Key features in CSS3 for layout control
• Focus:
• Box Model
CSS3 • Website Layout
• Layout with Floats
Layout Design • Responsive Design
• viewport
• Media Queries
• Flexbox
• Grids
Box Model
Overview
• Elements:
• Content
• Padding
• Border
• Margin
• Controls spacing and
sizing
• Diagram of the box
model
 Example: Box Model in Action

• Code Snippet:
• css
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
• html
<div>This text is the content of the box.</div>
CSS3 Box-Sizing Property
• box-sizing: content-box (default) vs box-sizing: border-box
• Example: box-sizing: content-box (default)
#box1 {
box-sizing: content-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid blue;
}

#box2 {
box-sizing: border-box; box-sizing: border-box
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid blue;
}
Website Layout
Content
• 1-column (often used for mobile browsers)
• 2-column (often used for tablets and laptops)
• 3-column layout (only used for desktops)
Float-Based Layouts Overview

Floats allow elements to align horizontally

Issues:
• clearing floats
• layout breakages
Example: Floats for Layout
• Floats for creating simple layouts
• Code Snippet:
• css
* {
box-sizing: border-box;
}
.left {
float: left;
width: 50%;
padding: 50px;
}
.right {
float: right;
width: 50%;
padding: 50px;
}
• html
<div class="left" style="background-color:#bbbb">Left Column</div>
<div class="right" style="background-color:#cccc">Right Column</div>
Clearfix for Float Layouts
• Using clearfix to avoid float issues
• Code Snippet:
• css
.clearfix::after {
content: "";
display: block;
clear: both;
}
• html
<div class="clearfix">
<div class="left" style="background-color:#aaaa">Left Column</div>
<div class="right" style="background-color:#cccc">Right Column</div>
</div>
3-column layout
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}

/* Clear floats after the columns */

.row:after {
content: "";
display: table;
clear: both;
}
Responsive Design
Responsive Design

• viewport
• Media Queries
• Flexbox
• Grids
Viewport
Viewport
Viewport
Viewport
<meta name="viewport" content="width=device -width, i n i t i a l - s c a l e = 1 . 0 " >
Media Queries

• Media Types: p r i n t , screen, ...

• Media Features: height, width, o r i e n t a t i o n ,
...
responsive.html
@media (min-width: 600px) {
body {
background-color: red;
}
}

@media (max-width: 599px) {

body {
background-color: blue;
}
}
Flexbox

1 2 3 4 5 6
Flexbox
1 2 3 4 5 6

1 2 3 4 5 6
Flexbox

1 2 3 4 5 6
Flexbox

4 5 6
1 2 3 4 5 6 1 2 3 4 5 6
Flexbox

1 2 3 4 5 6
Flexbox

1 2 3
1 2 3 4 5 6

4 5 6
 Flexbox.html
<div id="container">
<div>1. This is some sample text inside of a div to demo Flexbox.</div>
<div>2. This is some sample text inside of a div to demo Flexbox.</div>
<div>3. This is some sample text inside of a div to demo Flexbox.</div>
. . .
<div>12. This is some sample text inside of a div to demo Flexbox.</div>
<div id="container">
#container {
display: flex;
flex-wrap: wrap;
}
#container div {
background-color: springgreen;
font-size: 20px;
margin: 20px;
padding: 20px;
width: 200px;
}
 #grid{
background-color: springgreen;

grid.html display: grid;

padding: 20px;
grid-column-gap: 20px;
grid-row-gap: 10px;
grid-template-columns: 200px 200px auto;
}

.grid-item{
background-color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
<div id="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
...
<div class="grid-item">12</div>
<div id="grid">
 Adaptive Layouts
•Web designers create layouts for various devices.

•Layout adapts based on the screen size of the device.

•Different screen sizes include:

•320px, 480px, 760px, 960px, 1200px, 1600px

•Supports multiple devices like:

•Mobile phones, tablets, and more.

•Content adjusts dynamically for each layout.

•Designers need to develop six different page versions for each device size.
 Responsive Layouts Vs Adaptive Layouts
S. No. Responsive Design Adaptive Design

It adjusts its content and width according to the According to the device, it loads the content of the
1.
device. web page that was already designed.
Designers have to work more because they have to
Designers have to work less because they have to
2. create six different versions of the site to handle
create the single layout of the page designers
different screen sizes.
If there is any new layout of the screen comes into
Designers have to develop a completely new page if
3. the market, the content is adjusted according to
the new layout of the screen has come into the market.
them.
Responsive Design works well for larger sites that Adaptive Design works well for smaller sites that are
4.
are being built from the scratch. being refreshed.
Examples-
• Slack Examples-
5. • Dropbox • Apple
• Github • Amazon
• Shopify
Mobile-First
Approach
Overview
• Start designing for
mobile devices first
• Progressive
enhancement for larger
screens
• Example of typical min-
width media queries
Example: Mobile-First Design
• Code Snippet:
• css
.column {
width: 100%; /* Occupy 100% of the container width */
}

/* Media query for larger screens */

@media (min-width: 768px) {
.column {
width: 50%;
}
}
Lesson Learning Outcome (LLOs)
• CSS3 for Modern Layouts
• Floats and Flexbox for layout design
• Media Queries and Mobile-First for responsive design
• CSS3 enables flexible, adaptive, and efficient web layouts