Going from Bootstrap 2 => Bootstrap 3 ... Without Destroying Site Styles - javascript

I inherited a codebase that was using a 2.x version of Bootstrap. Recently I tried upgrading to Bootstrap 3 to fix a bug. It fixed the bug, but now my site is a disaster. Heading tags are bigger but not bold. My drop-downs don't look drop-downs, and my buttons don't look like buttons. And so on.
It seems to me that I have two options:
revert to Bootstrap 2, save my site, and find another way to fix my original problem (but then I'm stuck with 2 forever)
bite the bullet, spend hours comparing old site vs. new site and copying over all the styles from the old bootstrap in to a new bootstrap-fixes.css.
But, given that Bootstrap 3 has been out for awhile, I'm thinking maybe this is a solved problem (with a better solution than either of the above). One idea I had was to use the bootstrap customizer, which let's you override the base bootstrap styles. The only thing is, coming up with all of the customization options to customize Bootstrap 3 properly (ie. to look like Bootstrap 2) is about as much work as creating a bootstrap-fixes.css.
However, the customizer also takes a config.json file, which made me wonder:
Is there any publicly avaiable config.json for generating Bootstrap 3 styles that preserve the relevant Bootstrap 2 styles?
If not, is there any other way to get Bootstrap 3 JS, and some sort of matching CSS file (customized Bootstrap 3 CSS? upgraded Bootstrap 2 CSS? some sort of frankenstein's monster?) that will work with the JS, but not destory my site?
Thanks in advance for any help.

Bootstrap 2 is desktop first (graceful degradation). Bootstrap 3 was written from the ground up as mobile first (progressive enhancement). They are two completely different beasts. You need to re-design your site afresh mobile first with Bootstrap 3.
Here's an official list of what's changed:
Migrating to v3.x
You could try using some kind of automated tool but personally I just wouldn't trust these to get it right.

Related

In TailwindCSS are you expected to write your own JS to make mobile menus work?

I'm new to using TailwindCSS and have come from a Bootstrap (v3, 4 and 5) background.
I've had a read over the Tailwind docs and notice on many sites that are built with it - including the Tailwind website itself - they feature mobile navigation menus with the "hamburger" icon which toggles their visibility depending on the viewport.
In Bootstrap this can be achieved because Bootstrap comes with JavaScript which can be used to render a hamburger icon that toggle a <nav> based on the viewport: https://getbootstrap.com/docs/5.0/components/navbar/#responsive-behaviors
My understanding of Tailwind is that it does not have any equivalent JavaScript and it purely deals with generating CSS. It does this by an npx script running, scanning your templates for classes, and then generating an "output" CSS file as per https://tailwindcss.com/docs/installation. Is this correct, i.e. does Tailwind only deal with the CSS portion of a project and completely omit frontend JavaScript (even though it uses JavaScript itself to do it's work)?
I came across Flowbite. Given I've never used this before I tried what's on https://flowbite.com/docs/components/navbar/ and then got an error saying Collapse wasn't defined after using their example new Collapse(targetEl);. I understand why this is happening, because there's no code in my project which defines Collapse in the first place. My understanding is Flowbite is separate to Tailwind so I'd have to set that up separately in order to get any of this working.
I appreciate Bootstrap and Tailwind have a very different approach, but my question is - in Tailwind is my understanding correct that you'd effectively need to "roll your own" JavaScript (or use a third party framework such as the Flowbite example) in order to make a responsive navigation menu that can be toggled with a hamburger button? If it's possible in pure CSS can somebody point to an example of where this is documented because there's nothing about it in the Tailwind docs as far as I can see.
Is this correct, i.e. does Tailwind only deal with the CSS portion of a project and completely omit frontend JavaScript (even though it uses JavaScript itself to do it's work)?
Yes. Tailwind is a CSS framework only.
you'd effectively need to "roll your own" JavaScript (or use a third party framework such as the Flowbite example) in order to make a responsive navigation menu that can be toggled with a hamburger button?
Yes. Luckily, these days doing something like that could be about as difficult as
document.getElementById("#my-menu").classList.toggle("visible");
but the Tailwind site itself does things a bit differently since it's a Next.js (React) site.

Is it possible to "isolate" my bootstrap .js function from other bootstrap version?

hope someone can help me. I need to add a javascript to multiple websites. And some of this websites have bootstrap, some don't. Some are using bootstrap 3 some 4. And one has also a customised version of bootstrap, where some function are modified.
I'm using bootstrap 4 and with SASS you can set a prefix for the bootstrap.css file. And this works fine. But how can I ensure that my bootstrap version is not overriding another bootstrap?
Is there a way to isolate the bootstrap.js?
Thanks.

WPdatatables in combination with OnePress theme (bootstrap dropdown issue)

I am really struggling with a Wordpress installation with the OnePress theme and use of WPdatatables plugin.
Everything is working flawlessly except for the dropdowns
- number of rows
- Filter by "genre"
There are no console errors whatsoever but the dropdowns are 1) not properly rendered and 2) I see the native dropdown caret and the bootstrap one.
I tried playing with custom css for hours with z-index as I presume this may be the culprit but am losing it right now.
See https://www.concordegand.be/bcweb-bibliotheque/
Does anyone have any pointers for me?
Regards
To answer myself:
Found out that OnePress theme uses Bootstrap 4 Alpha version. I modified core files so it uses Bootstrap 3.3.7 and all works fine now!

Jquery: Swap out HTML partials depending on screen resolution

With the current project I am working on (Using Bootstrap 3), the client has asked for major changes to the structure for mobile views.
I have used Zurb Foundations Interchange in the past: http://foundation.zurb.com/docs/components/interchange.html - Which is just awesome!
I am wondering if anyone has used a bootstrap alternative? Or if you have coded this before, what has been your approach? I'm a little lost in which direction to go on this one. Searching seems to yield little results. I will probably just do this programmatically, but like the idea of JS handling it.
Many thanks
I had to do this for a client and I used the built in Bootstrap visible-xs, invisible-s etc. to end up with several different versions of the page depending on the screen size. It was a bit fiddly but it didn't need any JavaScript and is easy to modify. It's an option at least and as you're already using Bootstrap everything you need is there.

How to create something like jQuery Accordion?

We need to create a FAQ page that has a requirement that clicking the title will open up the answer.
jQuery Accordion popped immediately to mind, and I have spent the last couple of days trying to get that to work with our code.
In short, it can't (at least, not easily) because migrating our version of jquery up from 1.7.1 causes a number of our other controls to break.
All of our controls load from a Template, like the one below:
<?php include(SITE_ROOT.'lib/templates/masterPage.php'); ?>
I could modify masterPage.php to use the latest jquery, but then we would need to stop all of our software department to spend the next few months regression testing. The company is not ready for that.
I have gotten Accordion to work with 1.8.3 and up (see fiddle, but we are locked into 1.7.1 for now.
Is there something else out there that I can use to create this effect besides the latest jQuery?
Is there anything in HTML5? I can use that.
You can create an accordion with HTML 5 and CSS3 see http://www.expression-web-tutorial.com/accordion-menu-tutorial.html
This is a really nice accordion with just plain CSS3, though if you support IE lower than 9, it won't be useful, as it use pseudo classes.
http://tympanus.net/codrops/2012/02/21/accordion-with-css3/
There's also this other one that I remember adapting to my needs on a project I made about a year ago.
http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3
Again, CSS3, IE will cause issues.
You could try another accordion plugin, there 2 that are bundled with the two best frontend frameworks available
I believe foundation 4 may be compatible with your version of jQuery
http://foundation.zurb.com/develop/download-f4.html
http://foundation.zurb.com/docs/components/accordion.html
or
Bootstrap should work too.
http://blog.getbootstrap.com/2013/05/17/bootstrap-2-3-2-released/
http://getbootstrap.com/2.3.2/javascript.html#collapse
^^^ This is an older version of bootstrap, the newest version might be compatible too. might be worth checking if you go down this route as you would want to be on the latest stable release really.
I prefer foundation by miles though
UPDATE
Foundation don't seem to mention that any specific version of jQuery is required and there seems to be people using zurb foundation 5 with jquery 1.1..... and you can just choose the accordion using the customise tab http://foundation.zurb.com/develop/download.html#customizeFoundation

Categories