Raboni Styles

Raboni Styles é um conjunto de classes, componentes, icons, mixins e variáveis SCSS reutilizáveis para estilizar aplicações de forma consistente.

Instalação

npm install raboni-styles

## Config your vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  plugins: [
    react(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/raboni-styles/scss/icons/fonts/*',
          dest: 'assets/fonts'
        }
      ]
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      'raboni-styles': path.resolve(__dirname, 'node_modules/raboni-styles/scss/main.scss'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "raboni-styles" as *;`,
      },
    },
  },
})

##Example use mixins flex
.card{
    @include flex();
    @include flex-row();
    @include flex-align-center();
    gap:1rem;
    border: 1px solid #ccc;
    border-radius: 10px;
}

##Example use classes flex
const Example = () => {

    return (
        <div className='frow-center fgap-10'>
            Example
        </div>
    )

}
export default Example