Project:Twitter's Bootstrap
Version:7.x-2.x-dev
Component:Miscellaneous
Category:task
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

Just wanted to give a heads up I'm working on creating a theme with version 2.0 of Twitter Bootstrap (2.0 is to be released next week)

Perhaps we can merge it into this page as it nears completion?

Comments

#1

Sounds good. Drop me a line when ready so we can make up a plan.

#2

Subscribing

(Version 2.0 is released!)

#3

I'm really excited to see this project underway, but I saw on another posting that there were licensing conflicts for bundling this framework as a theme for release on Drupal. Is that true?

Thread in reference:
http://drupal.org/node/1276060#comment-5006754

#4

#5

Alright, just read that thread. Great to hear there is a way to work around this. I'll start testing out the theme, and see if there is anywhere I can help out.

Thanks

#6

Is there a sandbox available for the 2.0 branch? I would love to check out any progress.

#7

I'm also interested in knowing if there's any progress. Also, I can dedicate some time to this project if it's needed.

#8

+1 for contribution. If @Docc wants to distribute some work, please let us know!

#9

I made a 2.x branch to get work going. Only change i made is hot linking to the new 2.0 files. So its a mess.
Ill contact adregriffin to see if he has anything to get 2.x going. Nevertheless ill start working on it myself the next days.

Anyone can create patches and post them into the issue queue for now.
For everybody who wants to have access to the repo for development, drop me a line directly.

#10

subscribe

#11

Looking at the Twitter Dev site, it has me wondering if Acquia has possibly already embarked on something like this internally? Or published back to Drupal.org under a different name.

I'm just guessing the Twitter Dev site is using Twitter bootstrap, it may not be...

Example: https://dev.twitter.com/docs/rate-limiting

#12

I'm glad to see this is rolling so fast with Bootstrap 2 and I'm impatient to see results! However, the real thing would be new quality responsive base theme like AdaptiveTheme, Omega, Arctica or Sasson. It is quite hard job having everything under control and specially having those user admin niceties like Arctica.

As a developer, I'm not too much in for such rich settings page but it is nice to have it in UI.

@rob #11: yes, I'm sure they are on Drupal and it is quite boost to see some major player using Drupal. Theme is twitter_common but it is not impossible that is is based on this, however I believe that they developed it themselves.

Please no hot-linking, it is not working now and it is absolutely unstable. The best and cleanest way is to be included in theme itself (easiest) or in Libraries or let us include it but avoid hot linking.

#13

I've been building it from the Framework theme, and requiring the user to download their own version of the bootstrap and copy into the theme folder. I'm also trying to do as few overrides as possible, just adding the appropriate classes with theme functions in the settings.php and in the tpl files.

Ideally, I'm just trying to make some clean tpl files work seamlessly with a vanilla package of Bootstrap. I'll post my progress soon.

#14

Would Panels be supported by this theme?

#15

Same here andregriffin. Creating a good starter theme. Though i hotlink the bootstrap files by default. Wich can then be overridden by the user.
Maybe we can "borrrow" code from each other.
You can find the latest code of this theme in the dev version.

#16

Version:7.x-1.x-dev» 7.x-2.x-dev

I've changed this thread to 7.x-2.x-dev as it seems more appropriate.

I've just emailed Mark Otto http://www.markdotto.com/ that we are trying to build Drupal theme and asked about twitter_common theme used for Drupal site for Twitter developers, if it could be made publicly available and for some help if they are willing to help us build proper theme.

