add rows support

[antonkulaga]

I see that singularity grids allow only to control horizontal dimension (columns). What about vertical one (rows)? It would be nice to explicitly tell to what row the element goes to and how row order changes on different screen sizes.

[Snugug]

Unfortunately, until flexbox is widely available, and even then only with flexbox, being able to choose which row an item belongs in is something we are unable to accomplish is CSS and therefore cannot offer in Singularity. Even with flexbox, the best we'd be able to offer is rearrangement of visual source order and some trickery.

It's potential that we will be able to truly control it with CSS Grids, but that spec is years away from being usable in production.

On Oct 31, 2013, at 9:08 PM, Anton Kulaga notifications@github.com wrote:

I see that singularity grids allow only to control horizontal dimension (columns). What about vertical one (rows)? It would be nice to explicitly tell to what row the element goes to and how row order changes on different screen sizes.

—
Reply to this email directly or view it on GitHub.

[antonkulaga]

Thank you very much for the fast response,

I see. But maybe you can suggest good practice for one of the usecases where good control of rows is important.

Imagine I have 5 layouts (it is a bit more complex than I have in current project but I use this example to ephasize the problem): [ large (big screens) ,normal ,tablet phone]

There I have 1,2,3,4,5 elements that are:

when large: shown in one row [1,2,3,4,5 ]
when normal: shown in two rows and order is rearranged [[1,3,5],[2,4]
when tablet:shown in one row with rearranged order [[1].[3,5],[2,4]]
when phone: shown in four rows [[1],[3,5],[4],[5]]

The problem how I see it now that the only way I can tell to start new raw is to say fload-span($some_span,"last") and when there are more than 2 rows and rearrangements I simply do not know how to move something between rows (maybe using javascript in combination with singularityjs? Are there recommended practices for that?)

[lolmaus]

Related: http://stackoverflow.com/questions/19688685/trying-to-get-divs-to-display-side-by-side-in-a-grid-using-singularity-gs/19691747#19691747

[windtrader]

Without being able to direct content to specific rows using singularitygs and breakpoint means it has to be done in Drupal land.

Since Team-Sass favors panels-pages is it feasible to create a panel with the default content ordering and one for each break that needs to override the default row ordering?

The layout for these overrides would be very simple, just one column with one region listing the content in the desired order. You need something that can detect the breakpoint like what media queries does in CSS but would allow triggering display of the alternate panel(s).

If other approaches to enable assigning content to different rows have been discussed, I'm all ears.

[scottkellum]

There are definitely use cases for modular grids (what this thread is about) but I don’t see many use cases for standard scrolling pages which is what Singularity is designed for. As it so happens I have been doing some work around modular grid systems and stuff similar to the CSS grid spec but this is a dramatically different mental model from that of Singularity and works best when both width and height are constrained.

How would a modular grid work with dramatically different page heights? Would the vertical grid stretch to the height of the page? Would the grid modules all be a factor of a fixed unit and longer pages would have more modules? If there are an unknown number of vertical grid modules on a page then how would you specify the location of elements on that grid and how would it behave if an element is expected to show up beyond the limit of the page?

All these problems are difficult to solve. As @Snugug mentioned CSS grid layout addresses these problems in a great way. On standard pages, I don’t see any way to make these kinds of layouts easier with a grid system. Flexbox offers tools to re-arrange elements vertically but it doesn’t come close to providing a means of dealing with horizontal + vertical gridded layouts in a scrolling page.

If you are dealing with a constrained height then all these problems go away and you could write an output mode right now for Singularity to manage a modular grid. I don’t see this as being a core feature any time soon as there are very few sites that constrain height.

[windtrader]

It just seems functionally limiting that the row where a block element should be placed can not be specified with breakpoint/singularitygs. If one thinks about it, this may fundamentally not be feasible as the page HTML is written by PHP on the server side and the viewport and browser width is on the client side. The client width can not be dynamically passed back to the server which could then determine if a new page should be written with the new block ordering. Maybe all the data blocks be sent down, stored locally then manipulated/reordered based on the dynamic browser width.

@scott - If "modular grid" means defining and directing content to rows other than the current one then there is common definition, only different terms. In this context, the vertical height of each row is defined by the element defined with the greatest height. The total of all row heights is the height/length of the page. There are no absolute constraints for either height or width of the total page/"grid". In most cases the page output does scroll due to the total height of the specified rows.

We agree CSS presently can not specify elements to be assigned to rows other than the current one or the following one via a float. The only way elements can be directed onto different rows is by having the HTML created by Drupal, modules, or template manipulation written in the desired row order. Breakpoint mixin can then specify element ordering within each row given the breakpoint specification.

The issue again is whether the dynamic browser width value(breakpoint) be made accessible to the server side so the proper page HTML sequence can be written. Maybe it isn't possible or easily accomplished. Like stated initially, maybe all the data needs to be sent to client and client code can certainly access browser window width then map the blocks onto their proper row.

[scottkellum]

Putting this here as it is related: http://www.w3.org/TR/2014/WD-css-grid-1-20140123/

Technical issues aside, if we were to implement this it would probably be modeled directly after the CSS Grid module. There are already a lot of similarities with Singularity. Is this the functionality everyone in this thread is envisioning?

[antonkulaga]

Putting this here as it is related: http://www.w3.org/TR/2014/WD-css-grid-1-20140123/

Looks cool. In my app I do not need to take care of old browsers (and chrome+opera+firefox are updated rather often, so this draft will soon be supported by them).

P.S. And luckily I do not use Drupal=))) (I use Play2 Scala Framework just in case)

[windtrader]

Bingo Scott!
The article specifically addresses what I was trying to express. Figures 4 and 5 demonstrate the repositioning of the score box. Exactly what I am trying to accomplish with singularitygs and breakpoint but it seems to come up short. By rewriting the HTML via template file manipulation that is media query aware it could be done in code. It also seems possible to use panels but I still need to establish the method of making the panel display selection be triggered in parallel with a media query.

One other capability would be to disable all together the generation of specific content blocks depending on media query. In example 5, eliminate the stat block altogether and allow the board to go full width.

So, the capabilities are:

1. direct specific blocks of content in a "grid",
2. define which blocks are to be generated.

[scottkellum]

Using tables is an interesting solution: https://medium.com/p/453a163a3265

Check out this cool grid system called tablr: http://downwith.us/tablr/

[Metric-nz]

You got me.

I was half way through the page thinking "Really?" before I got it.

[scottkellum]

[Snugug]

Untouched since January and pending deletion, so closing.