SlideShare a Scribd company logo
1 of 83
Download to read offline
CSS3 Layout
February 18, 2013      by Zoe Mickley Gillenwater
In Control Orlando                       @zomigi
                                     zomigi.com
What I do
     Books                         Web
     Stunning CSS3:                Accessibility
     A Project-based Guide to      specialist at AT&T
     the Latest in CSS
                                   Visual designer
     www.stunningcss3.com
                                   CSS developer
                                   and consultant
     Flexible Web Design:
     Creating Liquid and Elastic
     Layouts with CSS
     www.flexiblewebbook.com

                                                        2
the past
table layout



               3
Problems with table layout
•   Complicated/bulky markup
•   Accessibility problems
•   Slower browser rendering
•   Rigid designs
•   Spacer gifs




                               4
the present
 float layout



                5
Problems with float layout
•   Difficulty with containment
•   Wrapping/float drop
•   Difficulty with equal-height columns
•   No float:center
•   Visual location somewhat tied to HTML
    order




                                            6
the future
a whole mess o’ CSS3



                       7
Floats of the future
http://dev.w3.org/csswg/css3-box/

• New values for float property
• New ways to contain floats
• New float-displace property




                                    8
New values for float property

  These include values like start and
  end to help with languages with RTL
  direction, but check out how the
  text wraps around this graphic
  when using the new contour
  value.
  .unicorn {
    float: right contour;
  }
  Pretty sweet, right? Almost as sweet as this rad
  unicorn pegasus.
                                                     9
New ways to contain floats
Current behavior:            New behavior:




One potential       p {
way to get this       min-height: contain-floats;
new behavior:
                    }
                                                    10
New ways to contain floats
Current behavior:            New behavior:




Another way         p {
(if element has       clear-after: right;
bottom border
or padding):        }
                                             11
New ways to contain floats
Current behavior:            New behavior:




Or maybe just:      p {
                      clear: both after;
                    }
                                             12
Current float wrap behavior
p {
  float-displace: line;
}


• Floats lay over blocks
• Lines get shortened




                              13
Here’s when that sucks




                         14
Fix with float-displace




            ul {
               float-displace: indent;
            }
                                         15
Another option for float wrap
p {
  float-displace: block;
}


• Floats do not lay over
  blocks
• Block’s width reduced




                                16
CSS3 “content-flow” modules
• Multi-column Layout: flow a box’s
  content into multiple columns in that box
• Regions: flow content into multiple,
  separate boxes
• Exclusions and Shapes: make content
  flow around and within areas in more
  intricate ways than floating



                                              17
Multi-column Layout
www.w3.org/TR/css3-multicol/


                          11.1
                                            10


          *           *                  *

*   with browser-specific prefixes

                                                  18
Regions
www.w3.org/TR/css3-regions/

article {               1
  flow-into: orlando;
}                       2
#one, #two, #three {
  flow-from: orlando;
}


                              3

                                  19
Exclusions and Shapes
http://dev.w3.org/csswg/css3-exclusions/



           Pullquotes are gonna be
           everywhere. I can feel it.

           .center {
             wrap-flow: both;
           }


                                           20
Shapes
• Use SVG-like
  syntax or image
  URL to define
  contours
• Inside shapes
  apply to all blocks
• Outside shapes
  apply to floats and
  exclusions


Image from http://coding.smashingmagazine.com/2011/12/15/six-css-
layout-features-to-look-forward-to/                                 21
but where’s my
  jetpack


                 22
CSS3 grid-related modules
•   Grid Alignment?
•   Template Layout?
•   Grid Template Layout?
•   Grid Layout—the winner!




                              23
Grid Layout
http://dev.w3.org/csswg/css3-grid-layout/


      X            X              X   X   10


                                               *

*   partially, with -ms- prefix

                                               24
Create a grid, method 1
.wrap {                    Column widths
  display: grid;
  grid-definition-columns: 200px 1fr 200px;
  grid-definition-rows: auto auto;
}
                      Row heights
IE 10 also lets you use:
-ms-grid-columns: 200px 1fr 200px;
-ms-grid-rows: auto auto;

                                              25
