bootstrap 3

1,553 views
Skip to first unread message

Niphlod

unread,
Jul 29, 2013, 10:01:47 AM7/29/13
to web...@googlegroups.com
just to inform everybody that 3.0 is coming out http://twitter.github.io/bootstrap/

VP

unread,
Jul 29, 2013, 2:46:02 PM7/29/13
to web...@googlegroups.com
Can I simply swap with web2py's bootstrap files , expecting no technical glitches?

Niphlod

unread,
Jul 29, 2013, 3:03:11 PM7/29/13
to web...@googlegroups.com
try it and report any findings: I didn't tried it yet. Anyway, bootstrap is not "part of web2py". I assume that with the final release of bootstrap 3 someone will present an "adjusted" welcome application that embeds it.

Massimo Di Pierro

unread,
Jul 29, 2013, 5:09:13 PM7/29/13
to web...@googlegroups.com
+1

samuel bonilla

unread,
Jul 30, 2013, 5:52:41 PM7/30/13
to web...@googlegroups.com
graet.... i like use http://getbootstrap.com and http://foundation.zurb.com/ on web2py

VP

unread,
Jul 31, 2013, 11:57:24 AM7/31/13
to
not quite compatible with web2py yet.  Navbar are all messed up.  Possibly other things as well.

I think no more span-12, span-10, etc.   new syntax is col-lg-12, etc.


Niphlod

unread,
Jul 31, 2013, 3:19:34 PM7/31/13
to web...@googlegroups.com
I think what you meant is "not compatible with the current welcome app". Lots of things changed but all changes are documented pretty well. I'd wait for the final release before implementing a new welcome app based on bootstrap 3.

Massimo Di Pierro

unread,
Aug 1, 2013, 3:04:49 AM8/1/13
to web...@googlegroups.com
Why is 3 better than 2 other than the higher number? The buttons do not look as nice.

Niphlod

unread,
Aug 1, 2013, 5:40:50 AM8/1/13
to web...@googlegroups.com
I think the main reason to switch is the "mobile first" redesign (apart from the fact that given the "push" that bootstrap has, several features/plugins/etc will be built around that). On top of that, js plugins have been improved and rewritten to take care of some bugs. I like the improvements over the forms markup, as well to the choice to have one grid system only.

https://github.com/twbs/bootstrap/pull/6342 is the documented changelog.

PS: rounded buttons with a "bevel-like" effect are so 2010 :-P

LightDot

unread,
Aug 2, 2013, 9:18:44 PM8/2/13
to web...@googlegroups.com
I think Niphlod has some valid points. As far as the design goes, I like Bootstrap 2 and 3 both, they are just different. Hm... I do quite like the looks of BS 2, perhaps even more than 3...

As I was starting some of the past web2py projects of mine, I've been constantly saying to myself: "I'll take the time and do a welcome app with Gumby [1] or Foundation [2] first, then go from there..."

And you can guess... there was never time for this. I seem to be in a period when every project is a rush. Anyway, I was trying to say that there are other things out there besides BS, some of the other projects are quite nice.

Regards,
Ales

[1] http://gumbyframework.com/
[2] http://foundation.zurb.com/

HittingSmoke

unread,
Aug 20, 2013, 3:36:04 PM8/20/13
to web...@googlegroups.com
Bootstrap has gone to flat design for its default theme. This is generally the direction web design is taking. It's more sleek and clean out of the box. If people want a raised theme BS 3 offers themes to return to the original design so the new version is more about choice and easier customization, which is especially useful for a framework like web2py.

Richard Vézina

unread,
Aug 20, 2013, 4:07:06 PM8/20/13
to web2py-users
Like flat design better!

BS 3 is just look less like twitter and that a good thing to me...

Richard


--
 
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Paolo Caruccio

unread,
Aug 20, 2013, 4:22:19 PM8/20/13
to web...@googlegroups.com
Unfortunately bs3 has dropped some components used by web2py, for example submenus, has changed many classes and so on. In other words it's a different framework that requires changes in web2py code which - currently-  infringe the backward compatibility. Moreover IE7 and FF3.6 aren't supported anymore. Of course it's possible create customized html layouts based on bs3 but I don't think that web2py can apply for default this new framework.

Anthony

unread,
Aug 20, 2013, 4:34:50 PM8/20/13
to web...@googlegroups.com
On Tuesday, August 20, 2013 1:22:19 PM UTC-7, Paolo Caruccio wrote:
Unfortunately bs3 has dropped some components used by web2py, for example submenus, has changed many classes and so on. In other words it's a different framework that requires changes in web2py code which - currently-  infringe the backward compatibility. Moreover IE7 and FF3.6 aren't supported anymore. Of course it's possible create customized html layouts based on bs3 but I don't think that web2py can apply for default this new framework.

