Creating a CSS Boilerplate

Рет қаралды 17,252

Күн бұрын

Пікірлер: 23

@MartinDoudoroffLLC 2 ай бұрын

I hope the most interesting fallout from this gets condensed/summarized at some point. I don’t want to sift through a 2 hour livestream.

@LexTheCat 2 ай бұрын

Indeed

@carstenaltena 2 ай бұрын

Same! I applaud Kevin's work here but 2 hours is a bit much :D

@PicSta 2 ай бұрын

I really would like to see the end result of the boilerplate. Please share it with us or make a video where you quickly go over the new reset. This would be awesome, Kevin. 🙂

@clevermissfox 2 ай бұрын

I thought it would be linked in description or pinned in the comments but I bet you could find on his codepen which is linked

@PicSta 2 ай бұрын

@@clevermissfox You're absolutely right, I found it on CP. Thanks, I had checked it yesterday right after my comment, as this idea, sadly, came after I commented already.

@chrishuhn5065 2 ай бұрын

@@PicSta I can't find it on CP. Link plz?

@PicSta 2 ай бұрын

@@chrishuhn5065 KZbin doesn't let me share links. My advice is you just go to google and search "codepen kevin powell" then click all his pens, the latest ones are shown first.

@bmehder 2 ай бұрын

I'm digging the long video format more than I thought I would.

@nielslytzdk 2 ай бұрын

I may be wrong, but I feel like a boilerplate/reset should apply to a global set of rules that strips away some of the browser defaults. It should be clean and concise. There are lot of interesting styles in play here but I wouldn't necessarily use them in specific designs, personally I think it would make more sense to split them up in a reset and a layout file depending on what your personal design should look like. But still a great video, I have learned so much from Kevin, in my opinion he's one of the best tutors in CSS. Keep up the good work 🙂. Happy coding to y'all 😎.

@clevermissfox 2 ай бұрын

I believe that’s what the @layers are doing. There’s an @layer reset and an @layer for opinionated styles (I forget what the second one was called)

@nilaallj 2 ай бұрын

Font designers can choose which opentype features to turn on or off by default. In this case tabular numbers seemed to be the font default, so maybe also add `font-variant-numeric: proportional-nums` on the body, let it inherit and have `tabular-nums` overwrite it where needed.

@heat.death_999 2 ай бұрын

For mine I basically stole the reset used by Tailwind, removed the stuff that's only there to work with Tailwind and combined it with my own (which is a bastard child of css-remedy and some of my own rules from experience). Now I'll steal your boilerplate rules too, thanks buddy!

@alexyermakov8674 2 ай бұрын

You’re amazing. Thank you!

@clevermissfox 2 ай бұрын

I never know whether to use top or bottom margin; saw an argument to use padding when possible but don’t remember what the argument was anymore. And that’s not possible for spacing when you have a bg on an element.

@rrjmdPA 2 ай бұрын

The long content format does have a problem being in "production". A HUGE number of subscribers scan through their "subscription page" and the only thing they see is a truncated title, photo and the TIME. A not-insignificant number (me included) don't even look at posts over 30 minutes, let alone 2 hours! A CSS boilerplate IS worthwhile and is something you SHOULD do, watching you try and figure it mentally argue with yourself, explain tangents, backtrack etc. makes my mind ache. It truly IS a working stream of consciousness, and I'm sure there are people who can enjoy it: BUT, if you are not going to additionally post a video of the finished product (without all the diversions) then at least set chapter headings along the way and post a finished product (perhaps with added comments) that we can figure it out by ourselves. TO ME (and the many other channels I watch): the best way to do it is to "stream" something like this and upload it to "Kevin Powell-2" back channel (which will garner its own following of subscribers) title it "STREAM: Making CSS BOILER Plate," to be transparent, and take little effort comparatively; Then make a real post, once you've figured it out, without all the stream--of-consciousness stuff, called "2024 CSS Boilerplate", include a link to the finished product (with your license), post it to "Kevin Powell" channel and garner a substantial number more of "views" catching all those who never view posts longer than 30 minutes. Just seems like you're cheapening the "Kevin Powell" brand of "streamlined, concise, timely and applicable", and missing a great opportunity to include your followers who want "just the facts, man" and just don't have the time to merely "hang out."

@deatho0ne587 2 ай бұрын

I can agree with the p { max-width: 65ch }l I just see so many websites limit to total width to the same which I hate on wide screens

@clevermissfox 2 ай бұрын

I adopted the ul[role=list]{list-style: none} but React yells at me that it’s redundant. Good work around to use an empty string on ul[class] instead.

@Mathew-s7r 2 ай бұрын

It's okay we can go a head

@codeStars-Eng 2 ай бұрын

Can you please make a video : reaction on css code? thanks in advance.

@DenisK0s 2 ай бұрын

Kevin, why do you never use normalize css? It seems like a very reliable solution. Sometimes it's a bit confusing which is better. Could you give the pros and cons of both approaches please.

@Mathew-s7r 2 ай бұрын

Hi kevin