DEV Community: ChristianMay21

Easy CSS Clamp SCSS Mixin

ChristianMay21 — Mon, 31 Jan 2022 01:37:30 +0000

For anyone not familiar with it, it allows you to elegantly set a minimum and maximum size to something, as well as define a function to transition smoothly between them.

Its syntax goes something like this:

font-size: clamp(12px, 2.5vw, 16px);

In a nutshell, this sets the font to be 2.5vw, with a minimum font size of 1 rem and a maximum font size of 2 rem.

So at screen width <= 480 px, the font-size is 12px.
At screen width >= 640 px, the font-size is 16px.
Between 480px and 640 px, it transitions linearly between the two sizes.

Now let's say you wanted to change the threshold for a 12px font from 480px to 400px - it's not very simple, you'd have to do some algebra. Thankfully, Pedro Rodriguez wrote a great post for CSS-Tricks detailing the math involved.

So I took that math and turned it into a SCSS mixin. Here it is:

/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is 
below $min-width, 
$size-at-max-width when page width is above $max-width, 
and linearly scales between the two between $min-width and $max-width*/

@function clamp-calc($min-width, $max-width, $size-at-min-width, $size-at-max-width) {
    $slope: ($size-at-max-width - $size-at-min-width) / ($max-width - $min-width);
    $y-axis-intersection: -1 * $min-width * $slope + $size-at-min-width;
    $return-value: clamp(#{$size-at-min-width}, #{$y-axis-intersection} + #{$slope} * 100vw, #{$size-at-max-width});
    @return $return-value;
}

Using this function, we can rewrite our original CSS snippet:

font-size: clamp-calc(480px, 640px, 12px, 16px);

Which does indeed compile to the same CSS (albeit a bit more verbose):

body {
  font-size: clamp(12px, 0px + 0.025 * 100vw, 16px);
}

Happy styling! Quick note: the function will work with units other than px, but $min-width and $max-width will need to be the same unit, and $size-at-min-width and $size-at-max-width will need to be the same unit.

Regex to match any Bootstrap 4 class

ChristianMay21 — Mon, 24 Jan 2022 16:50:29 +0000

I recently found myself needing to audit all Bootstrap 4 classes in our codebase.

To simplify this process, I constructed a regex string that would match all bootstrap classes, getting the list of classes from this GitHub Gist.

Here's the string:

Top 4 design choices you should make before building a website, according to Refactoring UI

ChristianMay21 — Fri, 29 Oct 2021 00:46:48 +0000

Developer Adam Wathan and designer Steve Schoger are perhaps best known as the minds behind the frontend phenomenon Tailwind CSS. But before they revolutionized the web styling world with their sparkling CSS framework, they did something simpler: they wrote a book.

Refactoring UI: The Book is a masterclass in visual design for the web, designed specifically for frontend web developers. If you're a developer that wants to learn more about design, or build a side project that doesn't look like crap (or default Bootstrap), this is a must-read. It's short - it's only 218 pages with a large font size and tons of pictures - and concise: everything is explained in a simple and to-the-point fashion that doesn't waste a second of your time. Every sentence is its own nugget of wisdom, and you won't have to reread a single one of them.

While much of the content in Refactoring UI will serve well as a quick reference to solve specific design problems - "Why do these paragraphs look kind of weird? Is it the padding? The line height?" - Refactoring UI also outlines a lot of the design decisions you should make up front when designing a site. Decisions that - if you make them early - will save you a whole lot of time down the line and, if you make them late, will be difficult to implement without significant refactoring.

So, in an effort to document those specific decisions - since I'll probably have to make them later - and to share that knowledge for easy reference, I'll be (hopefully) briefly outlining them here.

1. Personality

You might want your website to present a certain sort of personality.

There are three styling choices you should make early on to accomplish this: font, border radius, and colors.

For a refined, professional look:

Use a prominent serif font
Use no border radius on elements
Incorporate 'sophisticated' colors like blacks and golds

For a playful look:

Use a rounded sans serif font
Use a high border radius
Use bright neon colors, like pinks, purples, and light greens

For a neutral look:

Use a neutral sans serif font
Use a medium border radius
Use tried-and-true colors like blue

We'll get into more details about font an colors later.

2. Decide on a set of values for common style properties

For things that use pixel sizes, instead of agonizing over if something is 1px too big or 1px too small, have a good range of pre-selected sizes to choose from.

This goes for things like font size, padding, and element sizes.

A good starting point is a geometric scale - each size is a certain multiplier larger than the previous one, let's say 25% or more.

So for font size, for example you might use a 33% multiplier, giving you 12px, 16px, 24px, 32px - each is 33% larger than its predecessor.

Style properties that you might consider making these systems for include:

Font size
Margin
Padding
Width
Height
Box shadows
Border radius
Border width
Opacity

The geometric approach will apply better to some properties than others - it's just a rule of thumb, and you may need to add a couple of extra sizing options in between the values the geometric scale gives you.

3 Choose your fonts

Yeah, this overlaps with #1. Organizing blog posts is hard.

The number of fonts you'll want will depend on your site and the complexity of its design, but you'll probably want at least 3: one for headings, one for UI, and one for body text.

For each of these fonts, you'll want to choose a font with at least 5 weights - that will give you more flexibility, and some reassurance that whoever created the font put some real thought into it.
When in doubt about what fonts are good, just look at what's most popular on Google Fonts.
Heading fonts should have relatively short lowercase letters (called x-height)
Fonts for UI controls should be a neutral sans-serif, like Helvetica
Body text fonts should generally be serif fonts with relatively tall lowercase letters (large x-height), which will increase legibility.

4. Choose your colors

You need more colors than you think.

There are 3 classes of colors you'll need to choose: Greys, primary colors, and accent colors.

Greys

You generally want 8-10 greys. The darkest should be a very dark grey (not black), and work your way to either pure white or something close to it.
Greys will usually be used for UI components and text

Primary colors

Your site should have one or two primary colors to choose between. You'll want 5-10 shades of each.

Accent colors

You'll also want some accent colors - 5-10 shades of each. The number of accent colors can easily vary from 1 to 10, depending on the complexity of the site.
Some accent colors may serve semantic purposes. For example, a "DELETE" button would likely be red to serve as a warning of destructive potential. A confirmation message might be green to represent something positive. A 'caution' icon might be yellow.

Defining your shades

Every shade of a given color should be defined ahead of time. Here's how you do that.

Pick a base color (the middle shade)
Pick your darkest shade and your lightest shade.
Then, start filling in the gaps - pick the shade between "lightest" and "medium", then the one between "medium" and "darkest", and then fill in the gaps between those.
While picking shades, don't just change the lightness value of the color! Adjust the saturation too - generally saturation should be lowest at 50% lightness, and highest towards the extremes.
For grays, consider not using a "true gray" (0% saturation) - for cooler grays, give them a blue hue (~210). For warmer grays, give them an orange hue (~40). Then, give a bit of saturation (between 10 and 22%).