Backward compatibility does not apply to the scaffolding app (it has changed many times in the past) -- when you upgrade, you don't have to upgrade your app (the scaffolding is just a starting point). There is also no hard requirement that the scaffolding layout/CSS must work on all historical versions of IE and FF. Not saying we should switch immediately, but these are not necessarily hard constraints.

Anthony 

Paolo Caruccio

unread,
Aug 20, 2013, 5:01:54 PM8/20/13
to web...@googlegroups.com
Anthony you are right about the scaffolding, But currently, web2py renders forms with formstyle="bootstrap" which have css classes not used anymore in bs3. Therefore we should use jquery to adapt the rendered html but we could see heavy flash of unstyled content phenomenon. Another way is to use the server DOM manipulation in the controller or in the view or lastly modify the web2py code but the latter way infringes the backward compatibility if someone want build application working also on unsupported browsers by using bs2. I'm testing bs3 since rc1 on web2py and this is my conclusion but I could be wrong. 

Niphlod

unread,
Aug 20, 2013, 5:06:34 PM8/20/13
to web...@googlegroups.com
+1 on Anthony and on the fact that having some pretty "maintained-out-of-band kickass layouts" is somewhat missing in web2py.
I'm waiting on the final release to test bs3, but for example the structure of response.menu has been definitely a PITA to work with bs2 and it's going to be even more PITA on bs3.
It's true that welcome hasn't hard constraint, but its also true that probably users will have to rethink to their menu structure before switching to bs3. This is somewhat a "conflict" between what has always been a nested structure in web2py (historical superfish handled it perfectly) and the new "flatty" layouts that favour a streamlined-flatty menu structure, mainly because responsive templates had always some issues displaying them (of course, this is not strictly a bs3 issue, but more of a new "design fashion").
Again, some examples on how to maintain submenus in bs3 are yet on the interwebs (http://bootply.com/71520), but lets put this in kind words.... don't expect to switch the layout from bs2 to bs3 to get instant adaptation.

Niphlod

unread,
Aug 20, 2013, 5:09:57 PM8/20/13
to web...@googlegroups.com
Man, I'm such a clairvoyant!!
This was already brought up to @massimo in the past. I'd go with a new formstyle='bootstrap3' to handle all changes. It's unthinkable to have it otherwise and maintain all things working bs2-->bs3 without heavy FOUC. Don't loose your mind over it ^_^

Anthony

unread,
Aug 20, 2013, 5:15:50 PM8/20/13
to web...@googlegroups.com
On Tuesday, August 20, 2013 2:01:54 PM UTC-7, Paolo Caruccio wrote:
Anthony you are right about the scaffolding, But currently, web2py renders forms with formstyle="bootstrap" which have css classes not used anymore in bs3.

This doesn't mean the scaffolding app has to remain on Bootstrap 2 forever. I'm not sure we should have created a formstyle called "boostrap", though. Instead, we should probably put a formstyle.py in contrib that includes several custom formstyles, including ones for Bootstrap 2 and Bootstrap 3. Then you would do:

from gluon.contrib.formstyle import bootstrap3
form
= SQLFORM(..., formstyle=bootstrap3)

In any case, the current "bootstrap" formstyle can continue to work with Bootstrap 2, and in that sense, it won't break backward compatibility. That doesn't mean the scaffolding app can't change to Bootstrap 3.

Anthony

Niphlod

unread,
Aug 20, 2013, 5:20:51 PM8/20/13
to web...@googlegroups.com
indeed we have ....
https://github.com/web2py/web2py/blob/master/gluon/sqlhtml.py#L760
the external contrib module was exactly what I proposed to @massimo, but by the time we were discussing, a new release was issued (I seem to remember it was around the time of 2.0.x).

LightDot

unread,
Aug 20, 2013, 5:22:30 PM8/20/13
to web...@googlegroups.com
Web2py includes several formstyles even now (table3cols, table2cols, divs, ul and bootstrap). The default formstyle is table3cols, isn't it?

What needs to be done now is to add a new bootstrap3 formstyle. If forms include formstyle=bootstrap, the users will continue to get BS2 classes (as they should), if forms include formstyle=bootstrap3, they'll get BS3 classes.

In hindsight, bootstrap should have been named bootstrap2... but that's probably just me being pedantic.

Regards,
Ales


On Tuesday, August 20, 2013 11:01:54 PM UTC+2, Paolo Caruccio wrote:

Niphlod

unread,
Aug 20, 2013, 5:24:00 PM8/20/13
to web...@googlegroups.com
BTW, a nice thing to have would be a global default formstyle that propagates to all SQLFORM-related serializations.

Paolo Caruccio

unread,
Aug 20, 2013, 5:35:17 PM8/20/13
to web...@googlegroups.com
@Anthony
I never said that the scaffolding can't change, I said that web2py currently can't apply bs3 per default without to change some core code but your and Niphlod solutions have cleared my doubts. In fact I have ready a welcome app founded on bs3 and jQuery 2.0.3.   
@Niphold
Thank you. If I had known it before I would have saved a bit of time. Regarding the navbar with submenus, web2py already managed it before the official adoption by bs2. I used it in my application.

LightDot

unread,
Aug 20, 2013, 5:35:43 PM8/20/13
to web...@googlegroups.com
Using a library from contrib sounds like a good approach and I wish this was done before adding bootstrap. Perhaps it should be done now, for all future formstyles?

Even now, bootstrap is really just covering bootstrap-horizontal (there are other form options within BS).

Regards,
Ales


On Tuesday, August 20, 2013 11:15:50 PM UTC+2, Anthony wrote:

LightDot

unread,
Aug 20, 2013, 5:47:06 PM8/20/13
to web...@googlegroups.com
Am I reading the book correctly? SQLFORM chapter doesn't mention formstyle=bootstrap. I haven't been able to find it mentioned anywhere else in the book either, not even in the section about modifying views.

So, could this be considered an experimental feature and thus moved to a contrib without breaking the backwards compatibility of web2py?

Regards,
Ales

Paolo Caruccio

unread,
Aug 20, 2013, 5:47:58 PM8/20/13
to web...@googlegroups.com
+1 for gluon.contrib.formstyle
We could extend the styles to other interesting frameworks and apply this styles on several web2py components and not only the forms.
Of course, as Niphlod said, we should have a default formstyle also.

HittingSmoke

unread,
Aug 20, 2013, 6:04:15 PM8/20/13
to web...@googlegroups.com
I'm just glad to see this is being looked into. I think BS3 is an improvement over 2. I know it's not just a simple flip of the switch but it would be nice to see "official" support some time in the future.

Anthony

unread,
Aug 20, 2013, 6:30:33 PM8/20/13
to web...@googlegroups.com
On Tuesday, August 20, 2013 2:20:51 PM UTC-7, Niphlod wrote:
indeed we have ....
https://github.com/web2py/web2py/blob/master/gluon/sqlhtml.py#L760
the external contrib module was exactly what I proposed to @massimo, but by the time we were discussing, a new release was issued (I seem to remember it was around the time of 2.0.x).

Yes, I too originally suggested a contrib module: https://code.google.com/p/web2py/issues/detail?id=928#c11. Maybe we should do that now rather than creating a formstyle_bootstrap3 function in sqlhtml.py.

Anthony

Anthony

unread,
Aug 20, 2013, 6:37:03 PM8/20/13
to web...@googlegroups.com
On Tuesday, August 20, 2013 2:35:17 PM UTC-7, Paolo Caruccio wrote:
@Anthony
I never said that the scaffolding can't change, I said that web2py currently can't apply bs3 per default without to change some core code but your and Niphlod solutions have cleared my doubts.

Right. And to be clear, web2py doesn't even use the Bootstrap 2 formstyle by default, which is why there is no backward compatibility issue and we don't have to change any core framework code if we switch to Bootstrap 3. If someone is using the Bootstrap 2 formstyle in a Boostrap 2 app, it will continue to work (but they can't switch the app to Bootstrap 3 while continuing to use the Bootstrap 2 formstyle).

Anthony

Anthony

unread,
Aug 20, 2013, 6:40:14 PM8/20/13
to web...@googlegroups.com
On Tuesday, August 20, 2013 2:24:00 PM UTC-7, Niphlod wrote:
BTW, a nice thing to have would be a global default formstyle that propagates to all SQLFORM-related serializations.

++1

For now, you can do something like:

SQLFORM.formstyles.table3cols = SQLFORM.formstyles.bootstrap

or

SQLFORM.formstyles.table3cols = my_custom_formstyle

SQLFORM.formstyles.table3cols is the default formstyle, so if you overwrite it, you get the new formstyle as the default everywhere.

Anthony

Ricardo Pedroso

unread,
Aug 20, 2013, 8:04:53 PM8/20/13
to web...@googlegroups.com
On Tue, Aug 20, 2013 at 10:15 PM, Anthony <abas...@gmail.com> wrote:


I'm not sure we should have created a formstyle called "boostrap", though. Instead, we should probably put a formstyle.py in contrib that includes several custom formstyles, including ones for Bootstrap 2 and Bootstrap 3. Then you would do:

from gluon.contrib.formstyle import bootstrap3
form
= SQLFORM(..., formstyle=bootstrap3)


I think this should be the way to go.
But it will not be enough, for example, I'm using bootstrap3 with web2py in my personal feed reader/aggregator
(you can check here http://feeds.uni.me/)
and if you go to the register form, the "Verify Password" field doesn't pass through the custom formstyle, we will have
to do some css, js or server side dom manipulation, if we want to style this fields (that feels a little bit hacky, for me).

The custom formstyle that I'm using is this one:

def formstyle_bs3(form, fields):
    ''' bootstrap3 '''
    table = FIELDSET()
    for id, label, controls, help in fields:
        if isinstance(controls, INPUT) and controls['_type'] == 'submit':
            _help = P(help, _class='help-block')
            controls.add_class('btn btn-default')
        elif isinstance(controls, INPUT) and controls['_type'] == 'checkbox':
            _help = P(help, _class='help-block')
            controls = DIV(controls, _class="checkbox")
        elif isinstance(controls, CAT) and isinstance(controls[0], INPUT):
            controls[0].add_class('form-control')
            _help = P(help, _class='help-block')
        else:
            _help = P(help, _class='help-block')
            controls.add_class('form-control')
        table.append(DIV(label, controls, _help, _class="form_group"))
    return table

It's not a complete and generic implementation, it's just for my specific need.


Ricardo




Anthony

unread,
Aug 21, 2013, 1:36:31 AM8/21/13
to web...@googlegroups.com

I'm not sure we should have created a formstyle called "boostrap", though. Instead, we should probably put a formstyle.py in contrib that includes several custom formstyles, including ones for Bootstrap 2 and Bootstrap 3. Then you would do:

from gluon.contrib.formstyle import bootstrap3
form
= SQLFORM(..., formstyle=bootstrap3)


I think this should be the way to go.
But it will not be enough, for example, I'm using bootstrap3 with web2py in my personal feed reader/aggregator
(you can check here http://feeds.uni.me/)
and if you go to the register form, the "Verify Password" field doesn't pass through the custom formstyle, we will have
to do some css, js or server side dom manipulation, if we want to style this fields (that feels a little bit hacky, for me).

Good point. In many places, Auth adds elements to SQLFORM's, and it cannot accommodate custom formstyles in those cases. We should probably re-think how that is handled so any formstyle can be applied to Auth forms.

Anthony 

Sebastián Tromer

unread,
Aug 21, 2013, 8:36:19 PM8/21/13
to web...@googlegroups.com
According to Paul Irish 100% faster paint time with Bootstrap 3

Source: http://www.youtube.com/watch?v=Z1IqzeA3XXg

Michele Comitini

unread,
Aug 23, 2013, 4:22:47 AM8/23/13
to web...@googlegroups.com
IMHO I would be careful in adding support to presentation frameworks inside main web2py distribution.
The scaffolding applications should be a projects on their own.
This way there could be different scaffolding apps targeting different presentation frameworks to choose from.
The one scaffolding app distributed together with web2py would be selected using a criteria of maturity or whatever.
I think web2py community now is large and mature enough and would benefit from this separation.

mic


2013/8/22 Sebastián Tromer <tromers...@gmail.com>

Richard Vézina

unread,
Sep 3, 2013, 9:24:39 AM9/3/13
to web2py-users
+1

Richard

LightDot

unread,
Sep 3, 2013, 9:28:36 AM9/3/13
to web...@googlegroups.com
I agree that this should be moved to contrib, as suggested. Perhaps even before 2.6.x is released.

Like I said earlier, I'd move the existing "bootstrap" too.

Regards

Vinicius Assef

unread,
Sep 3, 2013, 9:58:55 AM9/3/13
to web2py
I Agree.

José Ricardo Borba

unread,
Sep 3, 2013, 10:03:13 AM9/3/13
to web...@googlegroups.com
+1.

Only for put more gas in the fire, more CSS frameworks to develop your own formstyles:

http://usablica.github.io/front-end-frameworks/compare.html

Regards,


2013/9/3 Vinicius Assef <vinic...@gmail.com>

Jason (spot) Brower

unread,
Sep 3, 2013, 11:47:34 PM9/3/13
to web2py-users
I agree.  I work with different designs and systems and the frameworks vary greatly.
It would be nice to just let me select what I want.
Bootstrap 2.x
Bootstrap 3.x
Bare
Sass Based
etc...

Reply all
Reply to author
Forward
0 new messages