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 & 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 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 & 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 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

TELEVISIONpresendesignandcommunication.pptx
TELEVISIONpresendesignandcommunication.pptxTELEVISIONpresendesignandcommunication.pptx
TELEVISIONpresendesignandcommunication.pptxcrownkumar
 
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
 
Mise en Scene, locations and Characters Represented.pptx
Mise en Scene, locations and Characters Represented.pptxMise en Scene, locations and Characters Represented.pptx
Mise en Scene, locations and Characters Represented.pptx17wlar241
 
PokerDAO Case Study: Rethinking the UX/UI of Crypto Poker Platform
PokerDAO Case Study: Rethinking the UX/UI of Crypto Poker PlatformPokerDAO Case Study: Rethinking the UX/UI of Crypto Poker Platform
PokerDAO Case Study: Rethinking the UX/UI of Crypto Poker PlatformSannhetenFox
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
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
 
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
 
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
 
The Influence of T-shirt Culture on Fashion Trends
The Influence of T-shirt Culture on Fashion TrendsThe Influence of T-shirt Culture on Fashion Trends
The Influence of T-shirt Culture on Fashion Trendshaotran73992
 
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
 
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
 
Update 22 models(Schottky Rectifier ) in SPICE PARK(APR2024)
Update 22 models(Schottky Rectifier ) in SPICE PARK(APR2024)Update 22 models(Schottky Rectifier ) in SPICE PARK(APR2024)
Update 22 models(Schottky Rectifier ) in SPICE PARK(APR2024)Tsuyoshi Horigome
 
Captivating Creations: Architectural Rendering Studio Spotlight in Los Angele...
Captivating Creations: Architectural Rendering Studio Spotlight in Los Angele...Captivating Creations: Architectural Rendering Studio Spotlight in Los Angele...
Captivating Creations: Architectural Rendering Studio Spotlight in Los Angele...Yantram Animation Studio Corporation
 
Alabama Crimson Tide 2024 NCAA Men's Basketball Final Four Shirt
Alabama Crimson Tide 2024 NCAA Men's Basketball Final Four ShirtAlabama Crimson Tide 2024 NCAA Men's Basketball Final Four Shirt
Alabama Crimson Tide 2024 NCAA Men's Basketball Final Four ShirtTeeFusion
 
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
 
Interior design for a neoclassical villa
Interior design for a neoclassical villaInterior design for a neoclassical villa
Interior design for a neoclassical villaadamsboxes
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
marketing and production project and port.
marketing and production project and port.marketing and production project and port.
marketing and production project and port.h5bkbscmmy
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 

Recently uploaded (20)

TELEVISIONpresendesignandcommunication.pptx
TELEVISIONpresendesignandcommunication.pptxTELEVISIONpresendesignandcommunication.pptx
TELEVISIONpresendesignandcommunication.pptx
 
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
 
Mise en Scene, locations and Characters Represented.pptx
Mise en Scene, locations and Characters Represented.pptxMise en Scene, locations and Characters Represented.pptx
Mise en Scene, locations and Characters Represented.pptx
 
PokerDAO Case Study: Rethinking the UX/UI of Crypto Poker Platform
PokerDAO Case Study: Rethinking the UX/UI of Crypto Poker PlatformPokerDAO Case Study: Rethinking the UX/UI of Crypto Poker Platform
PokerDAO Case Study: Rethinking the UX/UI of Crypto Poker Platform
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
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
 
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
 
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
 
The Influence of T-shirt Culture on Fashion Trends
The Influence of T-shirt Culture on Fashion TrendsThe Influence of T-shirt Culture on Fashion Trends
The Influence of T-shirt Culture on Fashion Trends
 
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
 
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
 
Update 22 models(Schottky Rectifier ) in SPICE PARK(APR2024)
Update 22 models(Schottky Rectifier ) in SPICE PARK(APR2024)Update 22 models(Schottky Rectifier ) in SPICE PARK(APR2024)
Update 22 models(Schottky Rectifier ) in SPICE PARK(APR2024)
 
Captivating Creations: Architectural Rendering Studio Spotlight in Los Angele...
Captivating Creations: Architectural Rendering Studio Spotlight in Los Angele...Captivating Creations: Architectural Rendering Studio Spotlight in Los Angele...
Captivating Creations: Architectural Rendering Studio Spotlight in Los Angele...
 
Alabama Crimson Tide 2024 NCAA Men's Basketball Final Four Shirt
Alabama Crimson Tide 2024 NCAA Men's Basketball Final Four ShirtAlabama Crimson Tide 2024 NCAA Men's Basketball Final Four Shirt
Alabama Crimson Tide 2024 NCAA Men's Basketball Final Four Shirt
 
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
 
Interior design for a neoclassical villa
Interior design for a neoclassical villaInterior design for a neoclassical villa
Interior design for a neoclassical villa
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
marketing and production project and port.
marketing and production project and port.marketing and production project and port.
marketing and production project and port.
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 

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