CSS (CASCADING STYLESHEET)

Рэнцэндоржийн ЖАВХЛАН

МЭДЭЭЛЭЛ, КОМПЬЮТЕРИЙН УХААНЫ ТЭНХИМ

МУИС, Хэрэглээний шинжлэх ухаан инженерчлэлийн сургууль
javkhlan@seas.num.edu.mn

Интернэт технологийн үндэс

2018 оны Хавар
INTRODUCTION
S
 What is Responsive Design
 What it contains?
 What tools or frameworks are
best for responsive web
design?
 More ….
ОРЧИН ҮЕИЙН ВЭБ САЙТЫН №1
ШААРДЛАГА

Source: http://bradfrostweb.com/
 2.7 BILLION OF
POPULATION WILL
HAVE SMARTPHONES
BY 2020

Source: http://www.pcmag.com/article2/0,2817,2485277,00.asp
“Anyone who slaps a ‘This page is best
viewed with browser X’ label on a web
page appears to be yearning for the bad
old days, before the web, when you had
very little chance of reading a document
written on another computer, another
word processor, or another network.”

Tim Berners-Lee in Technology Review, July 1996

What is Responsive Web Design?

Вэб дизайн нь бүх төрлийн

төхөөрөмжүүдээр үзэхэд хамгийн
тохиромжтой байдлаар өөрчлөгдөж байгааг
хэлнэ.

An approach to web design that provides an

optimal viewing experience across a wide range
of devices.

Source: http://www.alistapart.com/articles/responsive-web-design/
 Elements of Responsive Web Design

 Fluid Grid
 Resizable Images
 Media Queries
Grids
How do grid systems work?

Example based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system

BONUS (USE HTML5 AND RESPONSIVE SYNTAX TO CREATE FOLLOWING
LAYOUT)
Resizable Images
img {
max-width: 100%;height: auto;
}
Media Queries

• A CSS3 module that renders web

pages based on conditions such as
screen resolution
• Drafted in 2001 by the W3C
• Became a recommended standard in
June 2012

Source: Wikipedia.org
MEDIA QUERIES
 The other key component of responsive designs is CSS media
queries.
 A media query is a way to apply style rules based on the medium that
is displaying the file. You can use these queries to look at the
capabilities of the device, and then define CSS rules to target that
device.

15
MEDIA QUERIES
 Contemporary responsive sites will typically provide CSS rules for
phone displays first, then tablets, then desktop monitors, an approach
called progressive enhancement, in which a design is adapted to
progressively more advanced devices

Browser features you can Examine with Media Queries

Feature Description

width Width of the viewport

height Height of the viewport

device-width Width of the device

device-height Height of the device

orientation Whether the device is portrait or landscape

color  The number of bits per color

16
MEDIA QUERIES IN ACTION

17
Common Breakpoints

Label Layout Width

Smartphones 480px and below

Portrait Tables 480px to 768px

Landscape Tablets 768px to 940px

Default 940px and up

Large Screens 1210px and up

WHY WE NEED CSS FRAMEWORKS
Project requirements determine the framework
Fluid Grid System
Responsiveness
Offer more than just a grid (pre-defined styles for
typography, tables, buttons, navigation, forms
elements, etc.)
Also…
• Great documentation
• Maintained regularly by the community or creator
• Open Source (free)
CSS FRAMEWORKS
 A CSS framework is a precreated set of CSS classes or other software
tools that make it easier to use and work with CSS.
 They are two main types of CSS framework:
• Grid systems
• CSS preprocessors.

20
GRID SYSTEMS
 Grid systems make it easier to create multicolumn layouts. Some of
the most popular are
• Bootstrap (twitter.github.com/bootstrap)
• Blueprint (www.blueprintcss.org)
• 960 (960.gs)
 Print designers typically use grids as a way to achieve visual
uniformity in a design. In print design, the very first thing a designer
may do is to construct, for instance, a 5- or 7- or 12-column grid. The
rest of the document, whether it be text or graphics, will be aligned
and sized according to the grid

21
What

Source: http://twitter.github.com/bootstrap/
TWITTER BOOTSTRAP

 A freely available design framework for websites and web

applications
 Based upon HTML5, CSS and JavaScript
Supports all major browsers (even IE7!)
Released on GitHub in August 2011
CREATED BY
Why

Reason #1: Rich Features

Why

Reason #2: Popularity

Why

Reason #3: Browser Support

Also MSIE and Opera

Why

Reason #4: Glyph Icon Set

Why

Reason #5: Grid System

 960 Grid System http://960.gs/

 Blue Print CSS http://www.blueprintcss.org/
 Golden Grid System http://goldengridsystem.com/
GRID SYSTEMS – 960 EXAMPLE

30
GRID SYSTEMS – BOOTSTRAP

http://getbootstrap.com/css/
31
Why

Reason #6: Components

 Buttons:
 Tabs:
 Breadcrumb:
 Pagination:
 Alerts:
 Progress bar:
Why
Reason #7: Javascript/jQuery
Why
Reason #8: Customization
Why
Reason #9: Live Mock-Ups
How
1. Download Bootstrap and inline text editor
2. Install text editor
3. Extract the bootstrap files in to your project folder
4. Download example html file and save it as index.html
in the project folder
Questions?