clippings / layout-grid

Static responsive grid with pure css. Javascript using native drag-n-drop to reorder for each screen size on desktop and mobile.

Layout Grid

Documentation and demos: Layout Grid Site

Static responsive grid with pure css. Javascript using native Drag'n'drop to reorder for each screen size.

Installation

For only static positioning include css/layout-grid.min.css For ordering items around include js/layout-grid.min.js

Modification

sass/layout-grid.sass allows you to modify a lot of variables for each screen size, overriding the defaults. If you're using reorder you'll need to tell the javascript plugin about these modifications as well.

Development

After modification you can run the npm install and then grunt to build and minify all the js and sass. Use grunt qunit to execute the tests.

License

Copyright (c) 2015, Clippings Ltd. Developed by Ivan Kerin

Under BSD-3-Clause license, read LICENSE file.

layout-grid's Issues

Dropping does nothing on IE11

Trying your demo (https://clippings.github.io/layout-grid/) in IE11 (Windows 10), I can pick up elements, and it shows me dragging them around, but dropping them somewhere has no effect. Since your page mentions that it should work in IE, I thought I'd report this.

It does work in MS Edge.

Unstated dependency on jQuery

The jQuery dependency isn't mentioned anywhere, either in the README or in the installation notes.

On a very personal note, it's a disappointing requirement given the claim that only "a little bit of javascript." is required.

Javascript Methods

After reading the docs site I have a couple of questions:

1.) Can you dynamically add a "rect" to the Grid after the initial Grid has rendered?
2.) Can you serialize the "rects" out to a js object or array so that I can create a save/load of positions for re-creating a dashboard?

Hide/Unhide and Add/Remove Containers/Items at runtime

Hi, thanks for sharing this excelent project! I really like it and I have two questions/requests:
1.) It is quite common use case to hide parts of UI on smaller screens, so just wanted to ask for any hint, what is the best way to do it.
2.) Adding/removing containers and items at runtime is the next most common use case. It would be perfect if you would include such example in help site.
Please let me know if there is any (known) problem in hiding/unhiding or adding/removing items at runtime and what is preferred workflow for such use cases.

Small bug in docs and touch drag solution

Hi, there is a small bug in documentation example Resize grid items demo. If you resize browser window to XS size and click on 2x2 resize button, widget will get streched (because it already occupies all width, I think).
I also had problem to move (drag&drop) items with hand on my laptop touchscreen (with mouse it works perfectly), window get scrolled, etc. so drag&drop was not possible (with touch). I added simple css rule to custom.css:

/*
Set the touch-action CSS property to none, which works even with passive event listeners.
Applying this property to an element will not trigger the default (scroll)
behavior when the event is originating from that element.
*/
.lt {touch-action: none;}

Problem solved. It's too small for PR, but it is something :)

Can't drag again after dropping a box on a different sized box

Reproduction of the bug is possible using the ltGridOnly demo in lg mode.
http://clippings.github.io/layout-grid/demos/only.html

If I drag the #2 box over the #1 box, I can't do any other drag operations afterwards.
It seems that when dropping a bigger box on a smaller one, it creates empty regions and then can't respond anymore.
If I drag box over one of the same size, then I can drag again.
Is this normal? I have to refresh the page to correct the issue.

Thanks

Dashboard Widgets

Hey, i am wondering if you could add an example of an admin panel dashboard and widget implementation using this?

Remove gap between widgets

I want the widgets to have no gap between each other. I've tried setting it with

data-params='{"xs":{"gap":0}}'

as well as changing the gap parameter inside the sass file to 0%. Nothing seems to work. Any idea on how to achieve this?

Drag after holding specific time

Would be nice to only activate the avaibility to drag after holding the element for a specified time.

for example: holding for 2 sec and than be able to drag the element (important for touch devices)

Vulnerabilities from jQuery 2.2.4

Including jQuery 2.2.4 inroduces a potential for XSS vulnerabilities, should be upgraded to minimum of 3.0.0.

I'm happy to upgrade and ensure no jQuery related functionality is broken in the process, but wanted to ensure this project was still being maintained / used first.

Minor typo in download button

On the https://clippings.github.io/layout-grid/ website you have a minor typo in your download button at the top of the screen

"Downlaod" rather than Download

Rect Content Overflow

If you add a lot of vertical content into the rect it will overflow and stretch over the top of rect's below it. I can add overflow:scroll to the .lt style but then I end up with a cosmetic issues.

Do you have any suggestions to stop this from happening?

setting more columns

Hi,
I tried having 10 columns for md size but whatever I did, nothing was changing.

I tried setting the LTGrid.DEFAULTS object, setting data attributes, but the columns only expanded when I adjusted the parameters in the sass file.

Do you know if this is a requirement, and if not, isn't the DEFAULTS object supposed to do something?

Thanks!