JEN SIMMONSLABSTALKSABOUT US Je n Si mm o n s. Hi. I’m Jen Simmons. I’m a Designer and Developer Advocate at Mozilla and a member of the CSS Working Group. I'm especially interested in the coming revolution in graphic design on the web. I speak at conferences and make videos. From 2011–2015, I was the host and executive producer of The Web Ahead. Layout Land. WEB DESIGN EXPERIMENTS BY JEN SIMMONSFOUR CARDS THAT ALWAYS FIT INTO VIEWPORTSTUDY OF THE VIEWPORTA VIGNELLI LAYOUTJAZZ POSTER 2. Revolutionize Your Page: Real Art Direction on the Web. 3. Designing with Grid. 4. Everything You Know About Web Design Just Changed. 5. Designing Intrinsic Layouts. Follow @jensimmons on Twitter for more as it happens. JEN SIMMONS’S PRESENTATIONS Jen Simmons is an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. LAYOUT DEMOS BY JEN SIMMONS This demo combines Viewport Units and Flexbox. It works in all browsers, just slightly differently in old version of IE. Typical Header with title & background, the height of the space needed. Cover Sheet Header, taking up 100% of viewport. Cover Sheet Header, with tweaks for old IE.

JEN SIMMONS

Exercises 1–7. Exercise 1 — Make a simple Grid. Exercise 2 — Make a ratio-based Grid. Exercise 3 — Make a Responsive Grid. Exercise 4 — Explicitly Place Items. Exercise 5 — Make certain Grid Items bigger. Exercise 6 — Auto Flow Spare vs Dense. Exercise 7 — Put It All Together. REVOLUTIONIZE YOUR PAGE: REAL ART DIRECTION ON THE WEB We finally have the tools necessary to create amazing page designs on the web. Now we can art direct our layouts, leveraging the power and tradition of graphic design. In this eye-opening talk, Jen will explore concrete examples of an incredible range of new possibilities. She’ll walk through a step-by-step design process for figuring out how to create a layout as unique as your content. EXAMPLE OF NESTING FLEXBOX AND GRID A computer mouse is a pointing device (hand control) that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface. A 5-PART DEMO OF CSS GRID A 5-part Demo of CSS Grid | Jen Simmons Labs. If you can see this note, then your browser doesn't support CSS Grid yet. It shipped in Firefox 52 on March 7, 2017, Chrome 57 on March 10, 2017, and will ship in Safari 10.1 soon after. MODERN LAYOUTS: GETTING OUT OF OUR RUTS Modern Layouts: Getting Out of Our Ruts. In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout

started

MONDRIAN ART IN CSS GRID Mondrian Art in CSS Grid | Jen Simmons JEN SIMMONSLABSTALKSABOUT US Je n Si mm o n s. Hi. I’m Jen Simmons. I’m a Designer and Developer Advocate at Mozilla and a member of the CSS Working Group. I'm especially interested in the coming revolution in graphic design on the web. I speak at conferences and make videos. From 2011–2015, I was the host and executive producer of The Web Ahead. Layout Land. WEB DESIGN EXPERIMENTS BY JEN SIMMONSFOUR CARDS THAT ALWAYS FIT INTO VIEWPORTSTUDY OF THE VIEWPORTA VIGNELLI LAYOUTJAZZ POSTER 2. Revolutionize Your Page: Real Art Direction on the Web. 3. Designing with Grid. 4. Everything You Know About Web Design Just Changed. 5. Designing Intrinsic Layouts. Follow @jensimmons on Twitter for more as it happens. JEN SIMMONS’S PRESENTATIONS Jen Simmons is an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. LAYOUT DEMOS BY JEN SIMMONS This demo combines Viewport Units and Flexbox. It works in all browsers, just slightly differently in old version of IE. Typical Header with title & background, the height of the space needed. Cover Sheet Header, taking up 100% of viewport. Cover Sheet Header, with tweaks for old IE.

JEN SIMMONS

