GOPHERSPACE.DE - P H O X Y
gophering on hngopher.com
HN Gopher Feed (2017-12-29) - page 1 of 10
 
___________________________________________________________________
From Bootstrap to CSS Grid
224 points by kawera
https://open.nytimes.com/bootstrap-to-css-grid-87b3f5f830e4?page...
30e4?pagewanted=all
___________________________________________________________________
 
Bizarro - 2 hours ago
Here's a full-length CSS Grid tutorial posted to HN a few days
ago.https://medium.freecodecamp.org/heres-my-free-css-grid-cours...
 
jrochkind1 - 2 hours ago
Does Grid work in IE 10 or 11?`caniuse` says "partial" support with
prefixes in 11. Anyone have experience of how well it works, with
prefixes, how "partial" or compatible the support is?> I
implemented this CSS Grid progressive enhancement on The New York
Times Watching media card component. Users on old browsers see
Bootstrap, but users on browsers that support the display: grid
propertyOkay... yeah, I don't want to do that. Workaround with
bootstrap or flexbox that don't really do _quite_ what I want as
well as grid does... are still better than having to do the
workaround _and_ grid, to get all browsers.> You?re absolutely
ready to declare display: grid if you?re the only person
contributing code.I think it's the other way around. If you have a
team big enough to do grid _and_ fallbacks with flexbox or float or
whatever, you're ready for grid. If you're one person... you
probably don't got time for that! If I got to do the good enough
fallback anyway, I'd rather just be done then. At least if you're
me. Sadly, so goes CSS improvements. In a couple years I can
probably use grid. Hey, at least I can finally use flexbox, which
is awesome too!
 
  Bizarro - 2 hours ago
  As I said in another post in this thread, I'm hoping Postcss and
  the autoprefixer plugin will work with at least IE11.Is IE 10
  even relevant these days?  It seems that except for very outdated
  systems, everybody should have been autoupdated to IE 11 by now
 
    jrochkind1 - 2 hours ago
    If it works compatibly just with prefixes, that'll be fine.
    Heck, I don't mind writing the prefixes myself.If it implements
    an incompatible old version or proprietary standard with too
    many edge and not-so-edge case differences, that's another
    story. Anyone have experience?I also did not know that most
    IE10 users should be auto-updated to IE11, def gonna look into
    that more thanks.
 
      gsnedders - 49 minutes ago
      > If it implements an incompatible old version or proprietary
      standard with too many edge and not-so-edge case differences,
      that's another story. Anyone have experience?It implements a
      much earlier draft of the Grid spec, with a number of
      differences. You can't just throw prefixes on and expect it
      to work. That said, it might be possible to map 99.9% of
      cases automatically and have it work.
 
    andrei_says_ - 2 hours ago
    Everybody except some companies with systems locked to an older
    version because of legacy software they need to consume. Which
    also happen to be amongst your big clients and despite
    representing 5% in your analytics, represent 20% of your
    potential business.Now what? Do you make your new site unusable
    for them? Or do you create a complex intricate fallback css
    which defies the purpose of using css grids?
 
      jonnyscholes - 55 minutes ago
      Then yeah CSS grid is not right for that project. But not
      everyone is in that camp - and some are a bit of both. We
      have clients like yours and then many others that don't even
      need IE11 based on their stats. The money saved because we
      can use more efficient tech like CSS grid mean more time to
      add features!(All our websites work in IE11 - they're just
      allowed to be "visually different from the approved designs"
      - it's a pretty good compromise for many clients!)
 
desireco42 - 5 hours ago
Just to add what others always mention: CSS Grid and Flexbox are
compatible, CSS Grid lays elements in grid, while flexbox handles
one dimensional layouts.To create complex layout you need both and
should be familiar with both anyway.I think we are so familiar with
css/html pain that we can't believe to see light in the end of the
tunnel. :)
 
angrymouse - 5 hours ago
I recently converted my blog to CSS grid.In the past I would have
lazily used bootstrap as I've used that for over three years and
know the grid inside out.It was a touch intimidating at first. No
framework!But it is really quite expressive. It took me 12 lines of
CSS to get a traditional blog layout that collapsed on mobiles.
 
  sinistersnare - 46 minutes ago
  Do you have a link? I am thinking about converting my blog to
  CSS-Grid, but would like some inspiration.
 
    angrymouse - 5 minutes ago
    It is a touch hacky but here it is:
    https://grillopress.github.ioCode here:https://github.com/Grill
    oPress/grillopress.github.io?files=1The idea behind my blog is
    every major article I style slightly differently.Have an
    upcoming design kanban one where I've played about a bit more
    with grids to create the boards
 
