SlideShare a Scribd company logo
1 of 61
Download to read offline
The Future of
                        CSS Layout
October 22, 2012         by Zoe Mickley Gillenwater
Future of Web Design                      @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
Advantages of floats in layout
• Less HTML than tables
• More flexibility to change layout than tables
• Can change visual order to not match
  HTML (somewhat)
• Other content aware of floats' presence
• Can use clear to get blocks out of the way




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




                                         7
?
 what are the
alternatives



                8
Alternative: display inline-block


                                         
                                                 *

*   only partial support in IE 7 and 6


                                                 9
I wish my parents
would stop treating
 me like I’m inline.
Can’t they see I’m a
     block now?




                       10
Use: centered nav bar
nav ul {
  margin: 0;
  padding: 0;
  border-bottom: 3px solid #fff;
   list-style: none;
   text-align: center; }
nav li {
   display: inline-block;
   vertical-align: bottom;
   margin: 0 .2em;
   padding: .3em .5em; ... }
                                   11
Use: centered nav bar




•   List horizontally centered
•   Links aligned on bottom
•   Links have top and bottom padding
•   Links can be different heights
•   List contains links (see its bottom border)
                                                  12
Alternative: display table-cell


                                 
                                         *

*   only in IE 8 and later


                                         13
How table display works
• Makes boxes act like table equivalents
  • Example: boxes with display:table-cell
    act like <td> and sit on same line
• Good for grid-like layouts
• Disadvantage: tied to HTML order




                                             14
Use: hybrid fixed-fluid layout
section {
   display: table;
   table-layout: fixed;
   width: 100%; }
article {
   display: table-cell;
   padding: 10px;
   vertical-align: top; }
article.fixed {
   width:250px; }


                                 15
Use: hybrid fixed-fluid layout




                                 16
the future
a whole bunch of CSS3



                        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



                                              18
Grid Template Layout
http://dev.w3.org/csswg/css3-layout/


      X            X   X      X        10


                                            *

*   with -ms- prefix

                                            19
How grid template works
Define invisible grid of rows and columns
and specify which pieces of content go into
which “slot”

body {
  grid: "a a a a"                   a
        "b c c d"
}                              b   c    d
nav     {   flow:   a   }
#main   {   flow:   c   }
aside   {   flow:   d   }
#news   {   flow:   b   }
                                              20
How grid template works
Define invisible grid of rows and columns
and specify which pieces of content go into
which “slot”

body {
  grid: "c d"                  c       d
         "b b"
         "a a"           
}
                                   b
nav    { flow:   a   }
#main { flow:    c   }
aside { flow:    d   }
#news { flow:    b   }             a
                                              21
How grid template works
Use ::slot to style slots with:
•   overflow             •   background properties
•   margin properties    •   column properties
•   padding properties   •   vertical-align
•   border properties    •   writing-mode
•   box-shadow           •   direction
•   box-decoration-break

For example: body::slot(c) {
               background: #7FD13B;
               vertical-align: top;
             }
                                                     22
Flexible Box Layout
www.w3.org/TR/css3-flexbox/


     21            X           12.1       X      X
                           †
           *

*
†
    with -webkit- prefix
    can be switched on in version 18 nightlies
                                                     23
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




                                          24
Let’s try
flexbox
out on
this page




            25
Original CSS




.feature {
   float: left;
  width: 30%;
  margin: 0 4.5% 0 0;
  padding: 130px 0 0 0;
}
                          26
Create a flex container
<div id="features-wrapper">
   <div class="feature" id="feature-candy">
     ...</div>
   <div class="feature" id="feature-pastry">
     ...</div>
   <div class="feature" id="feature-dessert">
     ...</div>
</div>
                         Make sure to add the
#features-wrapper {      -moz, -ms, and -webkit
                         prefixed values and
   display: flex;        properties in real life!
}                                                 27
Specify direction of flex items
#features-wrapper {
   display: flex;
   flex-direction: row;                 default value
}

