Add optional parameters to grid mixins for more flexibility #6230
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In some responsive designs, the number of columns can change at different breakpoints. In addition, the helper mixins for creating rows and columns (
.makeRow()
and its cousins) can produce incorrect values based on changing grid and column widths. The code in this pull request fixes these issues and allows for more flexibility when using the various grid-related mixins.#grid > .core
,#grid > .fluid
,#grid > .input
Although these mixins allow for customizing the column and gutter widths (e.g. to have a different sized grid inside a media query), they all default to the same number of grid columns. This makes sense as a default option, but the number of columns should be configurable as well. An optional parameter allows both methods: by default the grid uses the same number of columns all the time, but the developer can override the column count in their LESS file if it makes sense to do so.
Example of current method:
The above example produces an oddly sized grid. A better option is to reduce the number of columns to allow for a cleaner overall look.
Same example with configurable columns:
Note: The examples for
#grid > .fluid
and#grid > .input
are essentially the same as above, so I am leaving them out for the sake of simplicity..makeRow()
,.makeColumn()
,.tableColumns()
The way these mixins are currently set up, they default to the standard grid size (i.e. column & gutter widths), regardless where they are used. This means that it is not possible to use .makeRow() inside a media query that has a different width. Even without the changes above, this can result in odd behavior.
Example of current method:
Obviously, the call to
.makeRow()
in the media query sets the container's margin incorrectly. Things get worse with.makeColumn()
and.tableColumns()
.Example of current method:
This is the compiled result of the above (note: I have removed the stuff coming from
.clearfix()
, the.container
, and.(span|offset)X
for readability):This is what it should be, based on the different column and gutter widths used in the 720px grid:
Note: As with the first examples for
#grid > .(core|fluid|input)()
, the examples for.makeColumn()
and.tableColumns()
are essentially the same, so.tableColumns()
has been omitted for readability.