SlideShare une entreprise Scribd logo
1  sur  88
Télécharger pour lire hors ligne
The Future State of


Layout
        Stephen Hay . Fronteers, Amsterdam . 20091105
Stephen Hay
Stephen Hay
Creative Director,
Cinnamon
Stephen Hay
Creative Director,
Cinnamon
Designing for the Web
since 1995
CSS3
CSS3 is




   Awesome.
   media queries, more selectors, font stuff, (...)!
Decoration
backgrounds, shadows, rounded corners, (...)
Many of these things are

trend-driven,
decorative properties
Neccessary, perhaps, but not as important as...
Type &
Layout
Most frustration in web design &
development stems from the lack of a
decent layout mechanism.
Why is this important?




       True separation of presentation and structure
       Source order independence
       Better data portability
Layout
hasNoLayout
Past




   Tables
   Grid-like, but not a grid in the layout sense.
The Future State of Layout
Present




   Floats & Positioning
   Counter-intuitive and
   not intended for layout on today’s Web.
Past and present




   Serendipitous grids
   “Hey, cool! Everything lines up!”
Present




   CSS Frameworks
   Shouldn’t CSS be the framework?
What is grid
layout?
A grid is not a table
Photo courtesy of Kenn W. Kiser, morgueFile.com
Photo: beglib, morgueFile.com
Photo courtesy of Kenn W. Kiser, morgueFile.com
The Future State of Layout
A grid is the underlying
geometrical framework
which defines the visual
structure of the canvas.
Two types of grids




   Implicit grids
   are created implicitly by the
   placement of elements on a page.
Two types of grids




   Explicit grids
   are created explicitly, before the
   placement of elements on a page.
The Future State of Layout
Units vs Columns
The three
working drafts
CSS3-Grid (Microsoft)
CSS3-Flexbox (Mozilla)
CSS3-Layout (W3C)
Grid Positioning Module
takes a column- and row-based approach to creating
explicit grids.
Grid Positioning: Properties




   grid-columns
   grid-rows
Grid Positioning: Syntax




        div {
            grid-columns: 69px (12px 69px)[11];
            grid-rows: 170px *;
            }
Grid Positioning
Grid Positioning: combined with multicolumn layout




       div {
           grid-columns: 69px (12px 69px)[11];
           grid-rows: 170px *;
           columns: 3;
           column-gap: 12px;
           }
Grid Positioning: combined with multicolumn layout
Grid Positioning: Pros & Cons




    Advantages             Disadvantages
    Simple syntax          Reliance on other modules
    *-syntax (multilength) Somewhat restrictive
    gr unit                Thinking is involved
    Explicit grid          No new placement mechanism
One cool thing about Grid Positioning Module




   The gr unit
   A measurement unit to match your grid units!
   (Well, not exactly.)
Grid Positioning: the gr unit




        blockquote.pullquote {
            float: top left column;
            float-offset: 1gr 4gr;
            width: 7gr;
            }
Grid Positioning: the gr unit
Cool! Can I try it out?




   Nope.
   No known implementation at this time.
Flexible Box Module
creates an implicit grid using flexible element stacking
“A CSS box model
optimized for
interface design”
A small part of XUL, ported to CSS.
Flexible Box: Properties




   box-align
   box-direction
   box-flex
   box-flex-group
   box-lines
   box-ordinal-group
   box-orient
   box-pack
Flexible Box: Syntax



   <div id="parent">
       <p id="child1">First child</p>
       <p id="child2">Second child</p>
       <p id="child3">Third child</p>
   </div>

   #parent {
       display: box;
       box-orient: horizontal;
       #child3 {
           box-flex: 1;
           }
The Future State of Layout
Flexible Box: Pros & Cons




         Advantages                 Disadvantages
         Developed for GUIs         Implicit grid
         Simple syntax              Nesting
         Source order independent   Lots of thinking
         Browser calculation
One cool thing about Flexible Box Module




   The box-flex property
   Fill available space, or don’t! Your choice!
The Future State of Layout
The Future State of Layout
Cool! Can I try it out?




   Yes!
   In Firefox (use the -moz- prefix.)
   Works now and well (but in no other browsers)
Template Layout Module
Explicit grids on adrenaline.
Basic site layouts are trivial to construct
Template Layout: New Stuff




       New values for the display property
       New values for the position property
       The ::slot() pseudo-element
       The gr unit
