Added class to center align units

[pmhou]

I wrote this back into the Gridism CSS when using the framework for a site prototype.

[cobyism]

First up, thanks for sending the pull request! :heart:

I’m definitely open to merging this, but I’ve got a few questions first because I haven’t really ever found the need to center align a unit myself. Why not just create a new section with a narrower .grid (or with a narrower wrapper around it) and then a .unit.whole? Can you show me an example of a place where you found you needed something like this? Where in the demo site would this go, and how would you explain how to use this class?

[pmhou]

So yeah, there shouldn't be space between the selectors. So its a secondary class for .unit to center the unit div within the parent grid.

The reason why I added this was because I (wrongly?) used .grid as my overall container. On the demo site, you're using .grid technically as a row which is a little confusing (coming from various other grid frameworks).

With the prototype I used gridism with, I had a login form which looked too stretched at full width (.whole). So instead I made it .half and centered it with the class I'm proposing. What you're suggesting would indeed be another solution, however you need additional styling for the parent div in order to use .whole on the child div.

Hope that makes sense! What I'm proposing may not be correct but I feel you need to be able to pull/push and center units within a row (.grid) without additonal styling for the parent div.

[pmhou]

Whoops, accidentally closed the request :weary:

[cobyism]

its a secondary class for .unit

:+1: Cool, thanks for clarifying.

I (wrongly?) used .grid as my overall container. On the demo site, you're using .grid technically as a row which is a little confusing (coming from various other grid frameworks).

I completely understand that this is different from most other frameworks, and if anything I should probably document that better here in the first place. The main reason I have each .grid be a distinct "row" is that I often tend to have my sites divided up into multiple full-width sections, each containing their own .grid (and most often they’re only one row per section anyhow. Having one big .grid for the whole page makes it more difficult to implement some types of designs, especially if you want to do things like matching inner/outer gutters for each horizontal section (where you kinda need to rely on :first-child and :last-child selectors). Anyway, I’m kinda getting sidetracked from what you’re proposing! :stuck_out_tongue:

With the prototype I used gridism with, I had a login form which looked too stretched at full width (.whole). So instead I made it .half and centered it with the class I'm proposing.

Ah, okay. I see what you’re getting at. In that case, my next question is whether or not that would be better done as something like this instead:

.grid.center-units {
  text-align: center;
}
.grid.center-units .unit {
  display: inline-block;
  float: none !important;
}

... or something to that effect (I haven’t actually checked that in any browser, but I hope the general idea comes through). That way, it’s a modifier you put on the .grid itself, and can also apply to multiple .unit children instead of just one (which you kinda limit yourself to as soon as you go with margin: 0 auto;). That would mean you could do things like this, too:

<div class="grid center-units">
  <div class="unit one-quarter">
    content
  </div>
  <div class="unit one-quarter">
    content
  </div>
</div>

(effective width of .half, but still split into usable units)

Does any of what I’m saying make sense? Let me know if I’m just blithering. :laughing:

[pmhou]

Indeed you could. It depends what the design specification requires. If you need to center more than one unit on the same row, your solution is ideal however I'm weary about using text-align:center for structural mark-up. You'll probably have to explicitly state the text-align of the child div(s) back to text-align:left (in most circumstances).

I must admit, my solution was purely for one unit where 100% width was too large but you wanted the content on its own row and being floated left looked a bit odd instead of being symmetrical. I can't think of too many cases where more than one unit in a row would have to be centered, when you get to 3, you may as well just use one-third.

Basically I don't think either solution is correct but totally depends on the requirement. I think we can both agree that some sort of extra class would be handy however :smiley:

[cobyism]

I’m going to go ahead and close this pull. I definitely think this project could do a better job of explaining how to achieve custom things like narrower grids throughout the page (e.g. as a way to have a single unit appear centered), but I don’t think adding complexity to this project for something that can easily be achieved by adding a custom wrapper element around a .grid element is necessary at the moment. Thanks again for the pull though! :bow: