How to make a nice site with less CSS
Vložit
- čas přidán 14. 06. 2024
- A few weeks ago, I looked at the absolute bare minimum you could use to have a decent start to a site ( • Stop over-engineering ... ). That was fun, but generally we want to add some colors, better typography, improve the spacing, and do a few more things, so I took a look at how we could do all that in this video.
🔗 Links
✅ Realtime Colors: realtimecolors.com/
✅ Font Pair: www.fontpair.co/all
✅ Utopia: utopia.fyi/
⌚ Timestamps
00:00 - Introduction
00:35 - Starting off with a minimal reset
01:23 - Creating a color scheme
02:45 - Picking fonts
03:30 - Basic styling
07:18 - Typography
12:10 - Using our colors
15:10 - Balancing text
16:20 - Improving the spacing
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Thank you so much for giving Realtime Colors a try. Sure hope it makes everyone's job easier!
IBM Plex is great. Literally massive: the font has a ton of glyphs which makes it an ideal choice for international scripts (Greek, Hebrew, Arabic, Cyrillic, Thai...) and this blows up the download size. Try subsetting it to the language and script you need to not waste visitors bandwidth and mobile data plans.
the best would be to use any variable font (like Jetbrains Mono) where the entire font family is in one compressed WOFF2 file
@@IllllIIllllI Plex is a variable font, but that's not the point. It has thousands of characters (glyphs) which makes this font file huge, even as a woff2 format.
@@CirTap being variable absolutely matters. For example, Jetbrains Mono is only 39kb for the whole 100..800 weight range (latin subset). Browsers are smart enough to download only subsets that are needed thanks to unicode-range, so the Greek symbols are never downloaded
Kevin, huge thanks to you. I was really confused when it comes to color scheme and font combination. But the two sites you showed in this video are absolute game changers. You are really awesome!
Another supremely helpful video. Thank you, Kevin. Your fast path on this basic stuff is really great.
Congratulations I had not seen these properties but now and only success
Damn, nice work mate. I've learnt a lot of these things piecemeal over the last year in an attempt to upskill my vast but dinosaur CSS knowledge. This fits a lot of pieces together in a very simple and comprehsneive way. Appreciate it!
WOW! This will make life so much easier. Thank you, Mr. Powell!
Absolute awesome 19 Minutes!
(I had to rewind the whole time, because i distracted myself with slamming my Spacebar on Realtime Colors :D )
Thanks so much, so glad that you enjoyed it!
I've just recently started a new pet project and was asking myself exactly what the title promises 🤔 So thank you, Kevin, I'm confident this is another excellent video from you
Awesome video! Very nice pace. It’s be great to see this same concept for forms! I find them to be very difficult to style (especially file inputs)
that is just one small video with a stupid lorem article, but I learn so mutch stuff in 19minutes ! thanks you ! :)
Great video man! Help me a lot
Kevin, I never comment, but your videos are amazing ❤
Thanks Kelvin for your diggings.
Really nice, some great new stuff that I gotta pick up!
Utopia is really great , I also use the space properties for anything margin or padding
I personally prefer the "flapper" LOL , thank you made me laugh out loud !! hahah To heck with those Wrappers !
This was an amazing video - all the stuff you need to know not to shoot yourself in the foot at the start of a project, all in one video with no filler.
Thank you
Thank you - Your Videos are awesome ❤👍
Great video. Working a lot with Tailwind CSS and already quite good at it. At the moment im studying and for a project i needed to use plain css. This really helped me a lot to get things going. Thanks. I already knew Utopia but couldn't really figure out how to work with it!
YAY! your Flow Space finally explained !
awesome!! thanks kevin!!
Great as usual. Particularly when you said flapper :)
Awesome King. 👌
Always a new tip to learn from Kevin.
6:38 you could also use ":where(:nth-child(n+1))".
Great 👍 so much of thing to learn in simplicity
Happy learning journey ❤
Hi Kevin, I was never interested in learning css but your channel really grew on me and now I'm excited to start. I looked through your playlists to see if there is a starting point but was confused with the sheer amount of awesome videos you have. If you have a minute, could you just point me into the right direction on where to start on your channel?
I think you need his course if you want direction. It's not free though.
Loved the flapper 😂
Clicked as soon i saw the title 🔥
light dark mode switch using CSS... awesome thankyou
I just googled that 'flapper' word, and it actually exists. Very vintage of you @KevinPowell 😂
*chuckles* yes that would have been an unexpected education for anyone that hadn't come across it before. Could have been worse and it was an s not an f at the front
Love this tutorial learn... few more things.... I must say you should try once for a admin panel development from the scratch ... so we can go for the next level now.... how to plan admin panel in terms of front end development.... fontsize.... variables... etc... Thanks a lot
thank you
Thank you...😁
Thank you very much! I have a question: what is the difference between - -flow-space and margin-top? I am sorry for bothering you but i'm still learning.
The poor owl :(
At least it feels nothing
Can you make a video about Vanilla CSS nesting, there is news that it has been already implemented for almost browsers except mozilla.
Do you have a series where you cover these little flash tips like the "* + *" selector. I am still learning web development and have always wondered if people just stumble upon these nuances while coding and on forums or if there is a secret shortlist of these types of "industry experience" tips.
I do have a more in-depth video on * + * though I forget what the name of the video is now... might be fun to do a video where I go into some of the more useful ones like this. In this case, if you look up "lobotomized owl" you'll find an article that goes into more detail on it as well
@@KevinPowell That would be awesome! Currently looking up that selector and stumbling into more information from Hayden.
One thing I've always wondered is how you organize big CSS/SCSS files. When I start making larger CSS files with more and more specific selectors, the more cluttered and randomized the file gets. How do you neaten your CSS files to be more navigable?
I order mine alphabetically by html tag, (although I do group closely related tags, e.g. list and list items) and use multiple CSS files, with each file for a particular feature or style, especially if it's only used in a limited number of pages.
I am not so good at gauging the correct CSS organization from the get-go. So I use VSCode's "go to symbol" feature of the command palette which works on CSS files. And html as well. So the workflow is like "ctrl+p index.html ctrl+shift+o article.wra" to go to the HTML, and then the same thing in the CSS file. If two related css selectors are in different places in the file, alt + left/right moves you back and forth in the same file. Then before committing I re-order it to make sense for the webpage so it's easier for others.
Notification gang checking in 🛎
Do you use eye care monitor or regular ones?
Thanks Kevin for all of your work.
I like how CSS makes it easy to format the documents and I tried to use for printed documents. I ran into issues when doing so e.g. could not do running headings and subheadings; and discovered that there is some draft CSS for paged media that did not become standard.
Could you please make a tutorial about CSS printed media, or host someone who does? Something similar to the video you did for E-Mails.
Thanks
Browser support for print media has always been mediocre and will likely be forever. They focus on screen rendering. "Prince XML" is probably the best (commercial) tool for the job with excellent CSS print support. Despite its name it supports HTML5. Results are also rendered to PDF .
@@CirTap I came across Prince XML during my research. However, I was avoiding using external tools because I prefer this, and my workstation at work is locked down and I cannot install non-approved applications.
@@user-mma173 then all you can do is bug the browser makers to add better support for print and push features to be included in Interop 24 (or 25, 26).
Paged media layouts are just a pita, 'cos you can't actually control what's on a page. You'd be much better off with sth like Affinity Publisher.
If it's essential to you job, maybe convince your boss/IT department to allow Prince XML anyway (on a sandboxed environment) . It's an established professional application and likely causes less harm than surfing the web with a browser or using MS Office...😇
I worked in print for years, but never touched CSS for it 😅. I much prefer page layout tools for print stuff, though I do realize sometimes print styles are required for some types of projects. There's a print book (which is escaping me at the moment), that I've read that was fully written in HTML and CSS... so it's not that it isn't possible, but like CirTap mentioned, it's not great either, lol. I'll see if I can find anyone with more experience than me to pick their brain.
@@CirTap I can convince my IT to install such app but my intention is to have something that is not dependent on anything other than the browser. My goal is to automate reports generation through web apps and share my solutions with my colleagues.
Hi Kevin, why do you use margin-top versus margin bottom to space elements between them? What is the best approach?
I think he forgot to touch on it. But using margin-bottom will also add margin to the last paragraph/element in the article, which is undesirable. This can be offset by updating the selector to .flow > *:not(:last-child), but from what I've seen his method is more common practice.
Why not use a flexbox oriented vertically and setting `gap: 1em`? That flow space is nice but looks so alien :)
While this does the trick and can probably work for most designs, the space between the elements will always be 1rem with this approach. Depending on the company/designer you are working with, they will not want equal spacing and instead want spacing that is more appropriate depending on the elements used. Ex: headings will have more space above them than paragraphs/list elements. That is where Kevin's example is better, but really it depends on the use case. If the flex/grid gap spacing works for your needs then there is not a huge reason to change it.
Hey Kevin. This might be a stupid question but what do you think about all this AI like chatgpt taking over everything.. is it worth learning html css and j.s. ?
The hype around how they can tackle code has already died, as people realize they're terrible at it 🤣. They can help, and speed up workflows, but your job is safe 😊
Yes, you should, cos you have to explain this stupid thing exactly what it should produce, and then you have to fix all the bugs the machine added anyway, cos it doesn't actually *know* or *understands* a thing of what it copy-pasted together. AI has great performance but no competence.
It likely takes a few more AI generations to become truly creative not just an even faster copy-paste robot. It remains interesting though.
Hi, could anyone point me in a good direction to learn layouts so that im comfortable placing things wherever i want? I have messed around with flexbox and grid but still havent found a good resource to learn this, thanks
Hi Kevin, is just the HTML of this page available anywhere? Many thanks!
Hi Kevin,
I write you because I want to share a technique I use often and I want your opinion about it. I often found myself having this structure when I want a full-screen bg image with content:
div_wrapper_for_the_image
div_container
heading
paragraph
[...]
I found a technique (Maybe it is already used I don't know) using the padding as a virtual container. What I do is this:
.contain_in_x {
padding-inline: max(calc((full_width - contained_in_x_width) / 2), min_padding_n, ...);
}
So I can have only one div and the padding with virtualize ( Sort of) the second one.
For example, if I want to contain in a 1440px virtual container, I can do:
.c_in_1440 {
padding-inline: max(calc((100vw - 1440px) / 2), 4rem, 2rem);
}
By doing so the padding-inline with be calculated to have what's inside at 1440px max regardless of the viewport size as long as we don't reach the 1440px threshold, otherwise, it will switch to the other values.
What do you think?
thank you for sharing this i well try your technique :)
Kevin, from henceforth I will refer to you as Vanilla Powell.
Vanilla Power
Is there a place to see all the code together?
Anywhere?
😊
link to the source
@kevin I just wanted to ask
I noticed that you used width: min(100% - 2rem, 55ch);
Instead of the usual width: min(calc(100% - 2rem), 55ch);
So the calculation that requires the calc function does work without it 😅
min(), max(), and clamp() don't need nested calcs for math 🙂
@@KevinPowell ok thanks 👍
how do you organize your css for a multi-page website?
Excellent question.
Do you think that AI will replace web developers??
No. 😉
Nope. No one would hire a "parrot" for mind tasks.
Lobotomized owl lmao
Im confused about making manual coding website
My questions is how i add CDN, Cache , Backup , Security stuff in it?
⚡Flash is faster or my click 😂
😂😂😂
Surely the least CSS with the biggest impact is:
* {
display: none !important;
}
😜
😂😂😂
😄👍
😂😂
or *{outline: red 1px solid;}
I started using tailwind CSS can you make tutorial on it please
If you know CSS, you know how to use Tailwind.
If you don't, learn CSS first.
I get why people like Tailwind, but it's not really my thing. Plus, I feel like covering regular CSS more useful, because what you learn can be applied with Tailwind, or however other people are deciding to work as well.
Just wanted to let you know: There is a real thing called „Less CSS“, which is basically another shorthander like Sass. Which I actually use at work. The title of the video might be confusing or misleading for people who want to learn Less and come from search engines.
I admit, not the best name chosen for Less for exactly this reason… 😏
Yeah, I know of Less (and come to think of it, probably where the name comes from, since you can write less CSS when using it, heh). Hopefully the combo with the thumbnail makes it more obvious, and I'll see if I can't think of a better name maybe.
The ads made me not watch this, after a few minutes
Test
🤔