I've seen that andregriffin asked about merging efforts but haven't seen reply from Docc on that idea, have you made some agreement? Framework looks like nice start although main work will be on integrating Bootstrap concept to Drupal inner working and for that to happen, a lot of overriding will be necessary as I see it (please correct me if I'm wrong).

@Docc please be more transparent on what are goals, how will it be achieved and lets' split effort on those interested / capable of giving hand so we can progress more easily toward quality, full functioning theme. I'd like to have tasks assigned to different volunteers, be it coding, testing or QA.

@andregriffin how far did you go with Bootstrap / Framework and can this efforts be merged?

I'd like to join and give a hand however I see that work should be coordinated by you two guys.

Also it should be evaluated if Bootstrap should be subthemed on Framework or live life of its own. I think it should be subthemed and allow base theme to develop independently to allow improvement on base theme with Drupal core and modules CSS and .tpl overrides (like Mothership, BigDaddy) and let it focus on HTML5 while theme based on Bootstrap should focus on its integration in Drupal and other end user niceties as user configurable settings and other niceties like web fonts and other front end helpers or those things could be for third level subtheming like Arctica - Tundra - TouchPro (which by the way have fantastic UI for settings).

#17

Seems to me dev.twitter.com is using a custom theme. Not twitter bootstrap.
Contacted andregriffin to see how he's standing on joining forces.

There a few things to be done right now.

Create helper and theme functions for the twitter bootstrap templates.
Some things cannot be done from the theme. Like creating theme functions for several components. Most important being navigation/dropdowns.
Ive setup a module for that: http://drupal.org/project/twitter_bootstrap_ui
Also nice to be able to use install functions.

If i look at some of the components of bootstrap:

- Navigation
- Forms
- Pager
- Buttons
- Tables
- Labels
....

Then i already get a good idea what is done and what needs to be done.

Create some pre-defined templates.
Where i would like some help with is the bigger picture. The templates itself.
Im going to focus on helper/preprocess/theme functions for now. So if anyone want to create a template based on this let me know.

First thing that needs to be done is to provide a good skeleton/starter template for people to work with. Something like the twitter bootstrap example sites.

There's also the problem of twitter bootstrap requiring a high version of jQuery. 1.7+

#18

@andregriffin Based on your experience with the framework theme + twitter bootstrap, do you think it will make more sense for the twitter_bootstrap theme to be developed as a base theme, or as a sub-theme of framework?

I don't even know if Drupal supports multiple levels of sub-themes, but am wondering about this possibility...

framework (base theme) < twitter_bootstrap (sub-theme) < custom (sub-sub-theme)

Docc says...

First thing that needs to be done is to provide a good skeleton/starter template for people to work with

Maybe the framework theme already supplies that skeleton/starter?

#19

@arnoldbird: subtheming can be n levels deep, as I said in #16, Arctica is base theme that provides HTML5 and responsive design, Tundra is subtheme that adds some features like web fonts, background, slider and drop down menus and TouchPro adds color configuration.

Some may agrue that three levels is too much (remember, you also need your theme on top of that) but reality according to my opinion is not like that. This is good example of layering functionality that Drupal enables and that is the case for this theme if you ask me.

We need some solid HTML5 foundation and I see Framework as good candidate (maybe equally good would be Genesis, BigDaddy, Boron, Mothership or Om). This way we would not have to think about things that others have already thought of and solved (or are solving) well. Whole DRY principle is based on that idea of reusing something.

In this case, I think, we should evaluate which one is the best for merging with Bootstrap as some themes may have layout presumption that interfere with Bootstrap (that is why I omitted AdaptiveTheme or Omega and other responsive base themes).

If I may say, I admire every work and respect what Docc is making for Bootstrap and community. Therefore I did ask about some road map and delegation of activities to others as it is easier to work together under coordination.

I would call Docc to "pick" candidates based on their preference to do some part of job as every fine theme needs a lot of time devoted to it and we all have our day job that brings food to table. Some may test, others may respond to issues, some may write docs, some may write installation profiles and sample content and some may develop other subthemes based on our work.

That would be a win situation for all.

I would suggest to pick a base HTML5 theme (I've done research to pick candidates among Framework, Genesis, BigDaddy, Boron, Mothership or Om), to build Bootstrap as subtheme and allow any other subtheming to occur at third level that will bring more regions, options and features structured just like Arctica, Tundra and TouchPro (I have no affiliation with Sooperthemes but I greatly appreciate the structure and implementation).

I'd like Docc to comment on this one and also I'm ready to do my part. I see that including Framework author andregriffin is good opportunity to have at least that base part solved as he can help connect Framework with Bootstrap as its subtheme (not to mention that it would elevate Framework to that level of AdaptiveTheme and Omega ;)

Docc, andregriffin what do you say?

#20

Hey everyone.

I had suggested using the Framework base tpls because I agree with their overall structure and simplicity of markup (obviously), but I'm not quite sure that twitter_bootstrap should be a subtheme necessarily. The markup requirements of the bootstrap scaffolding, and how I have been developing Framework over the years is not quite compatible. As someone who does very heavy customization for every site I build, I'm not a big fan of the subtheming concept in general, especially for themes that should only be a framework or starting point. I want to just copy the Bootstrap library into the theme folder and directly get into the CSS and markup as needed, which I feel leads to a more direct, controlled, and predictable development process.

One of my other concerns is how Twitter has built their layout examples vs how the majority of Drupal theme developers might want their layouts. For example, I wouldn't particularly place the nav before the header as the default layout (easily altered by just adding the navbar-fixed-top class), and I've already filed an issue about source ordering for sidebars, etc. I'm not sure whose example to follow on this one, Twitter's, or Drupal's.

I've attached the slight progress I've made in integrating with some altered Framework dev tpls, along with some of Docc's work. You'll need to copy over the compiled bootstrap.css and bootstrap-responsive.css into the css directory. Optionally, you can copy the less files into the less directory, and use the LESS CSS Preprocessor module, and make the appropriate change in the .info file. It's also been renamed to just "bootstrap" so that they can be A/B compared.

Anyway, I'm sure we'll be able to come to some consensus about the base markup, integration methods, etc, but this will obviously be a large undertaking, and I would definitely like to merge our efforts.

AttachmentSize
bootstrap.zip 7.7 KB

#21

MacMladen , thank you for your post.

First off, Im a real fan of the framework theme. I use it as a base of most of my projects.
Mostly because its so slick and lightweight. Thats also what im looking for in this theme. In my opinion, themes like Omega are too bloated and too focused on the end user. Im not a fan of (sub)theming in such a way.
Im really looking for a way to give tools to themer's to build a template based on bootstrap in a quick and solid way.

Combining bootstrap with HTML 5 is a good idea. But i don't know about introducing a theme dependancy.
Though if there should be a dependency it should be indeed framework.

So we need Andre on this. Im in favour of combining forces in one way or another.

PS while writing this response i see that Andre posted a reaction aswell. Ill respond to his post tomorrow. Thanks Andre.

Now time for the superbowl ;)

#22

Subscribe and thanks for your efforts guys o/

Btw. jQuery 1.7+ seems to be a real showstopper ( see http://drupal.org/node/1386294 )

#23

have aways loved framework theme - even if i have munged it into something else for my own purposes, so great that you are on this Andre

#24

I just discovered the bootstrap admin theme, Stanley: http://drupal.org/project/stanley. This project currently uses Tao as a base theme, but on the project page it says:

Now that Bootstrap v2 is available I will start investigating the options of moving forward on that. I first want to have a look at alternatives to Tao as a base theme.

It looks like there could be some potential collaboration here. Docc, have you had any discussions with the owner of this project?

#25

Hey bkildow. That looks promising indeed. Ill contact the author to see what his plans are.

#26

I wouldn't go that way. Tao is not even stabilized in Drupal 7, not to mention HTML5.

Stanley is looking for Admin and does not have regions or other things that are relevant for some page building, therefore I see little to no value for Bootstrap based theme.

Even as such, it is not ready neither for the admin theme but I'm also looking into progress of Stanley.

As Docc and andregriffin said, they see no value in layered theme approach, although I do see as layering would enable each layer to develop for itself and that is why I would keep separate Framework from Bootstrap, either for changes in Framework (and overall structure of HTML5 base) or in Bootstrap (as it further evolves and it will). As I said, I even see third layer that would bring some other niceties like richer region support or other elements like richer user configurable options, slider, demo content, etc.

If it will be decided to go composite then there is no point to look on Stanley / Tao as they are separate, and Tao, while being magnificent in old days of D6, Development Seed left it to Phase II which in turn put it in very low priority.

Lack of HTML5 is main reason not to go Tao way (and I do love Tao :) and there also should be some strong Drupal .tpl / css suppression in path for cleaner markup.

#27

Not necessarily. There would be a lot of overlap between the projects, as bootstrap is a package of different components. Regions are just the endpoint.

"Stanley" might be that "third layer" project you are talking about.
So why not bundle efforts to create one solid base theme everybody can use for there own projects. Like Stanley.

I yet have to confirm Andre coming aboard but ill probably let him decide if we are going to use framework as a base theme or not.

Meanwhile ill be grinding away slowly on this project but hoping i have more info soon on those people joining the effort.

#28

So, after all, layered concept is not out of question? ;)

Let's see what will Andre say, however I strongly suggest and vote for layered approach.

#29

Framework, being what it is (just a stripped down collection of tpls and a single well organized CSS file) would seem redundant by being the base of a sub-theme. If it were a very complex theme with lots of functions and styles, that would make sense. However, this Bootstrap project will require different markup all around, yet in total, the markup will not be much more complex than Framework itself.

My vote is to just fork the Framework theme, and build Twitter_Bootstrap as needed using the ideology of Framework. I don't see a reason to make what will essentially be base theme (Bootstrap), as a sub-theme from yet another base theme (Framework). It's a level of complexity that I simply don't see as warranted. Having the two themes independent will allow the markup of each to stay optimally suited to their respective workflow, without compromise on either end. Having me being a part of both projects will obviously lend some similarity and consistency between them, but I would rather work with them in parallel, rather than in serial. Sub-themes of Twitter_Bootstrap will obviously be a different story, as the included markup and styling will be much more comprehensive and complex than Framework ever will be.

A far as the administration theme mentioned above goes, It would be nice to have that work in conjunction with this theme. I am undecided on whether it would be best to keep front-end and administration development modular and independent, or if they should come together as a complete overhaul of the Drupal UI and theme development platform.

#30

I agree with #29... seems to me it's a very reasonable approach.

#31

Just found http://drupal.org/sandbox/rerooting/1429486

Bootstrap on the basis of Omega .. now that would be sweet. You could then just use Omega's responsive grid and patch in bootstrap's grid later on.

#32

Excited to see a base bootstrap theme. Say no to bloat ware :)

