Articles by

Andrés Galante

I am Bootstrap's Core Team member, an Eclipse Foundation Committer and I am currently leading the team that works to improve the developer experience at Auth0. Twitter: @andresgalante

max-inline-size

max-inline-size is a logical property in CSS that defines the maximum width of an element when the writing-mode is horizontal, or the maximum height of the element when the writing-mode is vertical.

.element {
  max-inline-size: 500px;
  writing-mode: vertical-lr;
}
CodePen…

inline-size

inline-size is a logical property that defines the width of an element when the writing-mode is horizontal, or the height of the element when the writing-mode is vertical.

.element {
  inline-size: 700px;
  writing-mode: vertical-lr;
}

As you might have guessed …

(Updated on )
Direct link to the article Theming With Variables: Globals and Locals

Theming With Variables: Globals and Locals

Setting CSS variables to theme a design system can be tricky: if they are too scoped, the system will lose consistency. If they are too global, you lose granularity.

Maybe we can fix both issues. I’d like to try to boil design system variables down to two types: Global and Component variables. Global variables will give us consistency across components. Component variables will give us granularity and isolation. Let me show you how to do it by taking a fairly simple component as an example.