Hello all,
Loving the BricksBuilder so far. I’m building a design system and noticed that Bricks does not yet natively integrate subclasses into its global class system.
For example, if I want to create a primary button class, my CSS might look something like this:
.button {
display: inline-block;
border: 0;
line-height: inherit;
text-decoration: none;
cursor: pointer;
border-radius: 0;
padding: 0.75rem 1.5rem;
border-style: solid;
border-width: 1px;
border-color: #000;
background-color: #000;
color: #fff;
text-align: center;
}
Fine. Bricks handles it just fine. Now, let’s say I want to use a “sub-class” to modify my primary button in order to create a secondary button:
.button.is-secondary {
background-color: transparent;
color: #000;
}
The above CSS tells the browser that the “.is-secondary” class as defined applies specifically to “.button” classes.
This is how it should look:
This would effectively utilize the properties of both classes, but .is-secondary’s color and background-color properties would override those of its parent class .button.
The importance of this cannot be overstated: without sub-classes, whenever I want to modify my button design system, I would have to alter each variation of button individually. If I have 6 variations, I have to redefine all of them every time I want to change any univeral property of them.
WITH subclasses, if I want to add 2px to the border-radius property of the .button class, that change will cascade to the .is-secondary version of the .button class.
