Responsive Classes

The Overview

Responsive classes work by prefixing it with the breakpoint. So for example, if you have a padding class like .p-lg for example, and want a .p-sm class for mobile sizes, prefix it with a mob: prefix like this: mob:p-sm

And that's it! I can't include prefixes and pseudo classes for everything because that would generate megabytes of CSS. PostCSS can, but for me SCSS for me is better to write so why not write your own styles? Why does a framework have to handle literally everything? Juet give me enough framework to be useful, we should be able have SOME fun web developing after all.

So that's the idea. Just enough to be useful. Most of the common classes that have to do with the size of things come with these prefixes, and if that's not enough, it's not THAT difficult to add more. It goes a bit beyond editing _variables.scss but it's not too bad. See the Customize section on how that works.

Breakpoints

So let's take a look at these prefixes. Let's start with the breakpoints:

$breakpoints: (
  "_": none,
  "mob": 0,
  // "mob" for mobile
  "tab": 640px,
  // "tab" for tablet
  "scr": 768px,
  // "scr" for screen
  "lg": 1024px // "lg" for large
);

Different designers might like different breakpoints. So change 'em to your design! Changing the keys like mob or tab changes the prefix names. Changing the values changes where the breakpoints happen. Adding adding/subtracting the keys and values changes the number of breakpoints. Just don't change the _ breakpoint because the class generation logic needs that one but go wild with the rest!

So how do they work? I modeled these after how my brain works. tab:-prefixed classes are applied when the breapoint is OVER 640 px. In other words, for Tablet sizes. scr: prefixed classes are applied whne the breakpoint is OVER 768px, for screeen sizes.

A desiner might not like their brekpoints there. Maybe they want their breakpoints in the middle. In my opinion, that's perfectly legit! One advantage to this framework is how straight-forward changing anything is. It's just changing variables!

Max Breakpoints

I also included prefixes for max-tab: which applies the classes up UNTIL the NEXT breakpoint, so max-tab: will be applied vor all values UNDER the scr breakpoint, that is, for everything under 768px.

I don't know your thoughts, but I personally mix the regular and "max" breakpoint classes at will instead of just sticking to one or the other. It's just how my brain works, and sure I've met developers who would be annoyed by that, but as far as I'm concerned it's just like, their opinion man.

Examples

Ok enough dicussion, let's take a look at some Examples. I'll just stick to a few simple ones here, for the basics, see the sidebar for refrences to other properties.

Padding example

If you're on a browser try resizing the screen to see the padding change! On tablet widths or smaller, you will have to deal with closing the sidbar I'm sry (click the magenta 'x' on the top left that appears on those sizes)

So the code for the padding is straight forward:

<div className="center m-lg flex-col">
  <div
    className="center bg-blue radius-md mb-md
      p-sm 
      tab:p-md 
      scr:p-lg 
      lg:p-xl"
  >
    <div className="w-5 h-5 bg-magenta radius-md" />
  </div>
</div>

Here you can see the tab:p-md, scr:p-lg, and lg:p-xl classes applying different paddings to the blue wrapper-div for different screen widths. If you're wondering how the text changes, here is the html for that part:

<p className="display-none max-mob:display-block">Mobile: Small Padding</p>
<p className="display-none tab:display-block scr:display-none">
  Tablet: Med Padding
</p>
<p className="display-none scr:display-block lg:display-none">
  Screen: Large Padding
</p>
<p className="display-none lg:display-block">Large Breakpoint: XL Padding</p>

Remember that if you use these responsive classes this way I made the class names to apply classes to the PREVIOUS breakpoing, so tab applies to everything over the MOBILE breakpoint, ie. everything over 640px or whatever you set it to be. It's just what made sense to me. Hence there's no mob: class if you use them this way becuase it would apply to everything over ZREO pixels (there's no breakpoint smaller than mobile after all) so it wouldn't make much sense, so for those widths you can just use a regular class. In a way, you can say that this framework is "mobile first!" (that was a big buzzword in a particuar era of web development)

However, the mob breapoint DOES have meaning when it comes to max-widths, that is, a max-mob class applies to everything UNDER the mobile breapoint, that is, only up to a maximum width of the mob breakpoint. I don't think it's too weird. Makes sense to me at least haha. You can see this class applied in the paragraphs.

Font Size Example:

Let's wrap up with one example, this time making more use of the max breakpoints. Resize the window if you're on browser between above and below 1024px:

Just like with the non max- prefix breakpoint classes, which have no meaning below the smallest non-zero breapoint, these classes have no meaning for the largest break poitn. i.e. max-tab: goes up to the scr: breakpoint, max-scr: goes up to the lg breakpoint, but max-lg would have no meaning because there are no brealpoints ABOVE that.

Again, it makes sense to me, haha. It's not so bad. I kind of like it. Anyway here's the HTML for this example:

<div className="center m-lg mb-xl flex-col">
  <div className="bg-blue text-white p-md radius-md max-scr:text-md text-xl">
    <p className="display-none max-scr:display-block">
      Screen and below: md font size
    </p>
    <p className="display-none lg:display-block">
      Large Breakpoint: xl font size
    </p>
  </div>
</div>

Like before, I use breakpoints to switch out the text, and I apply a font size to the wrapper div. Since max-x will be overridden by any size bigger, i.e. max-tab will be overridden by max-scr etc, it was tricky to explicitly have more than a couple breakpoints for this font-size example with the max: classes, however, I still think these classes are useful :)

Anyway, see the entries in the sidebar for the classes that are able to have responsive prefixes as well as examples!