XS does not tally up with Bootstrap Docs?

Bug Reports
1

Hi,

I've noticed in version 4 that the grid sizing for XS (360px) does not tally up with the BS4 docs which mention <567px?

How am I able to match up designs created for iphone 6/7/8 (375px) with any of the options in Bootstrap Studio? XS at 360px is still too small. A little confused?

Many thanks

2

Thanks for starting this thread!

There are a whole lot of smartphone sizes out there, and we decided on the 360px width to keep it consistent with Bootstrap 3. The best way to test how things look on actual device resolutions is to start the Preview and open your design on your smartphone, or in Chrome and use device emulation.

Maybe we should enhance the device size switcher in Bootstrap Studio, and add the most popular mobile devices. Also, I think that some kind of free-resize would be useful? Would love to hear your opinion on this.

3

Hi @Martin ,

Maybe we should enhance the device size switcher in Bootstrap Studio, and add the most popular mobile devices. Also, I think that some kind of free-resize would be useful?

Regarding testing sizes in Bootstrap Studio.

It would be nice to have a better responsive testing mode / method or separate module window you could enter directly in the app and test various sizes and orientations simultaneously. It would be beneficial for responsive design, adjusting CSS properties, media queries, etc., during development.

Here are some potential examples for inspiration and feature considerations:

https://sizzy.co/

Sizzy was also going to be released as a standalone app, but the developer got busy teaching React. It was gonna be Electron based like Bootstrap Studio, so perhaps you could adopt the available source code to work directly within BootStrap Studio.

Other examples for inspiration:

Pinegrow Multiple Views - https://www.youtube.com/watch?v=dn5UosAz5bQ ( Occurs in app, while designing )

These Chrome Extensions are similar to the Sizzy concept also:

Emmet Review -- https://chrome.google.com/webstore/detail/emmet-review/epejoicbhllgiimigokgjdoijnpaphdp , its Source Code is also available.

Another based upon Emmet Review -- https://chrome.google.com/webstore/detail/responsive-viewer/ljapjemlolfmfgpaiiajbkgaajhikohl

Here are some good device lists also:

https://material.io/devices/

https://mydevice.io/devices/

https://testcloud.xamarin.com/devices

Etc.,

I think such a feature would provide users a great way to aid in responsive development and testing within BootStrap Studio.

;-)

4

Hi Martin,

Thanks for chiming in. And great job you and your small team are doing with Bootstrap Studio.

Is 360 still consistent with the BS4 specs though?

How would I work with designs I've created in Sketch for iphone (375px) and then recreate them in Bootstrap Studio? This is what I'm trying to understand? I don't know where I should start?

Many thanks

5

First thought, you probably shouldn't design for a specific phone. But that's an opinion.

How about this. Maybe add to the settings of a project in the Advanced section the ability to define device sizing from the defaults the app has setup.

Or, maybe just allow the dimensions to be editable and saved for the project. Either a click on the width portion and type something in or an up and down arrows to adjust the size.

In the thought of views in the app, I thought the Pinegrow Multiple Views would be nice. However, something like that should be a setting as well due to the possibility that some people might not have the screen real estate for it.

Saj

6

@saj

In the thought of views in the app, I thought the Pinegrow Multiple Views would be nice. However, something like that should be a setting as well due to the possibility that some people might not have the screen real estate for it.

In Pinegrow when you add a "new page view" you can then scroll horizontally and vertically as needed as well as scale, this works regardless of how small you make the apps window or a users screen size. Something similar could be done in Bootstrap Studio.

Sizzy works in similar fashion, re-organizing the views and allowing the user to scroll, scale, etc., regardless of window size, so do the other examples. I can't imagine it being a limitation or the inability to do it also in Bootstrap Studio. It's no different than the limitations incurred by users using Bootstrap Studio on a small screen device already concerning real estate.

I think it would be beneficial for users and aid in responsive development, etc.,

7

I must be totally missing something that everyone else is having issues with lol. I have no issues with adding my own media queries with whatever size values I want to use in my custom CSS file. I have done this for years and do it now whenever it's needed. There are just some things that don't comply to the normal size settings and that's when I add those media queries manually. It's a super simple thing that I can't understand why no one ever seems to mention.

  1. Copy the code of the block of CSS you need to emulate.
  2. Adjust or add a media query to the size you need it. It will accept many different varied ways to do this including max, min, etc.

Am I doing something I shouldn't be? It always works, 100% of the time. Never had any media queries cause any issues with anything else so .... I dunno!

8

@jo, we're actually talking about the XS device option (phone icon) that is next to the Options pane. Since BS4 doesn't really have an XS size anymore, it's first break point is at SM <576px. So the Dev picked a phone viewport size of 360px width in order to be consistent with BS3.

We're trying to figure out what would be a good way to represent that XS (phone icon) device dimensions.

Saj