This package generates Utility css files for better UI design
npm install tareasy
npm i tareasy
`
What you get from Tareasy
With our package you are able to construct a full utility css sheets that are enough to make any design layout that you want to make
you can generate these utility files
`
- import file
- root styles sheet
- flex design sheet
- grid design sheet
- margins design sheet
- padding design sheet
- gaps design sheet
- color design sheet
- gradient design sheet
- button design sheet
`
How to use
It is a CLI package so first we have to install the package
`JavaScript
npm i tareasy
`
to initiate the package
run these commands
`
node node_modules/tareasy/UI.js
`
it will initiate the package and loads a folder name as Utility-UI
and loads 2 more csss files init named as root.css and import.css
now to make the individuals design files we have to run seperate CLI commands
these commands are given below
`
node node_modules/tareasy/UI.js 'flex'
node node_modules/tareasy/UI.js 'grid'
node node_modules/tareasy/UI.js 'margins'
node node_modules/tareasy/UI.js 'pads'
node node_modules/tareasy/UI.js 'gaps'
node node_modules/tareasy/UI.js 'color'
node node_modules/tareasy/UI.js 'btns'
node node_modules/tareasy/UI.js 'grads'
`
Instructions for grids
when we run grid command the CLI as you to entre the column count that is needed to addning grid-template-colums and grid-template-rows properties type the appropriate number say 10 as per the requirement
Instructions for margins, pads, gaps
when we run command for these in the CLI as you have to entre the count for it as 100 then you have to add the step change for the property and then finally you have to add the units to add in the padding, margins and gaps we can add any unit say pixel-px, rem, em, vh etc .
Instructions for colors
When you run CLI command for color the CLI as for you to entre the color hex codes you can entre any number of hex codes but in a specific manner, because the CLI generated css variabes for your hex codes and you get 10 shades and tint for each of your hex code
`
entre hex code as follow
#hexcode-variable_name,#hexcode-variable-name
e.g -- #er77d8-primary,#gty748-secondary
`
Instructions for gradients
When you run CLI for gradients the CLI as you to entre how much gradients you want to add as 10, then CLI add 10 different gradient pairs to the style sheet
Instruction for button
we have 10 differnt kind of utility buttons that we can sue in our project, the CLI ask which button you want to add in utility add any number from 1-10 and the that respective button is added to you project
`
``