Empty invisible grid

      200px    1fr     200px
   auto
   auto




                               26
Place elements in that grid
nav     {   grid-column:   1 3;   grid-row:   1;   }
#main   {   grid-column:   2;     grid-row:   2;   }
aside   {   grid-column:   3;     grid-row:   2;   }
#news   {   grid-column:   1;     grid-row:   2;   }


                           nav



               news        main     aside


                                                       27
Create a grid, method 2
.wrap {
  display: grid;
  grid-template: "a a a a"
                 "b c c d"
}

                     a


          b          c       d


                                 28
Create a grid, method 2
.wrap {
  display: grid;
  grid-template: "head head head head"
                 "side1 main main side2"
}

                    head


         side1      main      side2


                                           29
Place elements in that grid
nav     {   grid-area:   "head" }
#main   {   grid-area:   "main" }
aside   {   grid-area:   "side2" }
#news   {   grid-area:   "side1" }


                         head=nav


            side1=                   side2=
                     main=#main
            #news                     aside

                                              30
Rearrange the grid
@media screen and (max-width:500px) {
  .wrap { grid-template: "main side2"
                         "side1 side1"
                         "head head"
  }
}               main  side2


                   side1


                   head
                                         31
demo time


            32
Flexible Box Layout
www.w3.org/TR/css3-flexbox/


                 X         12.1        X   X
                       †
           *

*
†
    with -webkit- prefix
    can be switched on in version 18+
                                                33
Which is which?

2009          display:box                                     X

2011          display:flexbox                                 eh


Now           display:flex                                    



See also http://css-tricks.com/old-flexbox-and-new-flexbox/
                                                                   34
How flexbox works
• Make boxes automatically grow to fill
  space or shrink to avoid overflow
• Give boxes proportional measurements
• Lay out boxes in any direction
• Align boxes on any side
• Place boxes out of order from HTML




                                          35
Let’s try
flexbox
out on
this page




            36
Original CSS




.feature {
   float: left;
   width: 30%;
   margin: 0 4.5% 0 0;
   padding: 130px 0 0 0;
}
                           37
Create a flex container
<div class="feature-wrap">
   <div class="feature" id="feature-candy">
      ...</div>
   <div class="feature" id="feature-pastry">
      ...</div>
   <div class="feature" id="feature-dessert">
      ...</div>
</div>

.feature-wrap {         Make sure to also add
   display: flex;       the prefixed values and
}                       properties for now.
                                                  38
How the CSS might really look
.feature-wrap {
                           Optional for IE 10
  display: -ms-flexbox;
  display: -moz-flex;      Optional for testing in
                           FF 18 and 19
  display: -webkit-flex;
  display: flex;           Needed for Chrome and
                           (someday) Safari
}




                                                     39
Specify direction of flex items
.feature-wrap {
   display: flex;
   flex-direction: row;      Default value
}

Switch to vertical stacking:
@media screen and (max-width:500px) {
  .feature-wrap {
     display: flex;
     flex-direction: column;
  }
}                                            40
Setting a point of reference

             Main axis
Cross axis




                         for flex­direction: row

                                                   41
Make flex items flexible
.feature {
   flex: 1 1 0px;            flex grow factor
   margin-right: 40px;
   padding: 130px 0 0 0; }




                                                42
Make flex items flexible
.feature {
   flex: 1 1 0px;            flex shrink factor
   margin-right: 40px;
   padding: 130px 0 0 0; }




                                                  43
Make flex items flexible
.feature {
   flex: 1 1 0px;            flex basis
   margin-right: 40px;
   padding: 130px 0 0 0; }




                                          44
Make flex items flexible
.feature {
   flex: 1 1 0px;
   margin-right: 40px;
   padding: 130px 0 0 0; }

Same as:
.feature {
   flex: 1;
   margin-right: 40px;
   padding: 130px 0 0 0; }


                             45
Add a fourth feature box
<div class="feature-wrap">
   <div class="feature" id="feature-candy">
      ...</div>
   <div class="feature" id="feature-pastry">
      ...</div>
   <div class="feature" id="feature-dessert">
      ...</div>
  <div class="feature" id="feature-bread">
      ...</div>
