Pills: A simple responsive CSS grid for humans • Hacker News Board

Re: Pills: A simple responsive CSS grid for humans

#61

Post by nilliams » Thu, Jun 02, 2016, 2:51 PM UTC

rohitkrai03 wrote: post #8

deusex_ wrote: post #6

It would be nice to mention on the grid website what is the key difference from other grids. e.g. what is the difference from Bootstrap? both 12 columns, grid based on floats. Is there any difference than naming?

One difference from bootstrap would be it handles desktop and tablets using fluid layout instead of breakpoints. The only breakpoint in the grid is for mobile.

Yeah it's more like the Boostrap 2 grid, which will be a step back for some people used to multiple breakpoints of Bootstrap 3.

Re: Pills: A simple responsive CSS grid for humans

#62

Post by quarterto » Thu, Jun 02, 2016, 2:57 PM UTC

rtcoms wrote: post #54

have_faith wrote: post #39

The problem with all of these responsive grid systems is that they are opinionated about how a component responds. Responsiveness is not a document level problem, it's a component level problem and each component has it's own concerns. One component might keep the 2up grid from desktop to mobile, another might collapse to single column half way, and so on. Having generic desktop and mobile class names ala bootstrap d…

Have you tried EQCSS( http://elementqueries.com/ ) ? The concepts looks good, bu I haven't seen anyone recommending it .

It's because element queries are undecidable in the general case. A better approach is a constraint solver, which is how GSS[1] works.

[1]: https://gridstylesheets.org/

Re: Pills: A simple responsive CSS grid for humans

#63

Post by nilliams » Thu, Jun 02, 2016, 2:59 PM UTC

matt4077 wrote: post #25

dualogy wrote: post #10

Or, just write the display:flex you need, where you need it, as little as you actually need.. easy as pie unless your deadline was days-ago. This here might save you 10 minutes of manual work, at the expense of further code-base bloat, external-lib-dep accumulation, technical debt. OK fair game for your MVP-landing-page-A/B-split-test-shenanigans, granted.

Indeed. Flexbox made grids superfluous. Except people expect it.

Flexbox doesn't work in IE. It also doesn't solve the need for conventions around grid breakpoints, when e.g. working in a team.

Doesn't come close to replacing Bootstrap 3 (and similar) grid systems IMO.

Re: Pills: A simple responsive CSS grid for humans

#64

Post by paulojreis » Thu, Jun 02, 2016, 3:00 PM UTC

kylecordes wrote: post #58

paulojreis wrote: post #34

Earlier quoted context omitted.

... and it relies on DOM structure. This is horrible, IMHO. Flex containers will layout the flex items, which are by definition its direct descendants. If by some reason [1] you get an extra DOM element between the flex container and the item you intend to layout, then you're in for a rewrite of the CSS and maybe some extra classes. Also, this bug in Webkit is rather inconvenient: https://github.com/philipwalton/flex…

Yes! Flex box has lots going for it, but it breaks a "feature" that many web developers and framework developers have relied on since the earliest days: it being mostly harmless add an extra layer of element at a whim anywhere. One could argue this is a lousy feature (and I would agree). But lots of developers and lots of frameworks do it.

Adding elements just because (and, above it all, just for styling purposes) is wrong, of course. But having - or forcing - a tight coupling between structure (DOM) and layout/styling (CSS) is also wrong. IMHO, standards should try to move in the direction of decoupling; they did the opposite with Flexbox.

Anyway, the most present case for me is really Angular, where DOM elements are usually added because they are needed (and actually beneficial, if you like a component-based architecture and DRYness). Angular 1.x deprecated the `replace` option for element directives a few months ago (i.e. your will be in the DOM). Also, AFAIK, it never supported the `replace` behaviour in components (which are always elements). This means that, currently, Angular and Flexbox don't play very well together...

Re: Pills: A simple responsive CSS grid for humans

#65

Post by starikovs » Thu, Jun 02, 2016, 3:43 PM UTC

calinet6 wrote: post #47

have_faith wrote: post #39

The problem with all of these responsive grid systems is that they are opinionated about how a component responds. Responsiveness is not a document level problem, it's a component level problem and each component has it's own concerns. One component might keep the 2up grid from desktop to mobile, another might collapse to single column half way, and so on. Having generic desktop and mobile class names ala bootstrap d…

The problem with all of these responsive grid systems is that it's so easy to do a grid in plain CSS with flexbox and media queries that they're close to zero added value in almost all cases.

I just wanted to say the same :)