Exercises 1–7. Exercise 1 — Make a simple Grid. Exercise 2 — Make a ratio-based Grid. Exercise 3 — Make a Responsive Grid. Exercise 4 — Explicitly Place Items. Exercise 5 — Make certain Grid Items bigger. Exercise 6 — Auto Flow Spare vs Dense. Exercise 7 — Put It All Together. REVOLUTIONIZE YOUR PAGE: REAL ART DIRECTION ON THE WEB We finally have the tools necessary to create amazing page designs on the web. Now we can art direct our layouts, leveraging the power and tradition of graphic design. In this eye-opening talk, Jen will explore concrete examples of an incredible range of new possibilities. She’ll walk through a step-by-step design process for figuring out how to create a layout as unique as your content. EXAMPLE OF NESTING FLEXBOX AND GRID A computer mouse is a pointing device (hand control) that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface. A 5-PART DEMO OF CSS GRID A 5-part Demo of CSS Grid | Jen Simmons Labs. If you can see this note, then your browser doesn't support CSS Grid yet. It shipped in Firefox 52 on March 7, 2017, Chrome 57 on March 10, 2017, and will ship in Safari 10.1 soon after. MODERN LAYOUTS: GETTING OUT OF OUR RUTS Modern Layouts: Getting Out of Our Ruts. In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout

started

MONDRIAN ART IN CSS GRID Mondrian Art in CSS Grid | Jen Simmons EXAMPLE OF NESTING FLEXBOX AND GRID A computer mouse is a pointing device (hand control) that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface. TEST OF WRITING MODES + CSS GRID Graphic Design Experiments with Grid + Writing Modes. References: Writing Modes Level 3; Writing Modes Level 4; on MDN; on Can I Use

CSS GRID DEMO

Wood. Let's imagine these are all teaser cards. Rust. Notice the text on these cards is always set towards the bottom. That's easy with Grid. Leaf. Some ledes are long, like really really long.

CSS GRID DEMO

Teaser cards in various layouts. A: Flow layout; B: Traditional Floats — broken; C: Traditional Floats — "fixed" D: Column Layout (using

Multicolumn)

A 5-PART DEMO OF CSS GRID A 5-part Demo of CSS Grid | Jen Simmons Labs. If you can see this note, then your browser doesn't support CSS Grid yet. It shipped in Firefox 52 on March 7, 2017, Chrome 57 on March 10, 2017, and will ship in Safari 10.1 soon after.

CSS GRID MONOPOLY

14. 15. 16. This is a demo of CSS Grid. If you can see this note, that means your browser doesn't support CSS Grid. Use a browser that does

to see the magic.

DEMO | JEN SIMMONS LABS A Study of the Viewport. Resize the browser window, and see how the content morphs. Flexibility rediscovered DEMO | JEN SIMMONS LABS flex: initial; No Wrap. Wrap. flex: auto; No Wrap PROGRESSING OUR LAYOUTS This demo only works in browsers that support CSS Grid Layout. If you can see this message, then your browser isn't supporting Grid. You can

try out Grid in

THE SAME LAYOUT EVERYONE IS DOING This is the bit where you talk about how unique you are as a business and that you’re different to all your competitors. JEN SIMMONSLABSTALKSABOUT US Je n Si mm o n s. Hi. I’m Jen Simmons. I’m a Designer and Developer Advocate at Mozilla and a member of the CSS Working Group. I'm especially interested in the coming revolution in graphic design on the web. I speak at conferences and make videos. From 2011–2015, I was the host and executive producer of The Web Ahead. Layout Land. WEB DESIGN EXPERIMENTS BY JEN SIMMONSFOUR CARDS THAT ALWAYS FIT INTO VIEWPORTSTUDY OF THE VIEWPORTA VIGNELLI LAYOUTJAZZ POSTER 2. Revolutionize Your Page: Real Art Direction on the Web. 3. Designing with Grid. 4. Everything You Know About Web Design Just Changed. 5. Designing Intrinsic Layouts. Follow @jensimmons on Twitter for more as it happens. JEN SIMMONS’S PRESENTATIONS Jen Simmons is an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. JEN SIMMONS ON NOTIST Text; HTML; Markdown; Jen Simmons is currently an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. Jen’s best known for Layout Land, a YouTube channel about the new possibilities in CSS layout, and The Web Ahead, her podcast about the future of the web.She’s also spoken at hundred of web conferences, including An Event Apart and SXSW. LAYOUT DEMOS BY JEN SIMMONS This demo combines Viewport Units and Flexbox. It works in all browsers, just slightly differently in old version of IE. Typical Header with title & background, the height of the space needed. Cover Sheet Header, taking up 100% of viewport. Cover Sheet Header, with tweaks for old IE. EXAMPLE OF NESTING FLEXBOX AND GRID A computer mouse is a pointing device (hand control) that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface. HOW CSS GRID CHANGES EVERYTHING BY JEN SIMMONS Masking Shape-outside Initial-letter Flow. Floats Block Inline Inline-block Display:table Margin Negative margins Padding everything else. in CSS. This ne w CSS. changes everything. in web layout. labs.jensimmons.com. Grid makes it. much easier to imple me nt. MODERN LAYOUTS: GETTING OUT OF OUR RUTS Modern Layouts: Getting Out of Our Ruts. In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout

