I can't put into words how much I love this type of presentation. I know this may be a slightly older video but I do hope you keep making things like these and hopefully get more, much deserved attention in the future.
Another awesome (and funny) video. I've been using this sidebar layout approach in a number of components recently, as well as a bunch of other "goodies" from your Every Layout system. Thanks so much for making my life easier!
Great video. There are downsides to using the negative margin hack depending on your use case but under simple implementations it's adequate. Fingers crossed support for the gap property on flex items comes sooner rather than later.
That's really awesome: very informative and well done! The way you explain and illustrate the things you are talking about is absolutely gorgeous. Many thanks!
Watched this video and it was so goog I immediately went to recap ALL of your other video's in this series. Ah, it's just three... Please make more thankyou!
I discovered you through another video someone sent me. Man you're great. I have one question though: sometimes, the design received from a designer is very complex and requires to use the .container from bootstrap, so we have to check the design only 1 to 5 times depending on the resolutions, and not a .fluid-container because it would require to check all sizes possible. Is there a way to imitate this behavior of specific widths container without media queries? Or if not, do you believe there is always a way to make the content flexible whatever design we receive?
A pattern that places an image next to some text? Absolutely! This pattern can work with any two adjacent elements in any context. Thanks for watching!
Do you have a solution for the negative margin hack causing an x-axis overflow and generating a horizontal scroll bar? At least in chrome, didn't try to replicate in other browsers.
I was using flexbox and css grid for a while now, long enough to autosuggest myself into thinking that I understood it. You just demonstrated that a little flex-basis/flex-grow quirk I left aside proves I didn't realize its full potential. Great vid and it's lovely that you're a satanist - Still, inputting 666 feels quite hacky and reminds me the days when people were doing margin-left: -5000px to achieve stuff. Doesn't css have a clearer replacement for it? I'm not against it, I just wish it exist, as it seems like it's intended behavior. Oh! Great intro talking about the space character and its glory.
It is a bit of a hack, and feels weird, I agree. The interesting challenge would be to get the same one-column switch happening for 3 or more elements...
@@heydonworks Not too weird, tho ;) it's a good indication for W3C to come up with something you would put instead of the number of the beast, i.e: flex-grow: satan;
The layout algorithm itself works entirely without JavaScript. The side property simply belongs to a custom element that helps with authoring instances of the layout (I like thinking in terms of components, and folks seem to love a JavaScript snippet). You can just write the HTML (and place the `sidebar` and `not-sidebar` classes) manually instead. Thanks for watching!
Oh.. the wonderfull world of grid - flexbox staff! Until.. you know, someone calls you and says: "Oh, it looks like crap on my computer" - "Ok, what.. what do you mean?" After loads of digging you eventually ask "What is your setup?" "I am using an IE 10 and.. WAIT, why do you even ask? Isn't it SUPPOSED to work on all browsers and sizes?" - "er... Well.. IE10 is really irrelevant, it has less that 4% worldwide .. Flexbox is supposed to be working properly but it doesn't, and grid.." "What? I am using it, so some people are, what is this calling it "irrelevant"? Are you saying that you can not make this work? Should I ask around for people who can?" Ye boiiii
Detect obsolete browsers and disable css. They get a early 90s layout of links and text, and if they want a modern experience, they can use a modern browser.
I enjoyed this video! But if you try to build a production ready solution and support IE11 you'd face "small" challenges :) We even created a opensource project to highlight how this could be in cross-browser manner. github.com/ZS/powergrid/
I can't put into words how much I love this type of presentation.
I know this may be a slightly older video but I do hope you keep making things like these and hopefully get more, much deserved attention in the future.
Thank you, Juni. I have made some more recent videos away from TH-cam at briefs.video. Let me know what you think of them!
You have changed the way I see web design.
Not just this, everything.
This was one of the most informative, incredible entertaining and well done video I have ever seen about such a mundane topic. Please do more!!
Another awesome (and funny) video.
I've been using this sidebar layout approach in a number of components recently, as well as a bunch of other "goodies" from your Every Layout system. Thanks so much for making my life easier!
This video is just way too good!
Subbed. Shared this with my colleagues re: the need to stop shying away from Flexbox + CSS Grid. Exceptionally descriptive video!
Man, how can people -1 this video. It is gorgeous. It is informative. It is awesome. Great, great job.
Great video. There are downsides to using the negative margin hack depending on your use case but under simple implementations it's adequate. Fingers crossed support for the gap property on flex items comes sooner rather than later.
That's really awesome: very informative and well done! The way you explain and illustrate the things you are talking about is absolutely gorgeous. Many thanks!
Man, this video was way too entertaining to be informative.
Genius - this is my kind of web tutorial.
Watched this video and it was so goog I immediately went to recap ALL of your other video's in this series. Ah, it's just three...
Please make more thankyou!
Thanks, I'll try!
You are the best teacher!
Thanks mate for making me laugh and helping me out with an issue - subscribed 👍👍👍👍👍
One of the best explanation i have ever heard plus it was funny
Informative, Entertaining, Keep it Simple - Great - Excellent Work - Thanks
That was awesome, Love your work.
Awesome video!! Grid is so cool. thank you.
That was great! Well done!
I discovered you through another video someone sent me. Man you're great. I have one question though: sometimes, the design received from a designer is very complex and requires to use the .container from bootstrap, so we have to check the design only 1 to 5 times depending on the resolutions, and not a .fluid-container because it would require to check all sizes possible. Is there a way to imitate this behavior of specific widths container without media queries? Or if not, do you believe there is always a way to make the content flexible whatever design we receive?
This must be shared most!
Músic for my ears futurístic ui fan collector
Cool and useful!
that was pretty damn good
damn. that was awesome, never thought flexbox could be used like that. think it's a good replacement for the typical .media-object pattern?
A pattern that places an image next to some text? Absolutely! This pattern can work with any two adjacent elements in any context. Thanks for watching!
How is it possible to be so… unique?
Btw, where did you get all that knowledge? Wow!
Sergey Volynkin he sold his soul to Satan for some sweet CSS knowledge, remember? Duh ;)
Very informative!
You're the hero!
What is a sidebar with 50:50 ratio called?
Ryan
Do you have a solution for the negative margin hack causing an x-axis overflow and generating a horizontal scroll bar? At least in chrome, didn't try to replicate in other browsers.
Yes! You can now forego margins and the negative margin hack entirely and use the `gap` property
Awesome work. Thanks.
Hello, Internet Explorer does not support CSS Grid, does it?
Thanks Heydon!
Please do more!
satan loves css and I subscribe
I was using flexbox and css grid for a while now, long enough to autosuggest myself into thinking that I understood it. You just demonstrated that a little flex-basis/flex-grow quirk I left aside proves I didn't realize its full potential. Great vid and it's lovely that you're a satanist - Still, inputting 666 feels quite hacky and reminds me the days when people were doing margin-left: -5000px to achieve stuff. Doesn't css have a clearer replacement for it? I'm not against it, I just wish it exist, as it seems like it's intended behavior. Oh! Great intro talking about the space character and its glory.
It is a bit of a hack, and feels weird, I agree. The interesting challenge would be to get the same one-column switch happening for 3 or more elements...
@@heydonworks Not too weird, tho ;) it's a good indication for W3C to come up with something you would put instead of the number of the beast, i.e: flex-grow: satan;
FAB!!!
Arrived here from Smashing Mag 😻😻😻
What is a "side" property? Why did you add the javascript at the end? This can't work purely with CSS?
The layout algorithm itself works entirely without JavaScript. The side property simply belongs to a custom element that helps with authoring instances of the layout (I like thinking in terms of components, and folks seem to love a JavaScript snippet). You can just write the HTML (and place the `sidebar` and `not-sidebar` classes) manually instead. Thanks for watching!
So, grid is the way to go ?
It depends what you are trying to do. Are you trying to make a grid layout using CSS Grid?
The Butterfield Layout
Haha, great vid!
so good
I kind of... love u
Good to know! ❤️
hail satan! appreciate your approach/delivery!
Thanks bro
Oh.. the wonderfull world of grid - flexbox staff!
Until.. you know, someone calls you and says:
"Oh, it looks like crap on my computer"
- "Ok, what.. what do you mean?" After loads of digging you eventually ask "What is your setup?"
"I am using an IE 10 and.. WAIT, why do you even ask? Isn't it SUPPOSED to work on all browsers and sizes?"
- "er... Well.. IE10 is really irrelevant, it has less that 4% worldwide .. Flexbox is supposed to be working properly but it doesn't, and grid.."
"What? I am using it, so some people are, what is this calling it "irrelevant"? Are you saying that you can not make this work? Should I ask around for people who can?"
Ye boiiii
"future interfaces"
(boy did this escalate)
@@heydonworks Yes, i suppose I should make things more.. content friendly. Edit incoming I suppose.
Detect obsolete browsers and disable css. They get a early 90s layout of links and text, and if they want a modern experience, they can use a modern browser.
You haven't heard of progressive enhancement builds have you? Go back to your jQuery searches....
Bonbonbonbonbons
Browsers. Yeah boooooi! 💩 😂
I enjoyed this video! But if you try to build a production ready solution and support IE11 you'd face "small" challenges :) We even created a opensource project to highlight how this could be in cross-browser manner. github.com/ZS/powergrid/
SSSSSUBSCRIBED!