cobyism / gridism

A simple responsive CSS grid.
http://pages.cobyism.com/gridism
MIT License
658 stars 85 forks source link

.offset-… ? #31

Closed mpa3b closed 7 years ago

mpa3b commented 10 years ago

Any plans on implementing these classes?

cobyism commented 10 years ago

It’s currently possible to achieve the same affect by just using a regular grid unit as a placeholder. For example:

<div class="grid">
  <div class="unit quarter"></div>
  <div class="unit three-quarters">This element will start 25% of the way across the page.</div>
</div>

… so I’m not entirely sure why having a separate class is necessary. Can you tell me more about a situation where you’ve found an offset class to be absolutely necessary?

If I recall correctly (which I may not), the reason I originally avoided implementing offset classes is that computing the correct gutter spacing correctly without the extra DOM element gets complex very quickly. I’m open to the idea if there’s A) a really clear case for it being necessary, and B) a way to solve the problem elegantly and without bloating the size of the CSS file.

mpa3b commented 10 years ago

https://yadi.sk/i/YUWrDjcfb4ngP something like that. sure, I can use a tag to insert and empty spacer before. i was just wondering if any other solution possible, with no need of empty markup.

cobyism commented 10 years ago

Right, I see what you’re meaning. The other way you could accomplish that is by doing something like the following:

<section class="white-background">
  <div class="grid">
    <div class="unit one-third">…</div>
    <div class="unit one-third">…</div>
    <div class="unit one-third">…</div>
  </div>
</section>
<section class="road-background">
  <div class="grid call-to-action-form">
    <div class="unit whole">
      <form action="…">
        …
      </form>
    </div>
  </div>
</section>

And then specify .call-to-action-form as a deliberately smaller wrapper container:

.call-to-action-form {
  max-width: 400px;
  /* margin: 0 auto; and so forth will be inherited from .grid */
}

Does that make sense?

mpa3b commented 10 years ago

I actually use another structure, but the same way. Thank you.

mpa3b commented 9 years ago

I came to a solution of this issue. CSS pseudo elements :before. I'll try to produce the solution code later awhile.