Breakpoints

We utilize breakpoints similarly to Bootstrap. Infact, we just copied it over but we don’t provide xl/xxl.

Explaining Breakpoints

Breakpoints are used to specify when certain behaviors might change.

For containers, they are always 100% wide however they’re padded on the x axis. Each breakpoint will constrain the max-width of the container to prevent it from resizing too much and provide a more consistent layout for you to work with.

For the grid layout, you can option for sizing to change at different breakpoints. You might want to have a column be 12 wide on phones, but only 6 on tablets and desktops.

Root Font Size

The entire layout is control from the root font-size. That is to say:

html { font-size: 12pt; }

When we look at things like header sizing, we’ll use rem units which is just a short way of saying 2 x root font size.

You can leverage breakpoints to scale up or down the full layout of the site using just the root font-size. Generally speaking this ‘just works’.

Justifications

Generally speaking, people design websites for up to 1440p or 2160p. Again, generally speaking, these are the most commonly used resolutions with 2160p slowly taking more traction.

Again, generally speaking, your focus is going to be primarily on mobile design as mobile users constitute the majority of viewers of web pages.

Because we - as developers - are all accommodating the ‘vast majority’, we - cssfw - accomodate the vast majority of use cases.

That said, you’re rarely going to be buildling beyond maybe 1080p. Most websites are not fully screen applications and you’re better off from a readability point of view limiting the max width of the page, and allowing background styling to fill the ‘whitespace’.