Skip to main content

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

Almanac

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 by the example above, the writing-mode property changes the orientation of the text and layout flow by 90 degrees. There are two main reason why you’d want to do that.

First, as a design choice, you might want to display … Read article “inline-size”

Article

A Complete Guide to CSS Media Queries

Media queries can modify the appearance (and even behavior) or a website or app based on a matched set of conditions about the user's device, browser or system settings.
Article

Accessible Font Sizing, Explained

The Web Content Accessibility Guidelines (WCAG), an organization that defines standards for web content accessibility, does not specify a minimum font size for the web.

But we know there’s such a thing as text that is too small to be legible, just as text that can be too large to consume. So, how can we make sure our font sizes are accessible? What sort of best practices can we rely on to make for an accessible reading experience?

The answer: … Read article “Accessible Font Sizing, Explained”

Article

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.

Article

5 things CSS developers wish they knew before they started

Una Kravets is absolutely right. In modern CSS development, there are so many things to learn. For someone starting out today, it’s hard to know where to start.

Here is a list of things I wish I had known if I were to start all over again.… Read article “5 things CSS developers wish they knew before they started”

Article

Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First

A month ago I explored the importance of relying on Interaction Media Features to identify the user’s ability to hover over elements or to detect the accuracy of their pointing device, meaning a fine pointer like a mouse or a coarse one like a finger.

But it goes beyond the input devices or the ability to hover; the screen refresh rate, the color of the screen, or the orientation. Making assumptions about these factors based on the width of the … Read article “Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First”