Skip to content

Yet another simple vue app to display tachyon components in a cute way

Notifications You must be signed in to change notification settings

xdrdak/tachyons-previewer

Repository files navigation

Tachyons Previewer

Live edit tachyon components

Live preview on

hurried-cause.surge.sh

Atomic CSS is pretty cool

I love the idea behind Atomic CSS. Highly reusable classes with little specificity, very little magic and performant to boot? Of course! It's no surprise that we're seeing folks gravitating towards the atomic css principles. It actually works pretty well!

Buuuut...

Atomic CSS learning curve & friction

Big issue with atomic css is learning that crazy syntax. Instead of having a nice short class name, you end up with massive strings. Definetly not cool.

And to top it all off, you're now "limited" to a somewhat strict subset of classes.

Enter the previewer

To control that learning curve and to get going ASAP, I've built a super simple component explorer with an integrated playground. Component templates are written in markdown, so it's real easy to contribute to the project if you have a cool component you want to share!

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

About

Yet another simple vue app to display tachyon components in a cute way

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published