
Branching Layouts With Ease - ssalka
https://medium.com/podible-engineering/pixels-are-tech-debt-ff4ff4fdeb4c
======
taeric
I kept waiting for the payoff of the title. What did I miss? Just that you can
avoid some coordinate concerns?

That is, pixels have become a convenient coordinate space for building a site.
If you are willing to actually design more with absolute positioning, many
designs become much easier to build up.

Instead, we seem to always want to just be more terse, not more explicit. Take
the "just float the logo" idea. Why float it? Text isn't supposed to redraw
around it, so it isn't really floated into the header. Float is just quicker
to type than giving coordinates.

None of which is to say the DSL that this gives isn't neat. It is. Some folks
actually had DSLs like this for older sites. We just seem to jump through more
hoops than makes sense to make things "float" instead of just positioning them
directly.

------
ravenstine
What's with all these articles about CSS grid within a few days? I feel like
someone who really doesn't like Bootstrap is paying for people to insist that
CSS grid is ready for production.

Look at this: [https://caniuse.com/#feat=css-
grid](https://caniuse.com/#feat=css-grid)

 _78.08%_ global usage, and that's if you use autoprefixing.

That's just pathetic. I'm as much a fan of CSS grid as the next person, but no
way I'm going to build a site or an app with it only to have my boss yell at
me because ~20% of the audience says the design looks like garbage or doesn't
work.

~~~
bpicolo
You don't need to worry about UC browser if you aren't in China (that knocks
several other browsers > 1% "global" share too). Opera Mini + IE11 is ~5.5%
unsupported.

One recommendation from the video the other day was also very good in this
regard:
[https://youtu.be/7kVeCqQCxlk?t=23m45s](https://youtu.be/7kVeCqQCxlk?t=23m45s)

Create something that works on mobile, then use grid to build outwards. Then
you get reasonable views on unsupported platforms (the mobile-centric view,
and most platforms that don't support grid are Mobile) and grid works where it
can / needs to.

IE11 will -never- support grid. Don't let that hold you back! (Unless you're
specifically developing for an IE11-rich market)

~~~
PunchTornado
very few people aren't in china. all projects i received lately test their
site from china and want to expand there

~~~
adventured
Most North American, South American, European and African small businesses
have zero business relationships when it comes to selling _into_ China. EU
exports to China, for example, are a mere ~$210b - with zero growth for
several years - vs the $17t size of the EU economy. That's about 1/3 smaller
than the size of Canadian imports from the US.

So it very much depends on your use case, as always. Mostly what China is
looking to do is export and acquire, they've shown a very low interest in
importing in any broad sense. Most businesses around the world will never have
meaningful access to selling into China, unless their economic approach
radically changes.

~~~
pjmlp
Speaking from Germany point of view, lots of companies do care about specific
browser versions, some of them are only now transitioning to IE 11 on their
minimum requirements RFPs.

------
tgb
What does the title have to do with the article? It links to [1] which seems
like a reasonable justification for the title, but it's just an aside. Seems
like the article should have been "container divs are tech debt".

[1] [https://engageinteractive.co.uk/blog/em-vs-rem-vs-
px](https://engageinteractive.co.uk/blog/em-vs-rem-vs-px)

------
Terr_
> According to the specs, the finished page should look something like this on
> desktop:

It's ironic how the ASCII art doesn't translate to the site's mobile layout :p

------
jdonaldson
I always get confused between css grid, and gss (grid style sheets). I always
liked the constraint based approach in gss, and that it was backwards
compatible via js.

Has anyone tried both? Is css grid superior in some way?

------
HelloNurse
Not the best of articles: an inappropriate title, an inexplicable contrarian
example in the middle (the "wacky grid" with non-semantic markup and
unreadable names) and too little emphasis on the main technical point: that a
CSS grid based layout doesn't need to bother with a hierarchy of container
boxes and therefore it can be much more flexible and systematic than more ad-
hoc approaches.

Can anyone recommend better discussions about what uses CSS grids are good and
less good for? This article suggests a strong resemblance with the
GridLayoutManager from the Java Swing framework: you can do almost anything,
but you'll suffer doing it.

------
brainfreez
I wish I understood this years ago.. Would have saved me .. years

------
pbirsinger
Flex box is life. But Grids do look pretty powerful

~~~
overcast
Flexbox and CSS Grid handle different things.

Flexbox is for one dimensional layouts. CSS Grid is for two dimensional
layouts.

~~~
Scarbutt
But if CSS Grid can handle one dimensional layout too, why not just stick to
Grid? (ignoring browser compatibility).

~~~
notahacker
Flexbox handles wrapping pretty elegantly without specifying breakpoints.

More to the point, why wasn't a two dimensional layout standard with nice
syntax proposed and implemented as a top priority circa 1998 when it was
obvious this was how people wanted to design websites, in which case browsers
might have caught up by now?

~~~
dictum
Besides technical challenges I'm not privy to, there's this quote which might
help understand why it took so long:

"Actually, this was a request for this one early on in the CSS1 days as well.
Me and my aesthetic thinking, I'm not a designer. You have to know that. But
to me those rounded things; they look like something from the 1970s. I said,
_' Nobody is ever going to need rounded borders on something._'"

[https://fronteers.nl/congres/2010/sessions/css3-hakon-
wium-l...](https://fronteers.nl/congres/2010/sessions/css3-hakon-wium-lie)

~~~
jandrese
Apparently the CSS committee didn't have a resident Steve Jobs.

[https://www.folklore.org/StoryView.py?story=Round_Rects_Are_...](https://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt)

------
rco8786
Please change the title of this to something even remotely relevant to the
actual article contents.

~~~
zodPod
This please. I was expecting an interesting article about why pixels are
outdated and possible new displays or something and it turned out to be some
huge piece about CSS?

------
gaius
I was hoping this would be about vector displays

------
notjustanymike
The author has never heard of mobile first design.

------
corgilover90
Aren't you worried because CSS grid isn't supported by a lot of older-
traditional browsers, so couldn't this break the user experience.

~~~
virmundi
Which ones are you referencing, and what is their market share? At some point,
the team needs to decide if losing X% of the market due to new technology is
worth it.

~~~
plopz
I'm not who you replied to, but we're currently sitting on about 15% ie11
which is a hard no from management.

~~~
virmundi
Can you polyfill with one of the libraries to close the gap?