Template Layout: Syntax


   <div   id="header">Header</div>
   <div   id="content">Content</div>
   <div   id="nav">Navigation</div>
   <div   id="footer">Footer</div>

   body {
       display: "a a a"
                "b c c"
                "d d d"; }
   #header { position: a; }
   #nav { position: b; }
   #content { position: c; }
   #footer { position: d; }
Template Layout: Syntax


   <div   id="header">Header</div>
   <div   id="content">Content</div>
   <div   id="nav">Navigation</div>
   <div   id="footer">Footer</div>

   body {
       display: "a a a" / 150px
                "b c @" / *
                "d d d" / 80px
                200px * * ; }
   #header { position: a; }
   #nav { position: b; }
   #content { position: c; }
   #footer { position: d; }
Template Layout: the ::slot() pseudo-element




   ::slot() allows you
   to style a slot,
   regardless of the
   content.
   body::slot(a) { background-color: silver; }
Template Layout with Multicolumn Layout
Template Layout with Multicolumn Layout
Template Layout: Pros & Cons




      Advantages               Disadvantages
      Simple syntax            Existing properties
      Visual, to-the-point     Hard to implement(?)
      Explicit grid
      Source order independent
One cool thing about Template Layout Module




   Speed and ease of use
Cool! Can I try it out?




   Yes!
   Alexis Deveria’s jQuery implementation:
   http://code.google.com/p/css-template-layout/
   Older implementations:

           http://transcendingcss.com/support/almcss.zip
           http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm
CSS3 Layout in action: Khoi Vinh’s Yeeaahh! Layout
CSS3 Layout in action: Basic Structure
CSS3 Layout in action: Basic Grid (1)
CSS3 Layout in action: Setting up the grid and slots
CSS3 Layout in action: Placing elements in the slots
CSS3 Layout in action: Basic Layout in place
CSS3 Layout in action: Laying out page components
You can nest templates,
and depending on the
component, why not
choose the best layout
mechanism for the job?
CSS3 Layout in action: Component structure
CSS3 Layout in action: nesting boxes
CSS3 Layout in action: Adding more elements
CSS3 Layout in action: Laying out the boxes with flexbox
CSS3 Layout in action: Template playing nice with Flexbox
Remember these important points




       Source order is no longer an issue
       You can still float and position (absolute on gr!)
       There may be power in two modules
       Use media queries for alternative layouts!
Media queries and CSS3 Layout




   div { display: "a a a"
                  "b c c"
                  "d d d"; }

   becomes

   div { display: "a"
                  "c"
                  "b"
                  "d"; }
What will the future bring?
I have no clue.
Give us some layout,
dammit!
We’re at the point that we don’t care which module it is.
Give us some layout,
dammit!
We’re at the point that we don’t care which module it is.
(As long as it’s at least Template Layout. Thank you.)
There are huge advantages for designers and developers




   CSS is the framework
There are huge advantages for designers and developers




   CSS is the framework
   Maintainability
There are huge advantages for designers and developers




   CSS is the framework
   Maintainability
   How designers think
A solid layout mechanism
will change the face
of the Web.
Learn more or get involved




   CSS3-layout
   http://www.w3.org/TR/css3-layout

   CSS3-flexbox
   http://www.w3.org/TR/css3-flexbox

   CSS3-grid
   http://www.w3.org/TR/css3-grid

   CSS WG Mailing list
   www-style@w3.org
Thank you!
This presentation is available at:
the-haystack.com/presentations/fronteers09/

twitter.com/stephenhay

Special thanks to Bert Bos for his input, and to Khoi Vinh for
allowing me to use his wonderful example.

Contenu connexe

Tendances

Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp KeynoteRachel Andrew
 
Introduction to data visualisation with D3
Introduction to data visualisation with D3Introduction to data visualisation with D3
Introduction to data visualisation with D3Aleksander Fabijan
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
 
How to develop a CSS Framework
How to develop a CSS FrameworkHow to develop a CSS Framework
How to develop a CSS FrameworkOlivier Besson
 
Roll Your Own CSS Framework
Roll Your Own CSS FrameworkRoll Your Own CSS Framework
Roll Your Own CSS FrameworkMike Aparicio
 
