TWIL
CSS

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 😎

  • Styling
  • CSS
Frank Valcarcel's profile picture
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

  • Styling
  • Sass
Katie Linero's profile picture
Katie Linero

Senior Software Engineer

Related Posts

August 18, 2024 • Frank Valcarcel

What makes Enterprise Software Development Different?

Enterprise software powers large organizations, handling complex tasks across departments. From robust security to scalability, these solutions face unique challenges. Explore what makes software “enterprise-ready” and how to choose the right development approach for your business.

Image for 'This Week I Learned' blog post featuring tips on managing Git branches including renaming and syncing with remote changes.
October 8, 2019 • Frank Valcarcel

TWIL 2019-10-04

Join us for ‘TWIL,’ where Emily shares innovative Git tips for managing branches with rewritten history. Learn to sync local branches with remote changes and rename them effectively.