Could switch to vertical stacking in mobile/narrow-screen
media query:
#features-wrapper {
   display: flex;
   flex-direction: column;
}

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




                            29
Make flex items flexible
.feature {
   flex: 1 1 0px;
   margin-right: 40px;      flex basis
  padding: 130px 0 0 0; }
                            flex shrink factor
Same as:
                            flex grow factor
.feature {
  flex: 1;
  margin-right: 40px;
  padding: 130px 0 0 0; }


                                                 30
Add a fourth feature box
<div id="features-wrapper">
   <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>


                                                31
All boxes adjust in width




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




                                    33
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?

                                                  34
Make sale box twice as wide




.sale {
  flex: 2;
  padding: 130px 20px 20px 20px;
  border-radius: 3px;
  background-color: hsla(0,0%,100%,.4);
}
                                          35
Default equal-height columns!
#features-wrapper {
  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.


                                                 36
Vertical centering with ease!




#features-wrapper {
  display: flex;
  align-items: center;
}
                                37
Visual order = HTML order




                            38
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
                                                  39
New visual order, same HTML




                              40
Accessibility implications
• Pro: keep content in logical order in HTML
  instead of structuring HTML to achieve
  visual layout
• Con: focus/tab order won’t always match
  expected order, may jump around
  seemingly randomly




                                               41
Columns are too narrow




                         42
Create multi-line flex container
#features-wrapper {
  display: flex;
  flex-wrap: wrap;         Allow children flex items
                           to wrap to multiple lines
}
.sale {
  order: -1;               Make box fill line
  flex: 1 1 100%;          Remove gap to right,
  margin: 0 0 20px 0;      add space below
  padding: 130px 20px 20px 20px;
  border-radius: 3px;
  background-color: hsla(0,0%,100%,.4);
}                                                    43
Flex items can now wrap




                          44
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;
}



                                          45
Final layout




               46
use flexbox now for
progressive enhancement
            
                          47
How can I make this form:
• Display on a single line with image
• Vertically centered with image
• Span full-width of container




                                        48
Inline-block achieves:
Display on a single line with image
Vertically centered with image
X Span full-width of container




                                       49
Different units make life hard
  Pixels
  Ems
  Some mystery percentage




                                 50
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


                                                          51
Use inline-block with flexbox




                                52
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; }              53
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; }
                                            54
Not so hot with no backgrounds
            Uneven spacing




          Don’t like these gaps


                                  55
Even spacing with flexbox




nav ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none; }
                                    56
Use inline-block with flexbox




                                57
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;
}
                                    58
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;
}
                                             59
go forth and
practice
    
               60
Learn more
Download slides and get links at
http://zomigi.com/blog/future-css-layout-fowd




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 designed by Jason Peters from The Noun Project                                     61

More Related Content

What's hot

CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzRachel Andrew
 
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutAn Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutRachel Andrew
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Fluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS LayoutFluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS LayoutRachel Andrew
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?Rachel Andrew
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout Rachel Andrew
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxRachel Andrew
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutRachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersRachel Andrew
 
An Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real WorldAn Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real WorldRachel Andrew
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Rachel Andrew
 
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
 
CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016Rachel Andrew
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatRachel Andrew
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutRachel Andrew
 
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutRachel Andrew
 
Making the most of New CSS Layout
Making the most of New CSS LayoutMaking the most of New CSS Layout
Making the most of New CSS LayoutRachel Andrew
 

What's hot (20)

CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
 
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutAn Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Fluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS LayoutFluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS Layout
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
 
An Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real WorldAn Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real World
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!
 
CSS Grid vs. Flexbox
CSS Grid vs. FlexboxCSS Grid vs. Flexbox
CSS Grid vs. Flexbox
 
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
 
CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS Layout
 
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
Making the most of New CSS Layout
Making the most of New CSS LayoutMaking the most of New CSS Layout
Making the most of New CSS Layout
 

Viewers also liked

Html5, css3 and the future of web technologies
Html5, css3 and the future of web technologiesHtml5, css3 and the future of web technologies
Html5, css3 and the future of web technologiesVõ Duy Tuấn
 
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Davide Di Pumpo
 
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
 
