README
Anthonic css
Anthonic is atomic css. eg. when you need to margin-top just add _mgt-10 it mean margin-top: 10px, if you need more space, size you can custom you own.
how to use
npm install anthonic --save
yarn add anthonic
// And import
@import "../node_modules/anthonic/src/main";
// your can override any variable. see below.
$colors: (
'primary': #4f6df5,
'second': #fed766,
'dark': #000000,
'white': #ffffff
);
@import "../node_modules/anthonic/src/main";
Variable defaults
Every Sass variable in Anthonic includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying source code. Copy and paste variables as needed, modify their values.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
$colors: (
'tpr': transparent
);
// margin, padding
$spacers: (
'0': 0,
'at': auto
);
// width & height & dimension
// eg. top right bottom left
$sizes: (
'0': 0,
'50pct': 50%,
'100pct': 100%,
'100vw': 100vw,
'100vh': 100vh,
'at': auto
);
// border width
$borders: (
'0': 0,
'1': 1px,
'2': 2px
);
$border-radius: (
'0': 0px,
'50pct': 50%,
'max': 9999px,
'at': auto
);
$font-size: (
'12': 12px,
'14': 14px,
'16': 16px,
'18': 18px,
'20': 20px,
'30': 30px,
);
Recomend to purge css
Anthonic css recomend to purge css when production. because you will get useless css you not use, you can choose laravel-mix, webpack, gulp or etc.
using gulp gulp purge css
using webpack purgecss-webpack-plugin
using laravel-mix Purgecss wrapper for Laravel Mix