PhDigital 2020: Web Development
PhDigital 2020: Web DevelopmentPhDigital 2020: Web Development
PhDigital 2020: Web DevelopmentCindy Royal
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
 
CSS in React
CSS in ReactCSS in React
CSS in ReactJoe Seifi
 
CSS3 meets GWT with GSS
CSS3 meets GWT with GSSCSS3 meets GWT with GSS
CSS3 meets GWT with GSSjdramaix
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyJoe Seifi
 
Modular HTML & CSS Workshop
Modular HTML & CSS WorkshopModular HTML & CSS Workshop
Modular HTML & CSS WorkshopShay Howe
 
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopModular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopShay Howe
 
Breathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with AxureBreathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with AxureSvetlin Denkov
 
Bootstrap Web Development Framework
Bootstrap Web Development FrameworkBootstrap Web Development Framework
Bootstrap Web Development FrameworkCindy Royal
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSSShay Howe
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSLi-Wei Lu
 

Tendances (20)

Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp Keynote
 
Introduction to data visualisation with D3
Introduction to data visualisation with D3Introduction to data visualisation with D3
Introduction to data visualisation with D3
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
How to develop a CSS Framework
How to develop a CSS FrameworkHow to develop a CSS Framework
How to develop a CSS Framework
 
Sass compass
Sass compassSass compass
Sass compass
 
Roll Your Own CSS Framework
Roll Your Own CSS FrameworkRoll Your Own CSS Framework
Roll Your Own CSS Framework
 
Yuicss R7
Yuicss R7Yuicss R7
Yuicss R7
 
PhDigital 2020: Web Development
PhDigital 2020: Web DevelopmentPhDigital 2020: Web Development
PhDigital 2020: Web Development
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
 
CSS in React
CSS in ReactCSS in React
CSS in React
 
CSS3 meets GWT with GSS
CSS3 meets GWT with GSSCSS3 meets GWT with GSS
CSS3 meets GWT with GSS
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The Ugly
 
Modular HTML & CSS Workshop
Modular HTML & CSS WorkshopModular HTML & CSS Workshop
Modular HTML & CSS Workshop
 
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopModular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo Workshop
 
Breathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with AxureBreathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with Axure
 
Bootstrap Web Development Framework
Bootstrap Web Development FrameworkBootstrap Web Development Framework
Bootstrap Web Development Framework
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
 

En vedette

Designing Motion - FITC TO
Designing Motion - FITC TODesigning Motion - FITC TO
Designing Motion - FITC TOthisisportable
 
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...BookNet Canada
 
the rabbit and the tortoise
the rabbit and the tortoisethe rabbit and the tortoise
the rabbit and the tortoisethreepointone
 
Everything You know about CSS is Wrong
Everything You know about CSS is WrongEverything You know about CSS is Wrong
Everything You know about CSS is Wrongchandleryu
 
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsCSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsInayaili León
 
Css3 animation
Css3 animationCss3 animation
Css3 animationTed Hsu
 
Formatting text with CSS
Formatting text with CSSFormatting text with CSS
Formatting text with CSSNicole Ryan
 
Microsoft TechDays - CSS3 Presentation
Microsoft TechDays - CSS3 PresentationMicrosoft TechDays - CSS3 Presentation
Microsoft TechDays - CSS3 PresentationRachel Andrew
 
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Rami Sayar
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing worldRuss Weakley
 
Structure Web Content
Structure Web ContentStructure Web Content
Structure Web ContentNicole Ryan
 
Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)brianskold
 
Laying Out Elements with CSS
Laying Out Elements with CSSLaying Out Elements with CSS
Laying Out Elements with CSSNicole Ryan
 
Getting Started with CSS
Getting Started with CSSGetting Started with CSS
Getting Started with CSSNicole Ryan
 
CSS3: A practical introduction (FT2010 talk)
CSS3: A practical introduction (FT2010 talk)CSS3: A practical introduction (FT2010 talk)
CSS3: A practical introduction (FT2010 talk)Lea Verou
 
CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3Lea Verou
 
Experience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to DesignExperience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to DesignCindy Chastain
 
Tutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 SiteTutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 SiteAdam Stewart
 

En vedette (20)

Designing Motion - FITC TO
Designing Motion - FITC TODesigning Motion - FITC TO
Designing Motion - FITC TO
 
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
 
