UI Buddy Logo

Build any design,
without writing CSS.

Write HTML intuitively with classes like color:red, textAlign:center and display:flex to build any design directly in your markup, while we take care of the CSS for you!

npm install uibuddy
Get Started

Insanely Fast and Furious!

I was forever looking for ways to make CSS scalable without having to go through a build process over and over again, and with minimal back-and-forth movement between files. With UI Buddy, you can add your rules directly inside your HTML and build on the fly! Making the development process extremely scalable, ridiculously fast, and most importantly, enjoyable :)

Awais Kazmi, the Author of UI Buddy Awais Kazmi Creator of UI Buddy

Speed

Build as you go.

Need to add 24px font size to an element? Simply give it a class of fsz:24px and you're done! Giving it a class of color:red will change its color. Try playing aournd with letterSpacing, lineHeight, and fontWeight etc.

Learn more

Example:

<p class="fsz:24px color:#2980b9"><p/>

Demo:

I'm a paragraph

No Constraints

The entire CSS universe,
at your disposal

(Almost) All the CSS properties are supported, including and not limited to modifying an element's display, colors, spacing, typography, shadows; pretty much everything that is required to create that pixel-perfect design.

Learn more

Example:

<div class="d:flex p:54px"><div/>

Demo:

I'm a flexbox with 54px padding. Go ahead an inspect me.

Mobile-First

Everything is Responsive.

Writing and managing complex media queries is no fun at all. UI Buddy allows you to build responsive designs right in your HTML instead.

Just add a screen size in front of any class and watch it magically apply at a specific breakpoint.

Learn more

Example:

<div class="fsz:14px md:fsz:24px"><div/>

Demo:

My font size is 14px on smaller screens and 24px on medium-sized screens and up. Go ahead and resize the browser window to see me in action.

States

Hover, focus, active and many more states covered.

Want to style something on hover? Simply stick hover: before the class you want to add to give state-based styles to your element.

Learn more

Example:

<p class="color:#2980b9 letterSpacing:0px hover:letterSpacing:4px"><p/>

Demo:

Hover over me.

Responsive States

You can add responsive state-based styles just as easily!

If somehow you want to add different hover effects for different screen sizes, you have the power to do so as well.

Learn more

Example:

<p class="color:#2980b9 hover:letterSpacing:1px hover:md:letterSpacing:8px"><p/>

Demo:

Hover over me.

Components

Duplication? Way ahead of you :)

If you're repeating the same utilities over and over again, simply add a component attribute and boom — you've got a single source of truth so you can make changes in one place.

Learn more

Example:

<div component="button" class="d:inline-block bgc:#2980b9 hover:bgc:#00679D color:#fff p:12px_24px fsz:16px borderRadius:8px cur:pointer"><div/>

Demo:

Button component

Use the component's name as a class to create an instance:

<div class="button"><div/>

Demo:

Button instance. Go ahead and inspect me.

Overrides

Want to override a component? You got it!

You can override all the properties of a component's instance if it is absolutely necessary. This proves especially handy if you just want to modify a single property and don't want to create an entirely new component just for that one change.

Learn more

Example:

<div component="button" class="d:inline-block bgc:#2980b9 hover:bgc:#00679D color:#fff p:12px_24px fsz:16px borderRadius:8px cur:pointer"><div/>

Demo:

Button Component

Create an instance of button and override border radius:

<div class="button borderRadius:100px"><div/>

Demo:

Button component with override. Go ahead and inspect me.

Performance

It's tiny af.

UI Buddy only generates CSS from the rules defined in your markup, which means your final bundle will never have any extra code that you're never going to use anyway, which ususally comes with other frameworks and there's no way to get rid of it.

Integration

Seamless integration with your favorite build tools! (Coming soon)

You can use UI Buddy with Gulp and PUG in order to further speed up your development process, which gives you more control options such as specifying output directory paths, running PostCSS plugins and much more!