Mario casas
Mario casasMario casas
Mario casasrubia98
 
XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본
XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본
XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본XpressEngine
 
4주 CSS Layout
4주 CSS Layout4주 CSS Layout
4주 CSS Layout지수 윤
 
Graph Databases - Where Do We Do the Modeling Part?
Graph Databases - Where Do We Do the Modeling Part?Graph Databases - Where Do We Do the Modeling Part?
Graph Databases - Where Do We Do the Modeling Part?DATAVERSITY
 
7 Creativity Principles For User Experience Teams
7 Creativity Principles For User Experience Teams7 Creativity Principles For User Experience Teams
7 Creativity Principles For User Experience TeamsTom Illmensee
 
What is a good technology stack today?
What is a good technology stack today?What is a good technology stack today?
What is a good technology stack today?Netlight Consulting
 
Frames tables forms
Frames tables formsFrames tables forms
Frames tables formsnobel mujuji
 
Introdution to HTML 5
Introdution to HTML 5Introdution to HTML 5
Introdution to HTML 5onkar_bhosle
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5Steven Chipman
 

Viewers also liked (20)

Html5, css3 and the future of web technologies
Html5, css3 and the future of web technologiesHtml5, css3 and the future of web technologies
Html5, css3 and the future of web technologies
 
CSS Layout
CSS LayoutCSS Layout
CSS Layout
 
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016
 
El futuro del css
El futuro del cssEl futuro del css
El futuro del css
 
El futuro del css
El futuro del cssEl futuro del css
El futuro del css
 
Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)
 
Taylor lautner
Taylor lautnerTaylor lautner
Taylor lautner
 
Oso panda
Oso pandaOso panda
Oso panda
 
Mario casas
Mario casasMario casas
Mario casas
 
XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본
XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본
XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본
 
4주 CSS Layout
4주 CSS Layout4주 CSS Layout
4주 CSS Layout
 
Ansiedad Y Estres
Ansiedad Y EstresAnsiedad Y Estres
Ansiedad Y Estres
 
Graph Databases - Where Do We Do the Modeling Part?
Graph Databases - Where Do We Do the Modeling Part?Graph Databases - Where Do We Do the Modeling Part?
Graph Databases - Where Do We Do the Modeling Part?
 
7 Creativity Principles For User Experience Teams
7 Creativity Principles For User Experience Teams7 Creativity Principles For User Experience Teams
7 Creativity Principles For User Experience Teams
 
What is a good technology stack today?
What is a good technology stack today?What is a good technology stack today?
What is a good technology stack today?
 
Frames tables forms
Frames tables formsFrames tables forms
Frames tables forms
 
JavaScript Operators
JavaScript OperatorsJavaScript Operators
JavaScript Operators
 
Introdution to HTML 5
Introdution to HTML 5Introdution to HTML 5
Introdution to HTML 5
 
Html 5
Html 5Html 5
Html 5
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 

Similar to The Future of CSS Layout

The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
 
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
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive LayoutsZoe Gillenwater
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFRachel Andrew
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive LayoutsZoe Gillenwater
 
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
 
#2 - CSS Layouts Overview
#2 - CSS Layouts Overview#2 - CSS Layouts Overview
#2 - CSS Layouts Overviewiloveigloo
 
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvvZahouAmel1
 
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
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksRandy Connolly
 
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
 
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
 
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
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSSRachel Andrew
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and ReadyDenise Jacobs
 
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
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & FriendsRachel 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
 

Similar to The Future of CSS Layout (20)

CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of 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
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
 
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!
 
#2 - CSS Layouts Overview
#2 - CSS Layouts Overview#2 - CSS Layouts Overview
#2 - CSS Layouts Overview
 
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
 
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)
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
 
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
 
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
 
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
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
 
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3
 
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
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
 
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
 

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
 
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
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignZoe Gillenwater
 
CSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experienceCSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experienceZoe 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)
 
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
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
CSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experienceCSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experience
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 

Recently uploaded

