magic-css

Build Flexbox without using any fancy framework

How it works

MagicCss stands to make Front-End application without using any fancy and heavy frameworks. It can be used both
client-side and server-side rendering applications.

Here's example and plain html

$3

``shell
npm i @frontend-ninjas/magic-css --save
`

$3

`js
import MagicCss from '@frontend-ninjas/magic-css';
`

$3

`js
const magic = new MagicCss({
fontFamily: 'sans-serif',
colors: [
// 'color' - direct colors supported by default CSS
'blue',
'yellow',
'grey',
// ['color-name', 'hex/rgb/hsl']
['red', '#ff0000'],
['opacity-05', 'rgba(255,255,255,0.5)'],
['hsl-example', 'hsl(0deg 100% 50% / 39%)'],
],
variables: [
// ['property', 'css-value']
['border', '1px solid red'],
['border-bottom', '1px solid blue'],
// ['property', ['identity', 'css-value']]
['border', [2, '1px solid black']],
['border', ['blue', '1px solid blue']],
['border-bottom', ['h1', '2px solid red']],
// gradient background example
['background', ['gradient', 'linear-gradient(180deg, #000 0%, #fff 100%)']],
],
});
`

$3

`js
const magicCss = document.createElement('style');
magicCss.innerHTML = magic.getStyle();
document.head.append(magicCss);
`

`js
export default function App() {
return (

Hello CodeSandbox

Start editing to see some magic happen!

Border

Flex 1

Flex 2

Flex 3

cursor

button

);
}
``

!Example