UI Buddy

Components

Learn how to deal with code duplication and keeping your code scalable and maintainable.

Too many classes!

Since UI Buddy is based on a utility-first design approach, it works well with small-scale and one-off projects where there aren't a lot of design elements.

But as a project grows, you'll inevitably find yourself repeating common class combinations to recreate the same component in many different places, across different pages. This is most apparent with small components like buttons, form elements, badges, typography etc.

// A SIMPLE BUTTON ELEMENT
<button class="display:inline-block padding:12px fontSize:14px backgroundColor:red color:white hover:backgroundColor:black"></button>

Keeping a long list of utility classes in sync across many component instances can quickly become a real maintenance burden, so when you start running into painful duplication like this, it's a good idea to extract a component.

Introducing Components

Simply give your element a 'component' attribute and the value given to this attribute will be the name of the component. This will become your single source of truth, and any changes made here will be reflected across the project. Example:

<button component="btn" class="...define your classes here..."></button>

Now everytime you want to use this component, simply use the name you assigned to your component as a class and you're done!

<button class="btn"></button>

Change children styles on parent hover

This principle works with component hierachies as well. You have the power to build a complex component with parent:hover properties assigned to the chlidren components and they will translate into component names as well. Example:

<div component="card" class="parent">
  <button component="card-heading" class="parent-hover:bgc:blue"></button>
  <p component="card-body" class="parent-hover:fsz:24px"></p>
</div>

Now you can reuse this entire component like this:

<div class="card">
  <button class="card-heading"></button>
  <p class="card-body"></p>
</div>

Tags

There are times when you would want to make custom tags. Those coming from a React, JSX background, would be familiar with things like <card></card> or <list></list> which are not standard HTML tags but actually work. With UI Buddy, this is also possible. Similar to defining a component, give your element the attribute of tag instead to make use of your newly created tag. For example:

<div tag="card" class="bgc:#fff p:24px">My card</div>

Use the <card><card/> tag to create a new instance of card by:

<card>My new card</card>

You can make use of the parent > child hover styles using tags as well. For example:

<div tag="card" class="parent">
  <button tag="card-heading" class="parent-hover:bgc:blue"></button>
  <p tag="card-body" class="parent-hover:fsz:24px"></p>
</div>

Reusing the above snippet as follows:

<card>
  <card-heading></card-heading>
  <card-body></card-body>
</card>