Pros/cons of incremental breakpoints (responsive grids)
34 views
Skip to first unread message
Matthew Browne
May 5, 2014, 3:26:03 PM5/5/14
to object-or...@googlegroups.com
Hi all,
I am currently evaluating responsive grid frameworks and of course OOCSS grids are a top contender. At the top of _grid-responsive.scss there's this comment:
//TODO: stephen doens't think incremental breakpoints are a good idea
Who is Stephen and is this a factor I should consider as I'm getting ready to build a new responsive site? Are there plans to significantly change the current OOCSS responsive grids implementation in the future or can I confidently use the "tShirtSize" classes now knowing they'll be compatible with future versions of OOCSS?
BTW, Lewis Litanzios, if you're reading this, to answer your question from the other thread about using a combination of frameworks, I have primarily been using Cascade Framework lately (which is built on OOCSS principles) and also OOCSS for forms and a couple classes from Bootstrap for button styles. But Cascade Framework doesn't currently have as robust support for responsive design as OOCSS so I'm thinking of switching to OOCSS responsive grids for my current project. If you want to continue the discussion about what frameworks people are using, I'd suggest starting a new thread on it...this group hasn't been very active lately but a new thread might help.
I am currently evaluating responsive grid frameworks and of course OOCSS grids are a top contender. At the top of _grid-responsive.scss there's this comment:
//TODO: stephen doens't think incremental breakpoints are a good idea
Who is Stephen and is this a factor I should consider as I'm getting ready to build a new responsive site? Are there plans to significantly change the current OOCSS responsive grids implementation in the future or can I confidently use the "tShirtSize" classes now knowing they'll be compatible with future versions of OOCSS?
BTW, Lewis Litanzios, if you're reading this, to answer your question from the other thread about using a combination of frameworks, I have primarily been using Cascade Framework lately (which is built on OOCSS principles) and also OOCSS for forms and a couple classes from Bootstrap for button styles. But Cascade Framework doesn't currently have as robust support for responsive design as OOCSS so I'm thinking of switching to OOCSS responsive grids for my current project. If you want to continue the discussion about what frameworks people are using, I'd suggest starting a new thread on it...this group hasn't been very active lately but a new thread might help.
Lewis Dexter Litanzios / ldexterldesign
May 7, 2014, 2:59:15 PM5/7/14
to object-or...@googlegroups.com
Hey Matthew,
I've just had a dig into http://www.cascade-framework.com/ and some of the documentation - it's not immediately clear to me how this uses OOCSS? Call me fickle, but I wouldn't entertain picking up a non-SASS framework these days either.
I guess it makes more sense for me to simply go explore http://oocss.org/ ?
Regards,
I've just had a dig into http://www.cascade-framework.com/ and some of the documentation - it's not immediately clear to me how this uses OOCSS? Call me fickle, but I wouldn't entertain picking up a non-SASS framework these days either.
I guess it makes more sense for me to simply go explore http://oocss.org/ ?
Regards,
--
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.
For more options, visit https://groups.google.com/d/optout.
--
Matthew Browne
May 7, 2014, 11:25:27 PM5/7/14
to object-or...@googlegroups.com
On 5/7/14 2:59 PM, Lewis Dexter Litanzios / ldexterldesign wrote:
Hey Matthew,
I've just had a dig into http://www.cascade-framework.com/ and some of the documentation - it's not immediately clear to me how this uses OOCSS? Call me fickle, but I wouldn't entertain picking up a non-SASS framework these days either.
The author of the framework, John Slegers, recently posted on GitHub
that he is actively working on a new SASS version of the framework,
so if that would change your view of it then you might want to take
a look at it again in a couple months (I'm not sure of his time
frame).
My understanding is that the essence of OOCSS is reusable components (objects) that can be subclassed as needed, favoring multiple classes in the HTML over long selectors in the CSS. All of the components on the Components page of the documentation - panels, tables, etc. - have basic classes as well as several "subclasses" for variations.
I was drawn to it because its presentational grids implementation is very similar to the OOCSS framework and it borrows other similar concepts, e.g. the media object.
So that's my take, but I actually found out about it because John announced it in this forum; if you search the archives for "John Slegers" you'll see several posts about it.
As to why I didn't just use the OOCSS framework created by Nicole Sullivan and her team, it mainly came down to the fact that Cascade Framework is a little more user-friendly in case I want coworkers to learn it as well; OOCSS doesn't have as many ready-to-go styles and variations and you have to download it and build it to even see the latest docs.
I do think that Cascade Framework could be improved, beyond just moving it to SASS as John is already working on. For one thing, it uses a global clearfix on all block-level elements, which isn't good for performance (although for non JS-heavy sites it probably doesn't matter) and also causes you to have to scroll past it every time you use Firebug. So I created a new class called .row that has the clearfix and just put my .col's inside of that.
The other thing I don't like about the official Cascade Framework examples is all the .cell divs, which are only there to support IE7 and below (otherwise you could just use border-box and padding). First of all IE7 has less than 2% market share these days but of course it would be nice not to have the layout be completely broken on IE7. The new version of the OOCSS framework has a clever solution to this which is to use a negative margin on the .line class (which is analogous to my .row class).
On the downside for the OOCSS framework is the fact that it still requires the use of .lastCol for the last column in every row, in order to work in IE8 and below, which I've always found annoying. I'm actually not clear why it's still needed though; in the previous version of the OOCSS framework I thought it was needed for IE8 and below because the .unit class was not self-clearing, but in the new version the columns are self-clearing so I'd have to play with it in IE8 to see why it's still there; in any case, it's certainly possible to do without the .lastCol class as Cascade Framework and many others have done.
My understanding is that the essence of OOCSS is reusable components (objects) that can be subclassed as needed, favoring multiple classes in the HTML over long selectors in the CSS. All of the components on the Components page of the documentation - panels, tables, etc. - have basic classes as well as several "subclasses" for variations.
I was drawn to it because its presentational grids implementation is very similar to the OOCSS framework and it borrows other similar concepts, e.g. the media object.
So that's my take, but I actually found out about it because John announced it in this forum; if you search the archives for "John Slegers" you'll see several posts about it.
As to why I didn't just use the OOCSS framework created by Nicole Sullivan and her team, it mainly came down to the fact that Cascade Framework is a little more user-friendly in case I want coworkers to learn it as well; OOCSS doesn't have as many ready-to-go styles and variations and you have to download it and build it to even see the latest docs.
I do think that Cascade Framework could be improved, beyond just moving it to SASS as John is already working on. For one thing, it uses a global clearfix on all block-level elements, which isn't good for performance (although for non JS-heavy sites it probably doesn't matter) and also causes you to have to scroll past it every time you use Firebug. So I created a new class called .row that has the clearfix and just put my .col's inside of that.
The other thing I don't like about the official Cascade Framework examples is all the .cell divs, which are only there to support IE7 and below (otherwise you could just use border-box and padding). First of all IE7 has less than 2% market share these days but of course it would be nice not to have the layout be completely broken on IE7. The new version of the OOCSS framework has a clever solution to this which is to use a negative margin on the .line class (which is analogous to my .row class).
On the downside for the OOCSS framework is the fact that it still requires the use of .lastCol for the last column in every row, in order to work in IE8 and below, which I've always found annoying. I'm actually not clear why it's still needed though; in the previous version of the OOCSS framework I thought it was needed for IE8 and below because the .unit class was not self-clearing, but in the new version the columns are self-clearing so I'd have to play with it in IE8 to see why it's still there; in any case, it's certainly possible to do without the .lastCol class as Cascade Framework and many others have done.
I guess it makes more sense for me to simply go explore http://oocss.org/ ?
The docs on there (at least the first few I clicked on) are using
the old version of the OOCSS framework. I'd recommend looking at the
new SASS version instead (or in addition), which is now the official
version on github:
https://github.com/stubbornella/oocss
You have to download and build it to see the docs; I've already built them so if you want me to upload them so you can check it out before installing let me know.
I think this might be the best option for you given what you've said in your posts...for one thing, it was created by Nicole Sullivan and her team so you can be sure it follows OOCSS principles. Zurb Foundation is good too and you could still use certain components from Zurb together with OOCSS. As others have often said here in the past, OOCSS is more of a general philosophy/approach and you can apply it to whatever frameworks and libraries you happen to be using (although some make it easier than others of course). (Side note - I would say the same about actual object-oriented programming - it's a paradigm, not just a collection of techniques. In fact, Alan Kay once said "I invented the term object-oriented programming and this [C++] is not what I had in mind" because the paradigm got somewhat lost through history...but that's another story that I can tell you about another time if you're interested :)
Cheers,
Matt
https://github.com/stubbornella/oocss
You have to download and build it to see the docs; I've already built them so if you want me to upload them so you can check it out before installing let me know.
I think this might be the best option for you given what you've said in your posts...for one thing, it was created by Nicole Sullivan and her team so you can be sure it follows OOCSS principles. Zurb Foundation is good too and you could still use certain components from Zurb together with OOCSS. As others have often said here in the past, OOCSS is more of a general philosophy/approach and you can apply it to whatever frameworks and libraries you happen to be using (although some make it easier than others of course). (Side note - I would say the same about actual object-oriented programming - it's a paradigm, not just a collection of techniques. In fact, Alan Kay once said "I invented the term object-oriented programming and this [C++] is not what I had in mind" because the paradigm got somewhat lost through history...but that's another story that I can tell you about another time if you're interested :)
Cheers,
Matt
BBunny
May 8, 2014, 11:07:43 AM5/8/14
to object-or...@googlegroups.com
On Wednesday, May 7, 2014 8:25:27 PM UTC-7, Matthew Browne wrote:
On 5/7/14 2:59 PM, Lewis Dexter Litanzios / ldexterldesign wrote:
You have to download and build it to see the docs; I've already built them so if you want me to upload them so you can check it out before installing let me know.
If you're offering to upload the CSS (vs. SASS) version of OOCSS, I, for one, would love it if you did that. I'm not SASS-proficient, but I do want the latest version of OOCSS. Thanks!
BBunny
Reply all
Reply to author
Forward
0 new messages