#33

@XiaN Vizjereij Not sure how it is implemented, but that is not what we (if I may say) are looking for. Omega is rich theme that is responsive for itself so hooking Bootstrap would mean that one responsiveness should be removed and that is against base idea of both Omega and Bootstrap.

Also Omega is quite rich and have its way more toward end user than being thin (slim) and base for further development.

That is why we are looking into more trimmed HTML5 base than to rich bases like Omega, Adaptive Theme, Arctica or similar.

While main initiator Docc is looking into helper functions, andregriffin is looking into adapting Framework or going from zero based on his experience with Framework. Genesis 7.x-2.x-dev is similar, while Mothership and BigDaddy could be a bit complicated based on fact that they try hard to change core and contributed modules CSS and HTML.

Any progress, andregriffin?

#34

Andregriffin is now a co-maintainer of this module. He will be putting in templates based on framework in the next few days.
So it's not going to be a subtheme of framework but rather be based on the framework code.

Expect the dev to be active, broken and mollested in the next few days/weeks as we are working hard on it :)

#35

Hi guys, I'm the maintainer of the above mentioned Stanley theme. A bootstrap admin theme. Docc contacted me about my plans for Stanley and to see if there is any future in this theme and Stanley working together. Instead of replying him via mail, I'll just throw my thoughts in the group.

