4 default breakpoints in Blocs?


#1

@Norm, any chance of having you add more breakpoints in Blocs? I ran across an article which mentions Bootcamp having four main default breakpoints. Even one more would be very helpful. See screenshot. Thanks! - Randy06%20PM


#2

I think you’ll have to wait until Blocs 3 comes out. I agree we need this.


#3

That missing breakpoint is for large screens not smaller ones. the next major update to Blocs will run on Bootstrap 4 and will feature the four key breakpoints.


#4

Bootstrap 4 breakpoints:

xs = Extra small <576px
sm = Small ≥576px
md = Medium ≥768px
lg = Large ≥992px
xl = Extra large ≥1200px

Five, what one are you dropping?


#5

Extra large


#6

That’s too bad, you changed your mind since last fall, I asked you

Are you planning on using all 5 device types (4 breakpoints)?


#7

I can add the 1200px+ breakpoint ( personaly I think it’s pointless). Breakpoints for extra large screens just feels unnecessary. All the smaller ones are there.


#8

Yes for those people that are using small screens it might seem pointless. But the large breakpoint sets max-width: 991px inside a container (class=container). Almost anyone on a Full desktop or using an alternate display with a notebook is using at minimum a 21.5-inch monitor (1920px) 27" (2600px) iPad Pro landscape( 1366px). That leaves a lot of space on each side.
I think if it were pointless Bootstrap(Twitter) would have dropped it.


#9

Blocs lets you set the max container in site settings so you can have widths larger than 991px without the need for the larger breakpoints.

The large breakpoint obviously exists in blocs sites, just Blocs doesn’t expose it in app for custom classes and the visibility features.

I’m always trimming fat from the UI hence the reason I don’t include this, however, if folks make enough noise and want the XL desktop breakpoint I’ll add it.


#10

Also I live on a 27” iMac and never a use full screen browser, so I have the screen space but rarely give it to a web browser ( but of course I’m not everyone)


#11

@Norm - FANTASTIC! When do you think the next major update to Blocs may come out? Warm Regards, Randy


#12

@Norm, I develop on an iMac also and test my Blocs projects at full screen, down to as small (narrow) as my browser will allow me. FYI, I typically test on Chrome, but have found that Firefox allows me to go narrower than Chrome. (400px wide min on Chrome - vs - 335px wide on Firefox). My thinking is that while mobile phone use is increasingly becoming the norm, there are still MANY (including myself) who routinely surf the web on my desktop computer. (In my case, an iMac or 24" PC monitor). I feel that for a professional developer, creating websites that look great on ALL devices is mandatory.

I can of course, export my Blocs project as HTML then go in and edit the CSS and add all the breakpoints I want in Adobe Brackets (or any text editor) but the whole point of what I LOVE about Blocs is that it SIMPLIFIES the coding process and - best case scenario - ELIMINATES the need to manually code ANYTHING. At least I hope that’s your end game with Blocs.

Because I routinely find that Blocs cannot - AS YET - do everything I need it to do natively, I am CONSTANTLY updating in Blocs, exporting as HTML, modifying the code in Adobe Brackets, then going through that whole process again and again and again as the website evolves. It’s a major headache. Oh what joy if Blocs were able to do everything natively. Some of my frequent issues are things like not having a photo with captions option (like I do with carousels), z-index (not accessible in Blocs), more/better modification of the header area (the main issue I have problems with is controlling the size/location of the header logo) and find it very time-consuming to modify the nav/sub-nav elements (position, size, etc).

All in all, I’m committed to Blocs and love many of it’s strengths. I see it getting stronger and stronger over time and appreciate all your hard work. I look very much forward to the next update(s)!!!

Warm Regards, Randy