It would be great to have a Grid System (core or plugin) which worked with all fields including the Matrix.
This would be a wrapper of sorts which would allow for the setup of Grid Systems which are available in all the popular frameworks (Foundation, Bootstrap, Gumby) as well as stand alone grid systems libraries and those which people have created on their own etc.
Currently it's possible to build a Grid System using special Matrix setups along with some advanced Twig tempting but, that's not ideal. Plus, it's a top down UI and contextually it doesn't very well match the frontend; as demonstrated in the following setup from Iain:
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>Building a grid system in #craftcms to manage 1x1, 1x2, 2x1 & 2x2 blocks in a responsive 2, 4 & 5 col layout. Phew: https://t.co/TXWiWLbbnM
— Iain Urquhart (@iain) April 29, 2015
This is what that might look like within Craft with the addition of a Grid System so, without further ado...
aka Craft Lautering or Craft Lauter
Note: I didn't format the fields to actually match Iain's design so, feel free to use a little imagination.
This is a very rough first draft of Craft Grid. I can see working on this a bit more to make it just right but, you can seen where I'm going with this; I hope anyway. I'd also like to create the settings page where setup happens for sections, rows and columns. This could be inputs for section tag and it's class. Row tag and it's class. Column tags and their classes etc. Unless of course the whole thing could be handled with template code via Craft Grid tags and conditionals alone (which, now that I think about, it is probably best.)
It would be great to be allowed to edit what the actual template code looked like for Craft Grid. This way everything stays vanilla, stays Bring Your Own HTML, and we can use any Grid System our hearts desire. This of course is the Craft Way!
In other words, allow us to build a "Grid Wrapper" around our fields and when a Section gets started add this tag/class. When a Row starts add this tag/class. When, for example, five Columns are added then add the tags/classes and finally place our Fields within. Then of course allow us to close the tags so on and so forth.
It would be also be great to allow Fields to be added to Sections and Rows. This, for example, would allow us to set background images or colors on certain Sections or Rows. Say you want to set a class on a Section so it spans the whole width of the page 100% and add a bg image and you could then add 100% to the Row so the content is full width. Or, for the Row, just have it's fields centered by setting width and margin 0 auto etc. via a class of container/wrapper etc.
Currently, based on the rough draft, you could click on a Section's name and a modal will popup similar to how it works when you click on an Asset's name like so:
For the Row, I haven't added a name yet, though, there is plenty of space to do so. I'm not totally set on where to put names as of yet either way but, the concept would be the same for Sections and Row Fields; click something then fields via modals.
I won't go as far to ask for Fields for Columns because, well, I haven't worked that into the UI yet ;-)
Here is a pseudo code of what the template code could look like just for fun. I realize it's not correct and who knows what something like this would do in regards to speed:
{% for each section in craft.grid %}
<section class="{{ section.class }}">
{% for each row in craft.grid %}
<div class="{{ row.class }}">
{% for each column in craft.grid %}
<div class="small-{{ column.number}} column {{ column.xtraClasses }}">
{# ...fields go here... #}
</div>
{% endfor %}
</div>
{% endfor %}
</section>
{% endfor %}
Other CMS have Grid Systems (commonly known as Drag and Drop Builder plugins) and I'll include some examples to demonstrate how said other systems have gone about it.
Please note: these examples are for contextual purposes only and by no means have they got it right. Let me explain what I mean:
WP plugins of this sort make use of WP's WYSIWG editor and these plugins basically just drop all the code the plugin/user has created right into the editor as one large mess of html, text and shortcodes etc. This is how I recall them all working and such a thing is of course nasty!
Here, let me show you what I mean. It's Shortcode Soup up in here!
Warning, you may just loose your lunch when you see this...You've been warned!!!
I needed to share that with you so you understand what I'm talking about is something different from what's out there for other CMS; minus the concept of allowing one to build out Sections, Rows, and Columns etc:
Anyway, on to some examples:
Visual Composer is interesting because you can actually see the various columns which live inside a row. It allows you to add new rows within each Element (think the section tag) as well as add new Elements too (I think that's how it worked because it's since changed.) There is definitely too much going on there visually, however.
Although it's changed quite a bit from that screenshot, you can preview Visual Composer if you don't mind giving up your email address (make sure to edit in the backend to get a better comparison since VC has frontend editing as well.)
Divi is simpler and easier on the eyes since it's just basic shapes.
And, whatever, you get the idea by now I'm sure!
Thanks for your consideration!
Yii2 includes some grid style options as widgets: http://www.yiiframework.com/doc-2.0/yii-grid-gridview.html
Might be worth a look through.