started

MONDRIAN ART IN CSS GRID Mondrian Art in CSS Grid | Jen Simmons

JAZZ POSTER

Jazz at Lincoln Center Spring 2007 Schedule of Events. Bebop Lives! Celebrating the best of Dizzy Gillespie and Charlie Parker. January

26–27, 8pm

JEN SIMMONSLABSTALKSABOUT US Je n Si mm o n s. Hi. I’m Jen Simmons. I’m a Designer and Developer Advocate at Mozilla and a member of the CSS Working Group. I'm especially interested in the coming revolution in graphic design on the web. I speak at conferences and make videos. From 2011–2015, I was the host and executive producer of The Web Ahead. Layout Land. WEB DESIGN EXPERIMENTS BY JEN SIMMONSFOUR CARDS THAT ALWAYS FIT INTO VIEWPORTSTUDY OF THE VIEWPORTA VIGNELLI LAYOUTJAZZ POSTER 2. Revolutionize Your Page: Real Art Direction on the Web. 3. Designing with Grid. 4. Everything You Know About Web Design Just Changed. 5. Designing Intrinsic Layouts. Follow @jensimmons on Twitter for more as it happens. JEN SIMMONS’S PRESENTATIONS Jen Simmons is an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. JEN SIMMONS ON NOTIST Text; HTML; Markdown; Jen Simmons is currently an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. Jen’s best known for Layout Land, a YouTube channel about the new possibilities in CSS layout, and The Web Ahead, her podcast about the future of the web.She’s also spoken at hundred of web conferences, including An Event Apart and SXSW. LAYOUT DEMOS BY JEN SIMMONS This demo combines Viewport Units and Flexbox. It works in all browsers, just slightly differently in old version of IE. Typical Header with title & background, the height of the space needed. Cover Sheet Header, taking up 100% of viewport. Cover Sheet Header, with tweaks for old IE. EXAMPLE OF NESTING FLEXBOX AND GRID A computer mouse is a pointing device (hand control) that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface. HOW CSS GRID CHANGES EVERYTHING BY JEN SIMMONS Masking Shape-outside Initial-letter Flow. Floats Block Inline Inline-block Display:table Margin Negative margins Padding everything else. in CSS. This ne w CSS. changes everything. in web layout. labs.jensimmons.com. Grid makes it. much easier to imple me nt. MODERN LAYOUTS: GETTING OUT OF OUR RUTS Modern Layouts: Getting Out of Our Ruts. In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout

started

MONDRIAN ART IN CSS GRID Mondrian Art in CSS Grid | Jen Simmons

JAZZ POSTER

Jazz at Lincoln Center Spring 2007 Schedule of Events. Bebop Lives! Celebrating the best of Dizzy Gillespie and Charlie Parker. January

26–27, 8pm

