3 little-known CSS sizing tools

Подписаться 48 тыс.

Просмотров 4 тыс.

50% 1

Min-content, max-content, and fit-content size items based on their intrinsic properties, rather than their display properties (e.g., block, etc.). While not always needed when you need these properties, they are a game-changer!
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/mic...
- Theme: marketplace.vi...
- Icons: marketplace.vi...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic...
- Blog: chrispenningto...
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoff...

Опубликовано:

30 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 15

@by_huy Год назад

A great video and I totally agree that these specialized CSS properties are such a game changer! Fit Content has been a savior for me when making grid columns with images

@CodinginPublic Год назад

Yes! And that’s another great use case for fit content!

@kasir-barati Месяц назад

Can you make a video about this markup and why 50% actual value will be 319px?

@criztiandev Год назад

I just sub, because this solve my problem like hell

@CodinginPublic Год назад

🙌

@groovebird812 5 месяцев назад

Hi... at 3:37 why has the container the complete width of the screen and not the width of the text?

@CodinginPublic 4 месяца назад

Fit content acts like max content except that it wraps when needed, so it will take up the full width it needs. Because the text is too long it wraps, but the container stays as large as it would need if it didn’t need to wrap. Hopefully that makes sense!

@DJN1K3 Год назад

Great video explaining the basics and case scenarios, thank you for all the content and projects you share. As a developer it’s easy to forget how sometimes the simple things get overlooked yet are very helpful, like this one.

@CodinginPublic Год назад

Glad it was helpful!

@dev.mufeedcm Год назад

I'd like to know how you show live projects made with different frameworks on one site after researching I found out that is a mono repo, I'd also like to know how you add that small info button on the bottom right corner of every project😄

@dev.mufeedcm Год назад

correct me if I'm wrong 😄,

@CodinginPublic Год назад

For some reason RU-vid marked this as spam? So I'm just seeing it. I'm using Astro for my site. I am putting my built code in the public directory (which is untouched by Astro). You could also do everything in a mono repo, I would think, but I haven't done that before. The small info button is done with client-side vanilla JS. I invoke a function on load that creates the button and generates all the right links, etc. You can poke around in the source code if you’re curious :)

@dev.mufeedcm Год назад

@@CodinginPublic Ooh, thanks for your help, :) then how do you map it in the URL, 🙂🙂

@CodinginPublic Год назад

I just have a json file that is built to the root of my site on build with all the data. The JS file compares the url of the project against all those data entries to select the right links to show. Probably a better way to do that, but that’s what I came up with a few months back.

@dev.mufeedcm Год назад

@@CodinginPublic thanks :)