laboratory · bootstrap – example extra small devices phones (
TRANSCRIPT
![Page 1: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/1.jpg)
Responsive design
Laboratory
![Page 2: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/2.jpg)
Outline
• Quick CSS recap
• Responsive design
• CSS frameworks
• Scss
• Additional issues
![Page 3: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/3.jpg)
Margin
Box model
Border
Padding
Content
![Page 4: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/4.jpg)
Demo
![Page 5: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/5.jpg)
Web browsing paradigm shift
Source [http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/]
![Page 6: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/6.jpg)
![Page 7: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/7.jpg)
Responsive grid
1 2 3 4 5 6 7 8 9 10 11 12
![Page 8: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/8.jpg)
@media
/* Mobile */ @media only screen and (max-width: 767px) { main { width: 100%; } } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 1023px) { main { width: 91.6%; } } /* Desktop */ @media only screen and (min-width: 1024px) { main { width: 66.6%; } }
![Page 9: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/9.jpg)
Screen width reset
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ... </head>
![Page 10: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/10.jpg)
CSS frameworks
• Bootstrap
• Foundation
• Material Framework
• Materialize
• https://colorlib.com/wp/free-css3-frameworks/
![Page 11: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/11.jpg)
Bootstrap – example
Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times
Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
![Page 12: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/12.jpg)
Sass
Installation
Compilation
Automatic compilation
Automatic compilation and compression
https://sass-lang.com/install
sass style.scss style.css
sass --watch style.scss:style.css
sass –-watch style.scss:style.css --style compressed
![Page 13: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/13.jpg)
Sass
Variables
$tablet-width: 100%; $desktop-width: 91.6%; /* Mobile */ @media only screen and (max-width: 767px) { main { width: $tablet-width; } } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 1023px) { main { width: $desktop-width; } }
![Page 14: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/14.jpg)
Sass
Nesting
table.subjects { width: 100%; border-top: 1px solid $main-color; border-bottom: 1px solid $main-color; a { color: black; } tr:nth-child(even) { background-color: $background-color; } &:hover { cursor: crosshair; } }
![Page 15: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/15.jpg)
Sass
Stylesheet import
/* _reset.scss */ html, body { margin: 0; padding: 0; } /* style.scss */ @import 'reset'; * { box-sizing: border-box; font-family: "Lucida Sans", Verdana, sans-serif; }
![Page 16: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/16.jpg)
Sass
Inheritance
.error { border: 1px solid #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }
![Page 17: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/17.jpg)
Sass
Operators
$no-menu-items: 5; /* Mobile */ @media only screen and (max-width: 767px) { .menu-item { width: 100%; } } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 1023px) { .menu-item { width: 100% / $no-menu-items; } }
![Page 18: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/18.jpg)
Browser-sync
Installation
Listener
npm install -g browser-sync
browser-sync start --server --directory --files "**/*"
![Page 19: Laboratory · Bootstrap – example Extra small devices Phones (](https://reader035.vdocument.in/reader035/viewer/2022062506/5fb7b18f54a6cc77da5ad5c7/html5/thumbnails/19.jpg)
To read
• https://css-tricks.com/ (flexbox, grid)
• Google Material Design
• Content Delivery Network
• WCAG 2.0
• Technology radar https://www.thoughtworks.com/radar
• https://flexboxfroggy.com/
• https://cssgridgarden.com/