Skip to content

Add optional Bootstrap 2 theme #8706

Closed
cvrebert opened this Issue Jul 28, 2013 · 57 comments
@cvrebert
Bootstrap member

I got some degree of confirmation about these plans in passing while conversing with from @mdo, but I think it'd be good to start getting the word out publicly so that all the current users who find the new default "plain" look too "flat"-like (* raises hand *) don't up and rage-quit Bootstrap v3. There are also some decisions about the theme that might be useful to get feedback on.

To reiterate why this isn't the default styling for BS v3, let me quote @mdo in a recent issue:

The intention is to enable easier overrides and customization for folks who treat Bootstrap as a first-step, not an end solution.

The choice was based on pragmatic considerations, not flat-vs-skeuomorphic design ideology (as some seem to have misinterpreted the decision). It's simply that fancy gradients make things harder to further customize heavily compared to plain solid colors.

Caveats:

  • Just getting "plain" v3.0.0 fully polished and out the door is going to take a lot of effort, so it's possible/likely that this theme might not get made until some time after the release of v3.0.0-final.
  • These plans are not finalized. @mdo could change his mind.
@ronlobo
ronlobo commented Jul 28, 2013

Nice 👍

@boulox
boulox commented Jul 28, 2013

+1 to leave plain design with later additional theme

@acelaya
acelaya commented Jul 28, 2013

+1 to the theme. I like v2 buttons style more than v3, but I can understand the reasons why the style has been changed.

@martinhorsky

+1 New buttons are big UI fail for me. It is button or label? At first sight i can distinguish them. Can I click on it or not? I don't know. I am for adding minimalistic gradient to buttons at least.

@ZDroid
@brainbolt

+1 for the theme idea. In general, the default styling in v3 is a step backwards in overall attractiveness.

@Merg1255
Merg1255 commented Aug 1, 2013

this will be a nice addition to the project.

@ronlobo
ronlobo commented Aug 1, 2013

+1 for the new flat design, makes it much easier to customize

@ZDroid
ZDroid commented Aug 1, 2013
@DrWeir
DrWeir commented Aug 1, 2013

Thumbs up on this!

@pietheinstrengholt

+1 for this

@Erve1879
Erve1879 commented Aug 5, 2013

For anyone looking to add button gradients to BS3, this may help make life easier:

http://twitterbootstrap3buttons.w3masters.nl

@eorza
eorza commented Aug 5, 2013

I think BS3's new theme looks good, it's a little flat style. But I think the form input element don't match the main design very well, the focus style on input(textarea) is not very good.

@kingb
kingb commented Aug 7, 2013

I really like the look of Bootstrap 2, but like the new features of Bootstrap 3. I decided to stay with Bootstrap 2 because of this, so it's great to hear you guys are working on bringing back the Bootstrap 2 style as an optional theme!

@clxy
clxy commented Aug 7, 2013

+1 . Or make the theme changing easier.

@cvrebert
Bootstrap member
cvrebert commented Aug 7, 2013

@clxy Have you actually looked at v3's code? It's much easier to theme than v2.

@corbinu corbinu referenced this issue in thomaspark/bootswatch Aug 7, 2013
Closed

Plain of bootstrap3 #105

@clxy
clxy commented Aug 7, 2013

@cvrebert I'm sorry if I mislead you. I'm not saying easier "than v2."
And, "It's much easier to theme than v2" will be loudly and clearly.
Let's cut the superfluous useless parts of "Have you actually..." , Please!

@mindochin

+1 return v2 style button

@juliotaylor

Really, making those buttons look fancy and "3D" is a pretty simple task, especially if you already know how to use the mixins. However I can see the benefit of this for those who download the .css package and create clones of the old BS2 bootstrap docs on their own sites.

If this goes ahead I'd like to see it in the form of a simple LESS file that can be added / removed from bootstrap.less as required.

However I don't see why someone with a passion for v2's approach to style doesn't simply create a new GitHub project for this exact purpose? There must be a few willing collaborators out there who can do this, and then just advertise it on the main Bootstrap site as an add-on (like they've done with the glyphs?)

In fact, couldn't this simply by done via Bootswatch?

just a thought...

p.s. not me, coz I adore the new flatness!

edits: omissions, spelling

@cvrebert
Bootstrap member
cvrebert commented Aug 7, 2013

@clxy: If you have concrete suggestions for changes to make customizing easier, please open an issue for them.

@saas786
saas786 commented Aug 8, 2013

I like the sound of sample themes (additional bootstrap 2 theme, as you say it), @cvrebert. In fact I was planning to achieve something similar for my personal needs, but it will be good if we can collaborate and make a solid base themes. So we can get base foundation from it and build our own specific themes based on that.

So 👍 from @cvrebert .

In fact I was also thinking about sample / base templates (or should I say starter templates) as well. As it will help users quickly move onto their project specific tasks instead of fiddling or learning how to use bootstrap.

What you think?

@juliotaylor

@saas786 I'm pretty sure that's what http://bootswatch.com/ does

@saas786
saas786 commented Aug 8, 2013

