Responsive CSS grid, reordered with native HTML5 drag and drop(clippings.github.io)
clippings.github.io
Responsive CSS grid, reordered with native HTML5 drag and drop
https://clippings.github.io/layout-grid/
14 comments
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
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.
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.
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.
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!
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!
<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.
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.
No jQuery! http://codepen.io/tomhodgins/pen/vOqaVa
if you want grids its easy enough to just build exactly what you want, trying to use grid systems is harder than building them.
if you want grids its easy enough to just build exactly what you want, trying to use grid systems is harder than building them.
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.
Have you tried Jeet yet? It usually doesn't come up in the Google searches for grids.
http://jeet.gs/
http://jeet.gs/
I really love the minimal yet very powerful approach taken by PocketGrid.
Http://arnaudleray.github.io/pocketgrid/
Http://arnaudleray.github.io/pocketgrid/
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.
Why? jQuery is a popular, useful library. It makes lots of things simpler, and in most cases isn't an additional dependency.
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.
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?
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?
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
If you don't need to support very old browsers you can easy go without jQuery.
Have a look at http://youmightnotneedjquery.com
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
Would love to see a version without jQuery! Thanks for the great work.
I really like this one: https://rawgit.com/ManifestWebDesign/angular-gridster/master...
The company behind this project is Clippings Ltd http://compck.com/#!/company/08356423
Very nice. Tip: dragging 1 over 3 does switch them, as I would expect. 3 over 1 works though.
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.
I can image something like this as part of a web authoring tool based on react / web components (polymer etc..)
[deleted]
The download button has a typo in it: 'Downlaod Latest Release.'
Is it supposed to work on mobile?
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 :)
This really looks like Dashing from Shopify http://dashingdemo.herokuapp.com/sample
Which doesn't need 16 css classes :)
Which doesn't need 16 css classes :)
Probably worth noting that Dashing uses gridster.js: http://gridster.net/
Which also depends on jQuery.
Which also depends on jQuery.
There's also gridstack.js
[deleted]
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...