5 ms·

Responsive CSS grid, reordered with native HTML5 drag and drop

155 points by seer 11y ago

bbx 11y ago
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 11y ago
  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 11y ago
    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!
NicoJuicy 11y ago
This really looks like Dashing from Shopify http://dashingdemo.herokuapp.com/sample http://dashingdemo.herokuapp.com/sample Which doesn't need 16 css classes :)
- aldanor 11y ago
  There's also gridstack.js
- Gigablah 11y ago
  Probably worth noting that Dashing uses gridster.js: http://gridster.net/ http://gridster.net/ Which also depends on jQuery.
ctr 11y ago
The download button has a typo in it: 'Downlaod Latest Release.'
cburgmer 11y ago
<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 11y ago
  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 11y ago
    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 11y ago
      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 11y ago
        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
  - alwillis 11y ago
    Also: http://ponyfoo.com/articles/why-i-write-plain-javascript-modules http://ponyfoo.com/articles/why-i-write-plain-javascript-mod...
bildung 11y ago
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 11y ago
  10x! Fixed
alfonsodev 11y ago
I can image something like this as part of a web authoring tool based on react / web components (polymer etc..)
0x4a42 11y ago
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.
blahyawnblah 11y ago
I really like this one: https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/main https://rawgit.com/ManifestWebDesign/angular-gridster/master...
goblin89 11y ago
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-6c9cba6e8a5a https://medium.com/@patrickbrosset/css-grid-layout-6c9cba6e8...
- alwillis 11y ago
  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
victorantos 11y ago
The company behind this project is Clippings Ltd http://compck.com/#!/company/08356423 http://compck.com/#!/company/08356423
deleted 11y ago
[deleted]
tacone 11y ago
Very nice. Tip: dragging 1 over 3 does switch them, as I would expect. 3 over 1 works though.
deleted 11y ago
[deleted]
WhitneyLand 11y ago
Is it supposed to work on mobile?
- seer 11y ago
  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 :)

155 points by seer 11y ago

bbx 11y ago

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 11y ago
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 11y ago
  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!

NicoJuicy 11y ago

This really looks like Dashing from Shopify http://dashingdemo.herokuapp.com/sample http://dashingdemo.herokuapp.com/sample Which doesn't need 16 css classes :)

aldanor 11y ago
There's also gridstack.js
Gigablah 11y ago
Probably worth noting that Dashing uses gridster.js: http://gridster.net/ http://gridster.net/ Which also depends on jQuery.

ctr 11y ago

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

cburgmer 11y ago

<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 11y ago
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 11y ago
  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 11y ago
    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 11y ago
      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
- alwillis 11y ago
  Also: http://ponyfoo.com/articles/why-i-write-plain-javascript-modules http://ponyfoo.com/articles/why-i-write-plain-javascript-mod...

bildung 11y ago

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 11y ago
10x! Fixed

alfonsodev 11y ago

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

0x4a42 11y ago

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.

blahyawnblah 11y ago

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

goblin89 11y ago

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-6c9cba6e8a5a https://medium.com/@patrickbrosset/css-grid-layout-6c9cba6e8...

alwillis 11y ago
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

victorantos 11y ago

The company behind this project is Clippings Ltd http://compck.com/#!/company/08356423 http://compck.com/#!/company/08356423

deleted 11y ago

[deleted]

tacone 11y ago

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

deleted 11y ago

[deleted]

WhitneyLand 11y ago

Is it supposed to work on mobile?

seer 11y ago
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 :)