At the time I built Stanley I was of aware of this initiative, but there was little to no progress, and a lot of uncertainty on what path to take, so I just wen ahead and created Stanley. I wasn't interested in doing anything on the frontend, I just wanted a usable admin side as I was getting tired of Rubik's quirks. I decided on still using Tao as a base theme because I knew it well, and because I think it has some interesting ideas.

Stanley right now is ok, it's pretty stable, and it's fine-tuned the most popular modules. The reason it's still in alpha is that I want to have the theme work with the libraries API first, before moving on to beta and later to stable. But we've been using the theme now for some weeks on different projects without major problems.

So that's that. Now that we have Bootstrap 2, and after my experiences creating v1 of Stanley, the story is different.

First I wanted to get rid of Tao, either I make Stanley work standlone, or I use a decent base theme. I look into some of the more popular base themes, but they are way to feature rich. I really don't need al these settings. (On the other hand, some settings might be interesting).

Second, I doubt changing Drupal to work with stanley is the right way to go. It's what I've been doing with Stanley and it's what makes this whole development process frustrating because you just won't get it all. It's not just some template files, it's copying over a whole bunch of theme functions just to add a class or a wrapper div. It's stupid, just copying over large chunks of core, while there is fundamentally nothing wrong with the code. Not only that, it's adding and overriding a bunch of javascript as well. Only to discover that all the work you just did to get those silly messages look like bootstraps message doesn't work on that one (core) form or that small contrib module. ALso, the original message has been overridden by your generic message in your theme. So you end up reverting all these changes and copying over the messages css to make it work for drupal. Et voila, it works everywhere.

