Learn how to use flexbox to pin two things to opposite ends of the viewport with a heading centered in between. Using media queries and flexbox’s re-ordering capabilities, we can make this layout pattern even more responsive.
Posts Tagged: liquid
Building Responsive Layouts presentation at CSS Dev Conf
Download the slides for my presentation on Building Responsive Layouts for the CSS Dev Conference, as well as get links to related resources on fluid layouts, media queries, and other responsive web design techniques, tools, and inspiration.
Building Responsive Layouts presentation at Responsive Web Design Summit
Download the slides for my presentation on Building Responsive Layouts for the Responsive Web Design Summit 2012, as well as get links to related resources on fluid layouts, media queries, and other responsive web design techniques, tools, and inspiration.
Responsive web design presentation at STC Summit
Download the slides for my presentation on CSS3, Media Queries, and Responsive Web Design for the STC Summit 2012, as well as get links to related resources on media query and responsive web design techniques, tools, and inspiration.
Media queries presentation at indieconf
Download the slides for my presentation on CSS3: Using Media Queries to Improve the Web Site Experience for indieconf, as well as get links to related resources on media query techniques, tools, and inspiration.
Examples of flexible layouts with CSS3 media queries
Media queries let you to feed different CSS to users based on their viewport size (among other things), allowing you to create even more flexible layouts than ever before. See visual examples of real sites that use CSS3 media queries to make the layout more adaptable to the variety of screen sizes and devices in use today.
70+ essential resources for creating liquid and elastic layouts
Check out these great online resources on creating liquid/fluid and elastic layouts, including sources for design inspiration, downloadable templates, frameworks, articles and tutorials.
Me at The CSS Summit online conference
Download the slides from my presentation at The CSS Summit online conference, as well as get links to related tutorials on designing flexible images.
The liquid web site motherload
Check out Nomensa’s portfolio for great examples of liquid site designs.
Why browser zoom shouldn’t kill flexible layouts
All the major browsers now have zoom functions built in, which may make it seem like there’s no longer any need for liquid or elastic layouts. Not so.