Re: Pills: A simple responsive CSS grid for humans

#66

Post by have_faith » Thu, Jun 02, 2016, 3:48 PM UTC

JustSomeNobody wrote: post #43

have_faith wrote: post #39

The problem with all of these responsive grid systems is that they are opinionated about how a component responds. Responsiveness is not a document level problem, it's a component level problem and each component has it's own concerns. One component might keep the 2up grid from desktop to mobile, another might collapse to single column half way, and so on. Having generic desktop and mobile class names ala bootstrap d…

> Components are very dumb right now, we need smart components that understand their surroundings beyond the window. Then we will have truly portable components! This is the iceberg problem. Component based programming has been around since probably the 60's. The easy part is making components. The hard part is making them (and this is the Holy Grail), portable. Pipes and Filters in the Unix OS is a simple example of…

This is what I feel is missing from web components. Some sort of generic api for components to reason about their immediate environment. Similar to the Unix OS pipes and filter api that means every program understands how to get some information about the context that it is being run in.

It's not difficult to imagine a calendar component that needs to visually display vastly differently depending on how much space it's parent gives it. Currently there is no generic way to solve this.

Re: Pills: A simple responsive CSS grid for humans

#67

Post by connorjburton » Thu, Jun 02, 2016, 3:58 PM UTC

connorjburton wrote: post #51

Honestly, I just use .something { width: calc(33.33% - #{$spacing-small*3/2}); margin-left: $spacing-small; &:first-of-type { margin-left: 0; } } Well simple

Correction:

  .something
  {
  width: calc(33.33% - #{$spacing-small*2/3});
  margin-left: $spacing-small;

    &:first-of-type
    {
    margin-left: 0;
    }
  }

Re: Pills: A simple responsive CSS grid for humans

#68

Post by aarmenante » Thu, Jun 02, 2016, 4:03 PM UTC

JustSomeNobody wrote: post #43

have_faith wrote: post #39

The problem with all of these responsive grid systems is that they are opinionated about how a component responds. Responsiveness is not a document level problem, it's a component level problem and each component has it's own concerns. One component might keep the 2up grid from desktop to mobile, another might collapse to single column half way, and so on. Having generic desktop and mobile class names ala bootstrap d…

> Components are very dumb right now, we need smart components that understand their surroundings beyond the window. Then we will have truly portable components! This is the iceberg problem. Component based programming has been around since probably the 60's. The easy part is making components. The hard part is making them (and this is the Holy Grail), portable. Pipes and Filters in the Unix OS is a simple example of…

I think a lot of these grid systems and layout libraries are overkill, and in turn, make the designs they are being used for, more complicated than they need to be.

Sure, it would be great to have a more component focused tool for FE development, but I think creating separate, fixed-width designs for tablet, phone, and desktop, with containers does the job fairly well. When the designs try to resize components for every use case you get more headache than it's worth.

Re: Pills: A simple responsive CSS grid for humans

#69

Post by irrational » Thu, Jun 02, 2016, 4:26 PM UTC

franciscop wrote: post #24

threatofrain wrote: post #23

Earlier quoted context omitted.

I think a more on-point rebuttal would give us examples of flexbox-specific bugs.

True, I thought it was widely know but there's a whole Flexbugs project [1] and that there are many Known Issues with flexbox [2]. Some with solution, some without them. [1] https://github.com/philipwalton/flexbugs [2] http://caniuse.com/#feat=flexbox

Thank you! I've never heard of flexbugs.

Re: Pills: A simple responsive CSS grid for humans

#70

Post by jacobr » Thu, Jun 02, 2016, 4:40 PM UTC

nilliams wrote: post #63

matt4077 wrote: post #25

Earlier quoted context omitted.

Indeed. Flexbox made grids superfluous. Except people expect it.

Flexbox doesn't work in IE. It also doesn't solve the need for conventions around grid breakpoints, when e.g. working in a team. Doesn't come close to replacing Bootstrap 3 (and similar) grid systems IMO.

You are incorrect, flexbox works in IE10 and up. Works fine in Edge without any prefixes even.