r҉ustic cy͠be̸rpu̵nk🤠🤖
Follow

How to replace 60% of Bootstrap:

body {
max-width: 1100px;
margin: 12px auto;
}

.thing {
display: grid;
grid-template-columns:
repeat(
auto-fill,
minmax(300px, 1fr)
);
grid-gap: 13px;
}

That should be a responsive 3 column layout on full screen. 2 Columns on smaller screens and 1 column on mobile

@cypnk oooh I have not played with grid layout. I am making a new small static site, as a matter of fact, I should play with it.

Flexbox layout was a gamechanger, but I see grid might be amazing too! Thanks.

@rysiek It's really nice. Amazing browser support as of 2018 and makes so many things more concise

The bad news is converting existing layouts is a bit of a pain, but depending on how complex it is, I'd say it's still worth it

@rysiek Just found this really nice article layouts by Jo Franchetti

medium.com/samsung-internet-de

It goes into some great examples with grids and other flexible layouts. Should help you get started on yours

@mary Try it ;)

If you follow this pattern, it should work:
<div class="thing">
<article>Stuff</article>
<article>Stuff</article>
<article>Stuff</article>
etc...
</div>

@cypnk Was joking, yeah I agree bootstrap is mostly bloat

@cypnk Wow, that's awesome:
```
<html>
<head>
<style>
body {
max-width: 1100px;
margin: 12px auto;
}
.thing {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 13px;
}
</style>
</head>
<body>
<div class="thing">
<div>Col 01</div>
<div>Col 02</div>
<div>Col 03</div>
</div>
</body>
</html>
```

@lanodan @cypnk Beats me, my HTML/CSS hacking days were pre-millennium, so i only barely understand any of this stuff! ;)

@lanodan @jos You can apply it to main or even article, if your post has multiple sections. I put thing so you can apply it to headers and footers too

@cypnk @riking pleeeaase don't use px tho. use em or pt or some other unit that accounts for dpi

@velartrill @riking This was a quick toot to show what it can do so a designer is free to use different measurements

I tend to prefer 96dpi (which CSS pixels are relative to) since 128dpi is awfully blurry. My eyesight is starting to fail so I'd much rather have sharp and small than large and blurry

@cypnk @riking lots of devs don't think to because so much of the teaching materials out there just gives examples in px, is my issue

@velartrill @riking Fixed:
body {
width: 90%;
max-width: 1100px;
margin: 1.3em auto;
}

.thing {
display: grid;
grid-template-columns:
repeat(
auto-fill,
minmax(30%, 1fr)
);
grid-gap: 1.4em;
margin: 1em auto;
}

@media (max-width: 1024px ) {
.thing {
grid-template-columns:
repeat(
auto-fill,
minmax(50%, 1fr)
);
}
}

@media (max-width: 640px ) {
.thing { display: block; }
}

@velartrill @riking These are typical screen sizes that devices tend to come in. So my laptop I'm typing in is around 1200px wide, but that's an angular measurement than actual "pixels" per se

Here's a better explanation: inamidst.com/stuff/notes/csspx

Some tablets are still 1024px and anything smaller is usually a wide phone (or "phablet" like a Samsung Galaxy Note 3 or iPhone 6)

@cypnk @riking i don't mean for the media queries, i mean for the body

i always use em for that

@velartrill @riking Text-zoom works fine as long as it's just the body tag so I left it as-is (I'm zoomed in at 120%). It won't affect accesibility. Of course there's no reason to prefer px over em for max-width. Rem would work fine there too

@cypnk @riking again, it's not really about zoom, it's about dpi

1100px means a different physical size on screens with a different pixel density

@velartrill Element max-width doesn't really affect dpi (px, em, or rem) since it's not applied to a body sub-element or text

I'm not sure what else to say. You can change it to anything you like

@cypnk ??? the idea is that the max-width should be physically the same on all screens, regardless of their pixel density
As a web developer, I hate having to buy the whole cow just to get some drops of milk - or, in this case, importing a whole framework just to get two or three capabilities I need. Both with JavaScript and CSS, if I can do it vanilla I will do it vanilla.

@cypnk they already rewrote 60% of Bootstrap in v4. Grid layout is not even 5% of the code now.

Sign in to participate in the conversation
Mastodon

Follow friends and discover new ones. Publish anything you want: links, pictures, text, video. This server is run by the main developers of the Mastodon project. Everyone is welcome as long as you follow our code of conduct!