kumarvvr - 5 hours ago
What I love about the CSS Grid is that it does a really good job of
separating content from presentation.I have used it in one project
and it's awesome. What I struggled to do with Bootstrap for almost
a week, I could do the same with CSS Grid in an afternoon.
 
aloukissas - 5 hours ago
I'm a recent convert to CSS grid, absolutely love it. There's no
dilemma between flexbox + grid; they're complimentary. Just looking
forward to full devtools support in Chrome (although Firefox's grid
devtools are mighty fine).
 
sandGorgon - 4 hours ago
is there a ui toolkit for react based on CSS Grid ?
 
  Bizarro - 2 hours ago
  Currently, probably not.  I'm using ant design right now and it
  uses Flexbox as its underlying layout engine.  I think Bootstrap
  4 is the same.  Once they ditch support for IE11, then they'll
  probably move to CSS Grid, but at that point you really don't
  need a UI toolkit to be based on CSS Grid.  You either just use
  the css directly, or have a UI toolkit-independent component
  wrappers around the grid.
 
Zyst - 4 hours ago
Can someone illuminate me as to what are some of the reasons that
would make someone style with CSS Grid with a Fallback to
Bootstrap?Considering you are already writing Bootstrap due to
compatibility concerns why not just keep using that? I feel like
adding another dependency like this would just create a risk of
having design differences pop up over time.Mind you, I don't hate
CSS Grid. I really enjoyed learning it, and I look forward to be
able to use it in a few years.
 
  nkozyra - 3 hours ago
  > Can someone illuminate me as to what are some of the reasons
  that would make someone style with CSS Grid with a Fallback to
  Bootstrap?Generous interpretation: graceful upgrade when CSS grid
  has sufficient browser support.Realistic interpretation: to work
  with the 'new hot' and not the 'old stodgy'
 
    chrisco255 - 1 minutes ago
    It's not just "the new hot". Using pure CSS over a JS + CSS
    library like bootstrap has performance implications for your
    code. Besides avoiding yet another dependency, native CSS grid
    renders faster. Also, CSS grid being a native feature, you can
    use those skills in any project,  anywhere, even one that isn't
    using Bootstrap.
 
  ak39 - 37 minutes ago
  Grids don?t support transition animations yet. One of the reasons
  I ?downgraded? to bootstrap.
 
jasonbarone - 2 hours ago
So I love CSS Grid very much, but have found myself still
wanting/needing masonry-style "Pinterest" layouts, which I haven't
been able to do without JavaScript. I've seen many of the CSS
column and flexbox hacks, but nothing quite nails it.Anyone have
any good ideas here?
 
  jonnyscholes - 52 minutes ago
  CSS grid can do this! Sure not as freedom as a JS implementation
  but its good enough in 95% of scenarios in my experience!
  https://codepen.io/balazs_sziklai/pen/mOwoLg (not my code - just
  one of the examples on codepen)
 
  andrei_says_ - 2 hours ago
  I?ve explored the same issue and masonry is the only solution
  I?ve found.
 
  spiralx - 1 hours ago
  Until Houdini is available everywhere so that you can hook into
  the CSS engine and provide your own custom layout managers, I
  think masonry layouts will always require some JS. Using CSS
  grids might make the code simpler though.PS I think Smashing
  Magazine have an overview of Houdini with a masonry layout as an
  example...
 
caffodian - 4 hours ago
What are the preferred solutions for people that are forced to
support IE11?I've seen fallback CSS and JavaScript polyfills used.
 
  pbhjpbhj - 1 hours ago
  Will there ever be a time when MSIE won't be the limiting factor;
  seriously thought we'd gotten past "but what about IE".
 
  buovjaga - 1 hours ago
  Here's a simple approach:
  https://www.smashingmagazine.com/2017/06/building-
  production..."Rather than using fallbacks and shims to ensure a
  design and layout look the same across all browsers, we?d provide
  the mobile vertical single-column layout to all browsers and then
  serve up advanced functionality to those browsers and viewport
  widths that can take advantage of them."
 
    jonnyscholes - 45 minutes ago
    +1 This is a great solution that doesn't take a huge amount of
    time to implement. Esp if you only use CSS Grid for 2d layouts
    and use flex for which has decent IE11 support for laying out
    components (where mobile is often just stacked 100% width
    components).A good way to bring a client round is to explain
    that the time saved on making IE11 pixel perfect is better
    spent adding features elsewhere.
 
  leeoniya - 4 hours ago
  i'm wondering this too. we need to support down to IE11 but i
  wanna use grid.
 
  Bizarro - 2 hours ago
  Was wondering the same thing.  I wonder if postcss and
  autoprefixer supports it?
  https://github.com/postcss/autoprefixer/issues/603This comment is
  from two years ago:But I think I found a solution for everyone:We
  support Grid by default. If Autoprefixer see that your CSS is too
  complicated for IE, it will warn you to disable Grid support and
  use some JS polyfill.
 
  dmitriid - 2 hours ago
  I would give PostCSS with Lost Grid[1] a try (though I haven't
  used Lost Grid extensively).[1] http://lostgrid.org
 
  lemonberry - 3 hours ago
  This article on the subject is really
  good:https://www.smashingmagazine.com/2017/11/css-grid-
  supporting...
 
