Cwicly / Tailwind breakpoint differences

Fixed Bugs
41

Technically you can set the base breakpoint to whichever one you choose. There are some considerations and best practices.

The reason “lg” is usually chosen as the desktop base breakpoint is because it reflects the most commonly used desktop resolution and therefore you can start there and work outwards in both directions.

With mobile-first it’s usually very similar on the smallest sizes until about “md”, so it makes sense to have the base as the first (smallest) breakpoint.

There is no right or wrong approach and there are many different opinions and reasoning for which is better, the most important thing is that it works for you.

One advantage I find with mobile-first from a development perspective is that on mobile resolutions blocks are usually stacked in a lot of cases, which is the default, so it can lead to less overridden styles.

One disadvantage is that clients and non-technical editors may find it unintuitive if they are used to looking and thinking about it from a desktop perspective.

Exactly, this is precisely the reason I proposed this feature, because then clients don’t need to think about which breakpoint they are on when editing.

1 Like
42

Ok so I have created on of my pages using mobile first… but I realize that I really need to start with desktop for my site… so if i change to large now, what will happen to the existing page that i have set up with mobile firs?

43

What are your considerations regarding this?

44

Hey, i am not exactly sure what you are asking me. But if you are asking why i need to start with desktop over mobile. I guess I prefer starting with desktop design as it’s more complex. The intricate parts of the design are on the desktop, and I find it simpler to simplify for mobile than to expand a minimal design for desktop. My background in graphic design and not web design and my brain just doesn’t work backwards like that I need to see the full desktop design first. I cant “imagine” what it will be and then design for it. I need to lay it out, try different things etc… Does that make sense?

45

I understand. One way to visualise it is, all container type blocks (div, section, header, footer, etc) stack on top of each other by default if you don’t do any styling at all.

So, on mobile depending on the design, most of the time there isn’t much actual layout required.

When you get to the md breakpoint, this usually acts a bit more like desktop in that there may be multiple columns within certain sections.

So any areas that require columns you can most likely start with 1 column on mobile (base breakpoint and upwards), 2/3 columns on tablet (md breakpoint and upwards) and 3/4 columns on desktop (lg breakpoint and upwards).

That is a simplification but does apply to a large amount of site content, especially archives, galleries or post grids.

If you are thinking about more complex designs/layouts for the desktop, they can still start with a simple 1 column stack of blocks for mobile most of the time and you can “progressively enhance” them.

One benefit to this approach is, you always have to build the desktop layouts at some point, by starting with the simplest layout on mobile, you don’t have to “simplify” the desktop at all, so it can save a lot of time not needing to override layout styles you have already set, just simply adding more complexity as needed for the desktop layouts to work.

So to summarise, most mobile layouts usually have one column, so you can usually just focus on the global colours and typography for mobile and then start building from md upwards progressively.

As long as you remember to set all inheritable styles on the base breakpoint and work upwards from there, this approach can be very efficient.

46

Anyone who changes the base breakpoint after development has already begun will have to migrate to the base breakpoint any styles they want to be inheritable by the other breakpoints.

47

I think you are right, I am giving it another shot. I can design each section from mobile out… i dont have to design the entire page ini mobile first… that was what was throwing me off… but so far the mobile first approach is indeed more intuitive when creating the pages/sections mobile out at the same time… THank you!!!

1 Like
48

Hey everyone, I have a question:
Do we start working from base upwards? Seems that a margin bottom, mb-4 added on to say, md breakpoint, would have the md:mb-4. However, if I add it in base breakpoint, it would apply to higher breakpoints without the md: just mb-4 throughout the breakpoints.

49

If you use the Tailwind style mobile first breakpoints then yes, you work from base upwards with each higher breakpoint overriding the previous ones.

50

Was there a reason for Cwicly to use a Desktop first approach?
I guess this was a decision made originally before Tailwind integration.
I haven’t encountered much UX mistakes but here it feels like I’m stuck using either min or max but not both.
@Louis is there a reason for preventing users to set @min and @max themselves in a toggle when creating/ editing a new breakpoint?

51

Hey @AnthonyKeller,

I can’t speak for @Louis’s motivations, and I am all for flexibility, on the other hand, the way it currently works is fairly intuitive.

We can already achieve the equivalent of setting both min and max by having the ability to move the Base breakpoint any time we want and the fact that setting a larger width on any other breakpoint automatically adds min and setting a smaller width automatically adds max. This doesn’t add any technical, functional restriction and allows us to cover all use cases with property overrides that I can think of.

Is there something specific you are trying to do that isn’t covered by this or are you just thinking about giving developers as much control as possible?

52

Hello @StrangeTech,
It looks like Louis went for a desktop first as all builders do it that way.
The system in place is fine, intuitive and consistent indeed.
But if you started your Cwicly journey building 50+ blocks with the desktop first approach and then you start to use Tailwind, then you get that “I’m kind of screwed” feeling.

Granted you can always go back and redo everything because a min and a max definitely behave differently and it’s not about where you set the base that will correct it (unless I missed the point completely).

If I stand correct in that, people should definitely be made aware to start right with the proper set of breakpoints.

53

I think I see what you are highlighting, this seems less about min / max and more about the default set of breakpoints.

It is important to make a clear choice of mobile first vs desktop first when you begin any site.

With this in mind, it will definitely be a good idea to add the choice of mobile or desktop first breakpoints in the getting started wizard, as that will ensure users creating a new site start as they mean to go on.

In terms of migrating from desktop to mobile (or vice versa) after you have already started, the breakpoint migration tool in settings is a step in the right direction.

2 Likes