
Ten modern layouts in one line of CSS - simonpure
https://web.dev/one-line-layouts/
======
icefo
I recently had to code an HTML email signature for the first time and naive me
used standard HTML/CSS features. It exploded in all kinds of wonderful ways.

Long story short it took me a week (try something, test it a bit, send it to a
larger group of people and fix what broke) and email clients are stuck in the
distant past. You have to use fixed-width tables to embed images (but also
define the image width in the image tag ! Some clients ignore one or the
other), you also have to use tables for layout and style inheritance doesn't
really work because clients override styles. The only way to get consistent
layout is to embed text in <span> and repeat the styling everywhere.

I also coded something to auto-generate the signature using data from the
company intranet and I discovered that when you copy paste HTML code the
browser will only copy HTML/CSS code that's actually rendered (you can fix
that using draft APIs) but you still have the same problem when pasting the
signature in the signature form (roundcube in our case) some duplicates
attributes that the browser skip are actually useful for broken mail clients.

I finally got it working but I'd really wish mail clients would use modern web
engines. All major mail clients come from organization that also make
browsers. I doesn't have to be that painful

Edit: thanks to those who suggested tools to help with that ! It took so long
because I was just telling myself, it can't be that broken. Just try that and
it should work. I'll definitely try them if I ever have to write email HTML
again

~~~
progre
I guess one way to "solve" this is to skip the signature in the email and do
what every person working in my kids school do: Write your message in MS Word
and make sure it's propperly decorated with clipart. Then mail the wordfile.

~~~
mxuribe
This 1000x! I damn near fell off my chair when i saw my daughter's school do
this...then noticed that it was done with ever, single, official memo from the
school and asociated school district.

Which makes me feel like here's how things really went down back in the
day...(with much respect and admiration to TBL)...

Tim Berners-Lee: Look everyone, there's this thing called the web, where a
worldwide network of authors can publish content, and the
audience/visitors/recipients accessing said content have plenty of liberty to
adjust the style/look of said content to suit their display needs (e.g.
increase text size, expand window/width of content, etc.)...So, no one needs
to all have/use the same software/application, plus this all helps with
accessibility concerns, plus everyone can use different "reading/viewing" as
well as authoring software/apps, etc...Cool, right!!

(Almost) Everyone: Nah, we're good.

Tim Berners-Lee: But, wouldn't you want to reap the benefits of the
flexibility that the world wide web can afford to everyone?

(Almost) Everyone: We don't understand the flexibility being offered here...We
just want the content to behave like books have ever since the late
1500s...nothing should change, every pixel should remain fixed/static, and the
control should always exist within the hands of the author, and not the
audience/readers. Besides, we will all just use some silly application like MS
Word, insert our content and signatures exactly how we want it to display in
the Word document (cheesy or not), and add some useless clipart, and control
it 100%. That's what we want, and that's what we understand.

Tim Berners Lee: But, don't you see that html docs (or something like that) as
published via this world wide web can also help people who struggle financial,
or don't have the means of affording tech, etc. since they need not have to
purchase all the premium applications to view and edit content?? There can be
no-cost or low-cost options for the software that poor folks can use, and even
just this can at least slightly help to level things out for inequality, and
so much more. Much like the original print press, this - and other aspects of
the web - can give many more people access to knowledge and wonderful,
essential content!

(Almost) Everyone: Meh. For poor folks who can not afford MS Word, I'm sure
Microsoft (and other big companies) will "solve" this by donating "freemium"
versions of Word, and de facto establish Word docs as a standard format. Or,
people can just borrow more than they can afford, and go into debt to afford
the latest, premium technology. Who cares about MS' nefarious business
practices. By the way, Mr. Berners-Lee, you should really call your "web
thing", something better like "world wide Word docs (wwds)"...plus allow for
way more emoji usage, because that would help me avoid having to think and
write expressive prose...icons are easier for us to convey meaning, and its
not due to our collective laziness, not at all. Just look for instance, how
advanced our culture would become if we could, say, deliver cat photos
(without much text/content added) as fast as possible to other rich people
around the affluent world!?!

Tim Berners-Lee: (Throws his hands up in frustration, focuses the remainder of
his career on speech-making, academia, and a few start-ups, and leaves the
flock to fend for themselves, which of course get taken over and controlled by
for-profit companies.)

;-)

~~~
Vrondi
Well, at that time it would have maybe more likely to be "Word Perfect",
because Word wasn't the total industry dominator that it later came to be.

~~~
mxuribe
You're right! Or, maybe WordStar too! lol :-D

