TWIL 2021-01-08

Welcome to TWIL, our weekly series that empowers you with bite-size learning from the dynamic world of software development. In today's post, Frank gives us a stylish tour into responsive web design by unpacking the wonders of the CSS Clamp function. Discover how to achieve fluid typography with minimum effort and maximum elegance, perfecting layout scalability without laborious media queries. Eager for more? Stick around as Katie also dives into the syntactical prowess of !default Variable with Sass to streamline your Styling workflow, making your style sheets as smart and sophisticated as the designs they bring to life. Join us for this installment of TWIL and elevate your coding finesse with these essential styling insights.

CSS Clamp

This week, I learned about the CSS clamp() function, which lets you create flexible and responsive designs with less hassle!

For instance, using font-size: clamp(1rem, 2.5vw, 2rem); ensures that the font size never goes below 1rem or above 2rem, while allowing it to adjust within this range based on the viewport width. This replaces multiple media-queries!

The clamp() function can be applied to any property that accepts a length, frequency, angle, time, percentage, number, or integer.

Oh, and it has full browser support 😎

• https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

Frank Valcarcel

Cofounder, Director of Operations

Sass !default for Variable Assignment

tl;dr

!default functions like ||=, so the variable will only be assigned the given value if it does not have a value set already.

Using this enables easy theming, e.g.,

// Import theme variables
// Import default application styles, including
// Default variables using `!default`
// Application styles using those variables

Example

body { 
  background: $bg; 
  color: $text; 
}

h1 {
  margin: $spacing;
  padding: $spacing;
}

code {
  color: $code;
  letter-spacing: $spacing;
}

Default Styles

// variables are not yet set, so
// !default values are applied
@import 'default';

// theme
$bg: black; 
$text: white; 
$code: violet;
$spacing: 5px;

// default
$bg: white !default; 
$text: black !default; 
$code: red !default;
$spacing: 0 !default;

Themed Styles

@import 'theme';
// variables set in theme unchanged
@import 'default';

References

• https://sass-lang.com/documentation/variables#default-values

• https://thoughtbot.com/blog/sass-default

• https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Katie Linero

Senior Software Engineer