MIRPUR UNIVERSITY OF SCIENCE AND TECHNOLOGY

DEPARMENT OF SOFTWARE ENGINEERING

Cascading Style Sheets
(lecture # 10)

Engr. Muhammad Raees

(Lecturer)

Date: April 23, 2020

 LECTURE CONTENTS

• Responsive Layout
• Page Layout
• Bootstrap

Web Design & Development 3

 Responsive style

• Media element defines the page as per rendering devices.

• @media only screen and (min-width: 961px){

• body{ background-color: yellow;}
• @media only screen and (min-width: 401px) and (max-width:
900px){
• body{background-color: green;}

4
Web Design & Development
 Page layout
• Design a Page
• CONNECTIONS: a smaller version of social web
• Users can register themselves
• After registration they can send a text message to anybody who is registered with the
website
• User’s can view the received messages
• Make a site map Home page

• Identify key elements for each page

User page
• Group related information/sections
• Home page: login form, registration form Inbox
• User page: user’s information, recent messages
Outbox
• Inbox: Received messages
• Outbox: Sent messages Send a msg
• Send a message: Send message form
5
Web Design & Development
 Page design
header
Logo

User Picture
Web Page User data
Login
form User Info

Message
Sign-In
Actions
form

Recent
Messages
Footer

6
Web Design & Development
 Page design

• Liquid Design
• Designs automatically fits to
the screen
• Use percentage values to
declare height and width of
sections
• Fixed design
• Designs remain fixed width
• Use fixed values to declare
height and width of sections

7
Web Design & Development
 Bootstrap

• Bootstrap is a free front-end framework (HTML and

CSS) for faster and easier web development
• Bootstrap is famous for being developed with
components that have the ability to follow the property
of responsive designs
• Responsive Design is about using CSS and HTML to
resize, hide, shrink, enlarge, or move the content to
make it look good on any screen
• Responsive Design allow your page works for
computer, tablets and mobile phones.
• In other words, bootstrap is a collection of CSS
classes and JavaScript functions the you get ready to
use and will not worry about write code like this:
Web Design & Development 8
 Bootstrap

• Meta viewport tag ensure proper rendering and touch zooming

• Width of the page to follow the screen-width of the device and initial zoom level to
default zoom level of device
• User will have a better experience, thus will not need zoom the page to view page
information

Web Design & Development 9

 Bootstrap

• You will need to include three files:

• bootstrap.min.css
• jquery.min.js
• bootstrap.min.js
• You must download it and include in your page or include from the Internet

Web Design & Development 10

 Bootstrap Grids

• Bootstrap's grid system allows up to 12 columns across the page

• You can divide the container in rows and each row in columns with space multiple
of the 12

Web Design & Development 11

 Bootstrap
Images
Tables
3 main classes:
4 main classes:
• . img-rounded
• .table
• . img-circle
• .table-striped
• . img-thumbnail
• .table-bordered
• .table-hover
• 5 contextual classes:
• .active
• .success
• .info
• .warning
• .danger

Web Design & Development 12

 Bootstrap

Web Design & Development 13

 Bootstrap
Glyphicons
Bootstrap provides 260 glyphicons from the
Glyphicons Halflings set

Web Design & Development 14

 Bootstrap – Themes and Templates

For web application SB Admin 2 template is

appropriate. It has forms, tables, charts and other
useful components

Web Design & Development 15

 References

• Chapter 7-9, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett,

Wiley Publishing; 2009, ISBN: 978-0-470-54070-1.
• w3schools. Bootstrap 3 Tutorial. https://www.w3schools.com/bootstrap/
• Source Code
• https://github.com/jadsonjs/bootstrap

Web Design & Development 16

THANKS