Home

Awesome

<a href="https://daycademy.github.io/vueply/"> <img src="https://i.imgur.com/m3yGh5b.png" alt="Vueply Logo" align="right" height="100" /> </a>

🎨 YACSS

forthebadge uses-css forthebadge uses-js forthebadge uses-html

:star: Star us on GitHub — it helps!

<a href="https://www.npmjs.com/package/yacss"><img src="https://badge.fury.io/js/yacss.svg"></a> <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/github/license/FlorianWoelki/yacss.svg"></a> <a href="https://www.npmjs.com/package/yacss"><img src="https://img.shields.io/npm/dt/yacss.svg"></a> <a href="https://www.npmjs.com/package/yacss"><img src="https://img.shields.io/npm/dm/yacss.svg"></a>

YetAnotherCSS Framework is a new utility and component based modern framework. This simple to use framework is inspired by the Tailwind framework with some extra predefined components you can use.

There are a lot of beautiful prestyled components you can use and customize easily with the help of the utility based classes and colors.

💥 Getting Started

These instructions will help you getting started with YACSS.

🔨 Quick install

NPM

npm install yacss

Yarn

yarn add yacss

CDN

https://cdn.jsdelivr.net/npm/yacss@0.1.5/dist/yacss.min.css
https://cdn.jsdelivr.net/npm/yacss@0.1.5/dist/yacss.min.js

Import YACSS by importing the css and js file

<link rel="stylesheet" href="./yacss.min.css" />
...
<script src="./yacss.min.js"></script>
<script>
  initTheme({
    primaryColor: 'blue',
    accentColor: 'purple',
    classes: ['all'],
  });
</script>

Configure the theme

With the following lines of code, you can initialize the theme of YACSS.

<script>
  initTheme({
    primaryColor: 'blue',
    accentColor: 'purple',
    classes: ['all'],
  });
</script>

Classes will be the imported utility classes. You can find all utility classes here.

You can select the primary and accent color of the predefined colors.

💡 Contributing

Coming Soon

🎨 Versioning

Coming Soon

😎 Authors

📕 License

This project is licensed under MIT