@juliotaylor Yes I am aware of that, and I am already using it in 2.* version of bootstrap. But that's not what I am asking for.

I am suggesting there should be a core teams solution regarding this, which shows us how it needs to be done with standard practices and patterns.

@thomaspark is doing a v. good job (I admire his efforts and thankful to him for providing such a nice work). But its not a base solution instead its finalized solution.

Hope you get my point now.

Also I need to clear regarding templates, I am aware of core work

https://github.com/twbs/bootstrap-examples

but its too basic, it needs to be showing some real life templates (maybe bootstrap expo contributors can help with that, so we have working templates ready to be deployed based on some sample themes).

@johnnyshields

+1 👍 for optional BS2 style buttons. The first thing I did when I dl'ed Bootstrap 3 was hack it to use BS2 btns.

@marsuboss

+1 👍

@jodytate

This thread started with "some degree of confirmation" that a Bootstrap 2-ish theme could be in the works at some later date. Since then, has a more clear stance evolved?

I ask because of what @saas786 mentioned, that it could be best to have: "a core teams solution regarding this, which shows us how it needs to be done with standard practices and patterns."

A best-practices solution from the massive Bootstrap community would be preferred over pointers to several separate projects headed in slightly similar directions but with potentially different technologies and not-quite the same goals.

I confess that's a worst-case scenario and if it happens we likely won't end up in Bartertown settling disputes in the Thunderdome, but I'm a fan of standards and Bootstrap has led the way in setting some excellent ones.

@mdo
Bootstrap member
mdo commented Aug 12, 2013

Yes, we are doing the theme.

@alexburner

Hooray for the theme!

Bootstrap first won me over with its beautiful buttons. I would not mind one bit if those juicy clickable little action cherubs became standard UI practice across the web. Especially for more admin/mgmt/backend/tool systems.

I understand Bootstrap is useful naked as a starting place, but I think it also offers a great service as a finalized platform. How else will friendly developers lacking any design savvy be able to churn out semi-usable apps?

@Merg1255

@mdo thanks! :)

@acelaya
acelaya commented Aug 12, 2013

@mdo This is very appreciated!!

@juliotaylor

@alexburner I think you make a good point (allowing devs to have a "ready to go" interface). However I personally think this is the perfect opportunity for the community to start a new project to keep the 2.x buttons going while the core team focus on innovation.

@jconroy
jconroy commented Aug 13, 2013

+1 for the keeping the base stuff fairly simple / easy to maintain and adding in themes

@julzmon
julzmon commented Aug 13, 2013

Yes please keep it simple and any additional theme people want separate.

@nicolasmccurdy

Starting a new separate project just to maintain a Bootstrap 2 theme for Bootstrap 3 seems overcomplicated to me. We don't need another core team to extend this. Bootstrap 3 chose a flat UI primarily so it would be more modular and easier to extend. Another 👍 for having some sort of optional Bootstrap 2 theme for Bootstrap 3.

@tjhorner

👍

@cvrebert
Bootstrap member

(Personal thoughts; not an official twbs statement):
Devs wanting something suitable for immediate deployment are a significant chunk of Bootstrap users; I would hope that we don't wish to leave them behind with v3.
A purely community-maintained theme could leave doubts as to the theme's long-term viability and might not have the same brand visibility.

@juliotaylor

A good point @cvrebert ... here's a thought on the above:

TWBP v3 is perfectly usable for immediate deployment right now; it seems to me this thread is a discussion about one's personal preference for "3D" buttons vs flat buttons.

For example most developers I know, the first thing they did was get rid of TWBP 2.x's nasty "3D" effects, drop shadows and gradients, using a customer reset.less file that killed all those effects, effectively creating a flat version of TWBP, to achieve something like this.

So I am by no means discounting anything you guys are saying and why you'd like to push for some standards in theming, but please let's not confuse personal preference for design style with the actual suitability of TWBP for deployment "out of the box".

@cvrebert
Bootstrap member

Yes, fair point @juliotaylor.
s/Devs/Devs with clients don't want "flat"-like aesthetics/ in my previous comment.

@AlekseyKorzun

