10 modern layouts in 1 line of CSS
Рет қаралды 1,120,753
4 жыл бұрынIn this dynamic talk, Una goes over the power of modern CSS layout techniques by highlighting a few key terms and how much detail can be described in a single line of code. Learn a few layout tricks you can implement in your codebase today, and be able to write entire swaths of layout with just a few lines of code.
Resource:
Check out the demo website: 1-Line Layouts → goo.gle/2ViY1KE
Related Playlist:
Day 3 → goo.gle/WDL20Day3
Subscribe to the Chrome Developers → goo.gle/ChromeDevs
Speaker:
Una Kravets
#webdevLIVE #CSS #weblayout event: web.dev LIVE 2020; re_ty: Publish; fullname: Una Kravets; product: Chrome - General;
@asdasdasdasd714 3 жыл бұрын
Me: Probably another library or something.. Video: "place-items: center;" Item: **Actually centered** Me: **Standing ovation**
@akshy471 3 жыл бұрын
i still cant center without checking the browser window
@jerzyglowacki 3 жыл бұрын
Come on, another library? You could've used align-items: center; justify-items: center; for many years, this is just a shortcut.
@aniketmishra9265 3 жыл бұрын
@@jerzyglowacki it still doesn't work sometimes :'(
@jerzyglowacki 3 жыл бұрын
@@aniketmishra9265 When?
@tropingreenhorn 3 жыл бұрын
@@jerzyglowacki isn't that flexbox? Not grid?
@leeboyin945 4 жыл бұрын
02:06 01. Super Centered place-items: center 03:03 02. The Deconstructed Pancake flex: 0 1 04:36 03. Sidebar Says grid-template-columns: minmax(, ) ... 06:12 04. Pancake Stack grid-template-rows: auto 1fr auto 07:45 05. Classic Holy Grail Layout grid-template: auto 1fr auto / auto 1fr auto 10:04 06. 12-Span Grid grid-template-columns: repeat(12, 1fr) 11:47 07. RAM (Repeat, Auto, Minmax) grid-template-columns: repeat(auto-fit, minmax(, 1fr)) 13:56 08. Line Up justify-content: space-between 16:08 09. Clamping My Style clamp(, , ) 18:35 10. Respect for Aspect aspect-ratio: /
@amithbhagat 4 жыл бұрын
Thanks for summary
@deepakvishwakarma2043 3 жыл бұрын
Are you an angel? 😇😇
@punkrockllama 3 жыл бұрын
The real MVP
@copperbadge1 3 жыл бұрын
@ Google Chrome Developers This deserves a pin. :)
@nonoachim 3 жыл бұрын
Ty
@OneAndOnlyMe 3 жыл бұрын
This video improved my life expectancy.
@ontariobarclay 3 жыл бұрын
lol
@nevinkuser9892 3 жыл бұрын
😂
@Richienb 4 жыл бұрын
yes i can finally center in css
@pushingpandas6479 3 жыл бұрын
only working on chrome browser
@VipinSharma-mr7sq 3 жыл бұрын
Display flex, align item center, justify content center.....go nuts!
@JorgeGutierrez-kb7rw 3 жыл бұрын
@@VipinSharma-mr7sq works everytime
@abdullahwaleed5571 3 жыл бұрын
@@GergiH who the **** cares about IE4, even KZfaq don't support it.
@typicalprogrammer3542 3 жыл бұрын
@@VipinSharma-mr7sq height : 100vh; is required to center it vertically.
@sharpesttoolintheshed492 3 жыл бұрын
justify-self: center justify-content: center justify-items: center align-self: center align-content: center align-items: center line-height: 100% text-align: center margin: auto auto vertical-align: middle *place-items: center*
@Nurutomo 3 жыл бұрын
10 vs 1
@quazar-omega 3 жыл бұрын
..and they don't stop coming, and they don't stop coming... (fitting with your pfp)
@ajayrawat5603 3 жыл бұрын
Can I add one more? position: absolute top: 50% left: 50% transform: translate(-50%, -50%)
@ephektz 3 жыл бұрын
I felt this.
@speedynote3169 3 жыл бұрын
lolz i have used all these values
@enijar 4 жыл бұрын
Imagine showing someone from 20 years ago how easy web layouts would be in the future :)
@BodawalaPratik 4 жыл бұрын
I'm from future, in 20 years, everything will run and support the web. PWA is just the tip of the ice burg.
@user-yd7db3wd7w 4 жыл бұрын
@@BodawalaPratik in 20 years from your future web layouts will be made by AI
@DineshkumarPuli 4 жыл бұрын
Actually, 20 years ago we didn't have to worry about responsive layouts
@paweld 4 жыл бұрын
@@DineshkumarPuli Just embed flash in an object set to 100% width and scale being exactfit.
@JonathonBroughtonUK 4 жыл бұрын
I am from 20 years ago.
@havokca 3 жыл бұрын
I'm only 4:30 in and already this is the most useful CSS tutorial I've come across in weeks of trying to come up to speed on where the web has gone in the 15 years since I last dabbled. Fantastically simple and straightforward presentation too. No useless fluff. Just dive into the details with visually compelling examples.
@JustValxntine 3 жыл бұрын
I've never been more ashamed in the lack of my CSS knowledge.
@FernandoJimenez-cd1ui 3 жыл бұрын
same bro haha
@HareemAdderley242 3 жыл бұрын
Just when you think you know web development......here comes CSS with some new properties you never saw in your life
@ramaniso235 3 жыл бұрын
same here
@bloodaid 3 жыл бұрын
I now prodly hate every css article I've ever read. I used to be angry because I thought I was stupid, it turns out not only am I stupid, but every css blog author is also stupid.
@Draecko 3 жыл бұрын
You don't have to be ashamed, some of these tricks became fully supported by mobile just days ago, so consider yourself on the cutting edge here.
@tanvirmahbub3595 4 жыл бұрын
The happiness you are radiating in the video makes everything easier to understand.
@FlorianEagox 3 жыл бұрын
Incredible. The level of sophistication and simplicity in modern CSS takes my breath away. I need to kick my flexbox addiction and start using grid as well
@osogrizz2841 3 жыл бұрын
I once tried to explain to someone at a job fair that manually centering a button was one of my earliest proudest moments in web development. I don't think they understood.
@ontariobarclay 3 жыл бұрын
They'll never understand...
@greentea5593 4 жыл бұрын
One of the best CSS layout videos that I've ever seen!
@devfric3149 4 жыл бұрын
Agree. I hate CSS but the way she simplifies it makes me actually want to use it.
@richtraube2241 3 жыл бұрын
Agreed.
@marcinceHH 3 жыл бұрын
True =]
@craigdanielmaceacher 3 жыл бұрын
Probably the most important CSS video for modern web I've ever come across, thanks!
@ontariobarclay 3 жыл бұрын
So true... I have to say though, I was looking for the IE11 fixes but then the video did say "modern layouts". IE11, the bane of my life! >''
@ontariobarclay 3 жыл бұрын
@Data I hear @Data, sadly sometimes, clients want compatibility with old browsers.
@HareemAdderley242 3 жыл бұрын
Watched this video two weeks ago and today I had to use one of these valuable nuggets. Keep learning....you never know when and where you will need to apply what you learned.
@Designguidetv 4 жыл бұрын
possible to add more then 1 like? i think i missed 10 years of css updates
@voltcorp 3 жыл бұрын
same! I was in another tab searching like "is this flexbox thing a .js that I have to call first or what"
@billsomen7953 3 жыл бұрын
I thought I was alone. I feel less ashamed now... lol
@agentstona 3 жыл бұрын
Well most browsers mobile devices still dont have the updates required to support the css she tought .........So you are all good mate LEGACY CSS is still very much CURRENT
@jeremyrubio1531 2 жыл бұрын
honestly this 21 minute video saves a lot of my time ! and the vibes while you explain things make it more exciting to do ! I love this, thank you so much.
@kvncnls 4 жыл бұрын
Don't apologize for the titles of your layouts. You've made it a LOT easier to remember them :)
@josephjojo756 4 жыл бұрын
I'm not a design person, so whenever I try to do a design mock-up I have to write many lines of code and even that doesn't give me satisfaction on my work. But after watching this, I think my work can be reduced a lot. can't wait to try this out. Really nice presentation. Thank you for these great tips!
@carldressler3262 3 жыл бұрын
You should try a Prototyping/UI Design software like Adobe XD, Sketch or Figma. Figma has a free tier and Adobe XD is entirely free, give it a try (not as hard to learn as other Adobe programs luckily)
@josephjojo756 3 жыл бұрын
@@carldressler3262 thank you so much for your suggestion. Yeah surely I'll give it a try.. 👍
@shivanshkumar3754 3 жыл бұрын
I'm sorry if this is annoying but is your name a flipping JoJo reference. Nice!
@xatoor 3 жыл бұрын
@@shivanshkumar3754 man another freaking jojo fan KAKATANA AHOGA! THUNDER CROSS SPLIT ATTACK!
@ontariobarclay 3 жыл бұрын
@@xatoor What is "Jojo"?
@GlaucoHass 3 жыл бұрын
I've been looking at that little happy smiling face in the recommended videos for quite a few days, but only today I got the planning to watch it and I'm glad I didn't postpone it more. That was a really cool bunch of tips that I'm going to write it down and use it right away. I may have already know the couple of flex ones, but got much more from this than I hoped for. Seriously, what a cool format and straight forward way of presenting them.
@AdrianToddRoss 3 жыл бұрын
There are some real gems here. I'm always coming back to watch this video again and check out the demo link
@reyromero8490 3 жыл бұрын
that centered element is what I was exactly looking for!!!! I've been so perplexed by that one!!!!
@jasonlotito 3 жыл бұрын
Simple, practical, clear and concise. Love it!
@Kawlinz 3 жыл бұрын
This is literally the most helpful practical and practical css guide I've ever seen
@sAmSu7 3 жыл бұрын
Hey Una, that Video is awesome! Simple, straight forward, very nailed information without talking-overhead and very useful hints. I bet this will save me many hours of effort in the future. It's the best Video I've seen about CSS-styling for a long time!
@lachlanjcampbell 4 жыл бұрын
Sooooo useful & Una is an amazing presenter. Thank you!!!
@dsuess 3 жыл бұрын
I've switched from doing websites back in 2008 to strickly a back-end dev. It's amazing how much things have changed and the newer CSS features. THANK YOU!!!
@yisroelarnson9881 3 жыл бұрын
I love this!! I've had many frustrating experiences trying to center simple items. This really explains layouts well!
@sheldonfernandes3588 4 жыл бұрын
Nice vibes :) You are so happy and seem to have a perfect fitting job Una. And great content too.
@KevinDrongowskiSmart 3 жыл бұрын
This video is so straight forward and well explained. Saving forever
@radiowallofsound 3 жыл бұрын
this is by far the best css video I've seen, exactly what I needed.
@frozen_tortus 3 жыл бұрын
This is one of my favorite videos, Una is an awesome presenter and teacher.
@farshadgh2011 3 жыл бұрын
This is both amazing and exciting. I learned a bunch of new techniques, thanks.
@flwi 4 жыл бұрын
Thanks for this great tutorial! You're very good at breaking down the concepts behind the tricks. This will make my life a lot easier, since I'm currently experimenting with some frontend technologies without a lot experience in it.
@cosmonovanta 3 жыл бұрын
Your enthusiasm is contagious! Thank you
3 жыл бұрын
I keep coming back to this video and use it as a small CSS cookbook. Thanks for the video and the tips!
@RobHope 4 жыл бұрын
Thank you Una - this was wonderfully explained and presented
@evoltelectrical 4 жыл бұрын
Super informative presentation! I am with you on that aspect ratio, that would be a great addition, can't wait!
@tylerrobb 4 жыл бұрын
What a gamechanger! My life will be much easier when that's common.
@daheck81 4 жыл бұрын
Tyler Robb Well you can already set aspect ratios by using padding with a percentage (like padding-bottom: 56.25% (for 16/9)) but it's not that readable. Would be way cleaner to implement it like this
@drickzee 4 жыл бұрын
Great video!! Had to save this to watch later cos we all know I’ll forget how to implement this by the time I’m done with my web dev course. Thank you!
@ArunSingh-vp3pu 3 жыл бұрын
Much appreciated, doing something so simple that other people never thought of doing it... Please keep posting these useful tips, It will help a much larger community on a global scale. Thanks for such a simple presentation cheers :)
@mountainslopes 3 жыл бұрын
This was amazing, had me smiling. So simple!
@RushPL1 3 жыл бұрын
Wow, I learned so much from this video. Thank you for putting it together.
@drrecommended4850 3 жыл бұрын
what an incredible presentation. i have been having an issue with centering something in my portfolio and you saved the day!! so happy to have randomly found this.
@harshithp3007 3 жыл бұрын
This 20 minutes video will save me 20 hours of writing media queries in my next project❤️
@AaronGrogg 4 жыл бұрын
Thanks, Una, awesome as usual!!
@masongoodnight3782 3 жыл бұрын
This is like the holy grail of videos ever - A backend engineer
@musicdev 3 жыл бұрын
This is like the holy grail of videos ever - A dude that does full-stack currently. I didn't even know any of this and I'm knee-deep in CSS at least 10 hours a week...
@kouroshg4621 3 жыл бұрын
Loved it, the most useful 20 minutes of CSS layout tut. Thank you and please make more videos of this kind.
@AG-gr4fm 3 жыл бұрын
Amazing content, Una, and fantastic job explaining the modern CSS techniques - Thank you!
@AbhiKhatri 3 жыл бұрын
Woah, It's been a long time since I've seen Una, I remember using your css based Instagram filters back in the day! Really nice to see you as part of google now. 🙌
@archierm 3 жыл бұрын
You don't know how long I have been doing the ol' position:abs top:50% left:50% and finally transform:translate(-50%,-50%) to center things XD
@jimhalpert9803 3 жыл бұрын
I still do the same
@sebastiansimon7557 3 жыл бұрын
Before watching this video, I thought this was still the modern way to do it… Actually, when trying out `place-items: center;`, the child is not actually centered if the parent is smaller than the child. With `translate`, it still works!
@woutermissler5371 3 жыл бұрын
It really depends on the context of the situation, the solution you use works basically 100% of the time but the place-items: center; option only works sometimes which is why I tend to stick to the same solution
@codewithmeer 3 жыл бұрын
@@woutermissler5371 dont go for place item rather use flexbox or more better grid
@sebastiansimon7557 3 жыл бұрын
I just had to deal with something that may be a bug in Firefox: when centering elements with the `translate` approach, it seems that the _print preview_ still considers the extra space created by the `left` and `top` positioning, even if everything should be centered on one page; the extra space completely break the paged media layout. With the Grid centering, no extra space is created at any point, so only this works.
@user-tm1sc2pd9p 4 жыл бұрын
nice. Firstly thought it would not be such easy and helpful. But even with all my experience found new things and it was just pleasure to watch this video. Good job!
@rantilinis 3 жыл бұрын
who knew centering in css is now THAT easy! Brilliant video!!!
@domwareapps508 4 жыл бұрын
10 modern layouts in 1 line of css: she minify it
@shriniwasrocks 4 жыл бұрын
lol. underrated comment.
@billsomen7953 3 жыл бұрын
@@shriniwasrocks this guy is crazy !!
@alexjagi3448 3 жыл бұрын
@@billsomen7953 And yet - it's true hahahah
@YunisRajab 3 жыл бұрын
My entire website in one line lmao
@JonasRafaelRossatto 3 жыл бұрын
hahahhahaha
@eoussama 3 жыл бұрын
The aspect ratio one is gonna save me a lot of trouble dealing with International Paper Sizes
@jimbernard3289 3 жыл бұрын
This is what all web dev tutorials/training should look like. Thanks! Please make a full course on practical CSS.
@bavariantrawler 3 жыл бұрын
this is freaking amazing! Thanks Una!
@popskies 3 жыл бұрын
The aspect-ratio property is definitely a life-saver in the making. Hope it will come to each browsers near soon.
@jerzyglowacki 3 жыл бұрын
Won't padding-bottom: calc(9 / 16 * 100%); save your life?
@ashleyhoward14 3 жыл бұрын
Love the passion here!
@richtraube2241 3 жыл бұрын
Thanks for sharing. I've tried some grid tuts and I like your component approach lots, lots more. Can't wait to play. I also can't wait until clamp is fully supported. It'll make responsive font sizing *soooo* much easier.
@YunisRajab 3 жыл бұрын
Every time I think I know CSS, a video like comes along to show me new stuff and creative ways of using old stuff
@sinki19841984 3 жыл бұрын
As a total noob it's actually good to see that others struggle with the same things as I am struggling with.
@RideTheTeacups 4 жыл бұрын
CSS aspect-ratio!!! MAKE IT HAPPEN!!! I'm so excited.
@patrickc.6183 4 жыл бұрын
Same here, probably one of the most needed properties for CSS!
@reactoranime 3 жыл бұрын
padding-bottom: 56%
@RideTheTeacups 3 жыл бұрын
Pavel Ivanov I’ve been using that (56.25%) for now. This will he so much easier, especially for other ratios.
@jerzyglowacki 3 жыл бұрын
@@RideTheTeacups It's easy - for other ratios like 4/3 just use padding-bottom: calc(3 / 4 * 100%);
@deeliriyum 2 жыл бұрын
MOOOOOREEE! This was such a useful video packed with good information and even better explanations!
@juniordev4life 4 жыл бұрын
Thank you for this great video. I'm coding for years and it is nice to learn every day some little helpful things which make the developer live easier. I hope the aspect-ratio will implement in all browser very fast. The clamp property I didn't know about it but it has enormous potential for many projects in my future work.
@Submersed24 3 жыл бұрын
Iroh once said that you must center yourself before you center in css.
@slimyelow 3 жыл бұрын
Amazing stuff. I had no idea Grid could do all that! Who needs Bootstrap ??
@songwright 3 жыл бұрын
This is a great video! I constantly tell people to use CSS grid. It's great. And you are wonderful, you personality if perfect for videos, very cheerful and accessible.
@pkcartoon2023 3 жыл бұрын
Great and wonderful! I am updating my knowledge, but I would appreciate the way you speak, you let other people be interested to hear you
@petarkolev6928 3 жыл бұрын
Una, thank you
@boallen2645 3 жыл бұрын
Who remembers rounding corners with images? >.
@UnaKravets 3 жыл бұрын
Image slicing!
@jerzyglowacki 3 жыл бұрын
I remember adding rounded corners using VML in IE!
@Liath666 3 жыл бұрын
And then putting them in tables ! Good times :D
@LorenHelgeson 3 жыл бұрын
@@Liath666 Oh, I remember those days.
@mcdba41 3 жыл бұрын
and SlidingDor for button
@ltdev5688 3 жыл бұрын
This video is a godsend. After hours of scouring stack-overflow for continuously more convoluted solutions that don't even work properly, this video finally showed me how to actually do what I wanted properly.
@FelipedosSantosAssis 3 жыл бұрын
Wow!!! It's amazing!!! There're many simple ways to improve our layouts! Thanks to share it!!!
@acidfreq7 4 жыл бұрын
Absolutely smashing. Not a media query in sight. This pairs perfectly with Andy Bell's CUBE methodology. Thank you! By the way, who downvotes a wonderful video like this?
@rodrigocunha34 3 жыл бұрын
google haters, who knows?
@hariyapa 3 жыл бұрын
This is earth and all kinda creatures are found here 😂
@The-Great-Brindian Жыл бұрын
i'm a media query guy myself tbh if you go the bespoke route, not using css frameworks then media queries are inevitable.
@swyxTV 4 жыл бұрын
you are so good at this 👏 just amazing to watch
@MattEland 4 жыл бұрын
Completely agree. A natural presenter with excitement, simplicity, and deep experience.
@BloodyClash 4 жыл бұрын
Best thing is to see how much fun she has doing that stuff
@frankimade6875 3 жыл бұрын
I believe I saw your photo on freecodecamp.org
@markusseyfferth1778 3 жыл бұрын
Fantastic job Una, thank you for preparing these super helpful examples.
@jeteloriaga 3 жыл бұрын
i am sure i will never find a better lesson in css than this one! thanks a trillion!
@hansschenker 4 жыл бұрын
My Aspct-Ratio is clamping me ! ^_^ ! - thank's a lot for publishing - cool layout possibilities!
@schwarzkopfb 3 жыл бұрын
Who still remembers the tag?
@justinbennet9050 3 жыл бұрын
Remember it? Google still uses it on their home page. I kid you not!
@jurchiks 3 жыл бұрын
@@justinbennet9050 that's because they want it to display properly on EVERYTHING.
@jimhalpert9803 3 жыл бұрын
Oh damn I forgot about it!
@priusscientia 3 жыл бұрын
This tag does not center vertically... Centering horzintally was never a real problem.
@babalonmotherofabomination8249 3 жыл бұрын
this is the most useful youtube video i've watched in my whole life
@Book007 3 жыл бұрын
Thank you for the information. I found that your enthusiasm and presentation style made the video fun to learn.
@aakashbhadana7340 4 жыл бұрын
We are in 2020, still not able to figure out how to center things in HTML/CSS 🤣
@johansmolinski 3 жыл бұрын
Just put everything within a tag and you’ll be fine.
@maxclifford937 3 жыл бұрын
Display: flex; justify-contnet: centre; align-items: centre OR use auto margins. Also firefox is much better for working out what css doenst work.
@ryonagana 3 жыл бұрын
@@maxclifford937 in mid 2000's i use to use float: right then move left half value of the width like .t { width: 100px; float: right; left: -50px; } this works but its a pain to align children please do not use this way
@ozgur95 3 жыл бұрын
@@ryonagana and there was stupid clearfix solution etc. grid and flex layouts save us a lot.
@zzzdan 3 жыл бұрын
Pff, easy. Just keep adding in front of the element until it's roughly in the center of your screen.
@HareeshRamachandran 4 жыл бұрын
eagerly waiting for aspect ratio to be implemented. I'm still using "padding-top" on parent and "display absolute" on child to get this done :(
@lets_lvl_up 3 жыл бұрын
Awesome tutorial, no time wasted, straight to the point...Thanks xD
@descongestionante_nasal 3 жыл бұрын
I loved to learn more about CSS! Thank you so much for this video :)
@TECHNOLOGYFAQ 4 жыл бұрын
Thanks. Very helpful. 10:47 we can use grid-column: 1/-1;
@ridl27 3 жыл бұрын
waiting for full aspect-ratio support!
@catalinim4227 3 жыл бұрын
I love your positive attitude and the useful tips you show us. Thank you !
@VarunGoelYOLO 4 жыл бұрын
Crisp and powerful.Excellent presentation
@TheNewton 4 жыл бұрын
18:35 10. Respect for Aspect - without newer features this is currently handled by using percentage padding hacks with absolute positioned children set to 100% width & height. Where the percentage padding is the aspect ratio.
@thirien59 3 жыл бұрын
i think the whole point of this feature, is to make this easy to do
@meneereenhoorn 3 жыл бұрын
@@thirien59 I think the whole point of @Paul Newton's response is to inform people how it's currently done, which wasn't included in the video
@TheNewton 3 жыл бұрын
@@thirien59 support isn't guaranteed, this is the arcana of the old ways from a less elegant age
@quachhengtony7651 3 жыл бұрын
finally, i can center my fricking button
@ahmedAltariqi 3 жыл бұрын
I just want to say I FRACKING ENJOYED READING the website’s source code!!! Holy moly IT IS SO DAMN CLEAN even tho I’m new to web development but I was able to read it and tell what it’s doing bc your code is SUPER CLEAN!! I LOVE IT ❤️❤️
@ahmedAltariqi 3 жыл бұрын
I just think you’re a great developer and on top of that a great person, I work with a team full people like you!
@frontendinit 3 жыл бұрын
wow, am so excited to learn these cool features... thanks Una.
@00euclid 3 жыл бұрын
The aspect-ratio property, I want it right now. Right bloody now. God that’s convenient.
@muhammadmohaiminulislam7189 3 жыл бұрын
122 dislikes!!! What kind of people are they?? I guess they don't like their things centered.
@shocked-curry-omelette 3 жыл бұрын
Maybe people who stuck having to support IE / Safari lol
@QiuArVee 3 жыл бұрын
Maybe people who were making money of these tips and now see their income go down. lol
@POVShotgun 3 жыл бұрын
ppl who expected to type in the terminal 'make website like facebook pls'
@althaz 3 жыл бұрын
@@shocked-curry-omelette My view on supporting IE: If it barely works, then it works. Safari I'll grudgingly make exceptions for, even though it's a pain. IE has used up any patience I once possessed.
@agentstona 3 жыл бұрын
The reason for DISLIKES is she tought like the CSS is compatible with every browser or device .........its not .. well not yet ..
@throbicon 2 жыл бұрын
Una, thank you for this content. Very helpful!
@diogom 4 жыл бұрын
Great tips, I do'nt knew the place-items, clamp and aspect-ratio, thanks Una!
@jackwright7014 3 жыл бұрын
I didn't even know contenteditable existed 😭
@NathanHedglin 3 жыл бұрын
Right? I’ve failed 😔
@andreasmou6539 4 жыл бұрын
Where we can find that editor ? Looks super useful
@FoodgeekVietnamese 4 жыл бұрын
codepen.io
@DineshkumarPuli 4 жыл бұрын
1linelayouts.glitch.me/ it is the link in the description
@TheNewton 4 жыл бұрын
For the source glitch.com/~1linelayouts glitch.com/edit/#!/1linelayouts?path=README.md%3A1%3A0 I think this UI overall is pretty useful, and it's source is pretty instructional on building your own reduced test cases for exploring layout design patterns. The first improvements one could make is facilitate quickly seeing common sizes and comparisons. Such as fixed header buttons to quickly set sizes of the active|all demos, or open demos in new windows at specific sizes for comparison
@tafseerkhan142 3 жыл бұрын
The css lines are so awesome and amazing sharing. thanks a lot!
@AlanLavender 3 жыл бұрын
This is superb. And I thought the Array Methods Song would be a hard act to follow! I am sending this link out at the end of my React course this week as all delegates were hungry for layout- despite being there for JavaScript. Delighted to see an aspect-ratio setter finally going native after wrestling with own workaround for long enough.
@StefanoKocka 3 жыл бұрын
wanna know why the dislikes happen? 10. Respect for Aspect says: Chromium 84+ MDN: says Chromium 84+ Can I use says: "adds internal support only for mapped values" 2020-09 while we all are 85+ web developer console says: 'Unknown property name'
@StefanoKocka 3 жыл бұрын
And the King of delays is Safari. I can't develop again without headaches, because 40 darn percent of our visitor use SOS.. I mean iOS. We got rid of IE support finally, now we have to tackle with Safari, fgs!
General Musings with Kevin Powell
Рет қаралды 1,7 М.
Buy Smart┃Магазин ноутбуков
Рет қаралды 263 М.
Immersed
Рет қаралды 27 МЛН