------
lbotos
If you are someone (like me) who's done CSS/Frontend 'a few years ago' do take
a look at this video to see the progression. A lot of things (CENTERING!)
which were much harder in the past are now _complex_ but possible. The newer
style stanzas will look alien to you.

~~~
madenine
I'm with you.

First real forays into FE that didn't involve slicing PSDs to tables were in
Bootstrap and Foundation in ~2013. The responsive grid those frameworks
delivered seemed magical at the time, but you got the sense that the benefits
came on the back of some serious CSS wizardry and framework overhead.

The newer CSS features (grid, flexbox) seem so light and magical.

------
njsubedi
Even after a decade of working with CSS, I’m amused when I see someone center
an element inside its container.

~~~
mcv
I find myself wondering exactly how many different ways there are to center
things in CSS.

------
mrweasel
That is so great. I don't really make website anymore, but we used to struggle
to create layouts like these, it awesome to see how much easier it has become.

------
butz
It should be mentioned that modern layout solutions have much better
performance. Have you ever seen how complicated float layouts are struggling
during window resize? When using grid or flexbox redraws are almost instant.

~~~
bryanrasmussen
of course float layouts are often misuses of float so it's no surprise it
struggles.

------
noman-land
These are pretty amazing. Not quite one line but very concise nonetheless. I
never mess with grid. I use flex regularly though.

~~~
krimeo
Until you actually try them yourself in various browsers (and versions) with
dynamically sized content of the elements inside those layouts and see that it
is still buggy and not that much has changed and it still needs insane amount
of hacks to make the layout work reliable across browsers.

EDIT: The common example when grid and flexbox layouts break is when a child
of a child element in the layout overflows.

~~~
jedimastert
Could you set up a little example and submit a bug or two?

~~~
krimeo
[https://www.reddit.com/r/webdev/comments/alg8az/anyone_exper...](https://www.reddit.com/r/webdev/comments/alg8az/anyone_experiencing_issues_with_flexbox_and/)
[https://bugs.chromium.org/p/chromium/issues/detail?id=927066](https://bugs.chromium.org/p/chromium/issues/detail?id=927066)
...

------
sevencolors
Grid and FlexBox have made my life so much easier these days

and fallback is easier with @supports

------
darepublic
For the vertical/horizontal centering, this author uses display: grid on the
parent and place-items: center. But there is an older way to do just the same,
give parent a display of flex and put margin: auto on the child

------
darepublic
The thing I want to see in css is a way to define blocks where the height is a
percentage of the width. There is a well know hack to do this with padding-
bottom but.. yea its a non-intuitive hack.

~~~
rattray
The post mentions `aspect-ratio`, which isn't available in most browsers yet –
will that work for you once it's ready?

~~~
darepublic
ah, shame on me for not reading further. Yea that sounds like just what I'd
like, assuming that the aspect ratio block can also contain children (which
I'm guessing it will)

------
toastal
I'm still looking for subgrid though. [https://caniuse.com/#feat=css-
subgrid](https://caniuse.com/#feat=css-subgrid)

------
not_a_moth
Wow appreciated. Am now seriously considering stripping bootstrap out of my
app and replacing with grid and flex. Stuck in 2015 as a front end developer
apparently.

~~~
mamcx
I use tailwind now and yeah, is much better (if wanna do your own style).

And is much less overall inline-class (I was worried that tailwind mean bigger
.html but nope, in fact is less overall)

~~~
rtsil
I used to hate the very idea of Tailwind until I tried it.

~~~
felbane
I thought about trying tailwind and then saw "Step 1: install via npm"

I am so goddamn sick of having to download a giant mess of JavaScript modules
just to use a tool to generate something that has nothing to do with nodejs or
it's ecosystem.

It's at the point where I'm in full "crotchety old man" mode and forcing
myself to build the entirety of my frontends in pure HTML5/ES6/CSS3.

It's quite liberating, actually.

~~~
mamcx
I hate that too. What sold me the idea is the fact I can use it to heavily
reduce the CSS to be exactly what I have used.

I wish instead of npm it have a Go or Rust binary. What it need it for is to
generate the .css clases and to prune it for size reduction.

~~~
rtsil
Purgecss is a godsend when you use a third-party CSS library.

------
agumonkey
wow this website made firefox 38 (corporate lts ..) lose it entirely :)

------
bkmeneguello
Just glad to not have to ensure this is compatible with ie6

------
cosmotic
What is a "modern" layout?

~~~
hactually
"Works in chrome"