JEN SIMMONS’S PRESENTATIONS ON NOTIST Presentations by Jen Simmons. All these presentations were given by Jen Simmons between 2015 and 2020 EXAMPLE OF NESTING FLEXBOX AND GRID A computer mouse is a pointing device (hand control) that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface. DESIGNING INTRINSIC LAYOUTS Twenty-five years after the web began, we finally have a real toolkit for creating layouts. Combining CSS Grid, Flexbox, Multicolumn, Flow layout and Writing Modes gives us the technical ability to build layouts today without the horrible hacks and compromises of the past. But what does this mean for our design medium? How might we better leverage the art of graphic design? MONDRIAN ART IN CSS GRID Mondrian Art in CSS Grid | Jen Simmons

DESIGNING WITH GRID

Designing with Grid. Now that CSS Grid is here, what are we going to do with it? Sure, we can create page layouts very similar to the ones we’ve been using for the last decade, but Grid also opens up a world of new possibilities. Graphic designers of the 20th century fell in THREE TOPICS FOR JAN 2020 CSSWG MEETING Three Topics For Jan 2020 CSSWG Meeting. Things. • We already tried not having interop. • Implementers tried making everything magically shrink & grow — it had performance problems. And Authors don’t always want that. • Developers currently try to solve this with JS. • 100vh, 100% body, window.innerHeight don’t match. PROGRESSING OUR LAYOUTS The tomato (see pronunciation) is the edible, often red berry-type fruit of the nightshade Solanum lycopersicum, commonly known as a tomato plant. The tomato is consumed in diverse ways, including raw, as an ingredient in many dishes, sauces, salads, and drinks. The English word tomato comes from the Spanish word, tomate, derived from

the

