search

nathansmith / unsemantic

Fluid grid for mobile, tablet, and desktop.
http://unsemantic.com
MIT License
1.38k stars 161 forks source link

Adds ability to provide a custom className to Grid component. #98

Closed coreyleelarson closed 6 years ago

coreyleelarson commented 6 years ago

There are cases where we would like to add our own custom classNames to the Grid component without adding additional elements.

For example, we add .gutter-bottom to a lot of our grid cells. Using the current react components, we either have to add this class to the inner elements, which are used elsewhere outside of a grid, or add an additional wrapper to apply the className, which we feel adds unnecessary markup.

React Source

<Grid mobile="50" tablet="33" desktop="25" className="gutter-bottom">...</Grid>

Compiled HTML

<div class="grid-25 tablet-grid-33 mobile-grid-50 gutter-bottom">...</div>

This also addresses the https://github.com/nathansmith/unsemantic/issues/94 feature request.

nathansmith commented 6 years ago

I added the className support, in a slightly different way.

https://github.com/nathansmith/unsemantic/blob/master/assets/react/source/grid.js#L33

So, I'm going to close this pull request, but the spirit of what you want has been added.

😄