Layout Land
Layout Land
  • Видео 32
  • Просмотров 1 839 924
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: noti.st/adactio, and find all his work at adactio.com.
Просмотров: 23 983

Видео

9 Biggest Mistakes with CSS Grid
Просмотров 163 тыс.5 лет назад
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?”: ruclips.net/video/hs3piaN4b5I/видео.h...
CSS Grid Uncollapses Your Margins. What?
Просмотров 13 тыс.6 лет назад
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: codepen.io/jensimmons/pen/pVxrMK The Tweet: jensimmons/status/996811135226695680 Firefox CSS Grid Inspector: devel...
Hot metal : Pasteup :: Floats : CSS Grid
Просмотров 18 тыс.6 лет назад
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 Gr...
MinMax in CSS Grid - 3/3 Flexibility
Просмотров 43 тыс.6 лет назад
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: • labs.jensimmons.com/2017/01-003C.html • labs.jensimmons.com/2...
FR Units in CSS Grid - 2/3 Flexibility
Просмотров 53 тыс.6 лет назад
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. gridsetapp.com alistapart.com/article/content-out-layout
Min & Max Content Sizing in CSS Grid - 1/3 Flexibility
Просмотров 61 тыс.6 лет назад
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 - labs.jensimmons.com/2017/02-004.html • Jan Tschi...
Designing for A Viewport
Просмотров 34 тыс.6 лет назад
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: labs.jensimmons.com/2017/03-008.html labs.jensimmons.com/2017/01-006.html labs.jensimmons.com/2017/01-008C.html labs.jensimmons.com/2017/01-010.html To see more clips, or order the whole series of Hollywood Camera Work's Ma...
Cropping images with Object Fit
Просмотров 37 тыс.6 лет назад
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: labs.jensimmons.com/2016/examples/object-fit-photos.html or on CodePen: codepen.io/jensimmons/pen/jqKNxg?editors=1100 • Article w/ header layout: labs.jensimmons.com/2016/examples/grace-hopper-page.html or on CodePen...
Introduction to Viewport Units
Просмотров 63 тыс.6 лет назад
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: • labs.jensimmons.com/2017/01-010.html • labs.jensimmons.com/2016/examples/coversheet-3.html
Drop Caps on the Web Using Initial Letter
Просмотров 13 тыс.6 лет назад
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...
Overlap on the Web, Graphic Design Made Easy with CSS Grid
Просмотров 56 тыс.6 лет назад
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 exam...
Use Clip Path to Vary Your Designs on the Web
Просмотров 24 тыс.6 лет назад
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: labs.jensimmons.com/2016/examples/clip-path.html Wide Hive: www.widehive.com Clip path on MDN: developer.mozilla.org/en-US/docs/Web/CSS/clip-path Support for clip-path on Can I Use: caniuse.com/#feat...
Making Your CSS Fail Excellently - 7/7 Resilient CSS
Просмотров 13 тыс.6 лет назад
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: ruclips.net/video/wAekLOUpMB4/видео.html
The Magic of Feature Queries, Part 1 - 5/7 Resilient CSS
Просмотров 20 тыс.6 лет назад
The Magic of Feature Queries, Part 1 - 5/7 Resilient CSS
The Magic of Feature Queries, Part 2 - 6/7 Resilient CSS
Просмотров 13 тыс.6 лет назад
The Magic of Feature Queries, Part 2 - 6/7 Resilient CSS
Unlocking the Power of CSS Overrides - 4/7 Resilient CSS
Просмотров 21 тыс.6 лет назад
Unlocking the Power of CSS Overrides - 4/7 Resilient CSS
How Browsers Handle Errors in CSS - 3/7 Resilient CSS
Просмотров 20 тыс.6 лет назад
How Browsers Handle Errors in CSS - 3/7 Resilient CSS
The Secrets of ‘Can I Use’ - 2/7 Resilient CSS
Просмотров 29 тыс.6 лет назад
The Secrets of ‘Can I Use’ - 2/7 Resilient CSS
Introduction to Resilient CSS - 1/7
Просмотров 53 тыс.6 лет назад
Introduction to Resilient CSS - 1/7
HTML Source Order and When There’s No CSS
Просмотров 15 тыс.6 лет назад
HTML Source Order and When There’s No CSS
Whitespace on The Web! - with CSS Grid
Просмотров 26 тыс.6 лет назад
Whitespace on The Web! - with CSS Grid
Using Flexbox + CSS Grid Together: Easy Gallery Layout
Просмотров 110 тыс.6 лет назад
Using Flexbox CSS Grid Together: Easy Gallery Layout
Basics of CSS Grid: The Big Picture
Просмотров 188 тыс.6 лет назад
Basics of CSS Grid: The Big Picture
Obliterate Boxiness with CSS Shapes
Просмотров 48 тыс.6 лет назад
Obliterate Boxiness with CSS Shapes
CSS Grid like you are Jan Tschichold
Просмотров 62 тыс.6 лет назад
CSS Grid like you are Jan Tschichold
Innovative & Practical Graphic Design with CSS Grid
Просмотров 34 тыс.6 лет назад
Innovative & Practical Graphic Design with CSS Grid
Flexbox vs. CSS Grid - Which is Better?
Просмотров 298 тыс.6 лет назад
Flexbox vs. CSS Grid - Which is Better?
Internet Explorer + CSS Grid????
Просмотров 40 тыс.6 лет назад
Internet Explorer CSS Grid????
Responsive Mondrian - a demo of CSS Grid
Просмотров 65 тыс.6 лет назад
Responsive Mondrian - a demo of CSS Grid

