What are everyone's thoughts on Twitter Bootstrap

2,070 views
Skip to first unread message

John S

unread,
Mar 30, 2012, 1:52:44 AM3/30/12
to object-or...@googlegroups.com
I'm curious to know what everyone on here's take is on Twitter Bootstrap.  How does it rate on the ooCSS scale... from 0 to Nicole Sullivan (she's a '10'!)?  Pros?  Cons?  Anyone on here using it?

Thanks!

Nicole Sullivan

unread,
Mar 30, 2012, 2:47:11 AM3/30/12
to object-or...@googlegroups.com
I'm using it for a client right now, so I'll have more feedback in some time. 

For now, I've noticed rounding errors in the responsive grids at particular widths. Any grids with gutters would have the same problem, so I submitted this bug to Tab Atkins regarding the next generation of layout mechanisms: http://lists.w3.org/Archives/Public/www-style/2012Mar/0611.html

Nicole

On Thu, Mar 29, 2012 at 10:52 PM, John S <bcbou...@myfastmail.com> wrote:
I'm curious to know what everyone on here's take is on Twitter Bootstrap.  How does it rate on the ooCSS scale... from 0 to Nicole Sullivan (she's a '10'!)?  Pros?  Cons?  Anyone on here using it?

Thanks!

--
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/-/ozmKAIYq4XUJ.
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.

Brett Goulder

unread,
Mar 30, 2012, 4:01:19 AM3/30/12
to object-or...@googlegroups.com
I think it's excellent if you use use it for what it's meant for, bootstrapping an application with little-to-no design.

However, you need to make sure you're not writing CSS around bootstrap once design becomes a consideration.  

e.g. you probably shouldn't be writing something like

input[type=text] {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

There's a lot more examples like that(especially around those .btn classes).  Just be weary about it.

On Friday, March 30, 2012 at 2:52 PM, John S wrote:

I'm curious to know what everyone on here's take is on Twitter Bootstrap.  How does it rate on the ooCSS scale... from 0 to Nicole Sullivan (she's a '10'!)?  Pros?  Cons?  Anyone on here using it?

Thanks!

--

Nicole Sullivan

unread,
Mar 30, 2012, 4:06:00 AM3/30/12
to object-or...@googlegroups.com
Yeah, my initial impression has been that design is too tightly coupled to structure. You can't easily reskin w out ripping out or overwriting their styles.

Sent from my iPhone

Gaspar

unread,
Mar 30, 2012, 5:08:01 AM3/30/12
to object-or...@googlegroups.com
hello, i use it a few time ago. 

No grids just components and elements.

I had to slightly modify some elements but overall I gained a lot.
If the design is based on BStrap elements but with minor changes it is very useful.

Gaspar

Ytterström Anders (Adeprimo)

unread,
Mar 30, 2012, 5:43:25 AM3/30/12
to <object-oriented-css@googlegroups.com>
The idea with class prefixing is nice and also makes sense when writing CSS the OOCSS way.

I would however not use Twitter Bootstrap in production. Instead, I use it in prototype-driven development as a - you guessed it - Bootstrap. It is a really good CSS library for creating prototypes of web apps and sites, since it makes it possible for developers to focus on content, semantic markup (as in microdata/-formats, html5 elements and WAI-ARIA landmark roles) and markup validation and not worry about the visuals.

Later on, most of Twitter Bootstrap is replaced by the "real" design, made by a designer and me. Class names are replaced, some wrapper divs are added, but the markup and the content is still rock solid thanks to a good CSS bootstrap.

John S

unread,
Mar 30, 2012, 2:14:22 PM3/30/12
to object-or...@googlegroups.com
Thanks, Nicole!  I look forward to hearing more of your input as you gain more experience using it on your current project!

 - John


On Thursday, March 29, 2012 11:47:11 PM UTC-7, Nicole Sullivan wrote:
I'm using it for a client right now, so I'll have more feedback in some time. 

For now, I've noticed rounding errors in the responsive grids at particular widths. Any grids with gutters would have the same problem, so I submitted this bug to Tab Atkins regarding the next generation of layout mechanisms: http://lists.w3.org/Archives/Public/www-style/2012Mar/0611.html

Nicole

John S

unread,
Mar 30, 2012, 2:15:57 PM3/30/12
to object-or...@googlegroups.com
Thanks, guys & gals!

I really appreciate the insight!  I've been hearing so much about Bootstrap these days that it's hard to separate the hype from the reality.  It's great to get real-world, hands-on info... especially from the ooCSS crowd!

Great stuff!

 - John

Murray Nuttall

unread,
Mar 31, 2012, 1:01:55 AM3/31/12
to object-or...@googlegroups.com, object-or...@googlegroups.com
I've used it for 3 projects now. At first I loved it, but now I think that I live only a few aspects of it - the mixins, icons and buttons. 

It is an amazing project, but I actually prefer the lightness of the OOCSS framework.

While you can customize things in bootstrap, you ant take it too far before things start to break. 

In the end, what it's taught me about LESS is what I appreciate the most. I'm building a LOOCSS project :-p

Regards, Murray

On 30/03/2012, at 6:52 PM, John S <bcbou...@myfastmail.com> wrote:

I'm curious to know what everyone on here's take is on Twitter Bootstrap.  How does it rate on the ooCSS scale... from 0 to Nicole Sullivan (she's a '10'!)?  Pros?  Cons?  Anyone on here using it?

Thanks!

--

John S

unread,
Mar 31, 2012, 1:06:31 AM3/31/12
to object-or...@googlegroups.com
@Murray,

Interesting... thanks for the input.  And a LESS/ooCSS project?!?!  Oh-la-la!!!  Now THAT sounds interesting!!!

Please, please, PLEASE say that you're going to be making that available?  That sounds Suh-WEET!

 - John


On Friday, March 30, 2012 10:01:55 PM UTC-7, Murray wrote:
I've used it for 3 projects now. At first I loved it, but now I think that I live only a few aspects of it - the mixins, icons and buttons. 

It is an amazing project, but I actually prefer the lightness of the OOCSS framework.

While you can customize things in bootstrap, you ant take it too far before things start to break. 

In the end, what it's taught me about LESS is what I appreciate the most. I'm building a LOOCSS project :-p

Regards, Murray

On 30/03/2012, at 6:52 PM, John S wrote:

I'm curious to know what everyone on here's take is on Twitter Bootstrap.  How does it rate on the ooCSS scale... from 0 to Nicole Sullivan (she's a '10'!)?  Pros?  Cons?  Anyone on here using it?

Thanks!

--
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/-/ozmKAIYq4XUJ.
To post to this group, send email to object-oriented-css@googlegroups.com.
To unsubscribe from this group, send email to object-oriented-css+unsub...@googlegroups.com.

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

On Friday, March 30, 2012 10:01:55 PM UTC-7, Murray wrote:
I've used it for 3 projects now. At first I loved it, but now I think that I live only a few aspects of it - the mixins, icons and buttons. 

It is an amazing project, but I actually prefer the lightness of the OOCSS framework.

While you can customize things in bootstrap, you ant take it too far before things start to break. 

In the end, what it's taught me about LESS is what I appreciate the most. I'm building a LOOCSS project :-p

Regards, Murray

On 30/03/2012, at 6:52 PM, John S wrote:

I'm curious to know what everyone on here's take is on Twitter Bootstrap.  How does it rate on the ooCSS scale... from 0 to Nicole Sullivan (she's a '10'!)?  Pros?  Cons?  Anyone on here using it?

Thanks!

--
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/-/ozmKAIYq4XUJ.
To post to this group, send email to object-oriented-css@googlegroups.com.
To unsubscribe from this group, send email to object-oriented-css+unsub...@googlegroups.com.

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

On Friday, March 30, 2012 10:01:55 PM UTC-7, Murray wrote:
I've used it for 3 projects now. At first I loved it, but now I think that I live only a few aspects of it - the mixins, icons and buttons. 

It is an amazing project, but I actually prefer the lightness of the OOCSS framework.

While you can customize things in bootstrap, you ant take it too far before things start to break. 

In the end, what it's taught me about LESS is what I appreciate the most. I'm building a LOOCSS project :-p

Regards, Murray

On 30/03/2012, at 6:52 PM, John S wrote:

I'm curious to know what everyone on here's take is on Twitter Bootstrap.  How does it rate on the ooCSS scale... from 0 to Nicole Sullivan (she's a '10'!)?  Pros?  Cons?  Anyone on here using it?

Thanks!

--
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/-/ozmKAIYq4XUJ.
To post to this group, send email to object-oriented-css@googlegroups.com.
To unsubscribe from this group, send email to object-oriented-css+unsub...@googlegroups.com.

Murray Nuttall

unread,
Mar 31, 2012, 2:52:24 AM3/31/12
to object-or...@googlegroups.com
There won't be anything too special about it but of course I'll make it available.

Murray.



To view this discussion on the web visit https://groups.google.com/d/msg/object-oriented-css/-/YKJoNg87_CAJ.

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

Dan Humphrey

unread,
Mar 31, 2012, 2:54:49 AM3/31/12
to object-or...@googlegroups.com, object-or...@googlegroups.com
LOOCSS.. or maybe OOCSLesS?

Dan Humphrey (from iPhone)

TM

unread,
Mar 31, 2012, 3:34:01 AM3/31/12
to object-or...@googlegroups.com
Yeah, I think what I liked about it was the "standardisingness" of all the HTML components and the little extras but when it comes to wanting to customize something or wanting to leave out a few things, it becomes a pain as its not fine grained Lego pieces; more like several decepticons combined to form that huge monstrousity climbing a pyramid. I don't particularly like debugging their less but I think that if it were more OO or they mentioned dependencies on the top of every file, that the experience could be better; I think that their "mixins" less file is too generalised and needs to be broken down. Seeing as how less is kinda like coding CSS, it would be great to see an "object map" and I second a less version of OOCSS, you could just use the compiled CSS as OOCSS. I think the correct term would be OOLessCSS / OOLCSS and if we juggle it a little more... COOL :D


Sent from my mobile.

Ps. Save a tree by not printing this.

Nicole Sullivan

unread,
Mar 31, 2012, 7:19:43 AM3/31/12
to object-or...@googlegroups.com
I noticed that some of the inheritance structure in Bootstrap is weird too. e.g. the grids require css from the tables css file. I'm a believer in clear inheritance structure with a few mixins thrown in for common bits of repeating code.

Bootstrap seems like it would also benefit from the addition of the media object and boxes (modules without the IE6 compatible markup).

I'd wondered about having the main OOCSS repository be in SASS, but I hesitated to do anything that would raise the barrier to entry for anyone just beginning with the files. Perhaps have SASS that we write and also commit the compiled CSS, a la bootstrap. Less doesn't have @extends, so it didn't seem to fit OOCSS as well as SASS.

Nicole

Murray Nuttall

unread,
Mar 31, 2012, 7:39:39 AM3/31/12
to object-or...@googlegroups.com
I think the OOCSS project is just fine the way it is, without preprocessing. I think that mixing it with Sass or Less should be left up to individuals to decide, based on their requirements and experience.

Also I prefer Less to Sass, so I'd grizzle lots. :-P

Regards, Murray

Kristina Auckland

unread,
Mar 31, 2012, 7:54:34 AM3/31/12
to object-or...@googlegroups.com
Hi Murray

On 31 Mar 2012, at 12:39, Murray Nuttall wrote:

> Also I prefer Less to Sass, so I'd grizzle lots. :-P
>

Sorry this is going slightly off-topic but I'm really interested to know what your reasons are for preferring Less over Sass?

Thank you
Kristina

TM

unread,
Mar 31, 2012, 8:15:15 AM3/31/12
to object-or...@googlegroups.com
Aye, OOCSS should be the source and not the sauce. The others are just flavours that are up to your taste...

Speakin of flavours, have a look at Jade and let us know what you think: 



Sent from my mobile.

Ps. Save a tree by not printing this.

Matthew Browne

unread,
Mar 31, 2012, 11:49:05 AM3/31/12
to object-or...@googlegroups.com
A slightly tangential question here - but I was wondering, what is the currently recommended tool to use to combine the multiple CSS files that make up the OOCSS core into one minified CSS file?

Murray Nuttall

unread,
Mar 31, 2012, 5:23:05 PM3/31/12
to object-or...@googlegroups.com, object-or...@googlegroups.com
It was a matter of syntax. Having looked into it again, because of your question, I'm quite interested to have a go at Sass. I think I made my mind up about Sass back when it relied on indents not braces. Now that it looks more like CSS, the only thing that irks me is the way you @include a @mixin, this seems tidier in Less.

I may have a brand new opinion about the two later this evening.

Regards, Murray

Chris Eppstein

unread,
Mar 31, 2012, 6:43:24 PM3/31/12
to Object Oriented CSS
When we (the sass guys) first saw Less's classes as mixins we really
liked it. But after really thinking about it, we decided against
making all classes available as mixins because we felt that it created
unexpected coupling. That is, any class can be changed and the
downstream effects might not be obvious. Additionally, the nature of
classes is that they can be used in selectors scattered throughout the
stylesheet, and you can't really make a mixin concept compatible with
this. As such, we find that the concept of using classes like mixins
to be fundamentally flawed and so introduced the @extend directive for
working with selectors and keeping the very obvious @mixin directive
as it is.

Chris

On Mar 31, 2:23 pm, Murray Nuttall <murray.nutt...@gmail.com> wrote:
> It was a matter of syntax. Having looked into it again, because of your question, I'm quite interested to have a go at Sass. I think I made my mind up about Sass back when it relied on indents not braces. Now that it looks more like CSS, the only thing that irks me is the way you @include a @mixin, this seems tidier in Less.
>
> I may have a brand new opinion about the two later this evening.
>
> Regards, Murray
>

Ian

unread,
Mar 31, 2012, 9:40:57 PM3/31/12
to Object Oriented CSS
I hope this isn't too far off-topic, but the project I'm working on
right now has a lot in common with Bootstrap as far as making
everything more-or-less modular goes. About a month into the project,
a coworker of mine came up to me and asked me if I'd heard of
Bootstrap or not. I hadn't, but after looking at it, I felt sort of
silly. Basically, I was almost done writing a custom implementation of
Bootstrap from scratch. I feel like OOCSS and LESS are a natural fit
with the way that class mixins work, and I think a modular framework
(like Bootstrap) would be a natural byproduct whenever using the two.

I'd like to hear if any of you have any tips for extending Bootstrap
while keeping it OOCSS; things you ask yourselves to keep yourself
honest.

On Mar 31, 1:01 am, Murray Nuttall <murray.nutt...@gmail.com> wrote:
> I've used it for 3 projects now. At first I loved it, but now I think that I live only a few aspects of it - the mixins, icons and buttons.
>
> It is an amazing project, but I actually prefer the lightness of the OOCSS framework.
>
> While you can customize things in bootstrap, you ant take it too far before things start to break.
>
> In the end, what it's taught me about LESS is what I appreciate the most. I'm building a LOOCSS project :-p
>
> Regards, Murray
>
> On 30/03/2012, at 6:52 PM, John S <bcbound...@myfastmail.com> wrote:
>
>
>
>
>
>
>
> > I'm curious to know what everyone on here's take is on Twitter Bootstrap.  How does it rate on the ooCSS scale... from 0 to Nicole Sullivan (she's a '10'!)?  Pros?  Cons?  Anyone on here using it?
>
> > Thanks!
> > --
> > You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
> > To view this discussion on the web visithttps://groups.google.com/d/msg/object-oriented-css/-/ozmKAIYq4XUJ.

Aeron Glemann

unread,
Apr 1, 2012, 10:20:58 AM4/1/12
to object-or...@googlegroups.com
SASS over LESS - they both work if you just want a preprocessor - why I think SASS is a no-brainer if you also want to get things done:

- Compass (cross-browser CSS3, last time I looked at Bootstrap they were still doing this by hand with LESS)
- Automatic inline-images (ridiculously useful for mobile)
- Automatic image sprites (ridiculously useful everywhere else)
- SASS lang (hugely powerful, @extend, etc)

From MPOV not using a pre-processor these days is like programming in notepad. You may think you're hardcore but the rest of us will just nod our heads and slowly back away...

Matt B.

unread,
Jan 6, 2013, 10:06:25 AM1/6/13
to object-or...@googlegroups.com
I was looking over this discussion again and I'm wondering...is it feasible to use OOCSS for all the basic styling but still use certain Twitter Bootstrap components, like forms, tabs and modals for example? Or does Bootstrap introduce too many base styles that would interfere with OOCSS? Has anyone tried including just parts of the Bootstrap CSS (for the particular components you need) instead of their compiled master CSS file?

When I say OOCSS here I mean the official OOCSS framework (I realize that the term also means the general approach to coding CSS in an object-oriented way, which of course can be applied regardless of the framework/context).

I intend to try out combining the two frameworks myself but I'm curious to hear about others' experiences.

Abd Al-Ala Camara

unread,
Jan 6, 2013, 12:40:54 PM1/6/13
to object-or...@googlegroups.com
Hi Matt B,

I did exactly what you said. I use some components from twitter bootstrap like table and forms also some from OOCSS 
.
What I realize about this approach is that, you use what you need and discard the rest of the bloated code. 
the nice part is to customize it to what you want

cheers


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

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.



--
Address:
P.O.Box 2397 Serrekunda,
The Gambia.


Tel:   
P:    +220 3777578 / +220 6677578

Online @:
S:      abddev

Matthew Browne

unread,
Jan 6, 2013, 3:22:18 PM1/6/13
to object-or...@googlegroups.com
Cool, it's good to know that I can pick and choose what I need without breaking anything about Bootstrap or mucking up OOCSS. I'll give it a try. Thanks!


On Sunday, January 6, 2013 12:40:54 PM UTC-5, kebstein wrote:
Hi Matt B,

I did exactly what you said. I use some components from twitter bootstrap like table and forms also some from OOCSS 
.
What I realize about this approach is that, you use what you need and discard the rest of the bloated code. 
the nice part is to customize it to what you want

cheers


On Sun, Jan 6, 2013 at 3:06 PM, Matt B. <mbro...@gmail.com> wrote:
I was looking over this discussion again and I'm wondering...is it feasible to use OOCSS for all the basic styling but still use certain Twitter Bootstrap components, like forms, tabs and modals for example? Or does Bootstrap introduce too many base styles that would interfere with OOCSS? Has anyone tried including just parts of the Bootstrap CSS (for the particular components you need) instead of their compiled master CSS file?

When I say OOCSS here I mean the official OOCSS framework (I realize that the term also means the general approach to coding CSS in an object-oriented way, which of course can be applied regardless of the framework/context).

I intend to try out combining the two frameworks myself but I'm curious to hear about others' experiences.



On Friday, March 30, 2012 1:52:44 AM UTC-4, John S wrote:
I'm curious to know what everyone on here's take is on Twitter Bootstrap.  How does it rate on the ooCSS scale... from 0 to Nicole Sullivan (she's a '10'!)?  Pros?  Cons?  Anyone on here using it?

Thanks!

--
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/-/gv7D10qFXQIJ.

To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented-css+unsub...@googlegroups.com.

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

Renoir B.

unread,
Jan 6, 2013, 3:49:23 PM1/6/13
to object-or...@googlegroups.com

Hello people.

I'm big fan of the approach.

I just want to point out that the concept of OOCSS is about how to define patterns and separate concerns.

- re-usable modules without theme or font styling
- separation of layout/theme etc
- and all the rest.

Both Twitter Bootstrap and Zurb Foundation both uses the same principles.

If you ask if OOCSS is "compatible" in that aspect. Well. It is to my opinion.

Otherwise. OOCSS is a term to illustrate a "better practice" than free-for-all CSS.

Regarding Bootstrap. I do not think it is bloated.

If you meamt it has too much things than you need. Have a look at how to build your own using the less version:  bootstrap.less and the variables.less.

An easy way would be to create your own main.less file and import from bootstrap and other .less patterns only what you need.

Then, create separate less files for :
- theme,
-adaptations (change things from extermal libraries),
- states
- fonts

I actually wrote a post on htmlcsstherightway.org about how to do this concept of extending libraries.

http://htmlcsstherightway.org/#efficient_way_to_re_use_front_end_library_in_your_project

When experience kicks-in you will realise how repetitive css is. And you will get more and more efficient in separating concerns. It comes with practice.

Hope it helped clarifying your doubts.


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

Abd Al-Ala Camara

unread,
Jan 6, 2013, 6:55:54 PM1/6/13
to object-or...@googlegroups.com
Hi Renoir B, that is sweet thnx

John Slegers

unread,
Mar 27, 2013, 5:59:40 AM3/27/13
to object-or...@googlegroups.com
I like Bootstrap's design and overall feature set, but I don't like its architecture.

With regards to Nicole's OOCSS project it's the other way around. I like her overall architecture but can't say I'm impressed by its design and feature set.

About a week ago, I released Cascade Framework that combines - among other features - an (optional) Bootstrap inspired design and featureset with an OOCSS based architecture. The purpose of Cascade Framework is to be optimal in terms of performance, flexibility, modularity, code bloat, etc.

Any feedback would be appreciated.

Dan Humphrey

unread,
Mar 27, 2013, 6:17:28 AM3/27/13
to object-or...@googlegroups.com


Hi John,

I have only looked briefly from my iPhone, but I have to congratulate you - I really like the design, and you have obviously spent a lot of time on the documentation - well done.

I don't wish to be instantly critical, but I did notice a few issues in the responsive layout on my iPhone (iOS 6.1). Please see a couple of images below.

I will look again from a few devices and browsers and look at the code itself, but initially looks good!!

Regards,
Dan





--
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.

25B551A7-1B8F-4804-96B9-855578FDA0C1.png
1008798B-70DC-406E-9EE6-CEEF389856FC.png

John Slegers

unread,
Mar 27, 2013, 6:48:14 AM3/27/13
to object-or...@googlegroups.com
Hi Dan,

Thank you for your very constructive and helpful feedback :-)

On my Samsung Galaxy, the site works perfectly on Firefox and Opera but has some minor issues with the default browser.

Someone also told me he had issues with the icons on his Nexus 10.

I would love to fix the issues with mobile browsers ASAP, but I don't know of a reliable way to test them without actually buying those devices. Is there any free online service you can recommend for testing mobile that gives accurate results? As I'm using VirtualBox instances for testing IE6 - 8, a VirtualBox based solution would be even better.

Also, I have some difficulty finding good resources on mobile browser specific bugs. Do you know any you can recommend?






Op woensdag 27 maart 2013 11:17:28 UTC+1 schreef Dan het volgende:


Hi John,

I have only looked briefly from my iPhone, but I have to congratulate you - I really like the design, and you have obviously spent a lot of time on the documentation - well done.

I don't wish to be instantly critical, but I did notice a few issues in the responsive layout on my iPhone (iOS 6.1). Please see a couple of images below.

I will look again from a few devices and browsers and look at the code itself, but initially looks good!!

Regards,
Dan





On Wed, Mar 27, 2013 at 8:59 PM, John Slegers <illusi...@gmail.com> wrote:

I like Bootstrap's design and overall feature set, but I don't like its architecture.

With regards to Nicole's OOCSS project it's the other way around. I like her overall architecture but can't say I'm impressed by its design and feature set.

About a week ago, I released Cascade Framework that combines - among other features - an (optional) Bootstrap inspired design and featureset with an OOCSS based architecture. The purpose of Cascade Framework is to be optimal in terms of performance, flexibility, modularity, code bloat, etc.

Any feedback would be appreciated.

--
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-css+unsub...@googlegroups.com.

Kristina Auckland

unread,
Mar 27, 2013, 6:52:11 AM3/27/13
to object-or...@googlegroups.com
Hi John

Have you tried http://opendevicelab.com/ ?

I have Cascade Framework open in a tab to have a play with as soon as I have a few minutes spare. Looks great so far,

Kristina


On 27 Mar 2013, at 10:48, John Slegers <illusi...@gmail.com> wrote:

> Hi Dan,
>
> Thank you for your very constructive and helpful feedback :-)
>
> On my Samsung Galaxy, the site works perfectly on Firefox and Opera but has some minor issues with the default browser.
>
> Someone also told me he had issues with the icons on his Nexus 10.
>
> I would love to fix the issues with mobile browsers ASAP, but I don't know of a reliable way to test them without actually buying those devices. Is there any free online service you can recommend for testing mobile that gives accurate results? As I'm using VirtualBox instances for testing IE6 - 8, a VirtualBox based solution would be even better.
>
> Also, I have some difficulty finding good resources on mobile browser specific bugs. Do you know any you can recommend?
>
>
>
>
>
>
> Op woensdag 27 maart 2013 11:17:28 UTC+1 schreef Dan het volgende:
>
>
> Hi John,
>
> I have only looked briefly from my iPhone, but I have to congratulate you - I really like the design, and you have obviously spent a lot of time on the documentation - well done.
>
> I don't wish to be instantly critical, but I did notice a few issues in the responsive layout on my iPhone (iOS 6.1). Please see a couple of images below.
>
> I will look again from a few devices and browsers and look at the code itself, but initially looks good!!
>
> Regards,
> Dan
>
>
>
>
>
>
> On Wed, Mar 27, 2013 at 8:59 PM, John Slegers <illusi...@gmail.com> wrote:
>
> I like Bootstrap's design and overall feature set, but I don't like its architecture.
>
> With regards to Nicole's OOCSS project it's the other way around. I like her overall architecture but can't say I'm impressed by its design and feature set.
>
> About a week ago, I released Cascade Framework that combines - among other features - an (optional) Bootstrap inspired design and featureset with an OOCSS based architecture. The purpose of Cascade Framework is to be optimal in terms of performance, flexibility, modularity, code bloat, etc.
>
> Any feedback would be appreciated.
>
>
> --
> 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.
>
>
>
>
> --
> 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.

John Slegers

unread,
Mar 27, 2013, 7:10:33 AM3/27/13
to object-or...@googlegroups.com
Hi Kristina,

There's one open device lab with 10 devices in my country, at about an hour driving (traffic problems not included) from home and work.

While it doesn't seem a convenient solution for projects under heavy development, it may be suitable for fixing these mobile browser specific bugs. I will most definitely consider checking them out.

Thanks a lot for your suggestion !

Kind regards,

John Slegers




Op woensdag 27 maart 2013 11:52:11 UTC+1 schreef kaelifa het volgende:
> To unsubscribe from this group and stop receiving emails from it, send an email to object-oriented-css+unsub...@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.
>  
>  
>
>
> --
> 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-css+unsub...@googlegroups.com.

Kristina Auckland

unread,
Mar 27, 2013, 7:23:57 AM3/27/13
to object-or...@googlegroups.com
Hi John

There is also: http://www.browserstack.com/ and http://www.keynotedeviceanywhere.com/

They may be helpful to you?

Good luck
Kristina
> > 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.
> >
> >
> >
> >
> > --
> > 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.
> >
> >
>
>
> --
> 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.

John Slegers

unread,
Mar 27, 2013, 7:44:02 AM3/27/13
to object-or...@googlegroups.com
I'm aware of these services.

Unfortunately, neither of them is free. Until I get some kind of corporate backing for Cascade Framework, paid services are not an option.





Op woensdag 27 maart 2013 12:23:57 UTC+1 schreef kaelifa het volgende:
> > To unsubscribe from this group and stop receiving emails from it, send an email to object-oriented-css+unsub...@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.
> >  
> >  
> >
> >
> > --
> > 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-css+unsub...@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.
> >  
> >  
>
>
> --
> 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-css+unsub...@googlegroups.com.

Micky Hulse

unread,
Mar 27, 2013, 10:43:13 AM3/27/13
to object-or...@googlegroups.com
> Unfortunately, neither of them is free. Until I get some kind of corporate backing for Cascade Framework, paid services are not an option.


For what it's worth, with browser stack the first 30 minutes is free. Plus, if you go to modern.ie, there's a link that gives 3 months of free IE testing.

FYI, browser stack is ~15$/mo. for 1 user. Reasonable, even if you purchase for 1 month and cancel. Worth it, esp. If you're needing to cross-browser/OS test a framework. :)

--
Sent from my mobile device

John Slegers

unread,
Mar 27, 2013, 3:24:49 PM3/27/13
to object-or...@googlegroups.com
Hi Dan,

The bug seems to have been caused by a fixed width header, that caused problems for screen sizes below 410 px.

It should work fine now.

Do let me know if you spot any other bugs :-)




On Wednesday, March 27, 2013 11:17:28 AM UTC+1, Dan wrote:


Hi John,

I have only looked briefly from my iPhone, but I have to congratulate you - I really like the design, and you have obviously spent a lot of time on the documentation - well done.

I don't wish to be instantly critical, but I did notice a few issues in the responsive layout on my iPhone (iOS 6.1). Please see a couple of images below.

I will look again from a few devices and browsers and look at the code itself, but initially looks good!!

Regards,
Dan





On Wed, Mar 27, 2013 at 8:59 PM, John Slegers <illusi...@gmail.com> wrote:

I like Bootstrap's design and overall feature set, but I don't like its architecture.

With regards to Nicole's OOCSS project it's the other way around. I like her overall architecture but can't say I'm impressed by its design and feature set.

About a week ago, I released Cascade Framework that combines - among other features - an (optional) Bootstrap inspired design and featureset with an OOCSS based architecture. The purpose of Cascade Framework is to be optimal in terms of performance, flexibility, modularity, code bloat, etc.

Any feedback would be appreciated.

--
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-css+unsub...@googlegroups.com.

Dan Humphrey

unread,
Mar 27, 2013, 5:41:15 PM3/27/13
to object-or...@googlegroups.com

Hi John, yes, looks great now :)



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

Nicole Sullivan

unread,
Mar 27, 2013, 8:02:56 PM3/27/13
to OOCSS Google Group
People on this thread might be interested in a talk we're having at CSSConf (http://cssconf.com), called "When Bootstrap Attacks" with Pamela Fox. She'll talk about choosing a framework based on her experience upgrading Bootstrap at Coursera.

John & Peter

unread,
Mar 28, 2013, 2:03:38 AM3/28/13
to object-or...@googlegroups.com
John,

The Cascade Framework looks really interesting!  But I was just looking at it on my iPad2 and the page loads miniscule by default (in both portrait & landscape mode, in Safari and in Chrome).  It looked like the attached image... in both browsers, pinch-to-zoom brought the page back to a fully readable size, but changing pages resulted in the small version again.

Hope this info helps you continue to refine your framework... it looks really great!





John Slegers

unread,
Mar 28, 2013, 4:43:12 AM3/28/13
to object-or...@googlegroups.com
Hi John,

I suspect this is related to the way your device handles the viewport meta-tag.

Could you tell me what screen resolution your iPad is using?

It would be great if you could provide a screenshot as well.

Nevertheless, thanks for the useful feedback.

John Slegers

unread,
Mar 28, 2013, 7:29:49 PM3/28/13
to object-or...@googlegroups.com
Hi John,

I fixed the viewport to <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Could you retest and see it if makes a difference?

Kind regards,

John Slegers

John & Peter

unread,
Mar 28, 2013, 8:27:30 PM3/28/13
to object-or...@googlegroups.com
Hi John,

That did the trick!  Looks perfect on my iPad now!  Thanks!

  - John

Sent from our iPad
--
You received this message because you are subscribed to a topic in the Google Groups "Object Oriented CSS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/object-oriented-css/LUiec9X2ZDk/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to object-oriented...@googlegroups.com.

John S

unread,
Mar 29, 2013, 2:27:53 PM3/29/13
to object-or...@googlegroups.com
John,

I tried replying a second time yesterday, but it appears to have been lost...

You may want to consider removing the "maximum-scale=1" option... as that makes it so that the user CAN'T zoom in on the page if they so desire.  While your site seems to have good choices for font-sizes at smaller screen resolutions, etc, I still often find that I want to zoom in on something on the page... and having that option in the meta tag means I can't.

Hope that helps!

 - John

John Slegers

unread,
Mar 30, 2013, 9:21:54 AM3/30/13
to object-or...@googlegroups.com
Hi John,

You're absolutely right.

I adjusted the viewport settings according to your suggestion.

I also improved responsiveness of the header menu in my demo pages. Now, it has a bootstrap style collapse menu.

John S

unread,
Mar 30, 2013, 1:26:09 PM3/30/13
to object-or...@googlegroups.com
Great!  It's looking better every day!  :D

Just re-checked on my iPad (and on my iPhone to see the new responsive menu... looks great!).  Looks great in landscape mode (1024 x 768), but when it's viewed in portrait mode (768 x 1024), the "Download v1.0" button shifts to the upper left, and the main content area looks like it's being restrained to a smaller width than is optimal.  See attached.

Hope this is helpful!

 - John

John Slegers

unread,
Mar 30, 2013, 2:16:50 PM3/30/13
to object-or...@googlegroups.com
I'm glad to read you like the changes.

Do you have any idea if the issue with portrait mode occured between my first and second adjustment of the viewport?







Op zaterdag 30 maart 2013 18:26:09 UTC+1 schreef John S het volgende:

John S

unread,
Mar 30, 2013, 2:20:55 PM3/30/13
to object-or...@googlegroups.com
No... sorry.... I don't.  I'm not even sure I looked at the site in Portrait mode on my iPad before today.  Sorry!

John Slegers

unread,
Mar 30, 2013, 2:27:37 PM3/30/13
to object-or...@googlegroups.com
Can you test whether the issue also occurs with one of the six templates?

The templates do not have the new menu at this point in time. If the issue is in some way related to the new menu, it should not occur with them.



Op zaterdag 30 maart 2013 19:20:55 UTC+1 schreef John S het volgende:

John S

unread,
Mar 30, 2013, 2:56:12 PM3/30/13
to object-or...@googlegroups.com
Just tested and the templates behave correctly on the iPad in portrait & landscape modes… so it looks like it's only the menu on the cascade-framework.com site.

BBunny

unread,
Jul 6, 2013, 7:19:24 PM7/6/13
to object-or...@googlegroups.com
John, I'm majorly impressed with all the work you've done and with the results!

I noticed a few small errors (natch).

1. On this page, I believe the term is "shim," not "shiv." A shiv is a small, homemade dagger used by prison inmates. A shim (in computing) is a workaround. Made me smile, though. 

2. You used "uppercase-header" class here when you meant "datasheet" class.


3. I see that you've applied the "bottom" class to the second UL, but I can't find any styling affected by that class. I looked at the "ul", "li" and "a" elements but found no "bottom" selector used in conjunction with any of them. Did I miss something?

4. There's something interesting going on with the "gradient" or the "button" class. I gave the "button" class a background color and enlarged the page to make it easier to see. Notice that on the first button in the group, the bottom corner, which has a radius of 5px,does not render the same as the corner of the parent element, which has a class of "button-group" that also applies a 5px radius, the effect being that the background color does not fill all the way to the border. (I'm on Chrome 27.0.1453.116. May render differently on other browsers.) I could not find any reason for that anomaly, especially since it only affects the bottom left corner of the group. I'd be interested to know what you find. Actually, now that I look again, I see there's also something (not the same thing) going on with the bottom right corner of the group. It almost looks as if a border of one radius is cutting across a border of another radius, yet the radius on both of those elements is specified as the same 5px.

Anyway, these are all "nits." You've done some great work here. Thanks!


Matthew Browne

unread,
Jul 6, 2013, 7:25:44 PM7/6/13
to object-or...@googlegroups.com
I would echo what BBunny said about this being a very impressive framework, especially for a mostly solo effort thus far.

About the word "shiv" - yes, the word is "shim", but there's also the HTML 5 Shiv. I'm not sure if that's just a play on words by its creator, I just wanted to mention that John isn't the first to use the word "shiv" in this way...

John Slegers

unread,
Jul 8, 2013, 5:54:39 AM7/8/13
to object-or...@googlegroups.com


1. As Matthew pointed out, both "shim" and "shiv" are terms used along with "polyfill" to refer to libraries that add standard behavior to non-standard browsers. The popular project by aFarkas that comes bundled with Cascade Framework is officially called the "The HTML5 Shiv". Hence, my use of the term "shiv" instead of "shim".


2. I'll need to correct that.


3. In Cascade Framework, navigation has 4 orientations : top (default), bottom, left and right. For most navigation elements, top and bottom navigation will be identical. As top navigation is default, that does indeed imply there's no additional markup needed for bottom navigation in those cases.
Bottom navigation does have additional markup in case of tab navigation. The same would be true for hover menus (which I originally indended to include in the framework but decided to leave out of it for various reasons).

John Slegers

unread,
Jul 8, 2013, 5:59:29 AM7/8/13
to object-or...@googlegroups.com
I just realised I forgot to respond to your 4th point.

Considering the rendering is fine for the top corners and the left bottom renders differently from the right bottom, it seems like a minor browser bug rather than a bug in my code. If it were a bug in my code, I'd expect the behavior to be similar for each corner.

I'll be looking into this.

Dan Humphrey

unread,
Jul 8, 2013, 6:12:20 AM7/8/13
to object-or...@googlegroups.com, object-or...@googlegroups.com
The first person I heard refer to the word Shiv was John Resig - instantly questioned by Dean Edwards and later admitted as a mistake by John, the word seems to have stuck and has been used by others since.
Having just googled this again, I found this post by Paul Irish which mentions the history.
My personal preference would be to use the original English language term 'Shim', however, given the uptake of the 'mistake', I would suggest that either term are now mostly accepted. 


--
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.

BBunny

unread,
Jul 8, 2013, 1:52:00 PM7/8/13
to object-or...@googlegroups.com


On Monday, July 8, 2013 2:54:39 AM UTC-7, John Slegers wrote:

1. As Matthew pointed out, both "shim" and "shiv" are terms used along with "polyfill" to refer to libraries that add standard behavior to non-standard browsers. The popular project by aFarkas that comes bundled with Cascade Framework is officially called the "The HTML5 Shiv". Hence, my use of the term "shiv" instead of "shim".

Thanks to you and Dan for the additional info. I had not known what "polyfill" meant, and now I do. 

Bottom navigation does have additional markup in case of tab navigation. The same would be true for hover menus (which I originally indended to include in the framework but decided to leave out of it for various reasons).

 Then I think it would be more useful to explain and demo this class with the tab navigation, because this demo does not show what the class does.


John Slegers

unread,
Jul 15, 2013, 7:03:45 AM7/15/13
to object-or...@googlegroups.com
The documentation definitely can be improved significantly.

I hope to find some time to improve the documentation in the future, but it's not a priority right now. At the moment, my priorities lie with getting more people to know about Cascade Framework and experimenting with SASS in consideration of a possible rewrite of Cascade Framework to SASS.

Dave LaFlam

unread,
Jul 15, 2013, 12:23:21 PM7/15/13
to object-or...@googlegroups.com
I would vote plus one for a .LESS integration. 
Reply all
Reply to author
Forward
0 new messages