WingNews logo WingNews GitHub [2]
top | item 10169417

Responsive CSS grid, reordered with native HTML5 drag and drop

155 points| seer | 10 years ago |clippings.github.io | reply

32 comments

order
[+] goblin89|10 years ago|reply
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...

[+] bbx|10 years ago|reply
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|10 years ago|reply
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.
[+] cburgmer|10 years ago|reply
<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.

[+] seer|10 years ago|reply
Yeah I was thinking about removing the jQuery dependancy, as I don't "really" need it here - all of the heavy logic is implemented outside of jQuery and I used it mostly for easy event delegation and data attribute handling. I might work on a version without it, but I wanted to get this working as soon as possible and jQuery does help in code size reduction and ease of development. Also this grid works without any javascript (pure css) so you only need javascript for drag'n'drop reordering
[+] matthewmacleod|10 years ago|reply
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.

[+] emodendroket|10 years ago|reply
It'd probably be preferable to have jQuery and various libraries that depend on it to having different, slightly different variations on things jQuery does from each library you include.
[+] pygy_|10 years ago|reply
I really love the minimal yet very powerful approach taken by PocketGrid.

Http://arnaudleray.github.io/pocketgrid/

[+] bildung|10 years ago|reply
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.
[+] tacone|10 years ago|reply
Very nice. Tip: dragging 1 over 3 does switch them, as I would expect. 3 over 1 works though.
[+] 0x4a42|10 years ago|reply
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|10 years ago|reply
I can image something like this as part of a web authoring tool based on react / web components (polymer etc..)
[+] ctr|10 years ago|reply
The download button has a typo in it: 'Downlaod Latest Release.'
[+] WhitneyLand|10 years ago|reply
Is it supposed to work on mobile?
[+] seer|10 years ago|reply
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 :)