Комментарии

  • @khanhngxn
    @khanhngxn 23 дня назад

    This is amazing. Thanks for your explanation!

  • @usamasaad9334
    @usamasaad9334 Месяц назад

    Your way of talk is so beautiful

  • @akanmuoluwaseyi5187
    @akanmuoluwaseyi5187 2 месяца назад

    This is so amazing... thank you madam, Jesus bless you real.

  • @lorenzojavier-av
    @lorenzojavier-av 2 месяца назад

    I am beginning to use CSS. This video was helpful. I will probably be watching all your other videos for a while. Thank you for sharing your knowledge so succinctly.

  • @user-kn2dx4kn7k
    @user-kn2dx4kn7k 3 месяца назад

    wow, nice

  • @mmahgoub
    @mmahgoub 3 месяца назад

    No wonder she works for Apple now! this vid is a very solid reference, thank you very much!

  • @Tiger__Man
    @Tiger__Man 4 месяца назад

    I changed my whole code i had a bad thoughts about vh and vw . I was changing the font size each break with media queries. now I guess I don't need to. thanks to you

  • @lacocinadeluchito183
    @lacocinadeluchito183 4 месяца назад

    ❤‍🩹❤‍🩹❤‍🩹👍👍👍

  • @nayaktricksgaming
    @nayaktricksgaming 6 месяцев назад

    You explained everything in such an easy way that no one else can understand, please make more videos because the web-development community needs people like you to help please make more videos on web development thanks.

  • @Manas-co8wl
    @Manas-co8wl 6 месяцев назад

    Thank you it was very useful

  • @doneilchapman1542
    @doneilchapman1542 7 месяцев назад

    I love the introduction. Great video!

  • @petralawson2044
    @petralawson2044 7 месяцев назад

    Just wanna say thank you for this treasure trove of videos. They are so helpful, and so clearly explained. Thank you for sharing your knowledge with us!

  • @learningtocodeafterforty
    @learningtocodeafterforty 8 месяцев назад

    I found your CSS grid card layout so important to my learning that I would like to ask your permission to add a link on my website to the CodePen and RUclips lesson. Many thanks Dan

    • @LayoutLand
      @LayoutLand 8 месяцев назад

      Oh of course! I’d love for you to link to this video.

    • @learningtocodeafterforty
      @learningtocodeafterforty 8 месяцев назад

      Thanks so much. Your card layout is so awesome.

  • @topreyalite
    @topreyalite 9 месяцев назад

    Very good explanation

  • @lukedorny
    @lukedorny 10 месяцев назад

    Revisiting these excellent videos, Jen. Please update: The `auto-fit` shown at @4:21 doesn't have a comma, but it should, just like the code view @3:30 & @5:05 Thank you!

  • @edwassermann8368
    @edwassermann8368 10 месяцев назад

    sooo coool! love these grid possibilities

  • @suspendedhatch
    @suspendedhatch 10 месяцев назад

    What happened to Jen Simmons?? She dropped off the face of the Earth after creating this channel and her website. I have been so incredibly inspired but everything she left is frozen in time.

    • @LayoutLand
      @LayoutLand 10 месяцев назад

      I got COVID. Which led to long covid. And yes, that causes us to go missing. 🥺

  • @Christopher-ub1cx
    @Christopher-ub1cx 10 месяцев назад

    You ARE that someone Jen, you are leading the charge, - inspired by your brilliant design and thought processes, I'll be joining you there. Thank you so much ! <3

  • @manjoujanzen9375
    @manjoujanzen9375 10 месяцев назад

    Thank you, Jen. Very good and clearly explained content.

  • @cekuhnen
    @cekuhnen 10 месяцев назад

    Well done !

  • @JoseCarballosa
    @JoseCarballosa 11 месяцев назад

    If I keep reducing the viewport width once column #4 hits the min, the gaps disappear next, and columns #2 and #3 re-appear! How could we give the space coming free from the gaps to column #1 instead? That would continue the fluid experience. Thanks for your amazing videos!

  • @linesave754son2
    @linesave754son2 11 месяцев назад

    thanks for sharing greetings from peru

  • @Christopher-ub1cx
    @Christopher-ub1cx 11 месяцев назад

    Your super intelligent, evolutionary approach to web design is so inspiring. I'm not a "just learn the basics" sort of person, and your channel is exactly what I needed to deep dive into css to MY standards. Thank you so much! More than that, your beautiful, badass layouts have had an expansive effect on my idea of what web d&d can be. <3

  • @kenthhagstrom
    @kenthhagstrom 11 месяцев назад

    4 years later all frameworks advertise they support css grids... As a coder I'm a bit sad actually.

  • @gangwang9641
    @gangwang9641 11 месяцев назад

    It will still be useful to see your video in 2023, thanks

  • @ApprendreSansNecessite
    @ApprendreSansNecessite Год назад

    6:46 "lichtbildervortrag" should scale to match "freier free free...", or "die neue typographie" should escape that grid so that there is no gap on the left. Great video but I guess we still cain't reproduce these designs without JS

  • @sameenrehman5021
    @sameenrehman5021 Год назад

    is there any updated version of this video?? @LayoutLand

  • @BruceMagee
    @BruceMagee Год назад

    I miss your podcast!

  • @chrispratt3047
    @chrispratt3047 Год назад

    I've been learning web development for a few months now, specifically html and css, and my biggest problem since the beginning has been figuring out the overall layout of the page. I've watched video after video on flexbox and grid, and although they've taught me some useful things, it wasn't enough to be able to just go ahead and do it myself. Kinda like learning to drive with or without an instructor.....you're fine with the instructor, but not without. Your videos have helped me manage that drive on my own without the instructor! Excellent tutorials, very well explained. Thank you for doing these, you have restored my faith in myself! Now I'm going to make myself a cuppa and watch some more :)

  • @shoaibmohammad6679
    @shoaibmohammad6679 Год назад

    Thank you very much for making video css grid layout.

  • @abdallahmansor
    @abdallahmansor Год назад

    Awesome, 4:35

  • @redwolfsoftware3630
    @redwolfsoftware3630 Год назад

    Out of curiousity, what does grid do differently than old school css: display:inline-block; margin: 1rem; min-width:300px? It appears to give the same result. Or does the grid layout maintain the same size of each item regardless of the inner content?

  • @royandescartes
    @royandescartes Год назад

    wow. this right here is gold. thank you

  • @royandescartes
    @royandescartes Год назад

    where have you been all my css life? THANK YOU!

  • @Jody-nf2bz
    @Jody-nf2bz Год назад

    Excellent tutorial! Thanks a lot!

  • @sigmaviscount6631
    @sigmaviscount6631 Год назад

    I read your book Jen. You are such a goddess on this. ❤❤❤

  • @kishoreandra
    @kishoreandra Год назад

    Wow this is an amazing explanation 🙏🙏... am I the only thinking Jen didn't explain about inage going out of grid 😛 or maybe covered in future videos 🤔.... Anyways I'm loving this playlist and Jen thankk youu soo soo much for creating one such 🙏... 🎩s off

  • @kishoreandra
    @kishoreandra Год назад

    You can only explain at this level and make people understand it easier if you are directly involved in working groups 🤷‍♂️ Jen is the bestest of bests 🙌🙏

  • @vanyaliveshere
    @vanyaliveshere Год назад

    Appreciate the explanation, on my way towards getting a career in IT through the Odin Project! Wish me luck

  • @edwassermann8368
    @edwassermann8368 Год назад

    I love the way you make me think about the possibilities to design for the web.

  • @sheheryarqazi1006
    @sheheryarqazi1006 Год назад

    thank you so much

  • @Mel-mu8ox
    @Mel-mu8ox Год назад

    I'm so glad I found this channel :D

  • @edwassermann8368
    @edwassermann8368 Год назад

    so dope. Thanks Jen!

  • @ColbyARussell
    @ColbyARussell Год назад

    The perverse thing is that, with respect to what true Web literacy would really mean, none of this matters, and none of it should matter. Here's what Tschichold said in The Form of the Book: Essays on the Morality of Good Design (translation by Hajo Hadeler): "The work of a book designer differs essentially from that of a graphic artist. While the latter is constantly searching for a new means of expression, driven at the very least by his desire for a "personal style", a book designer has to be the loyal and tactful servant of the written word. It is his job to create a manner of presentation whose form neither overshadows nor patronizes the content [... whereas] work of the graphic artist must correspond to the needs of the day." Most self-styled Web designers have more in common-no matter what the circumstances actually call* for-with Tschichold's characterization of the graphic artist rather than the book designer. Look at the things they bother themselves with: fleeting fashions and ephemeral gimmickry-all things that give away their true order of priorities, where form is the foremost concern and the thought actually being conveyed takes a backseat. These are certainly not tactful servants of the written word (or the people who will be ingesting those words). * And to be clear: what the circumstances overwhelmingly call for is that kind of servant, and not folks afflicted with the particular strain of déformation professionnelle that leads to them seeing everything as an opportunity to shoehorn something in that can double as a piece for their personal portfolio

  • @jeroendonker
    @jeroendonker Год назад

    As a visual (Webflow) developer in 2023 I really appreciate these kinds of explanations from years ago. It makes me realize that the web is a dynamic place, where things change rapidly and sometimes not at all. Curiosity about the underlying code brought me here…

  • @lecirconflex
    @lecirconflex Год назад

    I mean yeah, I am impressed how well all of this grid stuff works, but I am in awe seeing how clean my html markup looks after the treatment. No superfluous containers and weird classes, but everything makes sense! Thank you so much for your great videos!

  • @shiuandai0426
    @shiuandai0426 Год назад

    thank you for your brief inro

  • @user-um7tw6kx4r6
    @user-um7tw6kx4r6 Год назад

    Thanks to you I went from never having made a single grid, to figuring it out and making one, without having to read another lame tutorial...THANK YOU!!