Whenever I want to learn a certain thing in CSS, I type that thing into TH-cam concatenated with Kevin's name and I find it, this channel is my CSS reference. Thank you very much for the effort you have made to bring us such amazing content Kevin.
When doing my CUBE classes I do: class=" [composition] comp-class [utility] utility-class-1 utility-class-2 [block] block-class [exception] exception-class-1 exception-class-2 " This makes it clear what is intended, which classes are which, where to find them, etc. I also have my IDE set whenever I do class to put in the [] tags automatically.
This is the pro-tip I didn't know I needed. Thank you for this. I've always found it messy when you start having too many classes and tried to give it some order myself but this is an excellent practice imo!
Totally agree with you regarding BEM and the "plan" standalone component. Most people just lengthens the card class while can be definitely an individual component. Probably because most of them don't fully understand it's purpose. Big props for pointing that out - writing clean code Is an art 😄
You are just awesome, if now i am a front end developer is because of you, i just started 2 years ago with an internship knowing literally nothing about CSS, you made my work so much easier and professional, thank you so much for your work Kevin.
I'm currently halfway through the Scrimba career path, and this morning I've decided to take some time to adopt a css methodology before moving on with the rest of the path. What do you know, the Amazing Kevin comes in with a Cube CSS demo using the very same frontendmentor project that I dabbled with a couple of weeks ago. You're a gift from the Gods Kevin. Keep it up!
Thanks for that. All this time you made typos and couldn't figure out things made it more obvious to me why I shouldn't use utility classes too much. Instead of just remembering CSS you need to remember a lot more. So it was really useful to see your method. It made me see what is not working and what is working.
Like some others I struggle with the how to break things down so this was a useful video. I’m not a fan of cluttering the html up with so many classes; something I detest about bootstrap. I prefer (and I’m still learning) to have the separation of concerns as much as possible. But I can also see the benefit of CUBE.
I'm learning the front end starter kit HTML/CSS/JS and I'm glad I found your channel, you provide very good material. This CUBE workflow IMHO feels very modern and streamlined just like the fancy frameworks out there!
I've been writing my CSS kind of like this for some time now. Definitely something that I am going to be deep diving into. Great video overview, this was super useful and fun.
I really love your videos! I've discovered your channel recently and it just openned my mind about how powerful css is! I'm a backend dev, and was not very good at css, but I always loved designing UIs! I'm currently trying to make a 3D scene with css after watching your videos about it! I wish I could do more frontend professionnaly, but I've been a backend dev for too much time... Thank again for your content!
Perfect timing! I recently completed this challenge and was unsure how to name that "plan" component with BEM. I ended up with something like card__plan-name, card__plan-pricing so on...
Great stuff Kevin! Very timely too, just went through Andy's Eleventy from Scratch course where he uses the CUBE CSS methodology. I'm a little conflicted about it. On the one hand I love how it embraces the cascade and uses composition classes to control layout. On the other hand, I don't tend to like utility classes. It's nice for those moments where there's not really a good name for something, and on bigger projects you'll probably see a performance boon by delivering less CSS. It kind of clutters up the HTML though, and makes it harder to read and reason about which styles are being applied, since the styles are applied in different places. For small/medium projects where the performance gains are minimal, I think it makes more sense to use variables or mixins (if using SCSS) as pseudo-utilities and popping them on the block class. Still getting used to it though, maybe I'll come around to utility classes
I miss "friend and friends"! Now, your enunciation is on point. I like the quality and polish of your videos regardless of the intro. Keep up the good work!
@@namesurname6294 Look up the definition of "enunciation". I think Nephi knows full well it's "front-end friends"... that's the whole point of the comment!
37:43 : You acknowledge a part of the problem... Utility classes violate the separation of concerns. You're making styling decisions in the HTML. Your HTML becomes so messy with the usage of these classes, you end up using invalid selectors (square brackets) to try and see what's going on. You seem to be doing a lot of extra and unnecessary work styling a site like this.
Thanks sir Kevin. You are really good at educating us. I learned a lot in 50 minutes and I'm gonna try your way until I can come up with my own way of styling. I was using grid area template because I find it easier.
I like the idea of using utility classes to do a lot of the work. But how do you deal with utility classes in combination with a responsive layout? For example it’s not uncommon for a text to be aligned right on big screens and left or center on small(er) screens. And there are tons of other situations where using a utility class instead of a block/element specific class could pose a challenge when it comes to responsive changes. I’ve seen CSS frameworks that implement the same utility class for different breakpoints e.g. .text-left-lg .text-right-md or whatever. But that adds a ton of overhead because you end up with lots of utility classes that you never use.
If you are writing straight HTML and CSS utility classes are way too verbose and make maintaining stuff a nightmare. I really think you need to make a video explaining WHEN it is best to use utility classes (when you are creating re-usable components).
It's not a matter of vanilla HTML/CSS vs framework but a matter of project size. A big project with an attached design system benefits 100% from utility classes. A small website/landing page would get next to no value from utilities
I'm right there with you. I've only worked on small projects, so I'm not really understanding this video that well. Having a class called "padding-48" with a single padding property doesn't make any sense to me. Why not just use an inlune style at that point?
@@Issvor because kevin example is bad. You do not have a class named `padding-48` you have classes named `padding-1` to `padding-N`. And you go from 1 to N in a step given by your design system. Again, you need a large project and a design system to get any use of this. Utilities are not the best for 10 pages websites
@@Issvor There's a tutorial called "Build a dashboard with CUBE CSS"-a tool called gorko is used to generate the utility classes (e.g. color-primary, color-light, bg-tertiary-glare) from design tokens. Similarly with "Learn Eleventy from Scratch"; using Nunjucks template inheritance styling repeated all over the site typically only exist on a single template somewhere in the source.
Giving a very quick loo. It basically looks like tailwind, just that we're building our own? Is it really that or is there something more to it? If the case, why use it instead of tailwind? (or any other utility-first css frameworks)
It seems that something like this would pair well with Tailwind since Tailwind provides all the utility classes for you (with the ability to extend it with your own). And Tailwind allows you to create your own compositions using @apply.
@@codernerd7076 you mentioned tailwind doesn't work well with sass. I said that sass is not necessary. What I meant by that is that you can use tailwind as is. Tailwind provides all the utility classes you could ever need with the ability to extend them. The U in CUBE stands for Utility. What tailwind does is that it helps you not have to deal with the U anymore and you can then just focus on the CBE. And with the use of @apply, you can easily take care of the C as well leaving you just with B and E. That is why I said that CUBE pairs well with Tailwind.
Pointer: Cursor 😅😅 That happens to me a lot, Thank you Kevin, I feel like am lucky to find your TH-cam Channel, You have no idea how much I frustrate to learn CSS, although I got some basic of CSS but I am not confident to use CSS with full of its potential. Again thanks 😊
Instead of the "lobotomized owl", which is a great name btw, why not make the parent container a single column grid, and then use gap to control the vertical "rhythm" or spacing between elements? That's my preferred approach
Idea for new format; 1-5 minute video highlighting why a new technology is better, & roughly how it works. I don't have time to watch 40+mintues on how to type in HTML & CSS anymore, even though I'd like to hangout & watch :/
I'm pretty sure the TH-cam algorithm punishes creators for the 1-5 minute video length. Too long to be a short, too short to pepper with ads. (I hope I'm wrong though.) The full walkthroughs are great, and I like Robert McGovern's suggestion to play it back faster if you don't need all the details. Still 8x (with a plugin) to get down to the 5 minute area might be too fast.
but if you have to change, for example, the background of all your cards through the site? You'll have to search for all cards and change de background class?
I love your content and clear explanations. This methodology looks super clear and makes sense! Will you ever do any video about CSS in JS - particularly styled-components library?
44:45 the underline looks different because it is a different font, which I'm guessing is the default sans-serif that is also applied to your other buttons since they need to have the font-family property specified explicitly.
Same font, the reset I used had form elements and buttons inheriting the font properties 🙂. It's just the line is lower down in the design, and I don't think Figma can do the skip-ink effect which is the default in browsers now. You could modify the text decoration to pull the line down and may be it more closely though.
@@KevinPowell The font is definitely different (just compare the lowercase a or e, or uppercase S or C). But now I see that it's not just the button. The font-family you specify in your body element is "Red Hat" but there is no such font, there's "Red Hat Display", "Red Hat Text" and "Red Hat Mono". The Display variant is the one used in this design.
I just can't get behind multiple utility classes that are single lines of css. unless it's something I need to toggle with Js, like el.classlist.toggle('hidden') I feel like I might as well be writing inline styles. But I kinda do like how it means you can more easily throw on a new class to override some style. Instead of having to come up with a unique classname for your component, just to be able to select it and override some style via the css filé
When you are working on bigger projects, do you have a bunch of utility classes that you just paste in ready to use them or do you set them up for each project individually?
Thanks for the great video. But I have no idea how to responsive spacing when using those utility classes. For example: if I use "padding-48" class, how to change the padding spacing to another size in smaller screen? I'm facing this issue when using utility class for padding and margin. Does anyone have any idea?
Why not a different file for each category? i.e. composition.css, utility.css and main.css, and you could import everything into style.css and link only one file in the html
It's because you can't have data-type=primary secondary. It forces you to pick one, and makes it clear there should only be one. With classes, it might be obvious a button shouldn't both be primary and secondary, but there is nothing stopping from doing it either. It also provides a nice hook for JS as well. I only started doing this. Beofre I made this video I actually used classes instead, and there's nothing wrong with it at all! But now that I actually took the time to do it this way, I sort of like it 😂
What's your thought on Wordpress Divi? I'm despertaly trying to move away from wordpress as it's hastle. I expect behind the scenes it uses a lot more baggage than plain old html and css. I'm trying my hardest to learn from you and thankyou for your uploads and knowlwedge.
Hey Kevin, thanks for making things really easy to understand, as you always do!! A little bit off-topic here, do you have an opinion on tools like Stitches and Radix UI? And what about Alpine.js?
It's a neat concept but I feel that it just pollutes the markup which is meant to define the content, not the design. You get into a project that is mature and it's littered with all these composition and utility classes and you have to change to a new UI? That's probably more nightmarish then just refactoring basic html into a new layout with css
Hey Kevin, I have “learnt” html and css, not to an extent where I can confidently sit down and make a website/ landing page from scratch on my own, I’m looking for like a series of css projects where you kind of take us through your thought process from looking at a page and designing it. I did see one on your page, could you tell me where I can find many others like that? I don’t mind paid ones even but please don’t say scrimba, I hate their style.
Do you think CSS in JS tools like emotion or styled components make these methodologies unnecessary or do you think it would be usefull to use them together?
I think this makes stuff like emotion and styled components unnecessary? 😅 - What I like about CUBE the most is it's about embracing how CSS works, rather than trying to make it something it isn't, which I feel is often the goal with CSS-in-JS solutions. CSS, for the most part, should be globally available. I think there can be a balance as well though, and I know why those solutions are popular, but I've seen some really bloated projects (on the styling side of things), because of how people sometimes use them.
I think styled components simplify things greatly ... You can reuse them like usual and you're developing a part of the project that fits together in one piece, so it makes sense to have CSS and JS together. If you're a mechanic, you wouldn't separate your tools by color, would you? That's the vibe I kind of get with separating CSS from JS - it just doesn't make sense and doesn't help you with your job of what you should be doing: implementing features to make the webpage work.
You know? When KP was saying it fast up until a few videos ago I heard "Frontend Friends" but now I'm hearing "Frent. End. Frenz." I think I just read too many comments about it, and the word "front" doesn't exist in my ears anymore :)
Atom the editor, or atomic CSS? I don't really know how much value there is in looking at atomic CSS, it's basically making every class done one single thing. Tailwind might be more interesting as it takes that approach but offers a bit more, but I'm not the biggest Tailwind person.
I use SCSS is real projects (I'm even working on a course on it!), but on YT I usually focus on CSS because it's more accessible. If you don't know SCSS, that's cool, but you can take the lessons from here and use them in Sass, or PostCSS, or with Less, or even with CSS-in-JS, etc.
@@KevinPowell I just think that SCSS is very easy to use & to understand. The code comes out better structured and also saves you a lot of time. In any case, I love your content and although I built sites since '95, I always like to see what other developers do, what tools & methods they use.
![WE GOT ACCESS TO GPT-3! [Epic Special Edition]](/img/n.gif)
Whenever I want to learn a certain thing in CSS, I type that thing into TH-cam concatenated with Kevin's name and I find it, this channel is my CSS reference. Thank you very much for the effort you have made to bring us such amazing content Kevin.
Kevin is just Awesome!
You know what I mean 😂
I do exactly the same! Great content every time.
This is the first "framework" that I feel really embraces what CSS is all about. Glad to see it's getting more love.
When doing my CUBE classes I do:
class="
[composition] comp-class
[utility] utility-class-1 utility-class-2
[block] block-class
[exception] exception-class-1 exception-class-2
"
This makes it clear what is intended, which classes are which, where to find them, etc.
I also have my IDE set whenever I do class to put in the [] tags automatically.
This is the pro-tip I didn't know I needed. Thank you for this. I've always found it messy when you start having too many classes and tried to give it some order myself but this is an excellent practice imo!
good advice to follow
That's a clever idea, thanks for sharing.
"One of the best ways to be *less frustrated with CSS* is to have some structure to how you're writing it."
Perfect intro.
Totally agree with you regarding BEM and the "plan" standalone component. Most people just lengthens the card class while can be definitely an individual component. Probably because most of them don't fully understand it's purpose. Big props for pointing that out - writing clean code Is an art 😄
I followed this tutorial till the very end and the level of clarity it brought is just mind blowing! Thanks Kevin!
I love how he's been improving his enunciation of "front-end friends" over the past few videos after numerous confused comments lol You Rock Kevin!
You are just awesome, if now i am a front end developer is because of you, i just started 2 years ago with an internship knowing literally nothing about CSS, you made my work so much easier and professional, thank you so much for your work Kevin.
I'm currently halfway through the Scrimba career path, and this morning I've decided to take some time to adopt a css methodology before moving on with the rest of the path. What do you know, the Amazing Kevin comes in with a Cube CSS demo using the very same frontendmentor project that I dabbled with a couple of weeks ago.
You're a gift from the Gods Kevin. Keep it up!
Thanks for that. All this time you made typos and couldn't figure out things made it more obvious to me why I shouldn't use utility classes too much. Instead of just remembering CSS you need to remember a lot more. So it was really useful to see your method. It made me see what is not working and what is working.
Like some others I struggle with the how to break things down so this was a useful video. I’m not a fan of cluttering the html up with so many classes; something I detest about bootstrap. I prefer (and I’m still learning) to have the separation of concerns as much as possible. But I can also see the benefit of CUBE.
I'm learning the front end starter kit HTML/CSS/JS and I'm glad I found your channel, you provide very good material. This CUBE workflow IMHO feels very modern and streamlined just like the fancy frameworks out there!
I've been writing my CSS kind of like this for some time now. Definitely something that I am going to be deep diving into. Great video overview, this was super useful and fun.
clearly, CUBE CSS is the illegitimate child of BEM and Tailwind =))
Ive watched so many of Kevin's videos that his voice takes over the voice in my head whenever I open VSC
I really love your videos! I've discovered your channel recently and it just openned my mind about how powerful css is!
I'm a backend dev, and was not very good at css, but I always loved designing UIs! I'm currently trying to make a 3D scene with css after watching your videos about it!
I wish I could do more frontend professionnaly, but I've been a backend dev for too much time...
Thank again for your content!
Love cube! I think I learned of it from your channel a year or two back and have been enjoying it!
Oh wow! What a timing.
Please make more frontendmentor challenges. That is sooo helpful!
I actually love this. Especially the exceptions part. As someone who primarily works with JS, this makes a lot of sense.
That…is a very good and well-thought out CSS reset! Thanks for the link, Kevin!
Perfect timing! I recently completed this challenge and was unsure how to name that "plan" component with BEM. I ended up with something like card__plan-name, card__plan-pricing so on...
Great stuff Kevin! Very timely too, just went through Andy's Eleventy from Scratch course where he uses the CUBE CSS methodology. I'm a little conflicted about it. On the one hand I love how it embraces the cascade and uses composition classes to control layout. On the other hand, I don't tend to like utility classes. It's nice for those moments where there's not really a good name for something, and on bigger projects you'll probably see a performance boon by delivering less CSS. It kind of clutters up the HTML though, and makes it harder to read and reason about which styles are being applied, since the styles are applied in different places. For small/medium projects where the performance gains are minimal, I think it makes more sense to use variables or mixins (if using SCSS) as pseudo-utilities and popping them on the block class. Still getting used to it though, maybe I'll come around to utility classes
I miss "friend and friends"! Now, your enunciation is on point. I like the quality and polish of your videos regardless of the intro. Keep up the good work!
btw you prob know but it's "front end friends" if I'm not wrong
Thank you! 😃
@@namesurname6294 Look up the definition of "enunciation". I think Nephi knows full well it's "front-end friends"... that's the whole point of the comment!
OK but "the lobotomized owl" made me crack up for real. I don't know how, but I've never heard that nickname for it before and I love it. 😅
37:43 : You acknowledge a part of the problem...
Utility classes violate the separation of concerns. You're making styling decisions in the HTML.
Your HTML becomes so messy with the usage of these classes, you end up using invalid selectors (square brackets) to try and see what's going on.
You seem to be doing a lot of extra and unnecessary work styling a site like this.
Thanks sir Kevin. You are really good at educating us. I learned a lot in 50 minutes and I'm gonna try your way until I can come up with my own way of styling. I was using grid area template because I find it easier.
i don't use css, i'm using tailwind. Best solution ever.
I like the idea of using utility classes to do a lot of the work. But how do you deal with utility classes in combination with a responsive layout? For example it’s not uncommon for a text to be aligned right on big screens and left or center on small(er) screens. And there are tons of other situations where using a utility class instead of a block/element specific class could pose a challenge when it comes to responsive changes.
I’ve seen CSS frameworks that implement the same utility class for different breakpoints e.g. .text-left-lg .text-right-md or whatever. But that adds a ton of overhead because you end up with lots of utility classes that you never use.
You pronounced "front end friends" so much more clearly this time 😂
I like this. I have a family project for this weekend and I'll apply this to it.
If you are writing straight HTML and CSS utility classes are way too verbose and make maintaining stuff a nightmare. I really think you need to make a video explaining WHEN it is best to use utility classes (when you are creating re-usable components).
It's not a matter of vanilla HTML/CSS vs framework but a matter of project size. A big project with an attached design system benefits 100% from utility classes. A small website/landing page would get next to no value from utilities
I'm right there with you. I've only worked on small projects, so I'm not really understanding this video that well. Having a class called "padding-48" with a single padding property doesn't make any sense to me. Why not just use an inlune style at that point?
@@Issvor because kevin example is bad. You do not have a class named `padding-48` you have classes named `padding-1` to `padding-N`. And you go from 1 to N in a step given by your design system. Again, you need a large project and a design system to get any use of this. Utilities are not the best for 10 pages websites
@@Issvor There's a tutorial called "Build a dashboard with CUBE CSS"-a tool called gorko is used to generate the utility classes (e.g. color-primary, color-light, bg-tertiary-glare) from design tokens.
Similarly with "Learn Eleventy from Scratch"; using Nunjucks template inheritance styling repeated all over the site typically only exist on a single template somewhere in the source.
I only do large-project sites, and even then, utility classes are annoying as hell. Just set a CSS Custom Prop and you're good to go.
Giving a very quick loo. It basically looks like tailwind, just that we're building our own? Is it really that or is there something more to it? If the case, why use it instead of tailwind? (or any other utility-first css frameworks)
It seems that something like this would pair well with Tailwind since Tailwind provides all the utility classes for you (with the ability to extend it with your own). And Tailwind allows you to create your own compositions using @apply.
At that point you just writing css with css, Tailwind not working well with sass
@@codernerd7076 sass is not necessary I think.
@Miguel Lansdorf neither is Tailwind
@@codernerd7076 you mentioned tailwind doesn't work well with sass. I said that sass is not necessary. What I meant by that is that you can use tailwind as is. Tailwind provides all the utility classes you could ever need with the ability to extend them. The U in CUBE stands for Utility. What tailwind does is that it helps you not have to deal with the U anymore and you can then just focus on the CBE. And with the use of @apply, you can easily take care of the C as well leaving you just with B and E. That is why I said that CUBE pairs well with Tailwind.
@Miguel Lansdorf you do make a good point there
Great tutorial. Thanks, Kevin. Love your videos!!🙂😊
That's so nice. Thanks for your wonderful videos about CSS.
This approach looks really great. I have to dive into it.
At 28:27 in figma, press cmd+click to select the exact element you are clicking on. No need for that double and triple clicking jazz ;)
My man!! We asked, you provide ^^. Can't wait to watch it today. Thanks!! 👍👍
AWESOME video! Love stuff like this. Thanks Kevin, you're the best!
Pointer: Cursor 😅😅 That happens to me a lot, Thank you Kevin, I feel like am lucky to find your TH-cam Channel, You have no idea how much I frustrate to learn CSS, although I got some basic of CSS but I am not confident to use CSS with full of its potential. Again thanks 😊
Instead of the "lobotomized owl", which is a great name btw, why not make the parent container a single column grid, and then use gap to control the vertical "rhythm" or spacing between elements? That's my preferred approach
Nevermind, I commented too soon lol
And still he leaves it up for the historical record. Gotta respect that.
Idea for new format; 1-5 minute video highlighting why a new technology is better, & roughly how it works.
I don't have time to watch 40+mintues on how to type in HTML & CSS anymore, even though I'd like to hangout & watch :/
It’s great for those of us that want / need to see the process. Have you tried watching at 1.5 through 2.0 speed? Works really well.
I'm pretty sure the TH-cam algorithm punishes creators for the 1-5 minute video length. Too long to be a short, too short to pepper with ads. (I hope I'm wrong though.)
The full walkthroughs are great, and I like Robert McGovern's suggestion to play it back faster if you don't need all the details. Still 8x (with a plugin) to get down to the 5 minute area might be too fast.
but if you have to change, for example, the background of all your cards through the site? You'll have to search for all cards and change de background class?
you could give a align-self to the image that is flex item with any value other than stretch to fix it.
I love your content and clear explanations. This methodology looks super clear and makes sense! Will you ever do any video about CSS in JS - particularly styled-components library?
32:40 one reason for why I never started with bracket-grouping classnames. I had no idea why it wasn't working.
In every video you make, did you manually wrote that custom properties in your root?
how are you adding brackets around things with the push of a button (or two buttons)
curser: pointer; - "I always get that backwards the first time". I can relate to that all too well 😅
44:45 the underline looks different because it is a different font, which I'm guessing is the default sans-serif that is also applied to your other buttons since they need to have the font-family property specified explicitly.
Same font, the reset I used had form elements and buttons inheriting the font properties 🙂. It's just the line is lower down in the design, and I don't think Figma can do the skip-ink effect which is the default in browsers now.
You could modify the text decoration to pull the line down and may be it more closely though.
@@KevinPowell The font is definitely different (just compare the lowercase a or e, or uppercase S or C). But now I see that it's not just the button. The font-family you specify in your body element is "Red Hat" but there is no such font, there's "Red Hat Display", "Red Hat Text" and "Red Hat Mono". The Display variant is the one used in this design.
I just can't get behind multiple utility classes that are single lines of css. unless it's something I need to toggle with Js, like el.classlist.toggle('hidden')
I feel like I might as well be writing inline styles.
But I kinda do like how it means you can more easily throw on a new class to override some style. Instead of having to come up with a unique classname for your component, just to be able to select it and override some style via the css filé
Sorry what’s do you use to format your css… I’ve been looking for a css formatter, I’ve installed beautify and prettier. It doesn’t work for the css
what is your opinion about styled-component? I find it amazingly fast and useful
Sticking to BEM
What's the diff b/w composition and block, i don't get jt
When you are working on bigger projects, do you have a bunch of utility classes that you just paste in ready to use them or do you set them up for each project individually?
Excellent video. However, the square brackets make it more difficult to read for me.
FINALLY!!! THANK YOU SO MUCH FOR SHARING THIS KEVIN!
Thanks for the great video. But I have no idea how to responsive spacing when using those utility classes.
For example: if I use "padding-48" class, how to change the padding spacing to another size in smaller screen?
I'm facing this issue when using utility class for padding and margin. Does anyone have any idea?
Would’ve loved to see a better introduction before jumping into the project
This reminds me very much of what inuitcss does (or did, since it seems to be dead).
Why not a different file for each category? i.e. composition.css, utility.css and main.css, and you could import everything into style.css and link only one file in the html
Hi and thank you for your videos !
This has nothing to do with this video, but, what's the name of your vsc color theme ? 😅
amazing bro, thx a lot for sharing this precious knowledge
Thank you, Kevin. Very nice and informative video once again. Might want to add "at" in the title (A look "at" the CUBE CSS..)
Good call, thanks for pointing it out! I just fixed it
why did you put button styles in data type not in a class? i know you sort of covered it, but any pointers to why it helps?
It's because you can't have data-type=primary secondary. It forces you to pick one, and makes it clear there should only be one. With classes, it might be obvious a button shouldn't both be primary and secondary, but there is nothing stopping from doing it either. It also provides a nice hook for JS as well.
I only started doing this. Beofre I made this video I actually used classes instead, and there's nothing wrong with it at all! But now that I actually took the time to do it this way, I sort of like it 😂
What's your thought on Wordpress Divi? I'm despertaly trying to move away from wordpress as it's hastle. I expect behind the scenes it uses a lot more baggage than plain old html and css. I'm trying my hardest to learn from you and thankyou for your uploads and knowlwedge.
Good stuff... ✨
Thought it was a video about kube css framework... But no disappointed
Every so often, I'll try moving your head thinking it's Messenger
😂😂
lol, I just swiped at him, too
Awesome tutorial thanks
How do you auto create containers with class names like that, is that a extension or a key press?
It's an extension called Emmet
Great job!
Hey Kevin, thanks for making things really easy to understand, as you always do!! A little bit off-topic here, do you have an opinion on tools like Stitches and Radix UI? And what about Alpine.js?
Haven't tried any of them, so I can't really comment, sorry.
@@KevinPowell No problem! Thank you for the reply! It was only out of curiosity. Love your videos, btw!
FWIW, IMO if an image doesn't add sufficient info to the page to require alt text, it probably should be a background image instead.
Hi Kevin, what plugin do you use to code that much easier
what i mean is this --> p*2 gives u 2 paragraphs
I think it's an extension called Emmet, look it up. Saves so much time :D
It's a neat concept but I feel that it just pollutes the markup which is meant to define the content, not the design. You get into a project that is mature and it's littered with all these composition and utility classes and you have to change to a new UI? That's probably more nightmarish then just refactoring basic html into a new layout with css
Hey Kevin, I have “learnt” html and css, not to an extent where I can confidently sit down and make a website/ landing page from scratch on my own, I’m looking for like a series of css projects where you kind of take us through your thought process from looking at a page and designing it. I did see one on your page, could you tell me where I can find many others like that? I don’t mind paid ones even but please don’t say scrimba, I hate their style.
Start building projects on your own on frontendmentor. Start with beginner and you’ll eventually end up learning how to build full landing pages
can you make a video on tailwind css
Is cube css covered in one of your courses?
Do you think CSS in JS tools like emotion or styled components make these methodologies unnecessary or do you think it would be usefull to use them together?
I think this makes stuff like emotion and styled components unnecessary? 😅 - What I like about CUBE the most is it's about embracing how CSS works, rather than trying to make it something it isn't, which I feel is often the goal with CSS-in-JS solutions. CSS, for the most part, should be globally available. I think there can be a balance as well though, and I know why those solutions are popular, but I've seen some really bloated projects (on the styling side of things), because of how people sometimes use them.
Yeah, just put the utility classes in your css, and your component specific styles in the component.
I think styled components simplify things greatly ... You can reuse them like usual and you're developing a part of the project that fits together in one piece, so it makes sense to have CSS and JS together. If you're a mechanic, you wouldn't separate your tools by color, would you? That's the vibe I kind of get with separating CSS from JS - it just doesn't make sense and doesn't help you with your job of what you should be doing: implementing features to make the webpage work.
i still dont understand the custom property naming convention isnt easier to just write the color name instead?
do what makes sense to you.
Thats good, but how is this different from tailwindcss.
So CUBE is just Tailwind will slightly less class soup?
CSS KING
Was expecting a rubix cube as a project ngl
Ayyyeeeee thx for your heart.
Now imma sell it on the dark web hehe.
Thank you.
:')
CSS has a very limited layout protocol. Look into flutter to see how design is done over there
Never heard of CUBE…. Kevin Powell to the rescue!
Cool!
"Hello my friend & friends!" :D
You know? When KP was saying it fast up until a few videos ago I heard "Frontend Friends" but now I'm hearing "Frent. End. Frenz." I think I just read too many comments about it, and the word "front" doesn't exist in my ears anymore :)
Thanks!
Thank you so much!
Will You make video on atom?
Atom the editor, or atomic CSS?
I don't really know how much value there is in looking at atomic CSS, it's basically making every class done one single thing. Tailwind might be more interesting as it takes that approach but offers a bit more, but I'm not the biggest Tailwind person.
💯💯💯
Typo in the description - "Fronend"
Thanks, just fixed it!
👏👏
Hi Kevin. I don't understand why you use CSS instead of SCSS.
I use SCSS is real projects (I'm even working on a course on it!), but on YT I usually focus on CSS because it's more accessible. If you don't know SCSS, that's cool, but you can take the lessons from here and use them in Sass, or PostCSS, or with Less, or even with CSS-in-JS, etc.
@@KevinPowell I just think that SCSS is very easy to use & to understand. The code comes out better structured and also saves you a lot of time. In any case, I love your content and although I built sites since '95, I always like to see what other developers do, what tools & methods they use.
+ new fan here :D
Just use TailwindCSS at this point
but, doesn't it look like Bootstrap? giving classes, but also decorating each classes takes up much time
Not completely sure what you mean when you say decorating them? Adding utility classes, or adding styles in the actual CSS?
@@KevinPowell I meant adding styles in the CSS. And, doesn't it take much space or weird in HTML with several classes?