Welcome to Tie & Dye CSS, the first mega and very artistic fancy CSS library that brings all the legendary CSS tricks into your designs. Free and open source, learn more about it below or feel free to contribute!

installation.

The library can be easily setup for projects as a CDN, Npm or Downloaded as a zip file, use the options below and choose the most convenient way to you.

Latest version 1.5.5 - 9 dec 2020 build
Npm Install
npm install tie-and-dye --save -dev
Use As CDN
https://www.cdn.com/tie-and-dye.min
Download Zip
https://www.googledrive.com/tie-and-dye.min

Click on the icons on the left of the links above to copy or download the lib CSS file and then paste the link inside the head tag in your html or if you downloaded the file you can pull it in as you can link to a normal style sheet and below are tips to get you started!

Getting Started.

Hope you're using sass cause it's the only work around supported per the current version, and Vscode preferably so that you can get the live sass compiler extension to smooothen things up and then if you used NPM scripts, just import the file into your code or use the CDN link to do the same. But if you downloaded the library files and you just wanna use as is, just pull in the file into your code. For some customization and advanced usage, read on below.


For using the partials, import the partial files below in thier order.

  • tie-and-dye.base
  • tie-and-dye.config
  • tie-and-dye.colors
  • tie-and-dye.tricks

Where the base partial holds the basic styles or defalut resets, the config with the variables and user customizable styles, then the colors with all the color schemes and paletes and tricks which holds all the magic mixins. And we will break down each file below!


Note: To use Tie & Dye as a whole, import the full partial named "_tie-and-dye" or the non partial full library named Tie & Dye without the underscore.
Tips and more info.
# You don't need a CSS Preset!

The library comes with it's own CSS reset to get you started, it's preset is inspired by various popular resets like modern reset, normalize and others with just our flavor blended in. However never the less you should not mistake Tie & Dye CSS Library and CSS frameworks, this is just a CSS library comprising of various CSS libraries to bring cool CSS tricks into your designs from icon animations without Javascript to text gradient and much more but it can surely be used along popular CSS frameworks like Tailwind and Bootstrap.


Note: If you're to use Tie & Dye along with any CSS framework it's recommended to use it in partials so that you don't have to import it's base file named "tie-and-dye.base.scss" which contains only the resets, these already come with your choosen framework. And we're quite sure you don't wanna do the un intended over rides!
# Built on a powerful CSS preprocessor.

Tie & Dye CSS is built using Sass, just to be sassy about this we wanted it to have all the super powers of enhanced CSS. But worry not if you don't use sass cause the library will soon also be available in plain CSS as a compilation of the sass version but for the time being we're just sassy!

# Inspired by great CSS artists on codepen.

This library is built by devs for devs, by community for the community and all it's tricks belong to thier respective artists but we still take pride that someone someday somewhere sometime will not have to rewrite already existing CSS just to add a simple twist into his/her design.

# Too much talks,let's finally dive in...

So to break it down, the library has 5 .scss partials and one full file which encompasses all the the 5 partials, and it's important to import these in order as we specify.