http://thenounproject.com/term/browser/16164/
As web developers, I feel that our
work is taken for granted.
It is a tough job.
Slide 3
Slide 3 text
teehanlax.com
This is bold claim to make, yet this is what
we do everyday as developers.
Slide 4
Slide 4 text
2014
2000
1990
2010
Over the history of the web, there
had been many great
developments.
Slide 5
Slide 5 text
Once upon a time,
the web didn’t look
as impressive as today’s.
Slide 6
Slide 6 text
2014
2000
1990
2010
At some points in history, many
brilliant minds were able to come
up with great standards in the web.
Slide 7
Slide 7 text
HTML4.01
Specification
w3.org
Slide 8
Slide 8 text
Standardizing HTML was a
monumental achievement at that
time, but we did it.
Slide 9
Slide 9 text
Standardization of
HTML4
1997
< >
Slide 10
Slide 10 text
2014
2000
1990
2010
Slide 11
Slide 11 text
At some point in history, the
“smartphone” came out.
Slide 12
Slide 12 text
http://thenounproject.com/term/iphone/23277/
The smartphone
2007
Slide 13
Slide 13 text
Actually, there were many other
smartphones before that one.
Slide 14
Slide 14 text
http://thenounproject.com/term/iphone/23277/
The smartphone
Apple iPhone
2007
Slide 15
Slide 15 text
https://www.quora.com/There-were-smartphones-before-iPhone-like-Blackberry-Nokia-N-series-etc-What-made-the-iPhone-so-successful-with-customers
But they’re better off forgotten, because
every other smartphone after that was
following the iPhone’s lead anyway.
Slide 16
Slide 16 text
2014
2000
1990
2010
Moving right along, there were many
ideas and technologies that shaped the
web as we know it today.
Slide 17
Slide 17 text
“we can use media queries
to progressively enhance
our work within different
viewing contexts.”
2010
alistapart.com
“
Slide 18
Slide 18 text
Responsive Design designed by David Waschbüsch from the Noun Project — http://thenounproject.com/term/responsive-design/64675/
Responsive design
2010
Slide 19
Slide 19 text
HTML5
Bootstrap
jQuery
Angular
Polymer
CSS3
WebGL
SVG
Canvas
Meteor
React.js
Foundation
Responsive
Node
We accomplished so much
in web development in the
past 15 years.
Web
Components
Slide 20
Slide 20 text
maps.google.com
We can bring a person from one end of the country to
another with the help of browser technology.
Slide 21
Slide 21 text
youtube.com
We can watch TV shows, movies, and funny cat videos
right in the browser.
Slide 22
Slide 22 text
atom.io
We have multiple text editor / IDE environments built
on browser technology.
Slide 23
Slide 23 text
Unreal Epic Citadel
Even games are available in the browser.
Slide 24
Slide 24 text
There is just one problem
that hasn’t been solved yet.
Slide 25
Slide 25 text
V E R T I C A L
C E N T E R I N G
Slide 26
Slide 26 text
@rstacruz
R I C O S T A . C R U Z
Slide 27
Slide 27 text
Using flexbox to
save your sanity
@rstacruz
A S H O R T T A L K B Y
R I C O S T A . C R U Z
— o n —
Slide 28
Slide 28 text
http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers?answertab=active#tab-top
14
different answers
on StackOverflow
Slide 29
Slide 29 text
.container
.box
Slide 30
Slide 30 text
.box {
vertical-align: middle;
}
What you probably
think vertical entering
is like at first
Slide 31
Slide 31 text
NOPE.
Slide 32
Slide 32 text
.box {
vertical-align: middle;
}
What did I
do wrong?
Slide 33
Slide 33 text
.container {
vertical-align: middle;
}
Maybe we can
try applying it to the
container element
Slide 34
Slide 34 text
YOU’RE NOT
EVEN TRYING.
Slide 35
Slide 35 text
.container {
vertical-align: middle;
}
What did I
do wrong again?
Slide 36
Slide 36 text
.box, .container {
vertical-align: middle;
}
Or you know what,
why not both, I’m
a bit outta options here
Slide 37
Slide 37 text
Should’ve just
used Twitter
Hoofstrap.
Did he
actually think
that’ll work?
Slide 38
Slide 38 text
Is it just one line? the line-height trick
Is it a fixed height? the position: absolute trick
with negative margins
SO… THEN USE…
Can you use a
container element?
the display: table-cell trick
Do both the container
and the box have
fixed heights?
the fixed margin-top trick
Can you use
?
oh my goodness. really?
Slide 39
Slide 39 text
display: flex
.container
flex: auto
.item
Slide 40
Slide 40 text
Flexbox is commonly
used in UI layouts.
http://cssdeck.com/labs/xbs05dza
Slide 41
Slide 41 text
IE11+
Firefox 22+
Chrome 21+
Safari 6+
iOS 7+ (4S)
Android 4.4+ (Kitkat)
2012
New flexbox support
http://caniuse.com/#search=flex
Slide 42
Slide 42 text
IE10+
Firefox 2+
Chrome 4+
Safari 3.1+
iOS 3.2+ (3GS)
Android 2.1+ (Eclair)
2006
Old flexbox support
http://caniuse.com/#search=flex
Slide 43
Slide 43 text
Flexbox is commonly
used in UI layouts.
http://cssdeck.com/labs/xbs05dza
Slide 44
Slide 44 text
.toolbar
display: flex;
.item
flex: 0 0 60px;
Flexbox is commonly
used in UI layouts.
http://cssdeck.com/labs/xbs05dza
Slide 45
Slide 45 text
.item
flex: 0 0 60px
Grow
How much it can
expand
(0=none)
Shrink
How much it can
collapse
(0=none)
Basis
What’s its default
height
Flexbox is commonly
used in UI layouts.
http://cssdeck.com/labs/xbs05dza
Slide 46
Slide 46 text
Grow
How much it can
expand
(0=none)
Shrink
How much it can
collapse
(0=none)
Basis
What’s its default
height
flex: 1 1 auto
flex: 1 0 auto
flex: 1 0 60px
flex: 0 1 70%
flex: 1 1 auto
flex: auto = 1 1 auto
flex: none = 0 0 auto
Slide 47
Slide 47 text
flex: auto
flex: 0 0 60px
Fixed height
Expandable
See:
http://cssdeck.com/labs/xbs05dza
Same as: 1 1 auto;
Slide 48
Slide 48 text
.item
margin: auto
Spacing around
Margins can be used to
space items around.
http://cssdeck.com/labs/xbs05dza
Slide 49
Slide 49 text
V E R T I C A L
C E N T E R I N G
Slide 50
Slide 50 text
.container
display: flex
You’re not gonna
believe that this
actually works
.box
margin: auto
Slide 51
Slide 51 text
Oh yes.
Slide 52
Slide 52 text
.container
justify-content: space-around
Spacing around
You can also use justify-content.
http://cssdeck.com/labs/xbs05dza
Slide 53
Slide 53 text
.container
display: flex
justify-contents: space-around
align-items: center
Vertical center
via flexbox
(styling the container)
.box
margin:
Vertically spaced
Horizontally centered
(assuming flex-direction: row)
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
You can change the orientation
(vertical or horizontal).
http://cssdeck.com/labs/xbs05dza
.container
flex-direction: column
Slide 56
Slide 56 text
You can change the orientation
(vertical or horizontal).
http://cssdeck.com/labs/xbs05dza
.container
flex-direction: row
Slide 57
Slide 57 text
You can also
change the order of items.
http://cssdeck.com/labs/xbs05dza
Slide 58
Slide 58 text
You can also
change the order of items.
http://cssdeck.com/labs/xbs05dza
.item
order: -1
Slide 59
Slide 59 text
@media (max-width: 768px)
.container
flex-direction: column
.app-icon
order: 3
Responsive menus
are now easy.
http://cssdeck.com/labs/xbs05dza
use a vertical layout, and
reorder the app icon.
on mobile,
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
@media (max-width: 768px)
.container
flex-direction: column
.app-icon
order: 3
Responsive menus
are now easy.
http://cssdeck.com/labs/xbs05dza
use a vertical layout, and
reorder the app icon.
on mobile,