Provide grid helper classes for the grid system

[danwhitmarsh]

No description provided.

[danwhitmarsh]

I have just met with the Dashboard and one of their major issues is the lack of a grid. They removed bootstrap 3 months ago and now dont have a proper gird. Please can we investiagate adding this in and then we can size it

Notes:

UI Kit missing a grid - including without Saas - no grid available

Level of complexity don’t need - causing Dashboard problems

Need to have grid available without Saas

[klepas]

Cool. We can do something with classes easily I think, and Neat gives a bunch of helpers already available as classes too wrt. grid alignment and layouts.

[danwhitmarsh]

yeah - lets discuss tomorrow when I am in CBR

[nathf]

FWIW: https://gist.github.com/johnkoht/6405117

[TrebBrennan]

Worth checking out BBC Gel's grid, the guts of that uses inline-blocks and negative margins (not last/nth-child) so it should roll down to older browsers http://www.bbc.co.uk/gel/guidelines/grid

Here is an isolated example that I put together based on that^ which I've confirmed down to ie8:
http://codepen.io/anon/pen/KgZKRw

[elisechant]

dupe of task raised 28 days ago #386

[klepas]

@elisechant thanks for the pick up.

I’m going to close #386 since there’s a bunch of resources/discussion on this one (while renaming this issue).

[klepas]

Renamed this card to better reflect the work required (borrowing from @elisechant’s wording from when she originally raised this). (:

[klepas]

Since this is in our sprint backlog and it’s a weighty task, I propose we don’t complete this entire task but instead focus on:

• user needs
• our assumptions
• our philosophical take on this feature — best practices, preferred implementations, etc.
• <missing?>

We have a chat over the above and weigh up the pros/cons, and then spell out what codebase edits need to be forthcoming. Thoughts @elisechant @danwhitmarsh @nathf @petronbot ?

If we want to make edits (which is allg) then I’d like a plan of attack.

[elisechant]

@klepas not sure if this is a ui-pattern or a core feature - that would depend on ui-kit's architectural design paradigms. Personally I believe it should be a core feature.

[klepas]

@elisechant if we implemented presentational classes ontop of the existing Neat grid system it would be a core feature.

[klepas]

Treb had a play (b/c, y’know, he got “bored”), trialing a grid system a la BBC Gel: https://codepen.io/anon/pen/KgZKRw

Works in IE8:

(@TrebBrennan is a boss)

[hannah-ustwo]

As of Sprint 40, this is will not be a priority for the guides team. Front-end guild members to discuss the matter.

[klepas]

Continuing from the chat in the #frontend guild meeting, please take a look at the UI-Kit’s Browser support document, which references the legal mandate (the DAA) as well as our philosophical position on core features, of which I consider a grid system to be one.

Note: the test status information is sadly out of date — we have test results that haven’t been pushed into this document yet.

[petronbot]

Discussion points from Front-end Guild (4th November 2016):

• Helper classes bring great value for developers who would like to implement a grid without having to understand how Neat works
• It might not suit everyone's use case (alpha, production etc) to use helper classes, but if they're available with suitable guidance we can provide value to a greater range of developers
• Whatever grid system is implemented should work across a wide range of browsers (probably IE7+)