How to Contribute to an Open Source Project

Various Methods for Expanding a Box While Preserving the Border Radius

How Does the Local Algorithm Work? - Whiteboard Friday

Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading Indicator

Using a PostCSS function to automate your responsive workflow

A little while back, you might have bumped into this CSS-Tricks article where I described how a mixin can be used to automate responsive font sizes using RFS. In its latest version, v9, RFS is capable of rescaling any value for value for any CSS property with px or rem units, like margin, padding, border-radius or even box-shadow.

Today, we’ll focus on its PostCSS implementation. First thing to do, is install RFS with npm:

npm install rfs

Next step is to add RFS to the PostCSS plugins list. If you’re using a postcss.config.js file, you can add it to the list of other PostCSS plugins (e.g. Autoprefixer):

module.exports = {
  plugins: [
    require('rfs'),
    require('autoprefixer'),
  ]
}

Once configured, you’ll be able to use the rfs() function wherever you want in your custom CSS. For example, if you want your font sizes to be responsive:

.title {
  font-size: rfs(4rem);
}

...or use it with whatever property you want:

.card {
  background-color: #fff;
  border-radius: rfs(4rem);
  box-shadow: rfs(0 0 2rem rgba(0, 0, 0, .25));
  margin: rfs(2rem);
  max-width: 540px;
  padding: rfs(3rem);
}

The code above will output the following CSS:

.card {
  background-color: #fff;
  border-radius: calc(1.525rem + 3.3vw);
  box-shadow: 0 0 calc(1.325rem + 0.9vw) rgba(0, 0, 0, .25);
  margin: calc(1.325rem + 0.9vw);
  max-width: 540px;
  padding: calc(1.425rem + 2.1vw);
}

@media (min-width: 1200px) {
  .card {
    border-radius: 4rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .25);
    margin: 2rem;
    padding: 3rem;
  }
}

Demo

Here's a Pen that shows how things work. You can resize the demo to see the fluid rescaling in action.

See the Pen
RFS card- PostCSS by Martijn Cuppens (@MartijnCuppens)
on CodePen.

A deeper look at how RFS parses the CSS

The plugin will look for any occurance of the rfs() function in the declaration values and replace the function with a fluid value using the calc() function. After each rule, RFS will generate a media query with some additional CSS that prevents the values from becoming too large.

RFS only converts px and rem values in a declaration; all other values (e.g. em values, numbers or colors) will be ignored. The function can also be used multiple times in a declaration, like this:

box-shadow: 0 rfs(2rem) rfs(1.5rem) rgba(0, 0, 255, .6)

RFS and custom properties

:root {
  --title-font-size: rfs(2.125rem);
  --card-padding: rfs(3rem);
  --card-margin: rfs(2rem);
  --card-border-radius: rfs(4rem);
  --card-box-shadow: rfs(0 0 2rem rgba(0, 0, 0, .25));
}

These variables can be used in your CSS later on.

.card {
  max-width: 540px;
  padding: var(--card-padding);
  margin: var(--card-margin);
  background-color: #fff;
  box-shadow: var(--card-box-shadow);
  border-radius: var(--card-border-radius);
}

---

Hopefully you find these updates useful in your work. Leave a comment if you have any questions or feedback!

The post Using a PostCSS function to automate your responsive workflow appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/310Casq
via IFTTT

Learn Design for Developers and SVG Animation with Sarah Drasner ✨💖

(This is a sponsored post.)

Hey, Marc here from Frontend Masters — excited to support CSS-Tricks ❤️!

Have you checked out Sarah Drasner's courses yet? She has two awesome courses on Design for Developers and SVG! Plus another introducing Vue.js!

Design for Developers

In the Design for Developers course, you’ll learn to become self-sufficient throughout the entire lifecycle of the project — from concept to design to implementation!

You’ll learn to...

• Code dynamic layouts and understand the principles of composition.
• Select the typography that compliments your design by following simple rules.
• Choose colors palettes, and understand the theories to understand why they work together.
• Know how and when to reach for design tools such as Photoshop or Sketch.
• Use the correct image formats for performance.
• Prototype to quickly communicate your ideas and get your layout up-and-running.

SVG Essentials and Animation

In the SVG Essentials and Animation course, you’ll learn to build and optimize SVG – the scalable graphics format for the web that can achieve impressively small file sizes for fast-loading websites.

You’ll learn to...

• 〰 Create platonic and custom shapes with path commands.
• ⚡️ Optimize SVG to achieve smaller file sizes for performance.
• 💻 Assemble new SVGs with code and graphics programs.
• 🖱 Control complex animations and timelines with user input.
• 💥 Leverage GreenSock’s JavaScript libraries for immersive animation effects.

Introduction to Vue.js

In the Introduction to Vue.js course, you'll get started quickly with the Vue.js JavaScript framework!

You'll learn to...

• Build custom, reusable components and animate them.
• Use props, slots, and scoped styles to create flexible components.
• Grok advanced features like filters and mixins for transforming data.
• Get a single page application up and running fast with the Vue-CLI.
• Work with Vuex to manage the state of larger-scale applications.

This course is for developers with an intermediate knowledge of JavaScript who want to learn how to build and maintain complex applications quickly and efficiently.

You'll love Sarah's awesome courses!

Direct Link to Article — Permalink

The post Learn Design for Developers and SVG Animation with Sarah Drasner ✨💖 appeared first on CSS-Tricks.

from CSS-Tricks https://synd.co/2ZoJVGI
via IFTTT

Multiline truncated text with “show more” button

Now that we've got cross-browser support for the line-clamp property, I expect we'll see a lot more of that around the web. And as we start to see it more in use, it’s worth the reminder that: Truncation is not a content strategy.

We should at least offer a way to read that that truncated content, right? Paul Bakaus uses the checkbox hack and some other trickery to add a functional button that does exactly that.

See the Pen
truncated text w/ more button (CSS only, with optional JS helper) by Paul Bakaus (@pbakaus)
on CodePen.

Direct Link to Article — Permalink

The post Multiline truncated text with “show more” button appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/31KKMmV
via IFTTT