Just going to piggy back this thread (I opened #9429).

In my opinion, it's one thing to have flat buttons but another thing when your framework elements look exactly the same due to flattened effect.

There should be a clear distinction between a button and a label out of the box.

  • 2 cents
@alexburner

I'm with @cvrebert on this one, I don't want the "get up and go" aspect of Bootstrap to get lost with this update and I agree a community-driven theme could get lost in the noise (there's already many third-party theme tools for twbs). An official optional "production-ready-ish" theme would be a big plus in my book.

@juliotaylor I agree that flat vs 3D is an ongoing debate, and I don't mean to trigger a whole discussion here, but there is one important point that relates to fast app deployment: 3D buttons are hard to mess up. Flat aesthetic is an emerging coolness, and I love examples like Flat UI, but it takes more care to use flat elements appropriately. Your average Joe user needs to know which is what without wasting cognitive space. Buttons that look like buttons (3D/skeuomorphic) explain themselves immediately, so you can toss them out willy-nilly. This is ideal for developers who want to push an app live without spending much extra energy on design.

I loved Bootstrap 2 because it was already all designed. Everything worked really well together. Gradients were used tastefully and effectively. Bootstrap 3 no longer has that feel of a complete magical thing. Like @AlekseyKorzun mentioned, there are inconsistencies that break usability and wouldn't cut it for a professional app. Flat or not, twbs is no longer effective out of the box.

@tjhorner

@alexburner I'm more of a flat design guy myself, it makes things look a lot simpler. The only thing I don't like about Bootstrap 3 is the lack of the fading in/out colors (same with the GitHub buttons). It just seems more natural like that. And yes, I know it's really simple to do.

.btn{
    transition: background-color .5s;
    -webkit-transition: background-color .5s;
}

But it would be nice if everything just faded in stock Bootstrap, it wouldn't look so... blocky... if you know what I mean.
Well, I don't even use Bootstrap anymore, why am I complaining?

@sddaniels

TWBP v3 is perfectly usable for immediate deployment right now
I respectfully disagree with this.

Your average Joe user needs to know which is what without wasting cognitive space.
Exactly.

Bootstrap V3 may be usable just fine by developers out of the box, but there are going to be a large subset of devs that do no customization. Out of the box, Bootstrap V3 is not usable by end-users (i.e. the people we build sites for) since the buttons lack affordance. This is not an opinion, I'm pretty sure if you do a usability study these would be the results.

Why have bad usability as the default? The extra theme will help, but my personal opinion is that it should be included by default and easily removable back to the flat UI for customization.

@mdo
Bootstrap member
mdo commented Aug 14, 2013

Folks, there's honestly nothing here to debate. The default aesthetic will remain flat and we will provide a theme in v3 that mimics the v2 aesthetic. Still working out the details mind you, but it will happen.

@alexburner

@mdo ...but then we don't get to hear ourselves talk

@AlekseyKorzun

@mdo What about button elements that look exactly like label elements?

What if all elements looked the same? Would the answer still be 'style it if you don't like it' or is that only acceptable if the issue is with two elements?

@mdo
Bootstrap member
mdo commented Aug 16, 2013

@AlekseyKorzun Context, size, and final styling will account for most problems here.

What if all elements looked the same? Would the answer still be 'style it if you don't like it' or is that only acceptable if the issue is with two elements?

Hypotheticals don't help us—every element will never look the same :).

@mdo mdo closed this in f6c151a Aug 18, 2013
@ZDroid
ZDroid commented Aug 18, 2013

Well done. Fine thing for easy migration from BS2 → BS3. 😄

@Merg1255

@mdo the hover color for buttons is a bit different from the original theme. Could you make hovering more color intense? Thanks

@saas786
saas786 commented Aug 19, 2013
@mdo Folks, there's honestly nothing here to debate. The default aesthetic will remain flat and we will provide a theme in v3 that mimics the v2 aesthetic. Still working out the details mind you, but it will happen.

Totally agreed. Folks purpose of having this theme should and I am hoping would be to provide a standard theme which will help us understand how we can customize the "v3 bootstrap" with good practices.

Its not meant to replicate the "v2 bootstrap" theme / skin.

Regarding labels vs buttons being flat and look same, please be a real gentlemen and understand the purpose of having flat skin, core theme tried to simplify the customization process by providing the flat skin so you can easily customize it to match your project specific needs quickly. In "v2 bootstrap" it was hard to override gradients and such for noobs like me.

So don't use default skin as a final product on your projects rather do some customizations.

@cvrebert
Bootstrap member

Its not meant to replicate the "v2 bootstrap" theme / skin.

No, I'm pretty sure that's its explicit purpose.

@mdo
Bootstrap member
mdo commented Aug 19, 2013

All good no matter what, folks. It's added and v3 drops tomorrow. <3

@dharapvj dharapvj referenced this issue in jquery-ui-bootstrap/jquery-ui-bootstrap Aug 19, 2013
Closed

bootstrap 3 is coming #201

@saas786
saas786 commented Aug 22, 2013
@cvrebert No, I'm pretty sure that's its explicit purpose.

I was assuming it was supposed to be a base theme (though will replicate v2 color scheme) but was meant for standard theme for demo purposes (how we should customize the default skin or override it)?
M I right @mdo ????

@juliotaylor

@saas786 why not just keep it super lean and override only the stuff you need? I've been doing that for a very long time now. Less is more.

@InteractiveArts

Hi folks, check out Bootstrap 3.0. latest stable version custom themes(skins) here http://www.bootstraptor.com/bootstrap3 custom theme.less and variables.less files included , also you can find there custom classic bootstrap theme

@boulox
boulox commented Aug 25, 2013

@InteractiveArts you forgot to include that custom NOT free theme or with thousand of link to clik and sign up (didn't bother to go till the end)

@InteractiveArts

yes of course I'm sorry, today will post a link to our free Bootstrap 3.0 themes, thank you!

@cvrebert cvrebert locked and limited conversation to collaborators Jun 14, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Something went wrong with that request. Please try again.