Grids: Clearing: overflow vs. micro clearfix

[mhulse]

Hello,

I just discovered OOCSS and its grid styles... Awesome work!

Just curious if there's a specific (browser-specific) reason why the clearing is written like so:

.line { overflow: hidden; *overflow: visible; *zoom: 1; }

I'm working on a big project that merges some of the OOCSS classes with a homebrew adaptive grid and I wanted to rewrite .line like so:

.line:before, .line:after { content: ""; display: table; }
.line:after { clear: both; }
.line { zoom: 1; }

(That's the: http://nicolasgallagher.com/micro-clearfix-hack/)

I've never been a huge fan of using overflow:hidden (other than it's short!); I'm just wondering if there's a specific reason why the clearing is written the way it is? Can I safely convert it to use the micro clearfix hack?

Thanks so much!

Cheers,
M

[Murray Nuttall]

In the case of .line, I think it's fine to rewrite. I've done this too recently and found no issues.

One of the places to not rewrite overflow:hidden; is the .bd in the .media block. It's used here is to stop text from wrapping around your image.

I think the OOCSS grids are nicer than other grid systems because they work at any width with no extra maths. 

Murray.

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/object-oriented-css/-/Xw260PL5WF0J.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.

[Micky Hulse]

Hi Murray! Thanks so much for your reply, I really appreciate it. :)

On Wed, May 23, 2012 at 2:09 PM, Murray Nuttall
<murray....@gmail.com> wrote:
> In the case of .line, I think it's fine to rewrite. I've done this too
> recently and found no issues.

Awesome! I am glad to hear that others have tried this. I think the
overflow:hidden;... bit is really cool and compact, but I just feel a
tad better about using the new micro clearfix (even thought it's more
code).

> One of the places to not rewrite overflow:hidden; is the .bd in the .media
> block. It's used here is to stop text from wrapping around your image.

Thanks for pointing that out! I've used that technique before, and
it's pretty useful!

Currently, I'm just using the grid... I have yet to really dig into
all the other goodies. :)

> I think the OOCSS grids are nicer than other grid systems because they work
> at any width with no extra maths.

Yes! I'm impressed!

Thanks again Murray! Have an awesome day!

Cheers,
Micky

[John Slegers]

In Cascade Framework (a new OOCSS framework I released last week), I used the micro-clearfix technique to clearfix all block level elements by default.

It makes designing a webpage a lot easier and frees you from having to put those ugly "clearfix" classes or equivalents across your page.

I've noticed no issues with it in any browsers I tried, including IE6.

[Charles Kline]

John,

Playing with Cascade Framework and it's real cool. I started with one of your templates just to get going and I'm wondering, how did you anticipate folks overriding styles that are in the build*.css files? I see you have the site.css in there; is this where you planned folks to put their custom styles?

Thanks,

Charles

On Thu, Mar 28, 2013 at 11:19 AM, John Slegers <illusi...@gmail.com> wrote:

In Cascade Framework (a new OOCSS framework I released last week), I used the micro-clearfix technique to clearfix all block level elements by default.

It makes designing a webpage a lot easier and frees you from having to put those ugly "clearfix" classes or equivalents across your page.

I've noticed no issues with it in any browsers I tried, including IE6.

On Wednesday, May 23, 2012 6:59:50 PM UTC+2, mhulse wrote:

--

You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to object-oriented...@googlegroups.com.

To post to this group, send email to object-or...@googlegroups.com.

Visit this group at http://groups.google.com/group/object-oriented-css?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Charles Kline | Lead UI/UX Developer
charle...@nuix.com | www.nuix.com

 

Ph: + 1 609 870 8163 | Fax: +1 215 689 4283
720 Greenwood Ave., Suite 200 Jenkintown, PA 19046

Skype: charles.t.kline | Twitter: twitter.com/nuix

 

"No software other than Nuix can process large collections fast enough to meet the SEC's desired timeframes"

The US Securities and Exchange Commission