Minimal base css

https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41?permalink_comment_id=4314882#gistcomment-4314882

Gist

58 bytes of css to look great nearly everywhere

58 bytes of css to look great nearly everywhere. GitHub Gist: instantly share code, notes, and snippets.

15 Replies

I would have liked to have seen a html { color-scheme: light dark; } thrown in there, but otherwise that's fantastic. I also love seeing the nice big line-height on there... so many people go 1.5 and, yeah it's better, but not better enough 😅

aolko•13mo ago

fork the gist 😛

Kevin Powell•13mo ago

Might just make my own based on the recent video I did 😄

aolko•13mo ago

are you using this reset btw?

html {
  box-sizing: border-box;
}

*::before,
*,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}

*::before,
*,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

also try, not last child hack

>*:not(:last-child){
 // w/e
 margin: 0 0 20px 0;
}

>*:not(:last-child){
 // w/e
 margin: 0 0 20px 0;
}

Kevin Powell•13mo ago

If I'm doing a minimal site, nah. The box-sizing: inherit is only useful if you know you'll be using 3rd party things, and these days, I think all 3rd party things assume you've reset it anyway 🤷 Also, if I'm doing a minimal starter, not even sure if you need to bother with it. It's so much less important than it used to be with layouts using flexbox and grid now anyway.

aolko•13mo ago

speaking of grid, still no way to fill the cols, like flex: 1; or span x?

Kevin Powell•13mo ago

Like, if there are multiple rows and there's one lonely element at the bottom just hanging there by itself? If so, then no, but that's also not really what grid was intended for, just use flexbox then (since the rows are independent from one another)

aolko•13mo ago

[1][2][3][4]
[1][fill   ]
[1][2][fill]
[1][fill][4]

[1][2][3][4]
[1][fill   ]
[1][2][fill]
[1][fill][4]

[1][2][3][4]
[5][6][7][8]

[fill][3][4]
[    ][7][8]

you know, like big square spaces with span

[1][2][3][4]
[5][6][7][8]

[fill][3][4]
[    ][7][8]

you know, like big square spaces with span

Kevin Powell•13mo ago

Well, you can do all of that, but you need to be pretty explicit about it... https://codepen.io/kevinpowell/pen/JjmVYmm/55a920e29e01b0fd8a5f81a5390b99aa

Kevin

CodePen

JjmVYmm

...

aolko•13mo ago

manually, yes, but how about with automatic flow/repeat? No matter the number of elements

aolko•13mo ago

Kevin Powell•13mo ago

How important is the order of the elements?

aolko•13mo ago

should be the usual first to last, ltr found a better set of samples https://grid-tiles.webflow.io/

CSS Grid Tiles

10 reusable modern grid layouts inspired by tile patterns, along with 8 tasteful  animations. Fully responsive and copy/paste ready for your next project!

Kevin Powell•13mo ago

https://codepen.io/kevinpowell/pen/gOByaQb/7bf44797bf4e3d2034a4e628f7219906?editors=1100 That looks a bit like masonry, which will eventually come with grid-template-rows: masonry but might be awhile off (you can play with it in FF though)

aolko•13mo ago

saw a lib for that https://muuri.dev/

Muuri - Infinite layouts with batteries included

Muuri is a JavaScript library that creates responsive, sortable, filterable and draggable grid layouts.

Gaming

Programming

Minimal base css