DEV Community

Cover image for 100 Bytes of CSS to look great everywhere

100 Bytes of CSS to look great everywhere

swyx on October 16, 2021

TL;DR html { max-width: 70ch; padding: 3em 1em; margin: auto; line-height: 1.75; font-size: 1.25em; } Enter fullscre...
Collapse
 
brad profile image
BrandonKMLee

A major criticism of the "limited width" design (Medium, Substack etc.) are that some people are annoyed that it is a waste of space. A more innovative idea would be to have two parallel columns that allows one to waste less space whilst scrolling, similar to old newspapers. However it seemed that nobody has executed the ideas yet.

Collapse
 
swyx profile image
swyx

if you can find simple pure css solutions for two-column layouts that dont suck i'd be happy to help you publicize it

Collapse
 
trailrun80 profile image
trailrun80 • Edited

Would this be good enough for you?
developer.mozilla.org/en-US/docs/W...

And, if you require more control over layout, Grid is always an option

Thread Thread
 
swyx profile image
swyx

yeah i think that looks good statically but is not a good experience for arbitrarily long documents

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

If you don’t mind swearing (a lot of it) there is a series of websites people have built with minimal styling and design to highlight how people overcomplicate websites and how minimal styling is all that is needed to make a website usable (exactly the point of this article, so I am bound to β€οΈπŸ¦„ it!)

My entry is within this article, along with the previous ones that other people have built.

Perhaps you could see if you can make any improvements and join the fight! 🀣

Collapse
 
tusharsadhwani profile image
Tushar Sadhwani

This is clean and simple, I like it a lot.

Have you considered using :root instead of html ? It can cover more edge cases.

Collapse
 
swyx profile image
swyx

you know ive never used :root before! sounds cool. what kind of edge cases?

Collapse
 
tusharsadhwani profile image
Tushar Sadhwani • Edited

Such as a document that doesn't have an <html>, for example.

Thread Thread
 
tusharsadhwani profile image
Tushar Sadhwani

lol. dev.to commented out my html

Collapse
 
joshcollinsworth profile image
Josh Collinsworth

This version varies from the version on swyx.io, for what it's worth. (The top and bottom margins on the headings are reversed on swyx.io, which I came here to protest to find that they'd been flipped here.) :)

Collapse
 
swyx profile image
swyx • Edited

thanks yeah the swyx.io is a static site that builds once a day... the changes will be reflected soon. i use devto as a headless cms. thanks for caring enough to complain!

Collapse
 
endymion1818 profile image
Ben Read

Might actually use this in my redesign πŸ˜€

Collapse
 
hieultimate profile image
hieultimate

Great one. It would help me save some time

Collapse
 
sumon1068 profile image
sumon1068