</div>


                                                46
All boxes adjust in width




                            47
Don’t need to do this anymore
.2up .feature { width: 45% }
.3up .feature { width: 30% }
.4up .feature { width: 22% }




                                48
Highlight a sale category
.sale {
   padding: 130px 20px 20px 20px;
   border-radius: 3px;
   background-color: hsla(0,0%,100%,.4);
}


What percentage width would I set to
make this twice as wide as other boxes,
if I weren’t using flex?

                                           49
Make sale box twice as wide




.sale {
  flex: 2;
  padding: 130px 20px 20px 20px;
  border-radius: 3px;
  background-color: hsla(0,0%,100%,.4);
}
                                          50
Default equal-height columns!
.feature-wrap {
  display: flex;
  align-items: stretch;
}


This is the default value, so we don’t need
to actually set this property, but this shows
you what it looks like.


                                                51
Vertical centering with ease!




.feature-wrap {
  display: flex;
  align-items: center;
}
                                52
align-items
(2011: flex­align)
                           stretch
                            (stretch)




    flex-start             flex-end
      (start)                (end)


                     foo       foo      foo



      center               baseline
      (center)             (baseline)
                                              53
Visual order = HTML order




                            54
Move sale box to front of line
.sale {
  order: -1;
  flex: 2;
  padding: 130px 20px 20px 20px;
  border-radius: 3px;
  background-color: hsla(0,0%,100%,.4);
}


Default order value is 0 for all flex items,
so -1 moves this one before others
                                               55
New visual order, same HTML




                              56
Accessibility implications
Pro                        Con
Keep content in logical    Focus/tab order won’t
order in HTML instead of   always match expected
structuring HTML to        order, may jump around
achieve visual layout      seemingly randomly




                                                    57
Tab order = HTML order



    2       1    3   4




                         58
Expected tab order
1

2           4            8
                     5
3           6        7



                     9
                             59
Frustrating mystery tab order
1

8            3               7
                      4
9            6        5



                      2
                                    60
use the order property for
         good
         not evil
            


                             61
Columns are too narrow




                         62
Create multi-line flex container
.feature-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.sale {
  order: -1;
  flex: 1 1 100%;
  margin: 0 0 20px 0;
  padding: 130px 20px 20px 20px;
  border-radius: 3px;
  background-color: hsla(0,0%,100%,.4);
}                                         63
Flex items can now wrap




                          64
Change icon position
.sale {
  order: -1;
  flex: 1 1 100%;
  margin: 0 0 20px 0;
  padding: 20px 20px 1px 170px;
  border-radius: 3px;
  background-color: hsla(0,0%,100%,.4);
  background-position: 20px 0;
}



                                          65
Final layout




               66
use flexbox now for
progressive enhancement
            


                          67
How can I make this form:
• Display on a single line with image
• Vertically centered with image
• Span full-width of container




                                        68
Let’s try inline-block
#order img, #order form {
  display: inline-block;
  vertical-align: middle; }

<div id="order">
  <img src="cake.png"...>
  <form>
    <label for="message">...</label>
    <input type="text" id="message"...>
    <input type="submit" value="add to cart">
  </form>
</div>
                                                69
Inline-block achieves:
 Display on a single line with image
 Vertically centered with image
X Span full-width of container




                                        70
Different units make life hard
  Pixels
  Ems
  Some mystery percentage




                                 71
Make the text input flex
#order, #order form {       Make outer div and form
   display: flex;           into flex containers
   align-items: center; }   Vertically center kiddos
#order form {
                            Make form take up all
   flex: 1; }               space next to image
#order #message {
                            Make text input take up
   flex: 1;                 all space in form left
   min-width: 7em;          after label and button
   margin: 0 5px; }         But don’t let it get
                            crazy-small


                                                       72
Use inline-block with flexbox




                                73
Use inline-block with flexbox
#order img, #order form {
  display: inline-block;
  vertical-align: middle; }
#order, #order form {
   display: flex;
   align-items: center; }
#order form {
   flex: 1; }
