Simon
Simon
PostsComments
KPCKevin Powell - Community
Created by Simon on 11/15/2024 in #front-end
CSS – building a cohesive spacing economy in website projects
I see where you are coming from. Returning to development after a decade or so, I am trying to cobble together reasonable approaches, so I (best case) don't work myself into dead ends. While I have normalizing ideas as such 
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin-block-end: 0;
}
:first-child {
  margin-block-start: 0;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin-block-end: 0;
}
:first-child {
  margin-block-start: 0;
}
this ofc does not solve all sibling and nesting issues AND I lack experience putting it into practice(production), uncertain how to properly solve spacing demands after resets. That's why I would enjoy reading up on things that worked for experienced devs (:
5 replies
KPCKevin Powell - Community
Created by Jono Lewarne on 11/14/2024 in #front-end
Could these scalable backgrounds be made with css?
I'll just drop this here an leave https://css-generators.com/
11 replies
KPCKevin Powell - Community
Created by FROSTYTIPS on 11/14/2024 in #front-end
Responsively fitting text to full width of container
I would advice you to research responsive typography because clamp() should not act as your one-trick pony. But here it is anyways https://fluid-typography.netlify.app/
7 replies
KPCKevin Powell - Community
Created by LachsDuJour on 11/4/2024 in #front-end
When text gets in two lines
not sure if it targets the right thing, but eventually you can use bits of it ... lol
47 replies
KPCKevin Powell - Community
Created by LachsDuJour on 11/4/2024 in #front-end
When text gets in two lines
-# Edit 20241115: caution, calculation fails with box-sizing: border-box I have stolen a thing https://jsfiddle.net/d63Lpshg/ _
47 replies
KPCKevin Powell - Community
Created by LachsDuJour on 11/4/2024 in #front-end
When text gets in two lines
Well, thats a design issue imo ... It would be strange if the multi-line click area is more narrow than the others, given these are listed vertically, no? Moving the arrow next to the text would either cause a large white-space clickable area on it's right that is not visible, or the design to be inconsitent. This could perhaps be solved by adding background and/or borders to make the click-area more obvious. In the case of buttons maybe centering them horizontally would make it look more coherent
47 replies
KPCKevin Powell - Community
Created by LachsDuJour on 11/4/2024 in #front-end
When text gets in two lines
The pen got updated. – But doesn't flex fill up the hypothetical space to push the children apart and/or do flexy stuff? I do see that comparing it to block is not correct 🥲 imo in any case as for now you may be forced to limit the parent element's max-width to let the children act on it (this should also allow text-wrap to do its job?). Maybe with rules applied by javascript if there is a need for different stylings between single-and multi-line buttons. But I could be wrong ofc.
47 replies
KPCKevin Powell - Community
Created by LachsDuJour on 11/4/2024 in #front-end
When text gets in two lines
It's how flexbox operates, innit?
47 replies
KPCKevin Powell - Community
Created by Faker on 11/12/2024 in #front-end
How do grid lines work in CSS grid?
No description
8 replies
KPCKevin Powell - Community
Created by Zempai on 11/7/2024 in #front-end
CSS – managing grid-template-columns sizes with classes
-# Zempai posted from his work account Thanks for your input fox 😄 the line naming approach was actually present in my pen all along, but it is nice to know that I took a good path with that. As for adding the padding: I accidentally noticed on Josh Comeau's site, that he basically uses the same grid-layouting concept while giving visually highlighted elements some space to breath. After digging – it's a silly little math snippet 
.inset {
  padding-inline: 32px;
  margin-inline: calc(32px * -1);
}
.inset {
  padding-inline: 32px;
  margin-inline: calc(32px * -1);
}
Honestly, I will go for this approach while I don't have the expertise to set up a more complex grid. And after all maybe there is nothing to outsmart
5 replies