Responsive forms

[Matthew Browne]

Hi all,
It seems that the OOCSS framework is (sadly) no longer being developed,
but I was hoping someone here could offer some suggestions for
implementing responsive forms. I have been using the forms from the SASS
version of the OOCSS framework, which work great for desktop browsers,
but they're not as responsive as I'd like (in particular, I think there
should be an option for 2-column forms using the labelLeft class to be
laid out using a single column on mobile).

Can anyone suggest a good CSS library for forms that has already been
mobile-optimized? I would probably just use Bootstrap, except I don't
like how you have to declare the column widths on every row...and for
various reasons OOCSS is my favorite forms library. Is there anything
else out there that implements forms very similarly to OOCSS?

BTW to Nicole and other creators of the framework...what are you all up
to these days? Are you still using the OOCSS framework or have you
switched to something else? I'm sure you're still using OOCSS principles
:) ...I'm just asking about the framework.

Thanks,
Matt

[O Lodriguez]

Hi Matt, 

Look at Foundation, Bootstrap or inuit.css. What you are looking for is a flexible grid with good practice on forms. 

Study the work of Harry Roberts.

Cheers, 

Oscar

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

Thanks for the suggestions. I wasn't pleased with Bootstrap for forms (actually Bootstrap 2 was fine; they worsened them in Bootstrap 3 IMO). Foundation seems to have the same drawback as Bootstrap 3, namely that the column widths have to be specified on each row rather than something semantic like "labelLeft", which gives the option to change the width of the whole column at once if needed. Of course I could add such a class to Bootstrap or Foundation, I just thought I'd ask first to see if there's already a framework that does what I want. This seems like a basic DRY principle to me but I guess others aren't bothered by it...

I'll check out inuit.css. It seems it's in a transitional state right now ("A collection of pre-alpha modules to form the new, improved inuitcss") but I'm sure I can at least take inspiration from it and from Harry Roberts' blog.

Thanks again,
Matt

[leban]

Hi Matt,

You might give Pure CSS a look. It's based off of SMACSS which follows a lot of the same principles as OOCSS. 

Inuit.css would be my preferred out of the ones that Oscar mentioned. The Sass is a little easier to follow and it definitely follows OOCSS principles. It does use BEM naming convention, so if that's not your thing, Inuit may not work for you. Check out the repo (not the marketing site) for the source and docs.

Bootstrap would be after Inuit. They at least follow some of the OOCSS/Modular principles. Foundation I am not a fan of. They've gotten better about it in more recent versions, but they still have a tendency to over qualify their selectors needlessly (and I don't personally like having to read chained selectors). Their Sass is very verbose and difficult to follow—perhaps not an issue if you're fluent in Sass. But if they have to have classes to teach you how to use Foundation, then it's not a very usable framework in my book (think usability for devs).

If you have a strong opinion on how responsive forms should be authored and none of the existing frameworks fit your needs, write your own and share it with the community! Surely you're not the only one with those opinions. Always good to break up the homogeny of the big frameworks (plus I'm a big fan of home-brewed over third-party). FWIW ;-) 

Cheers!

—Leban

On Monday, May 4, 2015 at 8:12:15 PM UTC-5, Matthew Browne wrote:

Thanks for the suggestions. I wasn't pleased with Bootstrap for forms (actually Bootstrap 2 was fine; they worsened them in Bootstrap 3 IMO). Foundation seems to have the same drawback as Bootstrap 3, namely that the column widths have to be specified on each row rather than something semantic like "labelLeft", which gives the option to change the width of the whole column at once if needed. Of course I could add such a class to Bootstrap or Foundation, I just thought I'd ask first to see if there's already a framework that does what I want. This seems like a basic DRY principle to me but I guess others aren't bothered by it...

I'll check out inuit.css. It seems it's in a transitional state right now ("A collection of pre-alpha modules to form the new, improved inuitcss") but I'm sure I can at least take inspiration from it and from Harry Roberts' blog.

Thanks again,
Matt

On 5/4/15 8:58 PM, O Lodriguez wrote:

Hi Matt, 

Look at Foundation, Bootstrap or inuit.css. What you are looking for is a flexible grid with good practice on forms. 

Study the work of Harry Roberts.

Cheers, 

Oscar

On 05 May 2015, at 02:39, Matthew Browne <mbro...@gmail.com> wrote:

Hi all,
It seems that the OOCSS framework is (sadly) no longer being developed, but I was hoping someone here could offer some suggestions for implementing responsive forms. I have been using the forms from the SASS version of the OOCSS framework, which work great for desktop browsers, but they're not as responsive as I'd like (in particular, I think there should be an option for 2-column forms using the labelLeft class to be laid out using a single column on mobile).

Can anyone suggest a good CSS library for forms that has already been mobile-optimized? I would probably just use Bootstrap, except I don't like how you have to declare the column widths on every row...and for various reasons OOCSS is my favorite forms library. Is there anything else out there that implements forms very similarly to OOCSS?

BTW to Nicole and other creators of the framework...what are you all up to these days? Are you still using the OOCSS framework or have you switched to something else? I'm sure you're still using OOCSS principles :) ...I'm just asking about the framework.

Thanks,
Matt

--
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.
For more options, visit https://groups.google.com/d/optout.

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

[Nicole Sullivan]

I'm a fan of Bootstrap and Inuit too. I like how configurable bootstrap is for forms, but you are right, for a single site a label style might be more straightforward.