My point is, you can't get it all. A lot of modules use custom markup and theme functions to accomplish the required page layout, but they do use general accepted drupal classes which magically color their pages.

And now what you really wanted to know (kudos for sticking with me), my current thoughts on the future of Stanley:

- I'm only interested in the admin side. I'm not going to make it easy on you as an end user to use Stanley for your fron end needs, so don't ask.

- I was/am regularly keeping an eye on this project, but it's been a wait and see attitude. My ideal situation is this theme becomes a stable and flexible base theme, without enforcing any structure or layout (similar to Tao, or cores Stark). Based on the discussion, this seems to be the case, so I will gladly help out and build Stanley 2 on top of this.

- Immediately after I released the first alpha of Stanley I was relieved that I got something decent. But I regretted not forking the Bootstrap library and making my own Drupal Twitter Bootstrap library. Making the css match my needs would have been a lot easier than making Drupal match those of Bootstrap. Specially with LESS (although I'm more of a SASS guy).

So there you have it: get a clean source (Framework), fork Twitter Bootstrap and add the Drupal classes to the css declarations, fine tune the remaining theming functions and templates and you're down. Let other developer build sub theme (or provide one or more of your own, ie a simple ui on top of the base).

#36

So there you have it: get a clean source (Framework), fork Twitter Bootstrap and add the Drupal classes to the css declarations, fine tune the remaining theming functions and templates and you're down. Let other developer build sub theme (or provide one or more of your own, ie a simple ui on top of the base).

Sounds like a very good suggestion!

#37

Hey guys, I've started working on a bootstrap starterkit theme as I've got a couple of projects I'd like to use it for coming up soon. I've got most of the elements working except for the fixed navbar and a couple of issues with horizontal form layouts.

I've got the code up here if you'd like to take a look https://github.com/mpezzi/bootstrap

If you guys need any help let me know, I'd be glad to help out!

#38

maybe Docc could give funkym access to put his changes in?

#39

Thanks for all the great work on this theme. I am using it as a base theme for a couple sites, which is the only way I will be able to motivate myself to test and contribute patches. Let me know if there is anything in particular I can help with.

#40

@Funkym -

I've tried to install your theme, I current get this error: on any page one level deep.

Warning: file_get_contents(sites/all/themes/bootstrap2/bootstrap/js/bootstrap.min.js): failed to open stream: No such file or directory in drupal_build_js_cache() (line 4830 of /srv/bindings/10ea04f243814820a76417c4024b9795/code/includes/common.inc).

#41

@stopshinal
I've got similar issues as well when running PHP 5.3. It works well in 5.2...

#42

funkym's version works fine for me. In case you didn't read his README, you need to download the bootstrap.zip (containing js/css/img) from Twitter's Bootstrapt GitHub page (it's linked in funkym's README) and extract it either into the bootstrap theme directory or your sub theme's directory (i.e. [path_to_your_theme]/bootstrap). Then those warnings go away and you should have the theme up and running. Check the theme's settings page, too.

I suggest that you fork the whole bootstrap project from twitter's github page and do all your theme development in LESS, build the files, and put it into directory mentioned above.

[edit]
I also run it on PHP 5.3. @funkym nice work
[/edit]

nobody click here