How to make a nice site with less CSS

Поділитися
Вставка
  • Опубліковано 2 січ 2025

КОМЕНТАРІ • 103

  • @juxtopposed
    @juxtopposed Рік тому +30

    Thank you so much for giving Realtime Colors a try. Sure hope it makes everyone's job easier!

  • @RaveKev
    @RaveKev Рік тому +3

    Absolute awesome 19 Minutes!
    (I had to rewind the whole time, because i distracted myself with slamming my Spacebar on Realtime Colors :D )

    • @KevinPowell
      @KevinPowell  Рік тому +2

      Thanks so much, so glad that you enjoyed it!

  • @CirTap
    @CirTap Рік тому +39

    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.

    • @IllllIIllllI
      @IllllIIllllI Рік тому +2

      the best would be to use any variable font (like Jetbrains Mono) where the entire font family is in one compressed WOFF2 file

    • @CirTap
      @CirTap Рік тому +1

      @@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.

    • @IllllIIllllI
      @IllllIIllllI Рік тому +1

      ​@@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

  • @iamtharunraj
    @iamtharunraj Рік тому +12

    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!

  • @josipbjezancevic5697
    @josipbjezancevic5697 Рік тому +2

    I just googled that 'flapper' word, and it actually exists. Very vintage of you @KevinPowell 😂

    • @RobertMcGovernTarasis
      @RobertMcGovernTarasis 11 місяців тому

      *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

  • @caiosantosvargas
    @caiosantosvargas Рік тому +1

    Congratulations I had not seen these properties but now and only success

  • @rogerpence
    @rogerpence Рік тому +3

    Another supremely helpful video. Thank you, Kevin. Your fast path on this basic stuff is really great.

  • @OnlyADownstat
    @OnlyADownstat Рік тому +1

    light dark mode switch using CSS... awesome thankyou

  • @ichoupettev4661
    @ichoupettev4661 Рік тому +1

    that is just one small video with a stupid lorem article, but I learn so mutch stuff in 19minutes ! thanks you ! :)

  • @dominicabah5431
    @dominicabah5431 Рік тому

    Thanks Kelvin for your diggings.

  • @herbowenby4357
    @herbowenby4357 Рік тому +1

    WOW! This will make life so much easier. Thank you, Mr. Powell!

  • @NK6only
    @NK6only Рік тому +3

    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

  • @Eupolemos
    @Eupolemos Рік тому +6

    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

  • @MauriceKindermann
    @MauriceKindermann Рік тому +1

    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!

  • @Allformyequine
    @Allformyequine Рік тому +1

    I personally prefer the "flapper" LOL , thank you made me laugh out loud !! hahah To heck with those Wrappers !

  • @genaroibc
    @genaroibc Рік тому +2

    Kevin, I never comment, but your videos are amazing ❤

  • @Allformyequine
    @Allformyequine Рік тому +1

    YAY! your Flow Space finally explained !

  • @JosephCodette
    @JosephCodette Рік тому +1

    Utopia is really great , I also use the space properties for anything margin or padding

  • @MarkHatter
    @MarkHatter Рік тому +2

    Great as usual. Particularly when you said flapper :)

  • @kacperkonieczny7333
    @kacperkonieczny7333 Рік тому +1

    6:38 you could also use ":where(:nth-child(n+1))".

  • @Lucsy3012
    @Lucsy3012 Рік тому

    Really nice, some great new stuff that I gotta pick up!

  • @CarlosCordovaDeveloper
    @CarlosCordovaDeveloper Рік тому

    Great video man! Help me a lot

  • @theshelbypalace
    @theshelbypalace Рік тому +1

    awesome!! thanks kevin!!

  • @sayw0rdz
    @sayw0rdz Рік тому

    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?

  • @justkailash
    @justkailash Рік тому

    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

  • @gshubh
    @gshubh Рік тому +2

    Clicked as soon i saw the title 🔥

  • @alhassanecamara2095
    @alhassanecamara2095 Рік тому +1

    Great 👍 so much of thing to learn in simplicity

    • @CoolCode-9
      @CoolCode-9 Рік тому

      Happy learning journey ❤

  • @MangoDev_
    @MangoDev_ Рік тому +4

    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?

    • @axelBr1
      @axelBr1 Рік тому

      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.

    • @santhanam2855
      @santhanam2855 Рік тому

      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.

  • @Richard-cl6kt
    @Richard-cl6kt Рік тому

    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!

  • @stefan5673
    @stefan5673 Рік тому

    Thank you - Your Videos are awesome ❤👍

  • @zainslamdien8138
    @zainslamdien8138 Рік тому

    Awesome King. 👌

  • @amadeov5998
    @amadeov5998 Рік тому +2

    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.

    • @KevinPowell
      @KevinPowell  Рік тому +4

      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

    • @amadeov5998
      @amadeov5998 Рік тому

      @@KevinPowell That would be awesome! Currently looking up that selector and stumbling into more information from Hayden.

  • @rajaulislamratul4736
    @rajaulislamratul4736 Рік тому +1

    Do you use eye care monitor or regular ones?

  • @riley_was_there
    @riley_was_there Рік тому

    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)

  • @carlosg8716
    @carlosg8716 Рік тому

    Loved the flapper 😂

  • @rovic2hacking505
    @rovic2hacking505 Рік тому +2

    Can you make a video about Vanilla CSS nesting, there is news that it has been already implemented for almost browsers except mozilla.

  • @Horse-tradeEu
    @Horse-tradeEu Рік тому

    Always a new tip to learn from Kevin.

  • @user-mma173
    @user-mma173 Рік тому +2

    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

    • @CirTap
      @CirTap Рік тому +3

      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 .

    • @user-mma173
      @user-mma173 Рік тому

      @@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.

    • @CirTap
      @CirTap Рік тому

      @@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...😇

    • @KevinPowell
      @KevinPowell  Рік тому +4

      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.

    • @user-mma173
      @user-mma173 Рік тому

      @@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.

  • @mahadevovnl
    @mahadevovnl Рік тому +1

    Why not use a flexbox oriented vertically and setting `gap: 1em`? That flow space is nice but looks so alien :)

    • @ThePulseProducer
      @ThePulseProducer Рік тому

      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.

  • @joeldcanfield_spinhead
    @joeldcanfield_spinhead Рік тому +1

    Is there a place to see all the code together?

  • @hyperprotagonist
    @hyperprotagonist Рік тому +1

    Kevin, from henceforth I will refer to you as Vanilla Powell.

  • @troy1516
    @troy1516 Рік тому

    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

  • @aleksandraurbanek9966
    @aleksandraurbanek9966 Рік тому

    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.

  • @phantomse24
    @phantomse24 Рік тому +1

    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. ?

    • @KevinPowell
      @KevinPowell  Рік тому +6

      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 😊

    • @CirTap
      @CirTap Рік тому +3

      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.

  • @matteocapalbo5863
    @matteocapalbo5863 Рік тому

    Hi Kevin, why do you use margin-top versus margin bottom to space elements between them? What is the best approach?

    • @ThePulseProducer
      @ThePulseProducer Рік тому +1

      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.

  • @blckv
    @blckv Рік тому +1

    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?

    • @Abubakr-md6kz
      @Abubakr-md6kz Рік тому +1

      thank you for sharing this i well try your technique :)

  • @aleattorium
    @aleattorium Рік тому +2

    The poor owl :(

  • @Kevin-qz4eq
    @Kevin-qz4eq Рік тому +1

    link to the source

  • @NegativeSpace0
    @NegativeSpace0 Рік тому

    Notification gang checking in 🛎

  • @JasonJA88
    @JasonJA88 Рік тому

    Thank you...😁

  • @stevekirkendall4555
    @stevekirkendall4555 Рік тому

    Hi Kevin, is just the HTML of this page available anywhere? Many thanks!

  • @emmanuelxs6143
    @emmanuelxs6143 Рік тому +1

    @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 😅

    • @KevinPowell
      @KevinPowell  Рік тому +3

      min(), max(), and clamp() don't need nested calcs for math 🙂

    • @emmanuelxs6143
      @emmanuelxs6143 Рік тому +1

      @@KevinPowell ok thanks 👍

  • @Bean-kw2xp
    @Bean-kw2xp Рік тому

    thank you

  • @LokeshKumar-tk7ri
    @LokeshKumar-tk7ri Рік тому

    Do you think that AI will replace web developers??

  • @aryzen2781
    @aryzen2781 Рік тому +2

    how do you organize your css for a multi-page website?

    • @taariqq
      @taariqq Рік тому

      Excellent question.

  • @mrabhijitrabha
    @mrabhijitrabha Рік тому +1

    ⚡Flash is faster or my click 😂

  • @ThatLucifer
    @ThatLucifer Рік тому +1

    Im confused about making manual coding website
    My questions is how i add CDN, Cache , Backup , Security stuff in it?

  • @sandy_knight
    @sandy_knight Рік тому +2

    Surely the least CSS with the biggest impact is:
    * {
    display: none !important;
    }
    😜

  • @sohanrazzak241
    @sohanrazzak241 Рік тому

    😊

  • @pacoalsal
    @pacoalsal Рік тому +1

    Lobotomized owl lmao

  • @Tausif_Khan_07
    @Tausif_Khan_07 Рік тому +1

    I started using tailwind CSS can you make tutorial on it please

    • @howdyimflowey4341
      @howdyimflowey4341 Рік тому +9

      If you know CSS, you know how to use Tailwind.
      If you don't, learn CSS first.

    • @KevinPowell
      @KevinPowell  Рік тому +7

      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.

  • @GarethField
    @GarethField Рік тому

    The ads made me not watch this, after a few minutes

  • @PascalHorn
    @PascalHorn Рік тому +1

    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… 😏

    • @KevinPowell
      @KevinPowell  Рік тому +2

      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.

  • @TBC1599
    @TBC1599 Рік тому

    Test