
Responsive CSS grid, reordered with native HTML5 drag and drop - seer
https://clippings.github.io/layout-grid/
======
goblin89
Anyone interested in grid layouts on the web should probably take a look at
the native CSS Grid Layout feature[0]. Unlike existing solutions it doesn’t
require rigid HTML structure or extensive class usage of questionable
semanticity.

It might not be too practical if you’re building something here and now, given
that spec drafts are subject to change. On the other hand, there are polyfills
already and full browser support seems to be on its way.

[0] A nice overview I stumbled across recently:
[https://medium.com/@patrickbrosset/css-grid-
layout-6c9cba6e8...](https://medium.com/@patrickbrosset/css-grid-
layout-6c9cba6e8a5a)

~~~
alwillis
Video of one the developers at a recent conference who's working on
implementing the Grid spec in both WebKit and Blink:
[https://www.youtube.com/watch?v=9js_5MjiGFo](https://www.youtube.com/watch?v=9js_5MjiGFo)

------
bbx
Each item has 16 CSS classes (!) attached to it: 2 for the position, 2 for the
dimensions, times 4 for each breakpoint.

It sounds unusable to keep track of all these classes (even with
preprocessors) but the drag'n'drop feature changes everything, and makes this
an excellent tool to create a landing page builder.

~~~
seer
As this was created mainly for a "landing page builder" tool, the assumption
was that classes are added dynamically with a scripting language so its not
that big of a problem. I did think quite a bit on how to minimize the clutter
and I either had to do a colossal CSS file with all the permutations or a
smaller css and a bit more text in the html. Sadly I am not aware of a way how
make both of them reasonably small (few css rules and few css classes in the
html) - if anybody has an Idea I would be very grateful.

~~~
bbx
Yeah that was my thought process: "Wow there's a lot of CSS classes. But the
drag'n'drop builder makes this number irrelevant."

I'm actually working on updating a landing page builder today, so the timing
is perfect. I don't think you can reduce the number of classes in the HTML but
that's fine. Maybe have a Sass mixing to generate the CSS cases.

In the end, the size of both the HTML and CSS are negligible considering
everything is auto generated.

Great tool. I love it!

------
cburgmer
<rant>Yet another grid implementation that requires jQuery.</rant>

My last search on responsive grids (June 2015) has not turned up anything
without jQuery. That would be a cool new "feature", that none of the existing
solutions so far offer.

~~~
matthewmacleod
_That would be a cool new "feature"_

Why? jQuery is a popular, useful library. It makes lots of things simpler, and
in most cases isn't an additional dependency.

~~~
serverholic
jQuery is a bloated library that tries to do too much. It's slow and becoming
less and less necessary as browsers become more standards compliant.

~~~
balls187
Can you link to articles on jQuery's performance issues?

Is it's implementation slow, or do you mean it's size makes over the wire
transmission slow?

Are all jQuery methods slow, or specific cases like DOM manipulation and/or
AJAX calls.

It seems that a few years back jQuery had these issues, but are those claims
still relevant?

~~~
mtschopp
It's because jQuery is a library on top of JavaScript. That makes it slower
than native JavaScript.

If you don't need to support very old browsers you can easy go without jQuery.

Have a look at
[http://youmightnotneedjquery.com](http://youmightnotneedjquery.com)

------
blahyawnblah
I really like this one: [https://rawgit.com/ManifestWebDesign/angular-
gridster/master...](https://rawgit.com/ManifestWebDesign/angular-
gridster/master/index.html#/main)

------
victorantos
The company behind this project is Clippings Ltd
[http://compck.com/#!/company/08356423](http://compck.com/#!/company/08356423)

------
bildung
Looks nice! But I think I found a bug: In the static html demo with a small
window (xs), the cells 4+5 and 11+12 have no white space between each other.
Chromium 43.

~~~
seer
10x! Fixed

------
tacone
Very nice. Tip: dragging 1 over 3 does switch them, as I would expect. 3 over
1 works though.

------
0x4a42
Under which browsers/engine should it be used? I'm asking because I'm using
Firefox 42 and I'm getting a lot of glitchs with the gutters' sizes.

------
alfonsodev
I can image something like this as part of a web authoring tool based on react
/ web components (polymer etc..)

------
ctr
The download button has a typo in it: 'Downlaod Latest Release.'

------
WhitneyLand
Is it supposed to work on mobile?

~~~
seer
Well yes it should, though to be honest I just added the touchmove events and
called it a day, it works on the few handhelds I have available for testing,
but there certainly could be some issues on devices I didn't test it on. Any
feedback and github issues are censiarly welcome :)

------
NicoJuicy
This really looks like Dashing from Shopify
[http://dashingdemo.herokuapp.com/sample](http://dashingdemo.herokuapp.com/sample)

Which doesn't need 16 css classes :)

~~~
Gigablah
Probably worth noting that Dashing uses gridster.js:
[http://gridster.net/](http://gridster.net/)

Which also depends on jQuery.

