Forem: kachel

css breakfast #3

kachel — Mon, 22 Jan 2024 21:24:05 +0000

this blog post is more like a little snack.

after watching Kevin Powell's styling underlined links video... i knew i had to try it out for myself!!

fancy `a` tags

turns out we do not need any of that pseudo class schtuff anymore!

a {
  text-decoration: none;
  position: relative;
}

a::after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: -5px;
  left: 0;
  height: 3px;
  background: lime;
}

instead we should use text-decoration~! with it we can change the thickness, color, style, and line.

a {
  color: hotpink;
  text-decoration-thickness: 8px;
  text-decoration-color: lime;
  text-decoration-style: wavy;
  text-decoration-skip-ink: all;
  text-decoration-line: underline; 
}

but that is so much typing, right??

good news!! you can shrink it down to one line <333 text-decoration: 8px lime solid underline;

here is a codepen where i do a couple smol animations to change the link stylings.

ope! forgot about one more thing! in order to change the position of the underline, you will have to use a non decoration style called text-underline-offset.

now is your time to get fancy with your links.

css breakfast #2

kachel — Wed, 17 Jan 2024 18:57:06 +0000

a meandering list of responsive tips

height + width... do not do it

just don't. it is better to not use height or width to set the size for a responsive element!! instead it is better to set a min-height or max-width!

setting a specific height or width can cause wonky overflow issues. barf horizontal scrolling. ew.

using a max or min allows the elements to shrink or grown properly.

it is a little hard to remember but for heights you want min and for widths you want max.

here it is in action:

.container {
    max-width: 960px;
    min-height: 500px;
    margin-inline: auto;
}

note: that these general rules do not follow for elements with small specific sizes, maybe like a user's avatar or icons.

sometimes css is not as it seems!

try this example out:

body {
  width: 100vw;
  height: 100vh;
  border: red solid 4px;
}

notice the horizontal scrolling!?!? what the heck, right? turns out that the scrollbar is actually taking up some of that screen real estate!!

less is more in this case. no need to declare that 100vh when the element is already a block. taking up all the room it needs.

better to use something like width: auto;. as a general rule, it is best to work with the browser than against it.

counterintuitively viewport units are not more responsive... in fact, they do not quite work the way you think they are going to! using them in clamp might be a use case see my previous article. but really just better avoid them for now.

overflowing images?? clean it up

i love this one cause it is just one little line of css that does the trick!! bam. no mo' overflo'.

img {
  display: block;
  max-width: 100%;
}

let the browser do its thang

using flex + wrap can do away with the need for specific media queries!! in the example below, instead of declaring widths for the containing unordered list element, best to let the browser figure out those wrap points for you!!

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
}

that concludes this little css breakfast!! thanks for reading. and if you take anything away from this post, let it be "work with the browser. it is your bestie."

source:

"A practical guide to responsive web design", Kevin Powell, https://youtu.be/x4u1yp3Msao?si=nPD0eUGxF1kcttVq

if anything is wrong lemme know! i aint perfect.

css breakfast #1

kachel — Wed, 10 Jan 2024 18:13:43 +0000

`clamp()`

starting a mini blog series where i take a css concept and do a little dive onto how to use it and why i like it!!

calling the series "css breakfast" because like the most important meal of the day, it is important to learn how to use the tools of the web without relying on JS or utility frameworks... >.< ( ok ok ok i will put away my soapbox now)

we are starting off the blog series strong with a new favorite clamp()!! it takes three params: min, current, and max.

things we like:

replaces media queries for dynamic typography!
good browser support! ( whatevs IE )

things we don't like:

you gotta be careful when using a relative unit for the current param as it affects manual zooming in and zooming out ( aka the size does not change when you do that )

^^^ in order to fix that problem it is best to mix the units for the current param: clamp(50px, calc(7vw + 1 rem), 100px)

imho the coolest thing you can do with this is set css variables with all your font sizes!! look at how gorgeous that is <333

  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

as with anything you gotta play around with the best sizes for your site! but say goodbye to those old dusty media queries and say hello to clamp!

resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
https://www.youtube.com/watch?v=erqRw3E-vn4
https://www.youtube.com/watch?v=U9VF-4euyRo
https://www.youtube.com/watch?v=pbD55DJgOlw