Creating a Variable System

Working with globalized variables maybe one of the trickier aspects to any design or code project. It’s sort of like accumulating a collection of a particular collectable, say Pokemon cards. It’s cool that you can collect these cards! I mean, who wouldn’t want an original 1st edition base set Charizard. As your collection grows, without some sort of organization system, say a binder, it may become difficult to find cards you want. The same can be said about variables. It’s not enough to support it as a feature. You also have to encourage or provide a framework for maintaining them.

Advertisement

HStack and VStack in CSS: Exploring UI Layout Patterns

YouTube video of today’s Zoom session

In this zoom session, we explore horizontal and vertical alignment patterns and create highly composable and reusable CSS components – Flex, HStack, and VStack.

We showcase how HStack and VStack can be used to (basically) layout anything within the context of UI. These ideas extend beyond CSS and can be applied in visual design as well as JavaScript powered component libraries.

HStack and VStack have become a core foundation within the G2 Components project.

Source code from this session can be found here: https://github.com/itsjonq/hstack-vstack-css

Creating a Style System

One of the biggest and most important challenges for the G2 Components project was defining and creating the Style system. The Style system is one of the core system that’s responsible for managing and powering the entire UI layer for the library. G2’s styles had a handful of truly unique requirements – Features that are often only subtly addressed or even omitted from existing solutions. For this post, I hope to touch upon some of the important mechanics and considerations for the G2 Style system (without drilling down into the possibly boring nitty gritty details).