18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...Payal Garg #K09
 
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTUREGBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURECHANDRAKIRTISINGH
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Solutions For Social Media App Development (1).pptx
Solutions For Social Media App Development (1).pptxSolutions For Social Media App Development (1).pptx
Solutions For Social Media App Development (1).pptxBrain Inventory
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样yhavx
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement 210303105569
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质yzeoq
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisPeclers Paris
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfSarbjit Bahga
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign designAkankshaD3
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design1508 A/S
 
Rise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintActionRise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintActionVictoria Gaitskell
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证ugzga
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Edward Boginsky's Trailblazing Contributions to Printing
Edward Boginsky's Trailblazing Contributions to PrintingEdward Boginsky's Trailblazing Contributions to Printing
Edward Boginsky's Trailblazing Contributions to PrintingEdward Boginsky
 
Branding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfBranding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfAlexandra Plesner
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...mikehavy0
 
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...drmarathore
 

Recently uploaded (20)

18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
18+ Young ℂall Girls Vadodara Book Esha 7427069034 Top Class ℂall Girl Serviℂ...
 
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTUREGBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
 
Solutions For Social Media App Development (1).pptx
Solutions For Social Media App Development (1).pptxSolutions For Social Media App Development (1).pptx
Solutions For Social Media App Development (1).pptx
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers Paris
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design
 
Rise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintActionRise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintAction
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
 
Edward Boginsky's Trailblazing Contributions to Printing
Edward Boginsky's Trailblazing Contributions to PrintingEdward Boginsky's Trailblazing Contributions to Printing
Edward Boginsky's Trailblazing Contributions to Printing
 
Branding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfBranding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdf
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
 
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...
Abortion pills in Kuwait ☑️+966505195917( top cytotec pills)with delivery ava...
 

