144-responsive-grid

[CSuttie]

Code Pen: http://codepen.io/csuttie/pen/BWQMwM
Per Issue 144: #144

Adds _ResponsiveGrid.sass loaded after _Grid.sass extending the class.
.row is extended with .row.row-responsive to generate flex-wrap: wrap;

new classes specify column percentages and offsets with bootstrap-styled class definitions extending .column when used inside .row.row-responsive:
.column-XX-YY, .column-offset-XX-YY

YY is the percentage, ie 10, 33, 50, 90
XX is the breakpoint, ie xs, sm, md, lg

.column-offset-XX-0 is available to remove offsets from smaller breakpoints.

This follows the mobile-first definitions established by the app.

[nateberkopec]

This one's a no for me. Increasing the size of the framework by 50% isn't worth any one feature for Milligram.

[danielcompton]

Is that a 50% increase after gzip?

[nateberkopec]

No, I'm going by line count. Network size matters, yeah, but another huge reason I love Milligram is the lack of cognitive overhead and the ability to sit down and read the entire source in 5 minutes.

[guillaumemolter]

@nateberkopec I kindly disagree:

1. This is a much needed feature. I really don't see how you can use a grid layout, in a responsive context without the ability to change the behavior of some elements based on the view-port. I would say you either need this or should completely get rid of the responsive grid. Or, you do it yourself when needed, reinventing the wheel, defeating the purpose of using a framework.
2. The number of lines is artificially increased by the number of breakpoints. I understand your argument of reading the source in 5 min...but honestly it take 10 seconds to read _ResponsiveGrid.sass it's basically the same 10 lines of code repeated 50 times.
3. The sass code could be significantly optimized (in terms of number of lines) using loops and lists but would then make the source less readable to someone not super familiar with Sass syntax.

I'm not against point 3, just a point to consider.

[danielcompton]

I'd be in favour of using loops and lists here to reduce the line count. I don't know exactly what that would look like as I'm someone who isn't very familiar with Sass, but I think the intent will be pretty clear to read and understand. If it's still unclear, a few lines of comments could be added.

I also agree that it is a much needed feature.

[CSuttie]

I'm admittedly relatively new to SASS and am sure I can squash down the actual lines of code to compact this. I will have to revisit it when I have the time. Thanks for the input.

[juanbrujo]

this is a great solution, so disappointed it is still open. the .min file is only 4kb heavier, definitely a good solution for the lack of responsive of this grid.

[cjpatoilo]

Guys, sorry fot delay!

I am very happy to know that you have worked to improve this project. This means a lot to me ♥

I should agree that there are good arguments about the need to bring a new point of view to the grid component and improve support for multiple screens. We need to think of other ways to improve the grid system and not add other solutions. In fact it is not a big deal to set a mindset for some screens. The current grid system has a good support and it would not take up so much of your time.

The main reason I will not be able to accept this PR is because it will leave all heavier than the current size. It's simple to say that it's a few kb, but for Milligram users that need to support AMP or PWA each saved kb is celebrated with a huge victory.

[cjpatoilo]

Guys, feel free to open a new issue to discuss a better approach in the grids system.

[sebbean]

huge missing feature for me. will probably go back to using http://materializecss.com/ instead

no point in a grid system if you don't have responsive features imo