SLIDE 1
RESPONSIVE DESIGN mobil e ma tu e rs CSS GRID TERMINOLOGY Lines - - PowerPoint PPT Presentation
RESPONSIVE DESIGN mobil e ma tu e rs CSS GRID TERMINOLOGY Lines - - PowerPoint PPT Presentation
CS498RK SPRING 2020 RESPONSIVE DESIGN mobil e ma tu e rs CSS GRID TERMINOLOGY Lines Cell Area Vertical and Rectangular space A single unit of a horizontal lines surrounded by four CSS Grid that divide the grid grid lines TERMINOLOGY
SLIDE 2
SLIDE 3
TERMINOLOGY
Lines Cell Area
Vertical and horizontal lines that divide the grid A single unit of a CSS Grid Rectangular space surrounded by four grid lines
SLIDE 4
TERMINOLOGY
Track Row
Column
Space between two grid lines A horizontal track A vertical track
SLIDE 5
TERMINOLOGY
Gutter Container Item
Space between rows and columns The container that holds the entire CSS Grid Any direct child of the container
SLIDE 6
Create a grid container: display: grid
USING GRID
1 2 3
Define rows and columns: grid-template-columns and grid-template-rows Add gutter: grid-gap
SLIDE 7
HTML
<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item6">6</div> </div>
CSS
.container { display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: 150px 150px; grid-gap: 1rem; }
CodePen
.item { border: 0.25rem solid #FF500A; border-radius: 0.5rem; display: flex; justify-content: center; align-items: center; }
SLIDE 8
A fraction of available space in the grid container
NEW UNIT: fr
grid-template-columns: 150px 150px 150px; width: calc(450px + 2rem); grid-template-columns: 1fr 1fr 1fr;
becomes what??
SLIDE 9
Lets you perform calculations when specifying CSS property values
calc()
width: calc(450px + 2rem); width: calc(100% - 80px); width: calc(100% / 6); font-size: calc(1.5rem + 3vw);
https://caniuse.com/#search=calc https://developer.mozilla.org/en-US/docs/Web/CSS/calc
SLIDE 10
repeat()
grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 150px 150px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 150px);
becomes
can also be used for part of a listing!
SLIDE 11
You can mix fixed(px, em) and flexible(%, fr) sizes
MIXING UNITS
grid-template-columns: 100px 30% 1fr;
SLIDE 12
POSITIONING ITEMS
1 1 2 3 2 3 4
.item1 { grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; } .item1 { grid-row: 2 / 3; grid-column: 2 / 3; }
- r
SLIDE 13
Basic Layout
CodePen
SLIDE 14
TEMPLATE AREAS
grid-template-areas: "header header header" "content-1 content-1 sidebar" "content-2 content-3 sidebar" "footer footer footer"; .header { grid-row: 1 / 2; grid-column: 1 / 4; } .header { grid-area: header; }
Add area names to container
1 2
Update item placement
becomes
SLIDE 15
NAMED LINES
grid-template-columns: [main-start content-start] 1fr [column3-start] 1fr [content-end sidebar-start] 200px [sidebar-end main-end]; grid-template-rows: [row1-start] 80px [row2-start] 1fr [row3-start] 1fr [row4-start] 100px [row4-end]; .header { grid-row: 1 / 2; grid-column: 1 / 4; } .header { grid-column: main-start / main-end; grid-row: row1-start / row2-start; }
Give names to lines in templates
1 2
Update item placement
becomes
SLIDE 16
RESOURCES
https://mozilladevelopers.github.io/playground/css-grid https://css-tricks.com/snippets/css/complete-guide-grid/ https://gridbyexample.com/ https://cssgridgarden.com/
SLIDE 17
RESPONSIVE DESIGN
SLIDE 18
A website should look good and be accessible on every display, from wide screens to mobile devices.
idea
SLIDE 19
RESPONSIVE DESIGN
Eliminates the distinction between mobile and desktop websites. Allows a single codebase that is displayed differently in various screen sizes Achieved through media queries
https://developers.google.com/web/fundamentals/design-and-ux/responsive/
SLIDE 20
DESKTOP vs MOBILE vs TABLET
3% 45%
52%
Mobile Desktop Tablet
https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
SLIDE 21
https://internetingishard.com/html-and-css/responsive-design/
SLIDE 22
MEDIA QUERIES
@media only screen and (min-width: 961px) { <regular-css-rules> }
SLIDE 23
MEDIA QUERIES
@media only screen and (min-width: 961px) { <regular-css-rules> }
at-rule media type media feature
SLIDE 24
VIEWPORT ZOOMING
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
By default, mobile devices zoom out to fit entire desktop layout onto the viewport. This prevents mobile devices from rendering responsive designs, In order to disable it, we need to specify a <meta> tag in the <head>
https://internetingishard.com/html-and-css/responsive-design/
SLIDE 25
DESIGN
Start with the design of how the website will look at every breakpoint. Various responsive design patterns
- exist. (Mostly Fluid, Column Drop,
Layout Shifter, etc.) Implement them using media queries.
https://internetingishard.com/html-and-css/responsive-design/
SLIDE 26
DESIGN
Fluid Layout: Content stretches/shrinks to fill the entire viewport. Fixed-Width Layout: Content has the same width regardless of the viewport Generally, Mobile/Tablet → Fluid, Desktop → Fixed-Width
https://internetingishard.com/html-and-css/responsive-design/
SLIDE 27
BASIC PRINCIPLES
Mobile-First: Start implementing mobile version first to maximize code reuse. Choosing Breakpoints: Don’t need to be device specific (i.e. iPhone X vs Galaxy S9). Take advantage of ranges. Relative vs Static Units: Use relative units when you want your content to adapt (when you don’t have enough screen real-estate), static units when you want the same look (when you have enough space).
https://blog.froont.com/9-basic-principles-of-responsive-web-design/
SLIDE 28
demo
https://gitlab.com/uiuc-web- programming/responsive-demo
SLIDE 29
RESOURCES
https://internetingishard.com/html-and-css/responsive-design https://developers.google.com/web/fundamentals/design-and-ux/responsive/ https://blog.froont.com/9-basic-principles-of-responsive-web-design/ https://alistapart.com/article/responsive-web-design/
SLIDE 30