Scribd
Upload
39 views19 pages

Day 1

Uploaded by

lamobokro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views19 pages

Day 1

Uploaded by

lamobokro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

Responsive Web Design

with Flexbox and CSS Grid

Day 1: Flexbox
Jen Kramer @jen4web
• Wifi: Connect to MJGWorkshop
Password: PlayTeachDeliver
• Download workshop files:
https://github.com/jen4web/fem-
layout-2
• Have a way to edit HTML and CSS files
available.
Make sure you have Firefox and/or
Chrome installed.
• Hipster donuts up front, coffee on the
way, help yourself to the fridge!
• Restrooms around corner to left
Responsive Design
• Defined by three characteristics
• Flexible grid-based layout
• Media queries (CSS3)
• Images that resize

www.alistapart.com/articles/responsive-web-design/

https://ethanmarcotte.com/wrote/responsive-design-
at-11-container-queries/
Grid-based
layout
Images that resize

• Images should change size, based on screen


resolution
• Today’s solutions include <picture>, sizes, and srcset,
part of HTML spec
• Browser reports screen
resolution
• Based on current width,
serve a stylesheet with
layout for that width
• No JavaScript involved

• PS – media queries go
beyond screen size!
• Aspect-ratio
• orientation

CSS Media Queries


Grid-based layout associated with
frameworks

How does Images that resize are often


forgotten
this hold
up today? Devs try to avoid media queries

CONTAINER QUERIES / SUBGRID


WILL SOLVE ALL (ahem)
Consider these guiding principles

GRID-BASED IMAGES THAT MEDIA QUERIES


LAYOUT RESIZE
Flexbox
Flexbox
• The first layout elements – but not envisioned to
lay out whole web pages
• Excels at vertical centering and equal heights
• Very easy to reorder boxes

Disadvantage:
Wasn’t designed to be locked down for layouts!
Works in 1 dimension only.
http://www.lynda.com/CSS-tutorials/CSS-Flexbox-First-Look/116352-2.html
http://www.lynda.com/CSS-tutorials/CSS-Flexbox-First-Look/116352-2.html
Three
versions of
Flexbox

• 2009: display: box;


• 2011: display: flexbox; (“tweener” syntax)
• 2016: display: flex;
• Generally good cross-browser compatibility
except for IE
Games to practice Flexbox syntax:

• Flexbox Froggy:
http://flexboxfroggy.com/

• Flexbox Defense:
http://www.flexboxdefense.com/
Flexbox properties
Parent (Flex Container) Children (Flex Items)
display: flex | inline-flex; order: <integer>;
flex-direction: row | row-reverse | column | flex-grow: <number>;
column-reverse;
flex-shrink: <number>;
flex-wrap: wrap | nowrap | wrap-reverse;
flex-basis: <length> | auto;
flex-flow (shorthand for flex-direction and flex-
wrap) flex: shorthand for grow, shrink, and
basis (default: 0 1 auto)
justify-content: flex-start | flex-end | center |
space-between | space-around | space-evenly; align-self: overrides alignment set on
parent
align-items: flex-start | flex-end | center |
baseline | stretch;
align-content (cross axis - adjust to largest
item): flex-start | flex-end | center | stretch |
space-between | space-around;

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox grid
. R O W / C O N TA I N E R
ITEM/ ITEM/ ITEM/ ITEM/
.COL-1 .COL-1 .COL-1 .COL-1

<div class=“row”>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
</div>
.row { .col-1 {
display: flex;
flex-flow: row wrap; flex-basis: 24%;
justify-content: center; /* desktop */
gap: 1%;
} flex-basis: 48%;
/* tablet */

flex-basis: 98%;
/* phone */

}
/* rearranging the columns */

.col-push-1 {
order: 2;
}
.col-pull-3 {
order: 1;
}

You might also like