CSS3 Animations
CSS3 AnimationsCSS3 Animations
CSS3 Animations
 
the rabbit and the tortoise
the rabbit and the tortoisethe rabbit and the tortoise
the rabbit and the tortoise
 
Everything You know about CSS is Wrong
Everything You know about CSS is WrongEverything You know about CSS is Wrong
Everything You know about CSS is Wrong
 
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsCSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and Animations
 
Css3 animation
Css3 animationCss3 animation
Css3 animation
 
Formatting text with CSS
Formatting text with CSSFormatting text with CSS
Formatting text with CSS
 
Fastest css3 animations
Fastest css3 animations Fastest css3 animations
Fastest css3 animations
 
Microsoft TechDays - CSS3 Presentation
Microsoft TechDays - CSS3 PresentationMicrosoft TechDays - CSS3 Presentation
Microsoft TechDays - CSS3 Presentation
 
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
 
Structure Web Content
Structure Web ContentStructure Web Content
Structure Web Content
 
Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)
 
Laying Out Elements with CSS
Laying Out Elements with CSSLaying Out Elements with CSS
Laying Out Elements with CSS
 
Getting Started with CSS
Getting Started with CSSGetting Started with CSS
Getting Started with CSS
 
CSS3: A practical introduction (FT2010 talk)
CSS3: A practical introduction (FT2010 talk)CSS3: A practical introduction (FT2010 talk)
CSS3: A practical introduction (FT2010 talk)
 
CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3
 
Experience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to DesignExperience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to Design
 
Tutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 SiteTutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 Site
 

Similaire à The Future State of Layout

Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applicationsVittorio Vittori
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksRandy Connolly
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? Russ Weakley
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
Grids of Tomorrow: CSS Grid Layout
Grids of Tomorrow: CSS Grid LayoutGrids of Tomorrow: CSS Grid Layout
Grids of Tomorrow: CSS Grid LayoutSimone Lelli
 
Architecting with Style
Architecting with StyleArchitecting with Style
Architecting with StyleTimothy Knight
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceRachel Andrew
 
Advance Css
Advance CssAdvance Css
Advance Cssvijayta
 
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5Advance Css 1194323118268797 5
Advance Css 1194323118268797 5dharshyamal
 
The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS LayoutZoe Gillenwater
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS MethodologyZohar Arad
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksAndolasoft Inc
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
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
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeAcquia
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LAJake Johnson
 

Similaire à The Future State of Layout (20)

Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
 
CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Grids of Tomorrow: CSS Grid Layout
Grids of Tomorrow: CSS Grid LayoutGrids of Tomorrow: CSS Grid Layout
Grids of Tomorrow: CSS Grid Layout
 
Architecting with Style
Architecting with StyleArchitecting with Style
Architecting with Style
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP Conference
 
Advance Css
Advance CssAdvance Css
Advance Css
 
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5Advance Css 1194323118268797 5
Advance Css 1194323118268797 5
 
The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS Layout
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
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
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
 
Evolution of CSS
Evolution of CSSEvolution of CSS
Evolution of CSS
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
 

Plus de Stephen Hay

From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to ClarityStephen Hay
 
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)Stephen Hay
 
The Art of Deception
The Art of DeceptionThe Art of Deception
The Art of DeceptionStephen Hay
 
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserStephen Hay
 
Power Tools For Browser-Based Design
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based DesignStephen Hay
 
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowStephen Hay
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Stephen Hay
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Stephen Hay
 
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)Stephen Hay
 
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Stephen Hay
 
The New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebStephen Hay
 
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Stephen Hay
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Stephen Hay
 
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Stephen Hay
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
 
Go With The Flow
Go With The FlowGo With The Flow
Go With The FlowStephen Hay
 
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingStephen Hay
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queriesStephen Hay
 
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Stephen Hay
 

Plus de Stephen Hay (20)

From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
 
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
 
The Art of Deception
The Art of DeceptionThe Art of Deception
The Art of Deception
 
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
 
Power Tools For Browser-Based Design
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based Design
 
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
 
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
 
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
 
The New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the Web
 
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
 
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Go With The Flow
Go With The FlowGo With The Flow
Go With The Flow
 
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queries
 
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
 

Dernier

UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Dernier (20)

UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

The Future State of Layout