Getting started
In this section, we'll install and connect EffCSS to your page. Then we'll write a simple stylesheet maker and apply it.
Install
Type in your terminal:
# npm
npm i effcss
# pnpm
pnpm add effcss
# yarn
yarn add effcssConnect
To use Effcss you need to add a Style Provider.
Style Provider is custom HTMLScriptElement that manages and handles CSS stylesheets. The easiest way to define it is via script from CDN (quick way):
<head>
...
<script
src='https://unpkg.com/effcss/dist/build/define-provider.min.js'
crossorigin='anonymous'
></script>
</head>You can also define provider by yourself (reliable way):
import { defineProvider } from 'effcss';
defineProvider({
// you can pass custom settings here
});Then you need to add the provider's web component to your layout:
<!doctype html>
<html lang='en'>
<head>
...
<script
src='https://unpkg.com/effcss/dist/build/define-provider.min.js'
crossorigin='anonymous'
></script>
<script is='effcss-provider'></script>
</head>
<body>
<div id='root'>...</div>
</body>
</html>Style provider can be configured. See all the available settings and attributes in the corresponding section.
Use
CSS stylesheet can be created by StyleSheet maker. It is just a function that should return object with styles:
import { TStyleSheetMaker } from 'effcss';
export const maker: TStyleSheetMaker = () => {
const flexColumn = {
display: 'flex',
flexDirection: 'column',
};
return {
html: {
fontSize: '16px',
},
'.card': {
width: '10rem',
...flexColumn,
'.card__header': {
height: '2rem',
},
'.card__body': flexColumn,
':hover': {
borderRadius: '1rem',
},
},
};
};This stylesheet can be added to the page using Style Consumer:
import { createConsumer } from 'effcss/consumer';
import { maker } from './maker';
const styleConsumer = createConsumer();
styleConsumer.use(maker);Congratulations! Your styles have been applied to the page. Simple, isn`t it?
In fact, EffCSS can simplify your stylesheet makers via utilites argument. See the following section for details.