DEMO | JEN SIMMONS LABS Phasellus ligula ipsum, blandit eu tristique nec, vestibulum tincidunt mi. Nullam laoreet tempus faucibus. Sed quam diam, dignissim eget finibus vel, egestas consectetur mauris. Nulla vehicula, justo non dignissim bibendum, magna tellus tempor elit, in hendrerit felis sapien vel ante. Quisque ac congue tellus. PROGRESSING OUR LAYOUTS The orange (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae. The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony 2018 — TEASER CARD Lorem ipsum dolor. Lorem ipsum dolor sit amet consectetur adipiscing, elit inceptos nunc et litora, cras class id morbi viverra. Leo in hac vel sed molestie fringilla fusce orci, dis nibh pharetra quisque inceptos interdum tortor, porta parturient varius magna curae feugiat vestibulum egestas, suscipit facilisi accumsan torquent aptent

lobortis.

HOME LABSTALKSABOUT US Je n Si mm o n s. Hi. I’m Jen Simmons. I’m a Designer and Developer Advocate at Mozilla and a member of the CSS Working Group. I'm especially interested in the coming revolution in graphic design on the web. I speak at conferences and make videos. From 2011–2015, I was the host and executive producer of The Web Ahead. Layout Land. WEB DESIGN EXPERIMENTS BY JEN SIMMONSFOUR CARDS THAT ALWAYS FIT INTO VIEWPORTSTUDY OF THE VIEWPORTA VIGNELLI LAYOUTJAZZ POSTER 2. Revolutionize Your Page: Real Art Direction on the Web. 3. Designing with Grid. 4. Everything You Know About Web Design Just Changed. 5. Designing Intrinsic Layouts. Follow @jensimmons on Twitter for more as it happens. JEN SIMMONS’S PRESENTATIONS Jen Simmons is an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. JEN SIMMONS ON NOTIST Text; HTML; Markdown; Jen Simmons is currently an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. Jen’s best known for Layout Land, a YouTube channel about the new possibilities in CSS layout, and The Web Ahead, her podcast about the future of the web.She’s also spoken at hundred of web conferences, including An Event Apart and SXSW.

JEN SIMMONS

Exercises 1–7. Exercise 1 — Make a simple Grid. Exercise 2 — Make a ratio-based Grid. Exercise 3 — Make a Responsive Grid. Exercise 4 — Explicitly Place Items. Exercise 5 — Make certain Grid Items bigger. Exercise 6 — Auto Flow Spare vs Dense. Exercise 7 — Put It All Together. LAYOUT DEMOS BY JEN SIMMONS This demo combines Viewport Units and Flexbox. It works in all browsers, just slightly differently in old version of IE. Typical Header with title & background, the height of the space needed. Cover Sheet Header, taking up 100% of viewport. Cover Sheet Header, with tweaks for old IE. MODERN LAYOUTS: GETTING OUT OF OUR RUTS Modern Layouts: Getting Out of Our Ruts. In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout

started

EXAMPLE OF NESTING FLEXBOX AND GRID A computer mouse is a pointing device (hand control) that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface. MONDRIAN ART IN CSS GRID Mondrian Art in CSS Grid | Jen Simmons PIXEL | JEN SIMMONS LABS Pixel the Kitten Likes laying things out on a grid Pixel the Kitten Likes laying things out on a grid HOME LABSTALKSABOUT US Je n Si mm o n s. Hi. I’m Jen Simmons. I’m a Designer and Developer Advocate at Mozilla and a member of the CSS Working Group. I'm especially interested in the coming revolution in graphic design on the web. I speak at conferences and make videos. From 2011–2015, I was the host and executive producer of The Web Ahead. Layout Land. WEB DESIGN EXPERIMENTS BY JEN SIMMONSFOUR CARDS THAT ALWAYS FIT INTO VIEWPORTSTUDY OF THE VIEWPORTA VIGNELLI LAYOUTJAZZ POSTER 2. Revolutionize Your Page: Real Art Direction on the Web. 3. Designing with Grid. 4. Everything You Know About Web Design Just Changed. 5. Designing Intrinsic Layouts. Follow @jensimmons on Twitter for more as it happens. JEN SIMMONS’S PRESENTATIONS Jen Simmons is an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. JEN SIMMONS ON NOTIST Text; HTML; Markdown; Jen Simmons is currently an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. Jen’s best known for Layout Land, a YouTube channel about the new possibilities in CSS layout, and The Web Ahead, her podcast about the future of the web.She’s also spoken at hundred of web conferences, including An Event Apart and SXSW.

JEN SIMMONS

Exercises 1–7. Exercise 1 — Make a simple Grid. Exercise 2 — Make a ratio-based Grid. Exercise 3 — Make a Responsive Grid. Exercise 4 — Explicitly Place Items. Exercise 5 — Make certain Grid Items bigger. Exercise 6 — Auto Flow Spare vs Dense. Exercise 7 — Put It All Together. LAYOUT DEMOS BY JEN SIMMONS This demo combines Viewport Units and Flexbox. It works in all browsers, just slightly differently in old version of IE. Typical Header with title & background, the height of the space needed. Cover Sheet Header, taking up 100% of viewport. Cover Sheet Header, with tweaks for old IE. MODERN LAYOUTS: GETTING OUT OF OUR RUTS Modern Layouts: Getting Out of Our Ruts. In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout

started

EXAMPLE OF NESTING FLEXBOX AND GRID A computer mouse is a pointing device (hand control) that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface. MONDRIAN ART IN CSS GRID Mondrian Art in CSS Grid | Jen Simmons PIXEL | JEN SIMMONS LABS Pixel the Kitten Likes laying things out on a grid Pixel the Kitten Likes laying things out on a grid JEN SIMMONS’S PRESENTATIONS ON NOTIST Presentations by Jen Simmons. All these presentations were given by Jen Simmons between 2015 and 2020

CSS GRID DEMO

Wood. Let's imagine these are all teaser cards. Rust. Notice the text on these cards is always set towards the bottom. That's easy with Grid. Leaf. Some ledes are long, like really really long. TEST OF WRITING MODES + CSS GRID Graphic Design Experiments with Grid + Writing Modes. References: Writing Modes Level 3; Writing Modes Level 4; on MDN; on Can I Use

CSS GRID DEMO

Teaser cards in various layouts. A: Flow layout; B: Traditional Floats — broken; C: Traditional Floats — "fixed" D: Column Layout (using

Multicolumn)

A 5-PART DEMO OF CSS GRID A 5-part Demo of CSS Grid | Jen Simmons Labs. If you can see this note, then your browser doesn't support CSS Grid yet. It shipped in Firefox 52 on March 7, 2017, Chrome 57 on March 10, 2017, and will ship in Safari 10.1 soon after. DESIGN STUDIO GRAPHIC Twopots Design Studio. Xavier Esclusa Trias; twopots-design.com;

Barcelona

DEMO | JEN SIMMONS LABS A Study of the Viewport. Resize the browser window, and see how the content morphs. Flexibility rediscovered MONDRIAN ART IN CSS GRID Mondrian Art in CSS Grid | Jen Simmons. This demo only works in browsers that support CSS Grid Layout. PROGRESSING OUR LAYOUTS This demo only works in browsers that support CSS Grid Layout. If you can see this message, then your browser isn't supporting Grid. You can

try out Grid in

DISJOINTED TEXT

G r a p h i c D e s i g n. Home; Episodes; Guests; Subscribe; About HOME LABSTALKSABOUT US Je n Si mm o n s. Hi. I’m Jen Simmons. I’m a Designer and Developer Advocate at Mozilla and a member of the CSS Working Group. I'm especially interested in the coming revolution in graphic design on the web. I speak at conferences and make videos. From 2011–2015, I was the host and executive producer of The Web Ahead. Layout Land. WEB DESIGN EXPERIMENTS BY JEN SIMMONSFOUR CARDS THAT ALWAYS FIT INTO VIEWPORTSTUDY OF THE VIEWPORTA VIGNELLI LAYOUTJAZZ POSTER 2. Revolutionize Your Page: Real Art Direction on the Web. 3. Designing with Grid. 4. Everything You Know About Web Design Just Changed. 5. Designing Intrinsic Layouts. Follow @jensimmons on Twitter for more as it happens. JEN SIMMONS’S PRESENTATIONS Jen Simmons is an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. JEN SIMMONS ON NOTIST Text; HTML; Markdown; Jen Simmons is currently an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. Jen’s best known for Layout Land, a YouTube channel about the new possibilities in CSS layout, and The Web Ahead, her podcast about the future of the web.She’s also spoken at hundred of web conferences, including An Event Apart and SXSW. LAYOUT DEMOS BY JEN SIMMONS This demo combines Viewport Units and Flexbox. It works in all browsers, just slightly differently in old version of IE. Typical Header with title & background, the height of the space needed. Cover Sheet Header, taking up 100% of viewport. Cover Sheet Header, with tweaks for old IE.

JEN SIMMONS

Exercises 1–7. Exercise 1 — Make a simple Grid. Exercise 2 — Make a ratio-based Grid. Exercise 3 — Make a Responsive Grid. Exercise 4 — Explicitly Place Items. Exercise 5 — Make certain Grid Items bigger. Exercise 6 — Auto Flow Spare vs Dense. Exercise 7 — Put It All Together. A 5-PART DEMO OF CSS GRID A 5-part Demo of CSS Grid | Jen Simmons Labs. If you can see this note, then your browser doesn't support CSS Grid yet. It shipped in Firefox 52 on March 7, 2017, Chrome 57 on March 10, 2017, and will ship in Safari 10.1 soon after. SPACE JAM HOMEPAGE IN CSS GRID Space Jam homepage in CSS Grid. Space Jam. Stellar Souvenirs. Lunar Tunes. Junior Jam. Behind the Jam. Jam Central. Planet B-Ball. The

Lineup.

MODERN LAYOUTS: GETTING OUT OF OUR RUTS Modern Layouts: Getting Out of Our Ruts. In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout

started

MONDRIAN ART IN CSS GRID Mondrian Art in CSS Grid | Jen Simmons HOME LABSTALKSABOUT US Je n Si mm o n s. Hi. I’m Jen Simmons. I’m a Designer and Developer Advocate at Mozilla and a member of the CSS Working Group. I'm especially interested in the coming revolution in graphic design on the web. I speak at conferences and make videos. From 2011–2015, I was the host and executive producer of The Web Ahead. Layout Land. WEB DESIGN EXPERIMENTS BY JEN SIMMONSFOUR CARDS THAT ALWAYS FIT INTO VIEWPORTSTUDY OF THE VIEWPORTA VIGNELLI LAYOUTJAZZ POSTER 2. Revolutionize Your Page: Real Art Direction on the Web. 3. Designing with Grid. 4. Everything You Know About Web Design Just Changed. 5. Designing Intrinsic Layouts. Follow @jensimmons on Twitter for more as it happens. JEN SIMMONS’S PRESENTATIONS Jen Simmons is an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. JEN SIMMONS ON NOTIST Text; HTML; Markdown; Jen Simmons is currently an Apple Evangelist on the Web Developer Experience team and a member of the CSS Working Group. Jen’s best known for Layout Land, a YouTube channel about the new possibilities in CSS layout, and The Web Ahead, her podcast about the future of the web.She’s also spoken at hundred of web conferences, including An Event Apart and SXSW. LAYOUT DEMOS BY JEN SIMMONS This demo combines Viewport Units and Flexbox. It works in all browsers, just slightly differently in old version of IE. Typical Header with title & background, the height of the space needed. Cover Sheet Header, taking up 100% of viewport. Cover Sheet Header, with tweaks for old IE.

JEN SIMMONS

Exercises 1–7. Exercise 1 — Make a simple Grid. Exercise 2 — Make a ratio-based Grid. Exercise 3 — Make a Responsive Grid. Exercise 4 — Explicitly Place Items. Exercise 5 — Make certain Grid Items bigger. Exercise 6 — Auto Flow Spare vs Dense. Exercise 7 — Put It All Together. A 5-PART DEMO OF CSS GRID A 5-part Demo of CSS Grid | Jen Simmons Labs. If you can see this note, then your browser doesn't support CSS Grid yet. It shipped in Firefox 52 on March 7, 2017, Chrome 57 on March 10, 2017, and will ship in Safari 10.1 soon after. SPACE JAM HOMEPAGE IN CSS GRID Space Jam homepage in CSS Grid. Space Jam. Stellar Souvenirs. Lunar Tunes. Junior Jam. Behind the Jam. Jam Central. Planet B-Ball. The

Lineup.

MODERN LAYOUTS: GETTING OUT OF OUR RUTS Modern Layouts: Getting Out of Our Ruts. In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout

started

MONDRIAN ART IN CSS GRID Mondrian Art in CSS Grid | Jen Simmons JEN SIMMONS’S PRESENTATIONS ON NOTIST Presentations by Jen Simmons. All these presentations were given by Jen Simmons between 2015 and 2020 EXAMPLE OF NESTING FLEXBOX AND GRID A computer mouse is a pointing device (hand control) that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface.

CSS GRID DEMO

Wood. Let's imagine these are all teaser cards. Rust. Notice the text on these cards is always set towards the bottom. That's easy with Grid. Leaf. Some ledes are long, like really really long. SPACE JAM HOMEPAGE IN CSS GRID Space Jam homepage in CSS Grid. Space Jam. Stellar Souvenirs. Lunar Tunes. Junior Jam. Behind the Jam. Jam Central. Planet B-Ball. The

Lineup.

CSS GRID DEMO

Teaser cards in various layouts. A: Flow layout; B: Traditional Floats — broken; C: Traditional Floats — "fixed" D: Column Layout (using

Multicolumn)

DEMO | JEN SIMMONS LABS Demo | Jen Simmons Labs DEMO | JEN SIMMONS LABS A Study of the Viewport. Resize the browser window, and see how the content morphs. Flexibility rediscovered DEMO | JEN SIMMONS LABS Five issues that will determine the future of Internet Health Five issues that will determine the future of Internet Health PROGRESSING OUR LAYOUTS This demo only works in browsers that support CSS Grid Layout. If you can see this message, then your browser isn't supporting Grid. You can

try out Grid in

JAZZ POSTER

Jazz at Lincoln Center Spring 2007 Schedule of Events. Bebop Lives! Celebrating the best of Dizzy Gillespie and Charlie Parker. January

26–27, 8pm

JEN SIMMONS

Hi. I’m Jen Simmons. I’m a Designer and Developer Advocate at Mozilla and a member of the CSS Working Group. I'm especially interested in the coming revolution in graphic design on the web . I speak at conferences and make videos . From 2011–2015, I was the host and executive producer of The Web Ahead .

* Layout Land

* Labs

* Talks

* Twitter