New RSD2 Project

User 2839879 Photo


Registered User
99 posts

Just started a new blank RSD2 project and a little lost.

1. Previous RSD projects were created desktop down (the way I like it). Now it seems they're mobile up. For example, any changes made on desktop size in RSD1.5 would, by default, influence all other breakpoints. Now it's the other way round (not what I want). How do I reverse this?

2. Do I choose Bootstrap 3/4 or Foundation? What's really the difference?

Any assistance you can provide would be greatly appreciated.
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/
User 2706435 Photo


Ambassador
444 posts

There is no way to reverse it. The frameworks are designed that way, your media queries can generally only go one direction, unless you make custom ones.

There are lots of reason to design mobile up. A few quick ones, mobile use is the fastest growing, and desktop sizes are getting to be open ended.

If you design your site well, you won't need alot of breakpoints anyway, and maybe only a couple for some large text that breaks, or to stop text from getting too big. There are new units that help with typography that have been around for a while, but are finally now considered almost standard - vh, vw, vmin, vmax.

Designing mobile up is not really hard. You can start with alot of screen real estate. The first breakpoints in Foundation or Bootstrap are around 576-768. Just start right underneath it at a tablet size. Whatever you design there, should easily collapse down to the 320px size. From tablet to cell phone, you aren't going to change the sizes of text much. Its a little more challenging in that you may have to start using more min and maz sizes, or use the vw text sizes. A text size in vw automatically scales the font size on the percentage of the width. So, I have some text that does that, and that at one of the built in breakpoints, I just give it a regular text size so it does not get too big. It works well. I have a header text that only needs one breakpoint change at 1024px. Also learn about Flex positioning, especially flex basis. I have a page where I will be using 4 cards/panels. I use the flex basis to change the "flex size" of the cards at the built in breakpoints. So there are some methods to us to reduce the umber of breakpoints used.

By designing mobile first, it really forces you to think about how much junk you really want on your page.

Bootstrap 3/4 are similar to Foundation. Bootstrap has more built in breakpoints than Foundation. The extra breakpoints only really matter for the Framework's built in classes. For instance, I can assign a class to an element that tells it to only appear on small screens, or hide itself on large screens. There are more built in options for peopel that think they might need that. Foundation is already at 6, and Bootstrap is about to "catch up" to Foundation 6.
User 122279 Photo


Senior Advisor
14,651 posts

Bainn, if you really want to make designs using desktop down, and if you still have v1.5, open a blank page (or a theme) in v1.5 and save it. Then open the saved file in RSD2. You won't find any ready made components, but you can create your own.
If you don't have V1.5 any more, look at the site in my signature, the second link. I have a component with a pinterest button there, which is made in RSD1.5. Download it and save it as a theme in RSD2. You can of course remove the pinterest stuff from it, but it will give you a desktop down template to start a new project with.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 10077 Photo


Senior Advisor
1,096 posts

Bainn wrote:
Previous RSD projects were created desktop down (the way I like it). Now it seems they're mobile up. For example, any changes made on desktop size in RSD1.5 would, by default, influence all other breakpoints. Now it's the other way round (not what I want). How do I reverse this?

While you are making the initial design for your site, you can use the Modes drop-down to disable breakpoints. This will allow you to design your site without regard to any breakpoints at all. After you do, then enable breakpoints, move the slider to the smallest breakpoint and begin making changes. It's not the best way to do things, but it may help in making the transition to mobile first.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 2839879 Photo


Registered User
99 posts

Thanks for the input everyone. I really appreciate. Lots of good leads for me to work with. I still like the idea of building desktop down - perhaps this should be an option for the final RSD2. I'll have a think over my options.
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/
User 1869666 Photo


Registered User
229 posts

I've just started a new project in RSD2. Made a couple of pages, step away from the computer and when I returned the slider was gone. I have no way to scale up or down. Any ideas what I did to cause this?
User 122279 Photo


Senior Advisor
14,651 posts

Happened to me too once or twice too. Save the file, close the programme and then reopen it.

And no, no idea what caused it. :o
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 1869666 Photo


Registered User
229 posts

Yes, that's exactly what I did and it's fine now. Should have done that before posting but now it's out there for other people to see the fix.
User 2839879 Photo


Registered User
99 posts

Still would love to know what exactly the difference between Bootstap and Foundation is.
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/
User 379556 Photo


Registered User
1,603 posts

There is a detailed answer at https://www.vermilion.com/responsive-comparison/

Frank

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.