ty___ler - 2 hours ago
My breakthrough moment for grid UI development was realizing that
all of my layout code for a component is contained in the parent ?
rather than spread around the children.For example, in bootstrap or
some other older layout framework every "column" would need to
contain some class or id to style it correctly. So for a 3 column
grid you would need to give each element a class setup of something
like "column-third".With grid, all that layout logic is moved into
a single container "display: grid" element, making it so much
easier to add/remove/edit grid items. Even padding is declared in
the container element with the "grid-gap" property! It's a small
improvement that has immensely increased my developer experience
building grid-like UI.
 
TipVFL - 2 hours ago
It's interesting to now have this, flexbox, and the multi-column
module (that I never see anyone talking about).Does anyone know if
this can be used for dynamically wrapping columns? Ostensibly
flexbox should be able to handle that, but without an explicit
height your column will never wrap.I recently needed to implement
dynamically wrapping columns and I was able to get 90% of what I
needed from the multi column module. However it seems to be really
buggy at this point, it often ended up with elements sliced in half
or missing. Also, the biggest issue for me was no way to target the
columns and prevent reordering. I had sections of text that could
be expanded or collapsed, and that would trigger a complete
rearrangement of columns. Nasty.I ended up coding my own column
system for vertical wrapping, and it was so helpful I was thinking
about open-sourcing it, but I'm not sure if CSS grid obviates the
need.
 
jordache - 3 hours ago
what's the deal with IE11 and CSS Grid? Is it partial support or MS
specific notion of CSS Grid? I keeps seeing both sentiments
represented with regard to IE.
 
arunitc - 4 hours ago
Let alone using CSS Grid. Here in India, I can't even use Flexbox.
Thanks to UC Browser having a 30% market share. Sigh, back to those
IE 6 days.
 
swlkr - 2 hours ago
CSS Grid blew me away the first time I saw it. I didn't realize it
was ready on the latest browsers. I switched from bootstrap
recently to tachyons, this is just another reason to not miss it.
 