I do add the white space (regular and list) and clearfix utils to bootstrap from OOCSS. It isn't usable without them.

Nicole

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.

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

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

[Matthew Browne]

Thanks, it looks like Pure CSS is what I was looking for! If, after trying it out, I end up using find something else that works better (or roll my own, as you suggested), I'll post back here.

BTW I was impressed with this article on Harry Roberts' blog (which I just discovered thanks to Oscar):
http://csswizardry.com/2013/02/responsive-grid-systems-a-solution/

It looks like the Pure CSS framework follows the principles in that article for its grids...I'll have to compare to see if the inuit.css grids have any advantage over Pure CSS (so far they look pretty similar to me), but at the moment it looks like I may be able to use Pure CSS as my primary framework! :)

Thanks for the recommendations.

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

[Nicole Sullivan]

That's a great article Harry wrote. I do like a grid system that linearizes by default on mobile, it leads to less overides.

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.

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

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

[BBunny]

Also take a look at the forms at Materialize.css. Materialize appears to work in a manner similar to the Inuit system described in Harry's article, and it comes with a lot of nice-looking components and functions if you want them. The sample form does not make the first name and last name fields full-width at small sizes, but adding that responsiveness is as easy as changing the "s6" class on each of the divs surrounding those fields to "s12" and adding the "m6" class to each in order to keep them on the same line on larger screens.  I just tried it in (locally) and it works. Here's how Materialize handles responsiveness: http://materializecss.com/grid.html#grid-responsive 

Let us know what you think.

[Matthew Browne]

Thanks again everyone for the suggestions...

Materialize.css looks great overall. I really like how it has a nice set of components, including Javascript components, making it a complete alternative to Bootstrap. (I like Bootstrap's components, but more options are always good, and I think it's great if a CSS framework comes with it's own components.)

I prefer the pure.css forms due to the issue I mentioned earlier - most of the forms I deal with are relatively simple so I find it redundant to have to use grid width classes on every row. But the grids implementation looks very nice and for anything other than forms, or for more complex forms, I'll definitely be strongly considering Materialize for future projects.

On 5/5/15 2:18 PM, BBunny wrote:

Also take a look at the forms at Materialize.css. Materialize appears to work in a manner similar to the Inuit system described in Harry's article, and it comes with a lot of nice-looking components and functions if you want them. The sample form does not make the first name and last name fields full-width at small sizes, but adding that responsiveness is as easy as changing the "s6" class on each of the divs surrounding those fields to "s12" and adding the "m6" class to each in order to keep them on the same line on larger screens.  I just tried it in (locally) and it works. Here's how Materialize handles responsiveness: http://materializecss.com/grid.html#grid-responsive 

Let us know what you think.

[leban]

I'm glad Pure.css did the trick! We actually borrowed from their form component with my last team. Most of our framework was home-brewed based on SMACSS + BEM, with base design principles from OOCSS. I really liked Pure's idea using a "stacked" class to extend the base styles (which falls in line with my minimalist approach to leveraging defaults and extending as needed).

As you can see, this group is far from dead. Just maybe a little dormant. I think a lot of us have already solved the problems that we used these threads for, so it goes inactive for spells. If you have any other questions, please throw them out there. I think we all enjoy the conversation :-)

Cheers!

On Tuesday, May 5, 2015 at 9:09:53 PM UTC-5, Matthew Browne wrote:

Thanks again everyone for the suggestions...

Materialize.css looks great overall. I really like how it has a nice set of components, including Javascript components, making it a complete alternative to Bootstrap. (I like Bootstrap's components, but more options are always good, and I think it's great if a CSS framework comes with it's own components.)

I prefer the pure.css forms due to the issue I mentioned earlier - most of the forms I deal with are relatively simple so I find it redundant to have to use grid width classes on every row. But the grids implementation looks very nice and for anything other than forms, or for more complex forms, I'll definitely be strongly considering Materialize for future projects.

On 5/5/15 2:18 PM, BBunny wrote:

Also take a look at the forms at Materialize.css. Materialize appears to work in a manner similar to the Inuit system described in Harry's article, and it comes with a lot of nice-looking components and functions if you want them. The sample form does not make the first name and last name fields full-width at small sizes, but adding that responsiveness is as easy as changing the "s6" class on each of the divs surrounding those fields to "s12" and adding the "m6" class to each in order to keep them on the same line on larger screens.  I just tried it in (locally) and it works. Here's how Materialize handles responsiveness: http://materializecss.com/grid.html#grid-responsive 

Let us know what you think.

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

[Matthew Browne]

If you have any other questions, please throw them out there.

Actually I was just about to post this...

I'm wondering, are any of you using flexbox for any of your grids? I realize that browser support is still an issue with flexbox (IE9 only supports an outdated spec and IE8 doesn't support it at all), but for intranet sites and other projects where it's not necessary to reach the largest array of browsers, it seems like it could prove quite useful. Opinions seem to be mixed on whether it's a full alternative to current practices though:

http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/

But I'm still thinking it could be useful to have a flexbox grid framework that follows the principles in Harry Roberts' article. Does such a framework already exist?

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

[Matthew Browne]

As an aside...

React.js seems to be gaining a lot of steam lately. It might be cool to have a style library for the most popular existing react.js components (and/or some new ones) that follows OOCSS principles. There's currently a window of opportunity - React seems to be becoming the de facto interim alternative to web components (and this library makes it more like web components [as I write this, Github is down, so try the link a bit later]).