Videos uploaded by user “Layout Land”
Flexbox vs. CSS Grid — Which is Better?
One of the most commonly asked questions about CSS Grid is “Does CSS Grid replace Flexbox? Is it better than Flexbox? Should I use it instead of Flexbox?” The answer is no — we will use both Grid and Flexbox on most sites, along with flow content, floats, and other CSS for layout. This video explains the differences between Flexbox and Grid, and when to use which one.
Views: 52470 Layout Land
Introduction to Viewport Units
How can you use new CSS units — viewport units — to size content that changes in response to the viewport size? Jen introduces you to how vw, vh, vmin, vmax can be used in creative ways. Demos: • http://labs.jensimmons.com/2017/01-010.html • http://labs.jensimmons.com/2016/examples/coversheet-3.html
Views: 12798 Layout Land
Where is CSS4? When is it coming out?
Many people are waiting for CSS4 to come out. Where is it? When will it arrive? The answer is never. CSS4 will never happen. It's not actually a thing. Jen explains how CSS continues to evolve, with lots of new features shipping, but none of them under a giant “CSS4” banner. The master list of all the official CSS, currently: https://www.w3.org/Style/CSS/current-work CSS1: https://www.w3.org/TR/REC-CSS1-961217 CSS2: https://www.w3.org/TR/CSS21/ CSS Borders & Backgrounds 3: https://www.w3.org/TR/css-backgrounds-3/ CSS Color 3: https://www.w3.org/TR/css-color-3/ CSS Flexbox 1: https://www.w3.org/TR/css-flexbox-1/ CSS Fonts 3: https://www.w3.org/TR/css-fonts-3/ CSS Fonts 4: https://www.w3.org/TR/css-fonts-4/ CSS Grid 1: https://www.w3.org/TR/css-grid-1/ CSS Grid 2: https://www.w3.org/TR/css-grid-2/
Views: 21586 Layout Land
Cropping images with Object Fit
If we want to create a layout where we specify both the height and width of an image, creating a flexible layout, we can use `object-fit` to crop the image. Demos: • Simple photos: http://labs.jensimmons.com/2016/examples/object-fit-photos.html or on CodePen: http://codepen.io/jensimmons/pen/jqKNxg?editors=1100 • Article w/ header layout: https://labs.jensimmons.com/2016/examples/grace-hopper-page.html or on CodePen: http://codepen.io/jensimmons/pen/wGXwNb?editors=1100 • Samples of options for Object Fit: http://labs.jensimmons.com/2016/examples/object-fit.html or on CodePen: http://codepen.io/jensimmons/pen/ZWRzjQ?editors=1100 MDN Web Docs: • Object Fit: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit • Object Position: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
Views: 10827 Layout Land
FR Units in CSS Grid — 2/3 Flexibility
What is an "fr" (aka fractional) unit anyway? Why are they a million times better than percents? How can we mix them with other sized tracks? Jen explains how to intuitively use FR units in CSS Grid. http://gridsetapp.com http://alistapart.com/article/content-out-layout
Views: 10802 Layout Land
Obliterate Boxiness with CSS Shapes
By default, everything on a webpage is a box. But it doesn't have to be. CSS Shapes lets us flow content around circles, polygons, masks and other shapes. Jen shows you how using Firefox dev tools. For information on how to use the Firefox Developer Shape Path Editor today, watch this video: https://vimeo.com/250359252 CORS compatibility for images: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Views: 19212 Layout Land
Using Flexbox + CSS Grid Together: Easy Gallery Layout
You can nest Flexbox and Grid together to make common layouts incredibly easy and robust. Jen walks you through a demo and shows you exactly how, all while keeping accessibility needs in mind and supporting older browsers. Links: • Demo at http://labs.jensimmons.com/2017/03-009.html • Same demo on CodePen: https://codepen.io/jensimmons/pen/LyrNqJ?editors=1100
Views: 25621 Layout Land
Basics of CSS Grid: The Big Picture
Jen describes the overall big picture of CSS Grid and what all these terms mean. How it's different than float-based frameworks and how we are going to apply Grid to specific containers on the page — while still using other layout methods on other containers of content. Links: • The official Grid level 1 specification: https://www.w3.org/TR/css-grid-1 • Draft of the Grid level 2 specification: https://drafts.csswg.org/css-grid-2 • For more on Implicit vs Explicit, watch the beginning of this video: https://www.youtube.com/watch?v=tFKrK4eAiUQ
Views: 41968 Layout Land
Incredibly Easy Layouts with CSS Grid
The concepts of "implicit" and "explicit" explained — and what they mean in CSS Grid. Jen shows you how to do a common responsive image gallery in just two lines of code, using `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))` and zero media queries. Rachel Andrew's video explaining auto-fit vs auto-fill: https://gridbyexample.com/video/series-auto-fill-auto-fit/
Views: 48827 Layout Land
9 Biggest Mistakes with CSS Grid
It's easy to make lots of mistakes with a new technology, especially something that's as big of a change from the past as CSS Grid. Jen lists the 9 Biggest Mistakes she sees people making when using CSS Grid, with advice and tips for avoiding these pitfalls and old habits. Mistake 1: Thinking CSS Grid is Everything “Flexbox vs. CSS Grid — Which is Better?”: https://youtu.be/hs3piaN4b5I “Using Flexbox & Grid Together”: https://youtu.be/dQHtT47eH0M “Obliterate Boxiness with CSS Shapes”: https://youtu.be/pOB75oTNhw0 Mistake 2: Using Only Percents for Sizing “Min & Max Content Sizing in CSS Grid”: https://youtu.be/lZ2JX_6SGNI “FR Units in CSS Grid“: https://youtu.be/ZPtpzuRajzM “MinMax in CSS Grid”: https://youtu.be/mVQiNpqXov8 Mistake 3 : Assuming You Need Breakpoints “Incredibly Easy Layouts with CSS Grid”: https://youtu.be/tFKrK4eAiUQ Mistake 4: Getting Confused by Numbering “Innovative & Practical Graphic Design with CSS Grid”: https://youtu.be/-hmOZU7Zk10 “Basics of CSS Grid: The Big Picture”: https://youtu.be/FEnRpy9Xfes Mistake 5: Always Using 12-columns Jen talks about this towards the end of “FR Units in CSS Grid“: https://youtu.be/ZPtpzuRajzM?t=5m52s Mistake 6: Ignoring the Power of Rows “Flexibility & The Fold”: https://youtu.be/EEOJZy_Gge4 “Whitespace on The Web”: https://youtu.be/YfIjFeBLhyA Mistake 7: Reaching for a Framework Mistake 8: Waiting for IE11 to Die “Internet Explorer + CSS Grid?”: https://youtu.be/7msERxu7ivg 7-part Series on Writing Resilient CSS that works in all browsers: https://www.youtube.com/playlist?list=PLbSquHt1VCf1kpv9WRGMCA9_Nn4vCLZ9Y Mistake 9: Hesitating, Instead of Playing “Responsive Mondrian”: https://youtu.be/qNtJ5p3h2A4 “CSS Grid like you are Jan Tschichold”: https://youtu.be/OxrsO4aIjyc
Views: 40152 Layout Land
MinMax in CSS Grid — 3/3 Flexibility
We can define tracks in CSS Grid using `minmax`. What does that mean and how can we best combine it with other ways of measuring space? Jen presents the beginnings of Intrinsic Web Design here, showing how this new technology provides multiple stages of flexibility and gets us even further away from ideas of 'pixel perfect'. Demos: • https://labs.jensimmons.com/2017/01-003C.html • https://labs.jensimmons.com/2017/01-016.html
Views: 8438 Layout Land
Hot metal : Pasteup  ::  Floats : CSS Grid
Jen takes a look at the evolution of the printing press and typesetting technology — from letterpress and the Linotype machine, to photo-based paste-up techniques — and how these advances radically changed graphic design. History has taught us that big changes to the underlying technologies can open up new communication possibilities. This is happening again, now, on the web. Today, with CSS Grid, Flexbox and all the pieces of Intrinsic Web Design, we have the freedom to place anything anywhere on the page. What can similar transitions in the past teach us about our future?
Views: 7257 Layout Land
Use Clip Path to Vary Your Designs on the Web
Everything on the web is a rectangle, but it doesn't have to be. Use the Clip Path property to alter elements in your layouts to be polygons, circles, triangles, and more. My simple clip-path demo: http://labs.jensimmons.com/2016/examples/clip-path.html Wide Hive: http://www.widehive.com Clip path on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path Support for clip-path on Can I Use: https://caniuse.com/#feat=css-clip-path Don't forget to use a `-webkit-` prefix to get `clip-path` to work in Safari and other webkit browsers.
Views: 8464 Layout Land
Min & Max Content Sizing in CSS Grid — 1/3 Flexibility
CSS Grid changes the way flexibility works on the web. When there is more or less space available, Grid allows us to precisely design how content moves. Using simple percent-based widths is not the only option anymore. In the first of a three-part series, Jen explains how to use min-content and max-content to size Grid tracks. Demos: • Der Film — https://labs.jensimmons.com/2017/02-004.html • Jan Tschichold — https://labs.jensimmons.com/2017/01-007.html
Views: 13383 Layout Land
Overlap on the Web, Graphic Design Made Easy with CSS Grid
CSS Grid makes it easy to create overlap in our designs and opens up a world of new possibilities in graphic design on the web. For decades, we wanted to create these kinds of designs, but didn't have the tools. We trained each other to stop being creative and stop wanting to make such layouts. It's time to shake these old habits up and explore what's now possible. Jen walks you through an example of how items can overlap, be fully responsive, robust and resilient. Examples at: http://labs.jensimmons.com/2017/01-003E.html http://labs.jensimmons.com/2017/01-018.html http://labs.jensimmons.com/2017/01-002.html http://labs.jensimmons.com/2017/02-001.html
Views: 16446 Layout Land
Internet Explorer + CSS Grid????
CSS Grid shipped in March 2017, and is already supported by the vast majority of web browsers in use. But there is a significant portion of users who do not have support for CSS Grid — not just IE, but also UC, Samsung Internet, Opera mini, QQ, and more. So can we use CSS Grid? How do we support these old browsers and use CSS Grid? Links: • https://www.rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/ • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement • https://caniuse.com/#feat=css-grid
Views: 18006 Layout Land
Flexibility & The Fold – new possibilities with CSS Grid
Design your web layouts to respond to all four edges of the screen — top, left, right, and bottom. Jen shows you how using CSS Grid rows defined in a combination of fr units, minmax(), max-content, and auto, so content moves around and makes for beautiful graphic design at every viewport size. Take responsive web design to a whole new level.
Views: 17344 Layout Land
The Magic of Feature Queries, Part 2 – 6/7 Resilient CSS
Once you understand the basics of Feature Queries, watch this video to understand when you might not want to use them, because Feature Queries themselves don't work in all of the older browsers. Most of the time, that's fine. But Jen shows you how to keep an eye out for when you might want to avoid them. Special thanks to Jeremy Keith for the idea of using the word resilient to describe how the web works in this way. He coined the term "Resilient Web Design" and wrote a whole book about how HTML, CSS, and JS work. You can read it for free at https://resilientwebdesign.com
Views: 6685 Layout Land
What if CSS Grid Changes?
There are so many new tools coming out, does it make sense to chase them all? Is it too early to learn CSS Grid? What happens if it changes? Wouldn't it be safer to wait until things settle down? Jen talks about the struggles to keep up and why it is, indeed, a safe time to invest effort into learning CSS Grid. Jeremy Keith, presented the ideas about Materials vs Tools at An Event Apart 2018, in a talk titled “The Way Of The Web”. The slides listing materials and tools are his. You can see more of his talks at: https://noti.st/adactio, and find all his work at https://adactio.com.
Views: 7363 Layout Land
Introduction to Resilient CSS – 1/7
Excited to use new CSS, but worried about how to still support people using older browsers? This series is for you. In part 1, Jen will explain how the web itself is designed to handle a wide range of different computers, devices, operating systems, ages of software, input/output devices and more. Letting you use the latest and greatest features, while supporting 100% of your audience. Play with the Line Mode Browser at: http://line-mode.cern.ch Special thanks to Jeremy Keith for the idea of using the word resilient to describe how the web works in this way. He coined the term "Resilient Web Design" and wrote a whole book about how HTML, CSS, and JS work. You can read it for free at https://resilientwebdesign.com
Views: 25931 Layout Land
Whitespace on The Web! — with CSS Grid
CSS Grid makes it possible to have real white space on the web for the first time since we started using CSS for layouts. Having rows changes everything. Links: • Example: http://labs.jensimmons.com/2017/01-003D.html • The Vignelli Canon: http://www.vignelli.com/canon.pdf (offline at the moment, sadly. Try: https://web.archive.org/web/20171226232040/http://www.vignelli.com/canon.pdf )
Views: 9269 Layout Land
Designing for A Viewport
The web is a medium that has a viewport. What does it mean to truly be designing for the web — a medium that reveals the page slowly, from inside a viewport frame? Examples: http://labs.jensimmons.com/2017/03-008.html http://labs.jensimmons.com/2017/01-006.html http://labs.jensimmons.com/2017/01-008C.html http://labs.jensimmons.com/2017/01-010.html To see more clips, or order the whole series of Hollywood Camera Work's Master Class in High End Blocking & Staging: https://www.hollywoodcamerawork.com/the-master-course-in-high-end-blocking-and-staging.html
Views: 10455 Layout Land
CSS Grid Uncollapses Your Margins. What?
Sometimes margins smash together. Sometimes they stay separate. This is called "margin collapsing". It can be confusing. Some people wish the web never had such a thing. Well, with CSS Grid, you can make margin collapsing go away. Jen will show you how. Links: The Demo: https://codepen.io/jensimmons/pen/pVxrMK The Tweet: https://twitter.com/jensimmons/status/996811135226695680 Firefox CSS Grid Inspector: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts MDN article on margin collapsing: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing Bert Bos and Håkon Lie at CSS Day: https://vimeo.com/237192358
Views: 5684 Layout Land
CSS Grid like you are Jan Tschichold
Taking another example from 20th century masters of graphic design, Jen walks you step-by-step through how to use CSS Grid, Writing Modes, Transforms and more to implement a fluid site for the web. Demos: • http://labs.jensimmons.com/2016/ • http://labs.jensimmons.com/2017/03-004.html Eric Meyer talks about using b elements for styling parts of a Grid: https://alistapart.com/article/faux-grid-tracks
Views: 19632 Layout Land
Responsive Mondrian – a demo of CSS Grid
New technology for doing web page layout makes implementing old designs much easier. What is even more exciting, we can do new things — and take graphic design on the web to new heights. The modernists accomplished such a feat in the early 20th century, breaking up old styles and old layouts from the Victorian era. Jen takes a Mondrian painting and recreates it on the web using CSS Grid as an experiment to learn about the new possibilities and to better understand what it means for design. Links: • http://labs.jensimmons.com/2017/01-011.html • http://labs.jensimmons.com/2016/examples/image-gallery-grid-1.html
Views: 17969 Layout Land
The Magic of Feature Queries, Part 1 – 5/7 Resilient CSS
To make awesome new designs work in all browsers, sometimes you’ll want to prevent older browsers from running an entire block of CSS unless that browser understands a certain new feature. Enter, the Feature Query. It let's us write one set of code to sometimes work, and sometimes not work, depending on the age of the browser.
Views: 9289 Layout Land
The Secrets of ‘Can I Use’ – 2/7 Resilient CSS
How do you know which browsers support certain CSS properties? Jen takes you on an in-depth tour of caniuse.com, uncovering little-known, powerful features of this site. Plus, she demonstrates other resources for information about support of particular CSS properties and values. Links: • http://caniuse.com • http://gs.statcounter.com • http://developer.mozilla.org • http://chromestatus.com • http://developer.microsoft.com/microsoft-edge/platform/status • http://webkit.org/status • http://platform-status.mozilla.org • http://bugzilla.mozilla.org
Views: 14529 Layout Land
The Firefox Shape Path Editor
Everything on the web starts as a rectangular box. You can use Clip Path and CSS Shapes to change that. Clip the shape of of the element, and make it a circle. Float something and get the content that flows around it to flow along the edges of a polygon. These CSS properties make much more interesting graphic design possible. But also, they can be tricky. The Firefox Shape Path Editor is a tool you can use in Firefox 62 or later to help you edit the basic shape in CSS. Demo at: http://labs.jensimmons.com/2018/02-001.html Shape Path Editor: https://developer.mozilla.org/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes CSS Shapes: https://developer.mozilla.org/docs/Web/CSS/CSS_Shapes Clip Path: https://developer.mozilla.org/docs/Web/CSS/clip-path Guide on basic shapes: https://developer.mozilla.org/docs/Web/CSS/CSS_Shapes/Basic_Shapes Details on basic shapes syntax: https://developer.mozilla.org/Web/CSS/basic-shape Music by Vidian, http://beta.ccmixter.org/files/Vidian/52275 Photo of the bees by Karunakar Rayker, https://twitter.com/krayker
Views: 13305 Layout Land
How Browsers Handle Errors in CSS – 3/7 Resilient CSS
How do you write CSS that works in every browser? Step 1: Rely on the error handling model of CSS itself. CSS and HTML are declarative programming languages, which makes them much more resilient to problems. Rely on this quality to write code that always work, no matter how old the browser is. Jen shows you how, with an example using border radius.
Views: 10614 Layout Land
Unlocking the Power of CSS Overrides – 4/7 Resilient CSS
By thinking through your CSS, and leveraging the power of the cascade and the way CSS overrides itself, you can write CSS to support every browser at the same time. Jen shows you an example using Flexbox and Viewport Units, writing code that works in IE 6, 7, 8, 9, and Opera Mini.
Views: 10653 Layout Land
Innovative & Practical Graphic Design with CSS Grid
Using the inspiration of a jazz festival poster, Jen shows you how to recreate this layout in HTML and CSS. She walks you through her process. Starting with the inspiration, figuring out what the content is and how it should be put in HTML- making sure it’s accessible and reusable. Then apply layout CSS for browsers that don’t support Grid. And finally, layering in a CSS-Grid-based layout. She explains exactly how the Grid container is defined, how items are placed, and how the layout is accomplished. Links: • Jazz Poster example: http://labs.jensimmons.com/2017/03-008.html • Same demo, on CodePen: https://codepen.io/jensimmons/pen/PNaoqv?editors=1100
Views: 10309 Layout Land
Drop Caps on the Web Using Initial Letter
Designers have struggled for years to do robust drop caps on the web. We've tried a series of techniques, but in the end, the enlarged letter usually ends up mis-aligned with the content surrounding it. What's the deal? Well, now we have a new CSS property, Initial Letter, that will make it easy to create a drop cap, an enlarged cap, an initial letter that lines up in every browser. When or why would you want to use a drop cap? How can you do it using new CSS? Examples: http://labs.jensimmons.com/2016/examples/initial-letter.html http://labs.jensimmons.com/2016/examples/initial-letter-2.html http://labs.jensimmons.com/2017/03-002.html
Views: 5042 Layout Land
HTML Source Order and When There’s No CSS
Its important to create HTML that works without CSS — setting your source order and semantic markup before you even get started with your layout. When would there be no CSS? Jen will show you.
Views: 7478 Layout Land
Making Your CSS Fail Excellently – 7/7 Resilient CSS
In the last of the Resilient CSS series, Jen explains when you can't use a newer CSS property. It all depends on whether or not that property will fail well. Thanks to Jeremy Keith for this idea of understanding if something “fails well” being key in deciding whether or not it's a good idea to use it. He has a great talk about this, Evaluating Technology: https://www.youtube.com/watch?v=wAekLOUpMB4
Views: 7111 Layout Land