#order #message {
   flex: 1;
   min-width: 7em;
   margin: 0 5px; }             74
Full-width nav bar




nav ul {              nav li {
  display: table;       display: table-cell;
  width: 100%;          text-align: center; }
  margin: 0;
  padding: 0;
  list-style: none; }
                                            75
Not so hot with no backgrounds
           Uneven spacing




         Don’t like these gaps


                                 76
Even spacing with flexbox




nav ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none; }
                                    77
justify-content
(2011: flex­pack)
                      flex-start
                        (start)




       center         flex-end
        (center)         (end)




    space-between   space-around
        (justify)     (distribute)
                                     78
Use inline-block with flexbox




                                79
Use inline-block with flexbox
nav ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
nav li {
   display: inline-block;
}
                                    80
Or use Modernizr script
http://modernizr.com
nav ul {               nav li {
   display: table;        display: table-cell;
   width: 100%;        }
   margin: 0;          .flexbox nav li {
   padding: 0;            display: list-item;
   list-style: none;   }
}
.flexbox nav ul {
   display: flex;
}
                                             81
prepare for the
   future

                  82
Learn more
Download slides and get links at
http://zomigi.com/blog/css3-layout




Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
zomigi.com | stunningcss3.com | flexiblewebbook.com

Title photo by Gilderic Photography (http://www.flickr.com/photos/gilderic/6885830288/)
Rocket icon by Jason Peters, fire icon by James Bond Icons, both from The Noun Project    83

More Related Content

What's hot

What's hot (20)

Css box-sizing
Css box-sizingCss box-sizing
Css box-sizing
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)
 
Css and its types
Css and its typesCss and its types
Css and its types
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
Css
CssCss
Css
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating NavigationCSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
 
Css properties
Css propertiesCss properties
Css properties
 
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)
 
CSS Layouting #4 : Float
CSS Layouting #4 : FloatCSS Layouting #4 : Float
CSS Layouting #4 : Float
 
Css animation
Css animationCss animation
Css animation
 
Css Text Formatting
Css Text FormattingCss Text Formatting
Css Text Formatting
 
CSS Box Model Presentation
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model Presentation
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
2. html attributes
2. html attributes2. html attributes
2. html attributes
 
Shadows Effects in CSS
Shadows Effects in CSSShadows Effects in CSS
Shadows Effects in CSS
 
Css pseudo-classes
Css pseudo-classesCss pseudo-classes
Css pseudo-classes
 
Introduction to Javascript By Satyen
Introduction to Javascript By  SatyenIntroduction to Javascript By  Satyen
Introduction to Javascript By Satyen
 

Similar to CSS3 Layout

The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS LayoutZoe Gillenwater
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSRachel Andrew
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFRachel Andrew
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceRachel Andrew
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?Rachel Andrew
 
The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?Rachel Andrew
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsRachel Andrew
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Rachel Andrew
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRachel Andrew
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayRachel Andrew
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSSRachel Andrew
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Rachel Andrew
 
New layout models on the Web (Mobile World Congress 2014)
New layout models on the Web (Mobile World Congress 2014)New layout models on the Web (Mobile World Congress 2014)
New layout models on the Web (Mobile World Congress 2014)Igalia
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Rachel Andrew
 
Solving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and FriendsSolving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and FriendsFITC
 
The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)Peter Gasston
 

Similar to CSS3 Layout (20)

The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS Layout
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP Conference
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?
 
The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of Layout
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS Grid
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
 
CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!
 
New layout models on the Web (Mobile World Congress 2014)
New layout models on the Web (Mobile World Congress 2014)New layout models on the Web (Mobile World Congress 2014)
New layout models on the Web (Mobile World Congress 2014)
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
 
Solving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and FriendsSolving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and Friends
 
The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)
 

More from Zoe Gillenwater

Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Zoe Gillenwater
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Zoe Gillenwater
 
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Zoe Gillenwater
 
Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Zoe Gillenwater
 
Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)Zoe Gillenwater
 
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)Zoe Gillenwater
 
Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)Zoe Gillenwater
 
Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Zoe Gillenwater
 
CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)Zoe Gillenwater
 
Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Zoe Gillenwater
 
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Zoe Gillenwater
 
CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)Zoe Gillenwater
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)Zoe Gillenwater
 
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)Zoe Gillenwater
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Zoe Gillenwater
 
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)Zoe Gillenwater
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Zoe Gillenwater
 
Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into PracticeZoe Gillenwater
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive LayoutsZoe Gillenwater
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive LayoutsZoe Gillenwater
 

More from Zoe Gillenwater (20)

Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
 
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)
 
Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)
 
Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)
 
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
 
Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)
 
Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)
 
CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)
 
Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)
 
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)
 
CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
 
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
 
Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into Practice
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
 

Recently uploaded

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 

Recently uploaded (18)

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 

CSS3 Layout

  • 1. CSS3 Layout February 18, 2013 by Zoe Mickley Gillenwater In Control Orlando @zomigi zomigi.com
  • 2. What I do Books Web Stunning CSS3: Accessibility A Project-based Guide to specialist at AT&T the Latest in CSS Visual designer www.stunningcss3.com CSS developer and consultant Flexible Web Design: Creating Liquid and Elastic Layouts with CSS www.flexiblewebbook.com 2
  • 4. Problems with table layout • Complicated/bulky markup • Accessibility problems • Slower browser rendering • Rigid designs • Spacer gifs 4
  • 6. Problems with float layout • Difficulty with containment • Wrapping/float drop • Difficulty with equal-height columns • No float:center • Visual location somewhat tied to HTML order 6
  • 8. Floats of the future http://dev.w3.org/csswg/css3-box/ • New values for float property • New ways to contain floats • New float-displace property 8
  • 9. New values for float property These include values like start and end to help with languages with RTL direction, but check out how the text wraps around this graphic when using the new contour value. .unicorn { float: right contour; } Pretty sweet, right? Almost as sweet as this rad unicorn pegasus. 9
  • 10. New ways to contain floats Current behavior: New behavior: One potential p { way to get this min-height: contain-floats; new behavior: } 10
  • 11. New ways to contain floats Current behavior: New behavior: Another way p { (if element has clear-after: right; bottom border or padding): } 11
  • 12. New ways to contain floats Current behavior: New behavior: Or maybe just: p { clear: both after; } 12
  • 13. Current float wrap behavior p { float-displace: line; } • Floats lay over blocks • Lines get shortened 13
  • 14. Here’s when that sucks 14
  • 15. Fix with float-displace ul { float-displace: indent; } 15
  • 16. Another option for float wrap p { float-displace: block; } • Floats do not lay over blocks • Block’s width reduced 16
  • 17. CSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into multiple, separate boxes • Exclusions and Shapes: make content flow around and within areas in more intricate ways than floating 17
  • 18. Multi-column Layout www.w3.org/TR/css3-multicol/   11.1  10 * * * * with browser-specific prefixes 18
  • 19. Regions www.w3.org/TR/css3-regions/ article { 1 flow-into: orlando; } 2 #one, #two, #three { flow-from: orlando; } 3 19
  • 20. Exclusions and Shapes http://dev.w3.org/csswg/css3-exclusions/ Pullquotes are gonna be everywhere. I can feel it. .center { wrap-flow: both; } 20
  • 21. Shapes • Use SVG-like syntax or image URL to define contours • Inside shapes apply to all blocks • Outside shapes apply to floats and exclusions Image from http://coding.smashingmagazine.com/2011/12/15/six-css- layout-features-to-look-forward-to/ 21
  • 22. but where’s my jetpack 22
  • 23. CSS3 grid-related modules • Grid Alignment? • Template Layout? • Grid Template Layout? • Grid Layout—the winner! 23
  • 24. Grid Layout http://dev.w3.org/csswg/css3-grid-layout/ X X X X 10 * * partially, with -ms- prefix 24
  • 25. Create a grid, method 1 .wrap { Column widths display: grid; grid-definition-columns: 200px 1fr 200px; grid-definition-rows: auto auto; } Row heights IE 10 also lets you use: -ms-grid-columns: 200px 1fr 200px; -ms-grid-rows: auto auto; 25
  • 26. Empty invisible grid 200px 1fr 200px auto auto 26
  • 27. Place elements in that grid nav { grid-column: 1 3; grid-row: 1; } #main { grid-column: 2; grid-row: 2; } aside { grid-column: 3; grid-row: 2; } #news { grid-column: 1; grid-row: 2; } nav news main aside 27
  • 28. Create a grid, method 2 .wrap { display: grid; grid-template: "a a a a" "b c c d" } a b c d 28
  • 29. Create a grid, method 2 .wrap { display: grid; grid-template: "head head head head" "side1 main main side2" } head side1 main side2 29
  • 30. Place elements in that grid nav { grid-area: "head" } #main { grid-area: "main" } aside { grid-area: "side2" } #news { grid-area: "side1" } head=nav side1= side2= main=#main #news aside 30
  • 31. Rearrange the grid @media screen and (max-width:500px) { .wrap { grid-template: "main side2" "side1 side1" "head head" } } main side2 side1 head 31
  • 33. Flexible Box Layout www.w3.org/TR/css3-flexbox/  X 12.1 X X † * * † with -webkit- prefix can be switched on in version 18+ 33
  • 34. Which is which? 2009 display:box X 2011 display:flexbox eh Now display:flex  See also http://css-tricks.com/old-flexbox-and-new-flexbox/ 34
  • 35. How flexbox works • Make boxes automatically grow to fill space or shrink to avoid overflow • Give boxes proportional measurements • Lay out boxes in any direction • Align boxes on any side • Place boxes out of order from HTML 35
  • 37. Original CSS .feature { float: left; width: 30%; margin: 0 4.5% 0 0; padding: 130px 0 0 0; } 37
  • 38. Create a flex container <div class="feature-wrap"> <div class="feature" id="feature-candy"> ...</div> <div class="feature" id="feature-pastry"> ...</div> <div class="feature" id="feature-dessert"> ...</div> </div> .feature-wrap { Make sure to also add display: flex; the prefixed values and } properties for now. 38
  • 39. How the CSS might really look .feature-wrap { Optional for IE 10 display: -ms-flexbox; display: -moz-flex; Optional for testing in FF 18 and 19 display: -webkit-flex; display: flex; Needed for Chrome and (someday) Safari } 39
  • 40. Specify direction of flex items .feature-wrap { display: flex; flex-direction: row; Default value } Switch to vertical stacking: @media screen and (max-width:500px) { .feature-wrap { display: flex; flex-direction: column; } } 40
  • 41. Setting a point of reference Main axis Cross axis for flex­direction: row 41
  • 42. Make flex items flexible .feature { flex: 1 1 0px; flex grow factor margin-right: 40px; padding: 130px 0 0 0; } 42
  • 43. Make flex items flexible .feature { flex: 1 1 0px; flex shrink factor margin-right: 40px; padding: 130px 0 0 0; } 43
  • 44. Make flex items flexible .feature { flex: 1 1 0px; flex basis margin-right: 40px; padding: 130px 0 0 0; } 44
  • 45. Make flex items flexible .feature { flex: 1 1 0px; margin-right: 40px; padding: 130px 0 0 0; } Same as: .feature { flex: 1; margin-right: 40px; padding: 130px 0 0 0; } 45
  • 46. Add a fourth feature box <div class="feature-wrap"> <div class="feature" id="feature-candy"> ...</div> <div class="feature" id="feature-pastry"> ...</div> <div class="feature" id="feature-dessert"> ...</div> <div class="feature" id="feature-bread"> ...</div> </div> 46
  • 47. All boxes adjust in width 47
  • 48. Don’t need to do this anymore .2up .feature { width: 45% } .3up .feature { width: 30% } .4up .feature { width: 22% } 48
  • 49. Highlight a sale category .sale { padding: 130px 20px 20px 20px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); } What percentage width would I set to make this twice as wide as other boxes, if I weren’t using flex? 49
  • 50. Make sale box twice as wide .sale { flex: 2; padding: 130px 20px 20px 20px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); } 50
  • 51. Default equal-height columns! .feature-wrap { display: flex; align-items: stretch; } This is the default value, so we don’t need to actually set this property, but this shows you what it looks like. 51
  • 52. Vertical centering with ease! .feature-wrap { display: flex; align-items: center; } 52
  • 53. align-items (2011: flex­align) stretch (stretch) flex-start flex-end (start) (end) foo foo foo center baseline (center) (baseline) 53
  • 54. Visual order = HTML order 54
  • 55. Move sale box to front of line .sale { order: -1; flex: 2; padding: 130px 20px 20px 20px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); } Default order value is 0 for all flex items, so -1 moves this one before others 55
  • 56. New visual order, same HTML 56
  • 57. Accessibility implications Pro Con Keep content in logical Focus/tab order won’t order in HTML instead of always match expected structuring HTML to order, may jump around achieve visual layout seemingly randomly 57
  • 58. Tab order = HTML order 2 1 3 4 58
  • 59. Expected tab order 1 2 4 8 5 3 6 7 9 59
  • 60. Frustrating mystery tab order 1 8 3 7 4 9 6 5 2 60
  • 61. use the order property for good not evil  61
  • 62. Columns are too narrow 62
  • 63. Create multi-line flex container .feature-wrapper { display: flex; flex-wrap: wrap; } .sale { order: -1; flex: 1 1 100%; margin: 0 0 20px 0; padding: 130px 20px 20px 20px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); } 63
  • 64. Flex items can now wrap 64
  • 65. Change icon position .sale { order: -1; flex: 1 1 100%; margin: 0 0 20px 0; padding: 20px 20px 1px 170px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); background-position: 20px 0; } 65
  • 67. use flexbox now for progressive enhancement  67
  • 68. How can I make this form: • Display on a single line with image • Vertically centered with image • Span full-width of container 68
  • 69. Let’s try inline-block #order img, #order form { display: inline-block; vertical-align: middle; } <div id="order"> <img src="cake.png"...> <form> <label for="message">...</label> <input type="text" id="message"...> <input type="submit" value="add to cart"> </form> </div> 69
  • 70. Inline-block achieves:  Display on a single line with image  Vertically centered with image X Span full-width of container 70
  • 71. Different units make life hard Pixels Ems Some mystery percentage 71
  • 72. Make the text input flex #order, #order form { Make outer div and form display: flex; into flex containers align-items: center; } Vertically center kiddos #order form { Make form take up all flex: 1; } space next to image #order #message { Make text input take up flex: 1; all space in form left min-width: 7em; after label and button margin: 0 5px; } But don’t let it get crazy-small 72
  • 73. Use inline-block with flexbox 73
  • 74. Use inline-block with flexbox #order img, #order form { display: inline-block; vertical-align: middle; } #order, #order form { display: flex; align-items: center; } #order form { flex: 1; } #order #message { flex: 1; min-width: 7em; margin: 0 5px; } 74
  • 75. Full-width nav bar nav ul { nav li { display: table; display: table-cell; width: 100%; text-align: center; } margin: 0; padding: 0; list-style: none; } 75
  • 76. Not so hot with no backgrounds Uneven spacing Don’t like these gaps 76
  • 77. Even spacing with flexbox nav ul { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; } 77
  • 78. justify-content (2011: flex­pack) flex-start (start) center flex-end (center) (end) space-between space-around (justify) (distribute) 78
  • 79. Use inline-block with flexbox 79
  • 80. Use inline-block with flexbox nav ul { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; text-align: center; } nav li { display: inline-block; } 80
  • 81. Or use Modernizr script http://modernizr.com nav ul { nav li { display: table; display: table-cell; width: 100%; } margin: 0; .flexbox nav li { padding: 0; display: list-item; list-style: none; } } .flexbox nav ul { display: flex; } 81
  • 82. prepare for the future 82
  • 83. Learn more Download slides and get links at http://zomigi.com/blog/css3-layout Zoe Mickley Gillenwater @zomigi design@zomigi.com zomigi.com | stunningcss3.com | flexiblewebbook.com Title photo by Gilderic Photography (http://www.flickr.com/photos/gilderic/6885830288/) Rocket icon by Jason Peters, fire icon by James Bond Icons, both from The Noun Project 83