8 ms·

Ten modern layouts in one line of CSS

282 points by simonpure 6y ago

noman-land 6y ago
These are pretty amazing. Not quite one line but very concise nonetheless. I never mess with grid. I use flex regularly though.
- ta17711771 6y ago
  They could be, most of them. Great article.
  - esperent 6y ago
    I don't think it's really correct to call code a one-liner unless a human being would typically write it as one line of code, which is not the case here.
    - holtalanm 6y ago
      im glad im not the only one that noticed that. 'one liners? half of these are 5 lines of csss...'
- krimeo 6y ago
  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.
  - rimliu 6y ago
    What are you even talking about?
    - krimeo 6y ago
      Sure. Give me a grid or flexbox simple layout and I'll show when it breaks.
  - jedimastert 6y ago
    Could you set up a little example and submit a bug or two?
    - krimeo 6y ago
      https://www.reddit.com/r/webdev/comments/alg8az/anyone_experiencing_issues_with_flexbox_and/ https://www.reddit.com/r/webdev/comments/alg8az/anyone_exper... https://bugs.chromium.org/p/chromium/issues/detail?id=927066 https://bugs.chromium.org/p/chromium/issues/detail?id=927066 ...
lbotos 6y ago
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 6y ago
  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.
sevencolors 6y ago
Grid and FlexBox have made my life so much easier these days and fallback is easier with @supports
mrweasel 6y ago
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 6y ago
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 6y ago
  of course float layouts are often misuses of float so it's no surprise it struggles.
icefo 6y ago
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
- krimeo 6y ago
  Just use tables! Seriously, with display:table css layout gets easy again.
  - Flimm 6y ago
    People read emails on their small screen devices, and I think it would challenging to read an email on a small screen made with tables.
    - wolco 6y ago
      Write emails in text and let your email client format it.
- 6y ago
njsubedi 6y ago
Even after a decade of working with CSS, I’m amused when I see someone center an element inside its container.
- mcv 6y ago
  I find myself wondering exactly how many different ways there are to center things in CSS.
not_a_moth 6y ago
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.
- darepublic 6y ago
  Newer versions of bootstrap use flex as the basis.. perhaps you can just try upgrading your bootstrap version?
- mamcx 6y ago
  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 6y ago
    I used to hate the very idea of Tailwind until I tried it.
    - felbane 6y ago
      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 6y ago
        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.
agumonkey 6y ago
wow this website made firefox 38 (corporate lts ..) lose it entirely :)
darepublic 6y ago
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 6y ago
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 6y ago
  The post mentions `aspect-ratio`, which isn't available in most browsers yet – will that work for you once it's ready?
  - darepublic 6y ago
    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)
- reificator 6y ago
  Are you referring to this item from TFA? https://web.dev/one-line-layouts/#10.-respect-for-aspect:-aspect-ratio:-lesswidthgreater-lessheightgreater https://web.dev/one-line-layouts/#10.-respect-for-aspect:-as...
toastal 6y ago
I'm still looking for subgrid though. https://caniuse.com/#feat=css-subgrid https://caniuse.com/#feat=css-subgrid
cosmotic 6y ago
What is a "modern" layout?
- hactually 6y ago
  "Works in chrome"
bkmeneguello 6y ago
Just glad to not have to ensure this is compatible with ie6

282 points by simonpure 6y ago

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

ta17711771 6y ago
They could be, most of them. Great article.
- esperent 6y ago
  I don't think it's really correct to call code a one-liner unless a human being would typically write it as one line of code, which is not the case here.
  - holtalanm 6y ago
    im glad im not the only one that noticed that. 'one liners? half of these are 5 lines of csss...'
krimeo 6y ago
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.
- rimliu 6y ago
  What are you even talking about?
  - krimeo 6y ago
    Sure. Give me a grid or flexbox simple layout and I'll show when it breaks.
- jedimastert 6y ago
  Could you set up a little example and submit a bug or two?
  - krimeo 6y ago
    https://www.reddit.com/r/webdev/comments/alg8az/anyone_experiencing_issues_with_flexbox_and/ https://www.reddit.com/r/webdev/comments/alg8az/anyone_exper... https://bugs.chromium.org/p/chromium/issues/detail?id=927066 https://bugs.chromium.org/p/chromium/issues/detail?id=927066 ...

lbotos 6y ago

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 6y ago
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.

sevencolors 6y ago

Grid and FlexBox have made my life so much easier these days and fallback is easier with @supports

mrweasel 6y ago

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 6y ago

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 6y ago
of course float layouts are often misuses of float so it's no surprise it struggles.

icefo 6y ago

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

krimeo 6y ago
Just use tables! Seriously, with display:table css layout gets easy again.
- Flimm 6y ago
  People read emails on their small screen devices, and I think it would challenging to read an email on a small screen made with tables.
  - wolco 6y ago
    Write emails in text and let your email client format it.
6y ago

njsubedi 6y ago

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

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

not_a_moth 6y ago

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.

darepublic 6y ago
Newer versions of bootstrap use flex as the basis.. perhaps you can just try upgrading your bootstrap version?
mamcx 6y ago
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 6y ago
  I used to hate the very idea of Tailwind until I tried it.
  - felbane 6y ago
    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 6y ago
      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.

agumonkey 6y ago

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

darepublic 6y ago

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 6y ago

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 6y ago
The post mentions `aspect-ratio`, which isn't available in most browsers yet – will that work for you once it's ready?
- darepublic 6y ago
  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)
reificator 6y ago
Are you referring to this item from TFA? https://web.dev/one-line-layouts/#10.-respect-for-aspect:-aspect-ratio:-lesswidthgreater-lessheightgreater https://web.dev/one-line-layouts/#10.-respect-for-aspect:-as...

toastal 6y ago

I'm still looking for subgrid though. https://caniuse.com/#feat=css-subgrid https://caniuse.com/#feat=css-subgrid

cosmotic 6y ago

What is a "modern" layout?

hactually 6y ago
"Works in chrome"

bkmeneguello 6y ago

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