Bootstrap Implementation with Joomla - css

Is it possible to implement 100% of bootstrap in joomla without any custom css?

There's this great article about building a theme with Twitter Bootstrap.
http://magazine.joomla.org/issues/issue-aug-2012/item/818-using-the-twitter-bootstrap-framework-to-build-a-responsive-joomla-template-from-scratch

If you are building a new site. Take a look at Joomla 3.0 as it comes with Bootstrap by default (as well as jQuery).

Sure, you can implement Bootstrap without adding any custom CSS< but why would you do that? Bootstrap is not a full blown template or layout. It is a framework used to facilitate creating a template or layout. Even on the Bootstrap examples page they specify that these should be a starting point, not the end product.
http://twitter.github.com/bootstrap/getting-started.html#examples
If you want to create a custom template, it would make sense to start with the started Bootstrap template, adapt it for Joomla, then add the custom CSS and images to make it look good.
It would be a good idea to also look at Joostrap (http://www.joostrap.com/). They have a very nice basic template that we base all of our custom work on.

I have built some templates for Joomla 3.0, Bootstrap in Joomla 3.0 doesn't support all Glyphicons that Twitter Bootstrap supports, so if you want to use the missing icons you will need to add your custom CSS.
If you build a responsive template for Joomla 2.5, there will be a lot of works to do, not only for CSS, default extensions in Joomla 2.5 are not responsive so you may need to override their default layouts.

Related

Migrating Wordpress themes using Bootstrap from 2.3.2 to 3.3.7 (and higher)

I'm set with the migration of several Wordpress themes that use Bootstrap 2.3.2. The choice is to use 3.3.7.
First off, I checked that there are no custom div IDs or classes used in the theme.
I then replaced the 2.3.2 CSS/JS Bootstrap files with the 3.3.7 equivalent files.
The layout was a mess as a result. Images are no longer responsive, and there is obvious viewport overflow in different devices.
I have already noticed that the Wordpress posts and pages use HTML elements with Bootstrap styling directly applied.
Does anyone here have experience with this kind of large scale task? What workflow did you apply to migrate Wordpres themes with Bootstrap from 2.3.2 to 3.3.7 quickly?**
I do not need to change the look and feel.
Have you looked at the migration document here? the migration document highlights all changes to classes and what you need to do. There are also online tools like this one and this tool which you can try.

Joomla and Bootstrap 3

I just developed for a client an html and css template using Bootstrap latest version (3.X).
The client wants now to include the template in Joomla but this CMS works the 2.3 Bootstrap version so I'm having a lot of trouble cause of class missing etc.
Do you guys know a way to include Bootstrap 3 in Joomla without having conflicts etc ?
Thanks a lot for you answer ;)

Using Bootstrap for its scaffolding grid only - without any of the front end html elements

Im developing a custom html / css / js front end from scratch, ie. all the elements are designed and i dont need a front end framework with buttons, headers, layouts etc.
What i do need however is a responsive scaffolding grid (i know i could write this from scratch but why reinvent the wheel) Id like to use bootstraps scaffolding grid system as im familiar with it from other projects ive worked on (where i was using the frameworks design elements).
Is there a simple way to do this, without overriding the css of every element in my custom-styles.css file ?
Download the LESS or SASS source, and compile only the areas you want to include in your project.
Made this Grunt build with only the Bootstrap 3.3.5 grid:
https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid
~10KB minimized.
If you need some other parts from Bootstrap just include them in /src/less/bootstrap.less.
You can use the customize option here
http://getbootstrap.com/customize/
Select just scafolding and responsive utilities.
You might have to change some more stuff because the normalizing css is still included

Bootstrap CSS is overriding the default CSS for Drupal Webforms

So as my title suggests I'm currently working on a Drupal webform. The issue is that since we started using bootstrap for page styling, the webform looks like crap.
We figured out that by removing the CSS files given by bootstrap our form shows the way it's supposed to.
Anyone have a clue on how to fix this issue? Perhaps a setting where we can say that bootstrap can't override anything existing or something?
Thanks in advance
Have you tried loading the Bootstrap files before your main Drupal styles are loaded? If Bootstrap is loaded into the page after your main styles it will override.
Alternatively, you could customize your Bootstrap download to exclude components you would not like included.
http://getbootstrap.com/customize/

Can I have customized versions of boostrap 3 in the same site?

I downloaded a customized version of bootstrap 3 from the web (I changed the number of columns to 7), but my website uses zf2 which comes packaged with bootstrap 3. How can I have a page of my website use this customized version and have the rest of the site use the standard build?
Will I have to do something with LESS? I'm just unsure of how this would work or if it can work at all.
I tagged this with zf2 because that is my specific use case, but this is more a general boostrap, css question.
If you only want ONE page to use it, why not just output the customized Bootstrap CSS files on that one page, and the standard CSS files on everything else?
No, since both versions of bootstrap use the same class names, you can not use multiple instances of bootstrap on the same page.

Resources