J!Bootstrap - Twitter's Bootstrap for Joomla, with Gantry

[Anibal Sanchez]

Hi,

Today, we are publishing J!Bootstrap. The idea is to create a new kind of templates based on Twitter's Bootstrap, managed with Gantry.

http://www.j-bootstrap.com

As Bootstrap is based on JQuery, we've also been working to purge Joomla of the mootools native libraries (pls, check JClean JS plugin); and work with a 100% JQuery Joomla.

If you want to collaborate with us, please check the GitHub repository. We've published: https://github.com/anibalsanchez/jbootstrap/

To show you a demo, you can visit: http://jbootstrap.prieco.com

Also, as a proof of concept, we tested it with JomSocial. It's a social networking component for Joomla, that mainly works with JQuery. And it works almost right out of the box on J!Bootstrap (calendars are not working, since they are based on mootools). http://jbootstrap.prieco.com/index.php?option=com_community&view=frontpage&Itemid=515

Snapshots

Regards,
Anibal

[Artem Valchuk]

Hi,

This template not 960 grids? I'm testing on joomla2.5. I have only at Full screen

Thanks!

2012/3/23 Anibal Sanchez <anibal....@gmail.com>

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to
gantry-framework...@googlegroups.com
To unsubscribe from this group, send email to
gantry-framework-for-j...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

--
With a great respect to you. Valchuk Artem

[Anibal Sanchez]

Hi Artem,

We are working with Gantry's Grid System, 12 columns variant, row-fluid.

Please, let me know if this answer your question.

Thanks,

Anibal

[Artem Valchuk]

Yes, you answered my question. Thank you Anibal

2012/3/24 Anibal Sanchez <anibal....@gmail.com>:

[Artem Valchuk]

If you have any already examples of sites on this
template(jbootstrap), please give me link.

2012/3/24 Artem Valchuk <valchu...@gmail.com>:

[Randy Steel]

This is great! I was looking at bootstrap myself as a project separate from Gantry, but would much rather have them combined. Will be powerful.

-- Randy Steel

[Anibal Sanchez]

Thank you!, Right now, we have only the demo sites; and we are working to develop a web application on this template.

Regards,

Anibal

[CStar]

This is awesome! I was going about trying to do this on my own but failing miserably! I couldn't get the drop downs to work right... have you all successfully gotten drop downs to work? (I see there aren't any on the demo) Also, will the "gantry" framework eventually evolve to be based on Bootstrap? I would love to see a responsive version of Gantry in the future, and since it looks like Bootstrap may be integrated heavily with next version of Joomla! this could be pretty awesome

[Anibal Sanchez]

Hi CStar

What do you mean with "drop downs" ? 

Bootstrap has styling for forms with form-horizontal, control-group, control-label, and controls classes. No additional class is necessary for <select> http://twitter.github.com/bootstrap/base-css.html#forms

Please, let me know if you have a good example for the demo. We've added the basic Sample Forms: http://jbootstrap.prieco.com/index.php?option=com_contact&view=categories&id=0&Itemid=535

About Gantry Backend, I think it's a huge task to migrate it to Bootstratp. Right now, we are only working with the frontend.

Regards,

Anibal

[CStar]

By dropdowns, I meant if on your test site, if I had a menu item under Sample Sites" such as "Submit a Site" or something it would appear in a drop down. I wasn't able to get the dropdowns to work because of the way Bootstrap needed the menu structure to be not matching the way Joomla outputs the menu. Without php knowledge I couldn't get it to work. For example, I think the main problem I encountered was Bootstrap needed a class called "data-toggle" to be applied to parent element for a dropdown, and then needed a <b class="caret"> added to the end of the child list or something like that. It was way over my head :) Just letting you know it may be a potential "problem" but maybe not for a coder such as yourself :)

I love what you have so far! I hope J!Bootstrap grows because I think it would be really cool to use (and more flexible than Gantry) in regards to having a nice fluid grid and responsive layout for phones and tablets.

Good luck with this project!

[CStar]

Also, by that last comment I didn't mean to say anything against Gantry because I LOVE it!! It is an amazing product and  I don't use any other template framework when I need to build a serious website, I just personally have troubles with mobile layouts and feel a bootstrap variation would be great to combat those problems. Just wanted to clarify!

[Anibal Sanchez]

Jeah, Gantry rocks!

[Anibal Sanchez]

I see your point. Eg: Joomla has:

<?php echo $this->form->getInput('title'); ?>

So there's no place to add a new class. Please, check the form to submit s site:

http://jbootstrap.prieco.com/index.php?option=com_weblinks&view=form&layout=edit&Itemid=536

Regards,

Anibal

[Anibal Sanchez]

Today I'm amazed! We've discovered Joomla 3.0, reading "A First Look at the Mobile-Ready Joomla 3.0" !!!

My surprise is doubled since we've been working in the same subject!!!

In March, we've published Jootstrap (renamed from J!Bootstrap, due branding) We've merged Joomla 2.5, Bootstrap, and Gantry as Template Framework.

[Anibal Sanchez]

We've just published a new Jootstrap version (v0.4).

First of all, we’d like to thank you for your feedback for the Jootstrap Project. We are extremely excited with it and are already getting a lot of excellent feedback.

We've implemented a full review based on customer comments, Joomla ux forum and our forum feedback.

These are the improvements:

• Full review
• Update, Bootstrap 2.0.3
• Update, Gantry Framework 3.2.19
• New Feature, Grid System
• -- Fixed Grid
• -- Responsive - Fluid Grid
• Responsive Fluid Grid / Fixed Grid
• New Navbar Top Menu Feature
• New Logo Feature
• Removed, CleanJs Plugin
• Optimized, nested levels
• Optimized, legacy jb-* classes
• Checked Features Tab
• General minor fixes

Demo
jootstrap.prieco.com

JomSocial Demo
jootstrap.prieco.com/index.php?option=co...tpage&Itemid=515

Git
github.com/anibalsanchez/jbootstrap

Please, let me know if you have any question/feedback.

Kind Regards,

Anibal Sanchez 

[Vyatka]

Very good work, Anibal
I'm using K2 on all of my sites
And there is a problem with work K2 on J!Bootstrap
In any item of K2 you have main Image, then you click it, it become modal.
But I see conflict in styles. Image have class .modal and bootstrap too
So when I open my K2 item I see that Image in z-index ~1000 and It over my item text.
How can I fix it?
Sorry for my bad English.

пятница, 23 марта 2012 г., 5:16:24 UTC+4 пользователь Anibal Sanchez написал:

[Anibal Sanchez]

Hi Vyatka,

Nice to hear you've implemented JBootstrap and K2 together! Not a minor achievement.

I guess you have mootools and Bootstrap JQuery living together. So, you have to solve the competing modal issue.

We always try to have one only library working, and align all packages on it. But today It's not realistic.

I think you have to disable one of the modal routines. In Bootstrap, you can disable the bootstrap-modal.js plugin.

Kind Regards,

Anibal