The Future of CSS Layout

  • 1. The Future of CSS Layout October 22, 2012 by Zoe Mickley Gillenwater Future of Web Design @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
  • 5. the present float layout 5
  • 6. Advantages of floats in layout • Less HTML than tables • More flexibility to change layout than tables • Can change visual order to not match HTML (somewhat) • Other content aware of floats' presence • Can use clear to get blocks out of the way 6
  • 7. Problems with float layout • Visual location tied to HTML order (somewhat) • Wrapping/float drop • Difficulty with containment • Difficulty with equal-height columns • No float:center 7
  • 8. ? what are the alternatives 8
  • 9. Alternative: display inline-block      * * only partial support in IE 7 and 6 9
  • 10. I wish my parents would stop treating me like I’m inline. Can’t they see I’m a block now? 10
  • 11. Use: centered nav bar nav ul { margin: 0; padding: 0; border-bottom: 3px solid #fff; list-style: none; text-align: center; } nav li { display: inline-block; vertical-align: bottom; margin: 0 .2em; padding: .3em .5em; ... } 11
  • 12. Use: centered nav bar • List horizontally centered • Links aligned on bottom • Links have top and bottom padding • Links can be different heights • List contains links (see its bottom border) 12
  • 13. Alternative: display table-cell      * * only in IE 8 and later 13
  • 14. How table display works • Makes boxes act like table equivalents • Example: boxes with display:table-cell act like <td> and sit on same line • Good for grid-like layouts • Disadvantage: tied to HTML order 14
  • 15. Use: hybrid fixed-fluid layout section { display: table; table-layout: fixed; width: 100%; } article { display: table-cell; padding: 10px; vertical-align: top; } article.fixed { width:250px; } 15
  • 17. the future a whole bunch of CSS3 17
  • 18. 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 18
  • 19. Grid Template Layout http://dev.w3.org/csswg/css3-layout/ X X X X 10 * * with -ms- prefix 19
  • 20. How grid template works Define invisible grid of rows and columns and specify which pieces of content go into which “slot” body { grid: "a a a a" a "b c c d" }  b c d nav { flow: a } #main { flow: c } aside { flow: d } #news { flow: b } 20
  • 21. How grid template works Define invisible grid of rows and columns and specify which pieces of content go into which “slot” body { grid: "c d" c d "b b" "a a"  } b nav { flow: a } #main { flow: c } aside { flow: d } #news { flow: b } a 21
  • 22. How grid template works Use ::slot to style slots with: • overflow • background properties • margin properties • column properties • padding properties • vertical-align • border properties • writing-mode • box-shadow • direction • box-decoration-break For example: body::slot(c) { background: #7FD13B; vertical-align: top; } 22
  • 23. Flexible Box Layout www.w3.org/TR/css3-flexbox/ 21 X 12.1 X X † * * † with -webkit- prefix can be switched on in version 18 nightlies 23
  • 24. 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 24
  • 26. Original CSS .feature { float: left; width: 30%; margin: 0 4.5% 0 0; padding: 130px 0 0 0; } 26
  • 27. Create a flex container <div id="features-wrapper"> <div class="feature" id="feature-candy"> ...</div> <div class="feature" id="feature-pastry"> ...</div> <div class="feature" id="feature-dessert"> ...</div> </div> Make sure to add the #features-wrapper { -moz, -ms, and -webkit prefixed values and display: flex; properties in real life! } 27
  • 28. Specify direction of flex items #features-wrapper { display: flex; flex-direction: row; default value } Could switch to vertical stacking in mobile/narrow-screen media query: #features-wrapper { display: flex; flex-direction: column; } 28
  • 29. Make flex items flexible .feature { flex: 1 1 0px; margin-right: 40px; padding: 130px 0 0 0; } 29
  • 30. Make flex items flexible .feature { flex: 1 1 0px; margin-right: 40px; flex basis padding: 130px 0 0 0; } flex shrink factor Same as: flex grow factor .feature { flex: 1; margin-right: 40px; padding: 130px 0 0 0; } 30
  • 31. Add a fourth feature box <div id="features-wrapper"> <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> 31
  • 32. All boxes adjust in width 32
  • 33. Don’t need to do this anymore .2up .feature { width: 45%; ... } .3up .feature { width: 30%; ... } .4up .feature { width: 22%; ... } 33
  • 34. 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? 34
  • 35. Make sale box twice as wide .sale { flex: 2; padding: 130px 20px 20px 20px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); } 35
  • 36. Default equal-height columns! #features-wrapper { 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. 36
  • 37. Vertical centering with ease! #features-wrapper { display: flex; align-items: center; } 37
  • 38. Visual order = HTML order 38
  • 39. 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 39
  • 40. New visual order, same HTML 40
  • 41. Accessibility implications • Pro: keep content in logical order in HTML instead of structuring HTML to achieve visual layout • Con: focus/tab order won’t always match expected order, may jump around seemingly randomly 41
  • 42. Columns are too narrow 42
  • 43. Create multi-line flex container #features-wrapper { display: flex; flex-wrap: wrap; Allow children flex items to wrap to multiple lines } .sale { order: -1; Make box fill line flex: 1 1 100%; Remove gap to right, margin: 0 0 20px 0; add space below padding: 130px 20px 20px 20px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); } 43
  • 44. Flex items can now wrap 44
  • 45. 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; } 45
  • 47. use flexbox now for progressive enhancement  47
  • 48. How can I make this form: • Display on a single line with image • Vertically centered with image • Span full-width of container 48
  • 49. Inline-block achieves: Display on a single line with image Vertically centered with image X Span full-width of container 49
  • 50. Different units make life hard Pixels Ems Some mystery percentage 50
  • 51. 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 51
  • 52. Use inline-block with flexbox 52
  • 53. 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; } 53
  • 54. 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; } 54
  • 55. Not so hot with no backgrounds Uneven spacing Don’t like these gaps 55
  • 56. Even spacing with flexbox nav ul { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; } 56
  • 57. Use inline-block with flexbox 57
  • 58. 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; } 58
  • 59. 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; } 59
  • 61. Learn more Download slides and get links at http://zomigi.com/blog/future-css-layout-fowd 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 designed by Jason Peters from The Noun Project 61