disconnected - 5 hours ago
It's about time the web got a decent layout system.Every UI toolkit
that I know of (wxWidgets, Tcl/Tk, Qt) has some form of layout
mechanism (box layout, grid layout, etc), and they'd had it for
years/decades.On the web though, people have been hacking around
this omission for ages with tables and assorted "grid" systems
(pure css, bootstrap, etc).The needs for layout management was
there for as long as I can remember, and this isn't a particularly
tough problem to solve (Tcl/Tk has had "pack" since the late 90s,
IIRC).Why the hell did it take so long for the web to come up with
a decent layout mechanism?
 
  mhink - 4 hours ago
  Because Web browsers originally operated under a document-focused
  paradigm rather than an application-focused paradigm. (The CSS
  box model spec makes much more sense if you dig through it with
  this in mind.) Even after Javascript came out, there wasn't
  really a notion of a Web application in the modern sense- if you
  wanted to deliver rich content, the primary way to do it was via
  Flash or Java applets. I would hazard to say this was the case
  from around 1995 to 2005?Anyways, I think the demand for more
  sophisticated layout systems didn't emerge in earnest until
  browsers started to experience the paradigm shift from "dynamic
  text document renderer" to "application runtime environment". If
  I had to put a date on it, I'd say that this happened during the
  2005-2007 period, during which we saw the first big wave of
  Javascript libraries (including Prototype, jQuery, and MooTools),
  as well as the launch of the original iPhone _without_ Flash
  support.As for the length of time it's taken to release Grid, it
  looks like W3C has at least been aware of the problem for quite
  some time- the first "Advanced Layout" Working Draft was
  published in 2005, but it looks like it didn't stabilize into the
  current Grid layout until about 2015.
 
    gsnedders - 4 hours ago
    > As for the length of time it's taken to release Grid, it
    looks like W3C has at least been aware of the problem for quite
    some time- the first "Advanced Layout" Working Draft was
    published in 2005, but it looks like it didn't stabilize into
    the current Grid layout until about 2015.The current Grid
    layout is largely the same as that proposed by MS at the August
    2010 F2F in Oslo.Note that many of the early/mid-2000s specs
    essentially got paused while CSS 2.1 was finished (because it's
    hard to define new things clearly until you define the existing
    things clearly), and while waiting for more implementer
    interest.
 
    tannhaeuser - 22 minutes ago
    The question is why it was deemed necessary to morph the
    document-centric Web into a Frankenplatform, and for what
    price. The complexity of CSS has already driven Opera (who once
    employed the original inventor of CSS) out of the business of
    producing a web renderer.
 
      brucephillips - 20 minutes ago
      Because there is demand for on-demand, networked
      applications.
 
  masklinn - 4 hours ago
  > Why the hell did it take so long for the web to come up with a
  decent layout mechanism?Because CSS wasn't originally intended to
  handle layout (got knows what was but there you are), the W3C was
  historically a bit of a shit-show (one would argue it still is)
  and had internal competitors to CSS (hello XSL-FO), then people
  finally accepted the inevitable but started with something which
  wasn't quite actually sufficient (flexbox) and still took
  multiple years to get it not-completely wrong, then there were
  multiple competing alternatives for whole-page layout (the XUL-
  derived Template Layout and Microsoft's Grid).And so we reach
  2018, having spent the last 20 years or so doing ad-hoc bits-and-
  pieces reinventions of half of DSSSL. But it doesn't use
  S-Expression so I guess that's great.
 
  thomascgalvin - 4 hours ago
  Web development is just starting to catch up to where we were
  fifteen years ago. Things like type safety, unit testing, and
  dependency management are still fairly new on the Javascript side
  of the house, and I'd argue that Maven is lightyears ahead of NPM
  or pack or gulp or whatever the fuck the kids are using these
  days.The UI side is even worse. When you compare
  $todays_web_framework to QT or Swing, it's like dropping into
  some terrible alternate timeline where the size of a thing on-
  screen can only be divined by spraying the proper mixture of
  cattle bones and chicken entrails on a ouija board beneath a
  blood moon.
 
    chrisco255 - 4 minutes ago
    We intentionally moved from Qt to Electron for desktop app
    development. Electron apps look better generally and are far
    easier to maintain than Qt-based apps. CSS has its warts but
    it's very expressive these days. Don't even get me started on
    Swing versus React. A decent set of React components are more
    declarative, easier to maintain, and faster to develop with
    than Swing. You also have powerful testing tools in React like
    Jest snapshots and Enzyme, which allow you to inspect and test
    the output of your UI in ways that are not straightforward with
    Swing.
 
    brucephillips - moments ago
    Interesting. What's a specific example of how QT or swing is
    superior to web tech?
 
  TheAceOfHearts - 4 hours ago
  Well, some specs have been around for a while, but nobody
  implemented em. For example, I think the first version of flexbox
  was being proposed at least 10 years ago, but it took a few years
  for it to get picked up.If I recall correctly, the initial grid
  spec was supported by IE10 and IE11, and those were released
  quite a while ago.Making big changes on the web is difficult
  because it requires multiple independent parties to agree and it
  cannot break backwards compatibility. So you need to define how
  it all interacts with all the legacy stuff and additionally
  consider how things will evolve.Another issue is that CSS has
  many poor defaults for applications, so developers end up
  fighting it often.There's ongoing work to make things better in
  the future by allowing you polyfill things. Check out the Houdini
  spec stuff, which lets you define custom styles, layout, etc.
 
robertkrahn01 - 31 minutes ago
There were some good links in the article but my no. 1 resource for
CSS grid is https://css-tricks.com/snippets/css/complete-guide-
grid/
 
[deleted]
 
shrikant - 5 hours ago
Completely off-topic: All five people mentioned as experts on CSS
Grid towards the end of this post are women.(I don't have anything
else to add, just found this interesting.)
 
  desireco42 - 5 hours ago
  I welcome our female overlords :). Maybe this might be css that
  speaks to women.
 
  eggpy - 5 hours ago
  In another blog post they inform us that they have been ranked a
  Top Company for Women in Technology[0]. I'm not familiar with the
  Anita Borg Institute that did the ranking, but I think it's great
  to see anyways.[0] - https://open.nytimes.com/the-new-york-times-
  ranks-as-a-top-c...
 
  dx034 - 5 hours ago
  Is frontend development generally more dominated by women or just
  CSS? Any companies driving this in particular?
 
  bluthru - 4 hours ago
  It feels like artificial inclusion via exclusion.
 
