Align classes for units?

[kokujin]

Are there any best practice ways to align content in units in Gridism? For example , a navigation header the buttons and possibly a logo has to be aligned to the bottom of a unit.

[cobyism]

As var as vertical alignment of content goes, that’s not something I think this project should have an opinion on. There’s some helper classes for simple horizontal alignment (.align-right and so forth), but the options for vertical alignment depend on a lot more factors (display being inline vs. block vs. float, font-size, line-height, and so forth)—most of which are properties that I feel lie firmly outside of the responsibility of a grid framework.

What I usually do is just pay attention to the line-height property of adjacent elements in my designs. Keeping that consistent usually let’s me control the vertical alignment of headers and text inside grid units so they all line up. :smiley:

[tomicakorac]

I wonder what's the proper way of using pull-right. This is what I've tried:

<div class="grid">
    <div class="unit one-third pull-right">
        Content
    </div><!-- /.unit -->
</div><!-- /.grid -->

which still doesn't float the unit to the right, because float is overriden by .grid .unit left float.

How do I pull a unit to the right?

[cobyism]

@tomicakorac My original intentions for the handful of "utility" classes are primarily for dealing with content within the grid (e.g. pulling an image to the right within a unit), not the units themselves. If you want to move a grid unit over to the right, there was some discussion over in https://github.com/cobyism/gridism/issues/31 about how to achieve "offset" behaviour that more complex grid systems provide classes for.

[tomicakorac]

Hi Coby, thanks for the quick reply.

I saw other replies on here about this issue, but I was just a bit too busy to reply. I actually don't think using an empty div is a good adivce. Not only is using empty divs more a hack than a solution, what is more important is that in general it will not always work. Plase look at this:

<div class="grid no-gutters">
    <div class="first unit half"> </div>
    <div class="second unit half">Some content</div>
</div>

In this case .first div will not be visible, and .second div will still be floated left.

I understand that it might be completely out of scope for this library to deal with every little issue there may be, but my personal opinion is that using empty divs to offset units should not be passed on here as a good advice.

[cobyism]

using empty divs to offset units should not be passed on here as a good advice.

Yep, definitely not saying that’s a good practice—just that offset classes are currently out of scope for what I want this project to do (ultra-simple grid and nothing more). If there’s a simple way to add that functionality to what gridism can do though, without making the implementation (or the documentation) significantly more complex, I’d :heart: to see a pull request!

[tomicakorac]

I'd be happy to contribute how ever little I can to this awesome tool of yours. I'm just not sure what would you consider to bee too much of a bloat for the library. What I usually think is that it's better to have a re-usable library containing as much helper functionality as possible just so I could reduce the repetitiveness of my usual work. Of course, as long as that's possible without too much negatively affecting clarity or documentation for end-user.

Since I've been using your library for a few months now, I've started gathering some ideas for improvement (IMO of course), to see if I can come up with a meaningful set of suggestions.