Switch RSD pages from foundation to...

User 2885601 Photo


Registered User
3 posts

Is there a way to easily switch Responsive Site Designer pages created using the Foundation grid to Bootstrap? or visa versa - switching from bootstrap to foundation?

Thanks
Jim Capraro
User 2699991 Photo


Registered User
1,731 posts
Online Now

James Capraro wrote:
Is there a way to easily switch Responsive Site Designer pages created using the Foundation grid to Bootstrap? or visa versa - switching from bootstrap to foundation?

Thanks
Jim Capraro

My guess is no it wouldn't be easy,, the problem being that the classes and also elements & components are not all compatible between Foundation & Bootstrap so at the end of the day it will probably be easier/quicker to start again using whichever wireframe grid you prefer (but maybe someone else has a different idea.)
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com
User 122279 Photo


Senior Advisor
11,403 posts

I think Wayan is right.
Maybe there is some 'glossary' out there, that explains what a bootstrap class translates to in Foundation - or vice versa. That could be quite a useful thing.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 2642157 Photo


Registered User
8 posts

I've got the same question as Jim. Here are my specifics:

I am converting an existing website to a responsive design. I bought Responsive Site Designer and have been learning it as time allows. The results have been terrific and I am very happy with the product. All that I have built thus far has been using the Foundation 6 grid to which my RSD defaults on opening.

Now I am converting the first page on my website that uses a carousel display. Foundation does not have a carousel component, but Bootstrap does. I have started a "test" RSD project with the Bootstrap 4 grid, inserted the Bootstrap carousel component and, after a lot of tweaking of the various classes that the carousel needs, got it all to work. I am thinking that I can just export this Bootstrap page to my server and all will be fine.

Now my question is - is there any problem having some pages built with the Bootstrap 4 grid and others built with the Foundation 6 grid? Off hand, I do not see any problems, but I am also fairly new with these products and know that I do not understand all that is going on behind the scenes. For example, will this cause a problem with Website Insight or Sonar? or Google? More importantly, will it work? Any ideas on this or other possible solutions? Thanks!!!
User 2642157 Photo


Registered User
8 posts

Whew!!! After a lot of trial and error, I did accomplish what I was after. I basically kept my webpages with the Foundation grid, and inserted the Bootstrap's Carousel component into the page where I wanted it. The page is in PHP and HTML so I did not attach an example here as I thought the PHP might be too confusing. This probably will not win any awards for best practices, but it did accomplish what I needed.

The main thing that you would need to watch out for are the CSS's. Foundation and Bootstrap have their CSS's in folders with different names on your server, so that is helpful. You just need to ensure which CSS is being accessed at any specific point in time. I used Chrome's Inspect tool for that purpose.

To answer James Capraro's original question - was this easy? My answer is - doable, but not easy.
User 2699991 Photo


Registered User
1,731 posts
Online Now

Craig Carothers wrote:
Whew!!! After a lot of trial and error, I did accomplish what I was after. I basically kept my webpages with the Foundation grid, and inserted the Bootstrap's Carousel component into the page where I wanted it. The page is in PHP and HTML so I did not attach an example here as I thought the PHP might be too confusing. This probably will not win any awards for best practices, but it did accomplish what I needed.

The main thing that you would need to watch out for are the CSS's. Foundation and Bootstrap have their CSS's in folders with different names on your server, so that is helpful. You just need to ensure which CSS is being accessed at any specific point in time. I used Chrome's Inspect tool for that purpose.

To answer James Capraro's original question - was this easy? My answer is - doable, but not easy.


Oh boy I wish I had seen this post before
the foundation component "Orbit" could have been made to look just like that Bootstrap thing, with half of the bother
So for future reference, if anyone wants to see how to style the "Orbit" component in Foundation, I have a number of videos, & can always make one more specific for your requirements
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com
User 2642157 Photo


Registered User
8 posts

Oh boy I wish I had seen this post before
the foundation component "Orbit" could have been made to look just like that Bootstrap thing, with half of the bother


Ahhhhh. Live an learn. I was going by this page https://www.coffeecup.com/help/articles/bootstrap-and-foundation-component-library-collection/ which states that carousels are N/A in Foundation. Maybe the Coffee Cup team missed, as I did, that the ZURB Foundation calls carousels "image sliders" in their Orbit documentation. The lesson is "always check things out yourself" and "watch for changes in terminology".

Thanks for pointing me to Orbit.
User 2699991 Photo


Registered User
1,731 posts
Online Now

Craig Carothers wrote:
Oh boy I wish I had seen this post before
the foundation component "Orbit" could have been made to look just like that Bootstrap thing, with half of the bother


Ahhhhh. Live an learn. I was going by this page https://www.coffeecup.com/help/articles/bootstrap-and-foundation-component-library-collection/ which states that carousels are N/A in Foundation. Maybe the Coffee Cup team missed, as I did, that the ZURB Foundation calls carousels "image sliders" in their Orbit documentation. The lesson is "always check things out yourself" and "watch for changes in terminology".

Thanks for pointing me to Orbit.

I think the problem may have been that Zurb Foundation stopped supporting the Orbit thingy,,, they later decided to bring it back to life, so now there is support again for Orbit. The only other problem with Orbit is that you cannot get it to Fade between slides (not sure if that will come) However Alter Eagle (a fellow CC forum Guru) has made a step by step tutorial for making a Fading Slide show of your own from scratch. it's a pretty cool component that can be customized very easily looks & works great
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.