Responsive Web

This document discusses responsive web design and CSS Grid layout. It provides code examples for: - Setting the viewport meta tag for responsive design - Creating responsive images and text using viewport units - Using media queries to apply different CSS at various screen widths - Implementing basic CSS Grid layout with rows and columns - Adding gaps and adjusting grid item placement

Uploaded by

KUEEZ

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

29 views

Responsive Web

Uploaded by

KUEEZ

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

You are on page 1/ 38

Responsive Web

and CSS Grid, Website Layout

What is Responsive Web Design?
Responsive Web Design is about using HTML and CSS to automatically
resize, hide, shrink, or enlarge, a website, to make it look good on all
devices (desktops, tablets, and phones)
Setting The Viewport

When making responsive web pages, add the following <meta>

element in all your web pages:

initial-scale. This defines the scale of the website, This parameter sets

the initial zoom level, which means 1 CSS pixel is equal to 1 viewport
pixel
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h2>Responsive Image</h2>
<p>"max-width:100%" prevents the image from getting bigger than its original size. However, if
you make the browser window smaller, the image will still scale down.</p>
<p>Resize the browser window to see the effect.</p>

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

</body>
</html>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>
The box-sizing property can be used to adjust this behavior:

content-box gives you the default CSS box-sizing behavior. If you set an
element's width to 100 pixels, then the element's content box will be 100
pixels wide, and the width of any border or padding will be added to the final
rendered width, making the element wider than 100px.
border-box tells the browser to account for any border and padding in the
values you specify for an element's width and height. If you set an element's
width to 100 pixels, that 100 pixels will include any border or padding you
added, and the content box will shrink to absorb that extra width. This
typically makes it much easier to size elements.
Media Query
@media(min-width: 1200px) {
//PASTE CSS CODE

}
@media(min-width: 992px) and (max-width: 1199)
{

}
@media(min-width: 768px) and (max-width: 991)
{

}
@media(max-width: 767px) {

}
CSS GRID
The CSS Grid Layout Module offers a grid-based layout system, with
rows and columns, making it easier to design web pages without having
to use floats and positioning.
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
<style>
.grid-container {
display: grid;
Set a size for the 4 columns:
grid-template-columns: auto auto auto;
background-color: red; .grid-container {
padding: 10px; display: grid;
} grid-template-columns: 80px 200px auto 40px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
Grid Columns
Grid Rows
Grid Gaps
You can adjust the gap size by using one of
the following properties:
grid-column-gap
grid-row-gap
grid-gap
An HTML element becomes a grid container when its display property is
set to grid or inline-grid.
Grid Lines

The lines between columns are called column lines.

The lines between rows are called row lines.
Place a grid item at column line 1, and let it
end on column line 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
The grid-template-rows property defines the
height of each row
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
Naming Grid Items
• The grid-area property can also be used to assign names to grid items.
CSS animation Property
div {
animation: mymove 5s infinite;
}
The animation property is a shorthand property for:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
@keyframes mymove {
0% {top: 0px;}
100% {top: 200px;}
}
Definition and Usag

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords "from" and "to",
which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the
animation is complete.

Tip: For best browser support, you should always define both the 0% and the 100% selectors.
Add many keyframe selectors in one
animation:
@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}
Change many CSS styles in one animation:
@keyframes mymove {
0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}
Many keyframe selectors with many CSS
styles:
@keyframes mymove {
0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
75%  {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
CSS Flexbox
Flexbox Elements
To start using the Flexbox model, you need to first define a flex
container.
<div class="flex-
container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
The flex container becomes flexible by setting the display
.flex-container > div { property to flex:
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
The flex container properties are:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction
.flex-container {
display: flex;
flex-direction: column;
}
The column-reverse value stacks the flex
items vertically (but from bottom to top):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
The row value stacks the flex items
horizontally (from left to right):
.flex-container {
display: flex;
flex-direction: row;
}
The row-reverse value stacks the flex items horizontally (but from right
to left):
The flex-wrap Property
The flex-wrap property specifies whether the flex items should wrap or not.
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
The nowrap value specifies that the flex items will not wrap
width: 100px; (this is default):
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
The flex-flow Property
The flex-flow property is a shorthand property for setting both the flex-
direction and flex-wrap properties.
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content Property

The justify-content property is used to align the flex items:

.flex-container {
display: flex;
justify-content: center;
}
justify-content: flex-start;
justify-content: flex-end;
justify-content: space-around;
justify-content: space-between;
The flex item properties are:

order
flex-grow
flex-shrink
flex-basis
flex
align-self
The order Property
The order property specifies the order of the flex items.
style> <body>
.flex-container {
display: flex; <h1>The order Property</h1>
align-items: stretch;
background-color: #f1f1f1; <p>Use the order property to sort the flex items as you
} like:</p>

.flex-container>div { <div class="flex-container">

background-color: DodgerBlue; <div style="order: 3">1</div>
color: white; <div style="order: 2">2</div>
width: 100px; <div style="order: 4">3</div>
margin: 10px; <div style="order: 1">4</div>
text-align: center; </div>
line-height: 75px;
font-size: 30px; </body>
}
</style>
The flex-grow Property

The flex-grow property specifies how much a flex item will grow relative
to the rest of the flex items.
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
Make the third flex item grow eight times faster than the other flex
items:
The flex-shrink Property
The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex
items.
The value must be a number, default value is 1.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 2">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>