This section explains the terminology in a very interesting and interactive way: [An Interactive Guide to Flexbox in CSS (joshwcomeau.com)](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/#content-vs-items-4)
It's a shorthand for setting, in order, `flex-grow`, `flex-shrink`, and `flex-basis`. The former is used when the parent container's width is larger than the sum of the children's basis width (being `flex-basis`), in which case the remaining width will be distributed amongst each children proportionally to `flex-grow`. The latter is identical, just the opposite, i.e. works when the width of the parent is less than the sum of the children's, and these are shrunk proportionally to `flex-shrink`. I recommend looking at the [MDN page for it](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
I use it so much in React that I built a component called ‘Flex’ which takes justify/align/direction as props. If I just want the content centered though I just have to pass the ‘center’ Boolean prop and it does it all.
I still tend to target the last child instead and override the border to “none”. The last child might often have more differences than just the border.
I use an extension called "stylus", and use it to inject this css:
.test { outline: 1px solid red }
then just put "test" wherever to test it out. and other similar classes like test2 for same but blue; or test5 for background rgba(255,0,0,0.5) etc
I wish I had known this one earlier. To get an element to take up “all remaining space,” the parent should be
```css
.parent {
display: flex;
flex-direction: column; /* when you want a column instead of row*/
}
```
And the child should be:
```css
.child {
flex-grow: 1;
}
```
If you find yourself battling with values of `z-index`, it's time to start learning about `isolation: isolate`. It's more than this; but you can start out thinking of it as a way to reset the z-index counter back to 0 for the element you use it on and it's subtree.
If you find yourself constantly tweaking values for `margin` and `padding`, it's time to look at a concept called "Modular Scale" and/or the 4px/8px grid system.
If you struggle with layout, try designing your components in such a way that they don't specify their own layout and instead leave that responsibility up to the container element you put them in.
Third point is so very important. In general, figuring out what properties of any component should be global, and which ones should be specific to the place the component is used in, goes a long way to making a good design system.
That's always what I struggle with.
With code, I have a pretty good idea of what goes where, and that's conspicuously lacking when it comes to CSS. It's always a big pile of spaghetti. I just don't get CSS the way I get code.
Prior to 2015, browser support for native CSS calc() expressions was limited. Here’s an old CSS Tricks article from 2013 that talks about how it was starting to be more adopted, but wasn’t widely used yet.
https://css-tricks.com/a-couple-of-use-cases-for-calc/
Web design and development have changed and evolved so much since I got started with it back in the early 90s. But calc() was killer when it showed up.
That is exactly what it felt like. And now with colors in the oklab space - we can even do math on colors. I never want to have to see another hex code ever again.
When you have to absolutely position something but keep it fixed in one spot in the section, this is what I do.
Left: 50% and Margin left negative or positive however much I need to move it off the center line.
In the design I will measure how far away from the center line of the design that the left edge of my graphic is. Maybe it’s 200px LEFT of the center line. So left: 50% will place the left edge of my graphic at the 50% center line of the parent container. It will always be positioned there no matter how wide the container gets. Its left edge will always be at the center line if the parent. Now I use margin to push it off that center line. Positive margin left will move it to the right and negative will pull it to the left. So if it’s 200px left of the center line, I do margin-left: 200px to push it 200px off the center line to the right of it.
I use this all the time to absolutely place elements in a section and not have them tied to a right or left edge of a parent. Because when that parent gets wider, they go more and more left. I don’t want that. I want it to stay in its position in the design regardless of how wide its container parent gets.
Trick number 2:
Font size scaling. Let say you have an image group of like 4 images and they’re overlapping each other. How do you make this responsive?
You first measure out the box that they occupy in the design. Find the top most image and left most and right most and bottom most. Their edges will make the main “box” they live in. So I add a Div with 4 images inside of it. If that box they make is 400x600px, I make a Div that is 400/16em wide and 600/16em tall. Or 25em wide and 37.5em tall. Why Ems? We will find out later!
So now we have our box set. Add position relative to it and z index 1. Inside of it you have the images all absolutely positioned inside that box. Add their height and widths in em. Same as their top and left and right values. All in Ems. So the top most one is top:0 and maybe it’s 16/16em (1em) off the left edge of the box. So left: 1em. The right most image is right: 0 and maybe it’s off the top by 32/16em (2em) etc. you see what’s going on. We’re absolutely positioning each image relative to the parent “box” they live in. Once you’re done with that you set your screen size to 360px for mobile.
On the parent box, set the font size to min(1.4vw, 1rem);
What this does is sets the font size of the parent to the vw value. So the wider the screen gets the larger the font size gets. And stops when the font sizes equals 1rem (16px) which is tied to the root element (html tag) default font size (which is 16px).
This scales the ems inside of the box. All of them use Ems. Which pull their ratio value for em from the font size of their parent. So if your parents font size is tied to vw, so are the children that use Ems for their values. So as the view width gets wider, the font size of the parent box gets wider and the children scale proportionally with the vw. You need to play with the vw value till your box fits within the container on mobile. Sometimes it’s 1.4vw, or 2.2vw. Whatever you need to shrink it so it fits nicely on screen within the container. The smaller the vw unit you use the smaller the box and its children will be. This is how you effectively use font size scaling. We create a group of images that we build once and in one size, and scale them down proportionally so they fit on mobile and grow with the screen until it reaches its final form. I use this ALL the time.
I use it for the image groups on this site I made
https://makopoolrestorations.com
Set the screen size to 360 px and watch those image groups grow proportionally as you drag the screen size wider. It’s literal responsive magic. And it rapidly speeds up your development since you’re building it once and scaling it down.
The other thing I do for trick number 3 is images. I wrap all my images in a picture element and have source tags to load mobile sides images on small screen sizes and the desktop image on larger screens. I set the width and height manually on the picture elements, then absolutely position the images Inside of the picture element, height and width 100%, top and left 0, object-fit: cover. What this does is makes the image “cover” the entire parents dimensions and scales the image up to fit it automatically. When I do this, that means I can swap out the images anytime I want and not have to worry about them being the same width and height of the one they’re replacing. It will automatically scale up to “cover” its parent and be centered inside of it. Now I can swap images without worrying about different sized images breaking the design because they had a different height and width than the original. You can also see this done on the mako site I linked. All my images are done that way.
I also do that for my background images for sections. Because now I can add the lazy loading tag to the img tag and lazy load my background images and serve mobile sized images on mobile. Boosting my load times and performance.
These are the three biggest css hacks I use to build my websites.
The also did the left 50% margin left trick on that shark graphic in the mako site near the hero section. Expect I did right: 50% and margin right. That site utilizes all three css tricks I mentioned. Perfect example to showcase what I’m talking about.
Enjoy!
Do you only use the vw trick on those image layouts? I read some tricks to use it for a more “pixel perfect” design at any screen size but it doesn’t seem the best for accessibility. The zoom does not seem to work that great in browser. Any thoughts on that?
display: grid;
grid-template-columns: repeat(auto-fit,minmac(300px,1fr));
gap: 1rem
Any time I need simple responsive columns, which is at least one a week.
### My CSS Reset
```css
* { box-sizing: border-box; margin: 0; padding: 0 }
body { min-height: 100vh; min-height: 100dvh }
img, video { display: block }
nav > ul { text-decoration: none }
```
There's a lot more but this is my basis everytime.
### Centering a div
```css
.container { display: flex; justify-content: center; align-items: center }
```
Add `flex-direction: column` to stack the items vertically.
### Multiple CSS files
I usually divide my CSS on the basis of function. `reset.css` `variables.css` `globals.css` `nav.css` and then one css file for every html page.
For multiple css files do you have to link them all in the html individually or is there a way to export/import into one another and call only one? (Noob question I'm a noob)
Natively HTML/CSS doesn't have any feature of those sorts although you can use a CSS preprocessor like PostCSS or Sass to generate a single CSS file.
Honestly, I wouldn't recommend you to go this route as it is somewhat complicated.
use :before and :after sudo elements for doing magic ui things like shapes, fancy transition animations
Learn difference between inline elements, block elements and which are the html elements are block and which are inline.
Learn behaviour of margins on inline elements
Learn about collapsing margins
Learn box sizing property
Learn :where, :is, :not selectors
You may consider using SCSS instead of pure CSS
Learn using element inspector properly. Be careful about inheritances and overridings
Always start writing CSS from general to specific. Firstly create the page layouts and then start writing sections and finally section elements like cards title styles etc.
Don't use !important; too much. If you are using important too much you are probably doing something wrong
Also you may watch videos of Kevin Powell on YouTube. He helps a lot to get better understanding over CSS
There's a difference between depth and air. If you're trying to teach a technique you don't give a life story. That's how we get recipes of today who have an essay of AO generated lore before you even get to the ingredients list.
Some exposition is fine, mind you.
A List Apart was an attempt to bring culture and insight into the work, to tell a story, not just disseminating information as tutorials.
I hear you, but the writers and editors had a different goal from what you want out of the article.
Get familiar with a framework that you can compose yourself, like bootstrap or tailwinds etc. Predefined columns/grid are an invaluable tool for a fed. Brush up on :pseudo classes - they’re real effort savers. Lastly, when you use transform: all 0.3s ease; , remember to put it after all your other properties so that the hover state will use it aswell.
If I’m every trying to align something with everything else, background: tomato or border: 1px solid tomato. If I’m doing a container I might do a before and after with 1px borders to make sure everything lines up.
It’s nicer than “red” since tomato will never be the last three letters of another word, so it’s easy to find and remove before going live.
https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjUwMHB4IiwibWF4V2lkdGgiOiI5MDBweCIsIm1pbkZvbnRTaXplIjoiMTZweCIsIm1heEZvbnRTaXplIjoiNDhweCJ9
For quick responsive font sizes. I use it all the time.
* { outline: inset 1px black }
This will outline everything on your site, without shifting things around because outline doesn’t work like border does. I keep this as the first line in my css for almost an entire build.
```
padding: 2em max(1.5rem, 50vw - 1280px / 2);
```
This will center the content of a block 1280px wide, with 2em of padding at the top and bottom and 1.5em on the left and right once the viewport touches that box. And you can set the full background on the same element. Eliminates the need for wrappers.
`margin:auto`
I don't know why everyone doing `margin:0 auto`, I did it for long time… until I realized `margin:auto` is exactly the same thing. It is because auto wont center vertically (as to why it was done that way, I have no idea)
`margin: 0 auto` is saying `0` margin-top/bottom, and `auto` margin-left/right. `margin: auto` and `margin: 0 auto` are 2 different things like the other commentor suggested
You probably want `margin-inline: auto` so you won't affect the block/y axis of an element. And `-block` to target the block axis (you wouldn't really use with `auto` but just to set top and bottom to the same value). Also works with padding.
display: flex; justify-content: center; align-items: center; I probably use this more than I should.
``` display: grid; place-items: center; ``` Is another good one
yesterday i spent 30 minutes alternating between justify-items and justify-content only to see this and realize i neeeded to use place-items
Place items is an alias for justify-content and align-items
WHY SO MANY DIFFERENT DISCONNECTED TERMINOLOGIES? I mean, why is it justify CONTENT but align ITEMS? I'm always bamboozled by these names
https://css-tricks.com/snippets/css/complete-guide-grid/ this might be a helpful resource to understand what is content vs items
That and the flex companion article are the best guides. I still have them bookmarked for reference.
css-tricks has been my go-to site for years. Especially for experimental stuff. Been a great resource.
I'm so glad they're being bankrolled by DO. They're an invaluable resource.
> being bankrolled by DO I still don't understand wtf DO was doing buying the site in the first place.
Align content is its own thing, and does what justify content does, but on the opposite axis.
This section explains the terminology in a very interesting and interactive way: [An Interactive Guide to Flexbox in CSS (joshwcomeau.com)](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/#content-vs-items-4)
Thank you! This was useful and fun to read! And managed to explain what I was bitchin' about earlier so... Today I Learned.
Justify is always for the primary axis, default is horizontal. Align is always for the cross axis. 60% of the time, it works every time
Fuck me. Thank you.
You’re not my type, enjoy the css though.
And on its children: { flex: 1 1 auto; }.
What is this for?
It's a shorthand for setting, in order, `flex-grow`, `flex-shrink`, and `flex-basis`. The former is used when the parent container's width is larger than the sum of the children's basis width (being `flex-basis`), in which case the remaining width will be distributed amongst each children proportionally to `flex-grow`. The latter is identical, just the opposite, i.e. works when the width of the parent is less than the sum of the children's, and these are shrunk proportionally to `flex-shrink`. I recommend looking at the [MDN page for it](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
Thank you!
I use it so much in React that I built a component called ‘Flex’ which takes justify/align/direction as props. If I just want the content centered though I just have to pass the ‘center’ Boolean prop and it does it all.
Nice, really clever. Never tried this before
I just created a vscode snippet for the common flex use cases. col-center, row-center, etc
lol exactly
Amen to that, brother.
More than you should? This is great. No reason not to use this.
Better than a clear float
Lol I like how this one is different from the others. It's the black sheep.
is there a shorter way to do this? I use this one allll the time
Put it in a class and apply that?
create a SCSS mixin or function, based on parameters for flex: row/column, justify-content, align-items, and lastly wrap/nowrap
yeah that's what I was thinking aswell
display: grid; place-items: center; Or like the other person said, make a class.
Yeah I was also thinking about centring stuff😶🌫️
Yep lol same here
Better than clearing floats
This is the way!!!
This is the way.
Better than clearing floats
Better than clearing floats
Better than clearing floats
li:not(:last-child) { border-bottom: 1px solid lightgrey; }
I still tend to target the last child instead and override the border to “none”. The last child might often have more differences than just the border.
I prefer li + li { border-top: 1px solid grey; } as a pattern for this, but they're both equivalent
The first one is easier to understand though IMHO
Yeah agreed
It's easier to read, `li + li` is a lot easier to remember and write.
True, but you read code far more than you write
Yeah, but that's really not a complicated one, is it? And it's something everyone who's written much CSS is familiar with.
\* { outline: 1px solid red !important; } This will help if you're not sure what is causing layout issues.
Using `box-sizing: border-box` will make sure the border doesn't contribute to layout problems.
Good point. Should have mentioned it.
I use this constantly
I use the pesticide browser extension that lets me just toggle this super easily, I use it way too much
I use an extension called "stylus", and use it to inject this css: .test { outline: 1px solid red } then just put "test" wherever to test it out. and other similar classes like test2 for same but blue; or test5 for background rgba(255,0,0,0.5) etc
I wish I had known this one earlier. To get an element to take up “all remaining space,” the parent should be ```css .parent { display: flex; flex-direction: column; /* when you want a column instead of row*/ } ``` And the child should be: ```css .child { flex-grow: 1; } ```
If you find yourself battling with values of `z-index`, it's time to start learning about `isolation: isolate`. It's more than this; but you can start out thinking of it as a way to reset the z-index counter back to 0 for the element you use it on and it's subtree. If you find yourself constantly tweaking values for `margin` and `padding`, it's time to look at a concept called "Modular Scale" and/or the 4px/8px grid system. If you struggle with layout, try designing your components in such a way that they don't specify their own layout and instead leave that responsibility up to the container element you put them in.
Third point is so very important. In general, figuring out what properties of any component should be global, and which ones should be specific to the place the component is used in, goes a long way to making a good design system.
That's always what I struggle with. With code, I have a pretty good idea of what goes where, and that's conspicuously lacking when it comes to CSS. It's always a big pile of spaghetti. I just don't get CSS the way I get code.
for margin and padding just copy the variables Tailwind uses lol
:root {}, var, calc, flex, and grid. These are game changers for me.
When calc was introduced, I just about lost it. It came down from the heavens bathed in light.
Calc didn't exist? How? No math whatsoever?
Prior to 2015, browser support for native CSS calc() expressions was limited. Here’s an old CSS Tricks article from 2013 that talks about how it was starting to be more adopted, but wasn’t widely used yet. https://css-tricks.com/a-couple-of-use-cases-for-calc/ Web design and development have changed and evolved so much since I got started with it back in the early 90s. But calc() was killer when it showed up.
It was the before times.
That is exactly what it felt like. And now with colors in the oklab space - we can even do math on colors. I never want to have to see another hex code ever again.
If you haven't already, check out Kevin Powell on YouTube. I've been writing CSS for a very long time and I still learn a lot from his work.
position: absolute; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover;
Now you can just use inset:0; instead of setting TRBL individually.
Technically I use a sass include, but I'll give inset a go in the future.
When you have to absolutely position something but keep it fixed in one spot in the section, this is what I do. Left: 50% and Margin left negative or positive however much I need to move it off the center line. In the design I will measure how far away from the center line of the design that the left edge of my graphic is. Maybe it’s 200px LEFT of the center line. So left: 50% will place the left edge of my graphic at the 50% center line of the parent container. It will always be positioned there no matter how wide the container gets. Its left edge will always be at the center line if the parent. Now I use margin to push it off that center line. Positive margin left will move it to the right and negative will pull it to the left. So if it’s 200px left of the center line, I do margin-left: 200px to push it 200px off the center line to the right of it. I use this all the time to absolutely place elements in a section and not have them tied to a right or left edge of a parent. Because when that parent gets wider, they go more and more left. I don’t want that. I want it to stay in its position in the design regardless of how wide its container parent gets. Trick number 2: Font size scaling. Let say you have an image group of like 4 images and they’re overlapping each other. How do you make this responsive? You first measure out the box that they occupy in the design. Find the top most image and left most and right most and bottom most. Their edges will make the main “box” they live in. So I add a Div with 4 images inside of it. If that box they make is 400x600px, I make a Div that is 400/16em wide and 600/16em tall. Or 25em wide and 37.5em tall. Why Ems? We will find out later! So now we have our box set. Add position relative to it and z index 1. Inside of it you have the images all absolutely positioned inside that box. Add their height and widths in em. Same as their top and left and right values. All in Ems. So the top most one is top:0 and maybe it’s 16/16em (1em) off the left edge of the box. So left: 1em. The right most image is right: 0 and maybe it’s off the top by 32/16em (2em) etc. you see what’s going on. We’re absolutely positioning each image relative to the parent “box” they live in. Once you’re done with that you set your screen size to 360px for mobile. On the parent box, set the font size to min(1.4vw, 1rem); What this does is sets the font size of the parent to the vw value. So the wider the screen gets the larger the font size gets. And stops when the font sizes equals 1rem (16px) which is tied to the root element (html tag) default font size (which is 16px). This scales the ems inside of the box. All of them use Ems. Which pull their ratio value for em from the font size of their parent. So if your parents font size is tied to vw, so are the children that use Ems for their values. So as the view width gets wider, the font size of the parent box gets wider and the children scale proportionally with the vw. You need to play with the vw value till your box fits within the container on mobile. Sometimes it’s 1.4vw, or 2.2vw. Whatever you need to shrink it so it fits nicely on screen within the container. The smaller the vw unit you use the smaller the box and its children will be. This is how you effectively use font size scaling. We create a group of images that we build once and in one size, and scale them down proportionally so they fit on mobile and grow with the screen until it reaches its final form. I use this ALL the time. I use it for the image groups on this site I made https://makopoolrestorations.com Set the screen size to 360 px and watch those image groups grow proportionally as you drag the screen size wider. It’s literal responsive magic. And it rapidly speeds up your development since you’re building it once and scaling it down. The other thing I do for trick number 3 is images. I wrap all my images in a picture element and have source tags to load mobile sides images on small screen sizes and the desktop image on larger screens. I set the width and height manually on the picture elements, then absolutely position the images Inside of the picture element, height and width 100%, top and left 0, object-fit: cover. What this does is makes the image “cover” the entire parents dimensions and scales the image up to fit it automatically. When I do this, that means I can swap out the images anytime I want and not have to worry about them being the same width and height of the one they’re replacing. It will automatically scale up to “cover” its parent and be centered inside of it. Now I can swap images without worrying about different sized images breaking the design because they had a different height and width than the original. You can also see this done on the mako site I linked. All my images are done that way. I also do that for my background images for sections. Because now I can add the lazy loading tag to the img tag and lazy load my background images and serve mobile sized images on mobile. Boosting my load times and performance. These are the three biggest css hacks I use to build my websites. The also did the left 50% margin left trick on that shark graphic in the mako site near the hero section. Expect I did right: 50% and margin right. That site utilizes all three css tricks I mentioned. Perfect example to showcase what I’m talking about. Enjoy!
Why not use left: calc(50% +- 200px);?
You can! Multiple ways to do things.
I love the mobile nav water effect!!
Do you only use the vw trick on those image layouts? I read some tricks to use it for a more “pixel perfect” design at any screen size but it doesn’t seem the best for accessibility. The zoom does not seem to work that great in browser. Any thoughts on that?
I only use it for images and decorative elements. Not text content.
Really slick website! Has a great feel. Cheers.
display: grid; grid-template-columns: repeat(auto-fit,minmac(300px,1fr)); gap: 1rem Any time I need simple responsive columns, which is at least one a week.
You made a typo on ‘minmax’ but this is what I was going to post. Great for automatic, responsive columns.
Haha, yeah. On mobile so autocorrect got me
display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;
### My CSS Reset ```css * { box-sizing: border-box; margin: 0; padding: 0 } body { min-height: 100vh; min-height: 100dvh } img, video { display: block } nav > ul { text-decoration: none } ``` There's a lot more but this is my basis everytime. ### Centering a div ```css .container { display: flex; justify-content: center; align-items: center } ``` Add `flex-direction: column` to stack the items vertically. ### Multiple CSS files I usually divide my CSS on the basis of function. `reset.css` `variables.css` `globals.css` `nav.css` and then one css file for every html page.
For multiple css files do you have to link them all in the html individually or is there a way to export/import into one another and call only one? (Noob question I'm a noob)
Natively HTML/CSS doesn't have any feature of those sorts although you can use a CSS preprocessor like PostCSS or Sass to generate a single CSS file. Honestly, I wouldn't recommend you to go this route as it is somewhat complicated.
Flex flex-col items-center justify-center gap-6
This guy tailwinds
This made my text wrap at weird amounts
Div { Border: 1pm solid red; Padding: 5px; }
text-decoration: blink;
if someone explained what all these codes actually do, this would be a pretty kick-ass cheat sheet ;)
Thanks everyone for the replies! Some really cool stuff in here I had no idea about!
use :before and :after sudo elements for doing magic ui things like shapes, fancy transition animations Learn difference between inline elements, block elements and which are the html elements are block and which are inline. Learn behaviour of margins on inline elements Learn about collapsing margins Learn box sizing property Learn :where, :is, :not selectors You may consider using SCSS instead of pure CSS Learn using element inspector properly. Be careful about inheritances and overridings Always start writing CSS from general to specific. Firstly create the page layouts and then start writing sections and finally section elements like cards title styles etc. Don't use !important; too much. If you are using important too much you are probably doing something wrong Also you may watch videos of Kevin Powell on YouTube. He helps a lot to get better understanding over CSS
I haven't seen the lobotomized owl selector mentioned, but: `* + * { ... }` https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
Great read and I love the uncanny name. Thank you for sharing! I’m off to experiment with the lobotomized owl in a current project.
I still use this constantly for nested vertical/horizontal spacing. No more placing margins on leaf components
That article is waaay too wordy but it's a good idea
People used to write about the things they cared about in depth and at length. It was a different time, and less competition for attention.
There's a difference between depth and air. If you're trying to teach a technique you don't give a life story. That's how we get recipes of today who have an essay of AO generated lore before you even get to the ingredients list. Some exposition is fine, mind you.
A List Apart was an attempt to bring culture and insight into the work, to tell a story, not just disseminating information as tutorials. I hear you, but the writers and editors had a different goal from what you want out of the article.
Yeah wtf is up with that can you not just tell me what it does and give me an example?
display:flex Tbh I’m tempted to write it in * every time
vw and vh especially when combined with calc
Using `display: flex` with `gap` definitely helps create a lot of layouts quickly.
text-decoration: none; or list-style-type: none; lol
`:first-child` You're welcome
margin: 0 auto It’s really going to be typed as mx-auto though
Get familiar with a framework that you can compose yourself, like bootstrap or tailwinds etc. Predefined columns/grid are an invaluable tool for a fed. Brush up on :pseudo classes - they’re real effort savers. Lastly, when you use transform: all 0.3s ease; , remember to put it after all your other properties so that the hover state will use it aswell.
This is a great resource for CSS+HTML patterns: https://every-layout.dev/
If I’m every trying to align something with everything else, background: tomato or border: 1px solid tomato. If I’m doing a container I might do a before and after with 1px borders to make sure everything lines up. It’s nicer than “red” since tomato will never be the last three letters of another word, so it’s easy to find and remove before going live.
max width: calc(what ever - 15px) Width 100% Margin auto. Obviously shorthand. But you can change the first line to meet your spacing requirements.
* { box-sizing: border-box; } Body, html { margin: 0px; padding: 0px; } video { clip-path: inset(1px 1px); }
I make triangles using pseudo elements.
Flex box imo I prob use this to much lol
https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjUwMHB4IiwibWF4V2lkdGgiOiI5MDBweCIsIm1pbkZvbnRTaXplIjoiMTZweCIsIm1heEZvbnRTaXplIjoiNDhweCJ9 For quick responsive font sizes. I use it all the time.
* { outline: inset 1px black } This will outline everything on your site, without shifting things around because outline doesn’t work like border does. I keep this as the first line in my css for almost an entire build.
I hate css so much
Color-mix
``` padding: 2em max(1.5rem, 50vw - 1280px / 2); ``` This will center the content of a block 1280px wide, with 2em of padding at the top and bottom and 1.5em on the left and right once the viewport touches that box. And you can set the full background on the same element. Eliminates the need for wrappers.
`mx-auto max-w-screen-md p-8` Easily get nice spacing around your navbar/ page sections or anything you want.
Also I time to time do this when I don't want default spacing ``` * { margin: 0; padding: 0; box-sizing: border-box; } ```
For divs: class=“container”. I use bootstrap a lot.
Just practice and Google... And you can use CSS generators, those are so good
`margin:auto` I don't know why everyone doing `margin:0 auto`, I did it for long time… until I realized `margin:auto` is exactly the same thing. It is because auto wont center vertically (as to why it was done that way, I have no idea)
What? Those are completely different.
`margin: 0 auto` is saying `0` margin-top/bottom, and `auto` margin-left/right. `margin: auto` and `margin: 0 auto` are 2 different things like the other commentor suggested
You can use it vertically if the parent div is set to display:flex
You probably want `margin-inline: auto` so you won't affect the block/y axis of an element. And `-block` to target the block axis (you wouldn't really use with `auto` but just to set top and bottom to the same value). Also works with padding.
!important
Human beings love patterns - they're easy to commit to memory. Find yours. Your brain will find a new obsession on its own.
You mean templates?
Tldr css is easy learn the fundamentals, it’s not html where you can get away with a div soup
Wut
[удалено]
Lol
[удалено]
[удалено]
[удалено]
[удалено]
[удалено]