pdog - 5 hours ago
What is the advantage of using CSS Grid instead of Flexbox? The
Bootstrap v4 already uses Flexbox for its grid system.
 
  maxx - 5 hours ago
  The question is not Grid or Flexbox. You can (and will) use both.
 
  kumarvvr - 5 hours ago
  CSS Grid can handle 2D layout requirements. 1D layout
  requirements in the 2D layout is managed by the flex-box, though
  the same can be easily be done with a nested CSS Grid.
 
  mrborgen - 5 hours ago
  Flexbox is built for one dimension layouts (e.g. a header), while
  Grid is built for creating two-dimensional layouts (e.g. an
  entire page).Use both and you'll get the best of two worlds.
 
mrborgen - 5 hours ago
"It took about three lines of CSS to write the grid layout I
wanted, and I wanted to live in the bright and beautiful future
where layout is always that simple."This is so spot on. I've met
many developers who tend to think Bootstrap is easier, but that's
usually because they haven't experienced this part of CSS Grid.
Just add a couple of lines and you have a very powerful grid
layout.I wrote an article on Bootstrap vs. CSS Grid a few weeks ago
btw. Feel free to check it out:https://hackernoon.com/how-css-grid-
beats-bootstrap-85d5881c...And here is a link to my free CSS Grid
course, in case you're interested in learning
it:https://scrimba.com/g/gR8PTE
 
  tnolet - 4 hours ago
  Not arguing the usefulness of CSS Grid, but Bootstrap is a whole
  bunch more than just a grid. All the components in Bootstrap
  kinda work together with the .container .row .col classes and
  that?s still a crazy useful feature.
 
    Bizarro - 2 hours ago
    The thing about Bootstrap (at least v3) is that the component
    library is pretty bare bones.But I'm curious to your statement
    about "working together".  Are Bootstrap components "aware" of
    the layout css/components?
 
      jjp - 1 hours ago
      I believe "working together" would be more about aesthetics
      than technical in this instance.
 
    tootie - 4 hours ago
    I know a few shops that have been using bootstrap just for
    grids. Idk why, but they do.
 
    pcurve - 4 hours ago
    i agree. Bootstrap has wide range of ui components, sass/less,
    ability to customize, mixin, etc. ability to customize easily
    via tinkering with variables.less/sass, or customizing the hell
    out of it by messing with mixin and component less files.
 
    CharlesW - 4 hours ago
    Plus, it's not like you can't use CSS Grid on a page that uses
    Bootstrap.
 
    michaelbuckbee - 4 hours ago
    What I think goes unrecognized in the design community is what
    a tremendous skill it is to be able to put together really
    disparately styled and designed UX elements into a cohesive
    whole.Pre Bootstrap / Material / whatever - I'd end up with
    designs that were just incoherent. You'd look at a modal, or a
    file upload or something and none of them individually were
    that awful, but as a whole they didn't fit together.
 
      stephenboyd - 50 minutes ago
      How often can you use Bootstrap components unaltered? I'm
      either working on things where aesthetics are important
      enough that I'd have to write custom CSS for every component,
      or where aesthetics are so unimportant that stylistic
      coherence is irrelevant.When I use things like Bootstrap it's
      as a scaffolding in the early stages of development before I
      write enough of my own CSS. Eventually then I've restyled all
      the Bootstrap components and I only keep it included to avoid
      spending 10 minutes re-implementing modals in JS.
 
        JonoBB - 40 minutes ago
        Isn't that the whole point of Bootstrap? It "bootstraps"
        your design to get you to a minimum coherent design with
        the least amount of fuss, and then allows (some would say
        forces) you to build on top it to customise as you see fit.
 
    drb91 - 1 hours ago
    > All the components in Bootstrap kinda work together with the
    .container .row .col classes and that?s still a crazy useful
    feature.Actually, this has come to be the part of bootstrap I
    like the least. Individually the components are extremely
    useful, but as a layout engine I've constantly struggled to get
    it to comply with anything but layouts that look a lot like the
    ones in the bootstrap examples. CSS Grid and flexbox have
    proven to be more flexible at composing bootstrap components.
 
  nkkollaw - 4 hours ago
  The grid is perhaps 5% of what Bootstrap does, and as a whole
  it's a lot more convenient than starting from scratch every time.
 
  Waterluvian - 2 hours ago
  Flexbox made me stop hating CSS. Grid is making me love it. I can
  finally get exactly what I want in a manner that's intuitive and
  obvious.