Frameworks

Fulldev UI is written in vanilla CSS and .astro files. It is framework agnostic.

JS frameworks

All styles in Fulldev UI use regular CSS and classes. Classes use the following naming convention:

• Component classes are the same as the component name, like button for <Button>.
• Prop classes have the prop name as prefix, like variant-primary for <Button variant="primary">.
• If a prop is a boolean the class is added without a prefix, like contrast.

This means you can apply Fulldev UI styles to any framework component as follows:

---
import Button from 'fulldev-ui/components/Button.astro'
---

<a class="button variant-primary contrast radius-auto"> Button </a>
<Button contrast> Button </Button>

CSS frameworks

A TailwindCSS plugin and UnoCSS preset is available.

TailwindCSS

In your tailwind.config.ts add the following:

// tailwind.config.ts
import fulldevUI from 'fulldev-ui/tailwind'

export default {
  plugins: [fulldevUI],
}

In your astro.config.ts add the following:

// astro.config.ts
import tailwind from '@astrojs/tailwind'

export default defineConfig({
  integrations: [
    tailwind({
      // Disable injecting styles, import manually instead
      applyBaseStyles: false,
    }),
  ],
})

Import the css file file below anywhere in your project.

@tailwind base layer(base);
@tailwind components;
@tailwind utilities;

UnoCSS

In your uno.config.ts add the following:

// uno.config.ts
import fulldevUI from 'fulldev-ui/unocss'

export default defineConfig({
  injectReset: false,
  presets: [fulldevUI],
})

Do not use injectReset when using the UnoCSS preset, as it will conflict with the reset provided by Fulldev UI. If you do want a style reset, be sure to import it in the base layer, similar to the TailwindCSS example above.

Utility classes

The following classes are available when using the Tailwind plugin or UnoCSS preset.

Spacing

The following spacing classes are added to your tailwind/uno config.

You can use them like p-space-1, m-space-1, h-space-1, w-space-1, etc.

spacing: {
  'space-1': 'var(--space-1)',
  'space-2': 'var(--space-2)',
  'space-3': 'var(--space-3)',
  'space-4': 'var(--space-4)',
  'space-5': 'var(--space-5)',
  'space-6': 'var(--space-6)',
  'space-7': 'var(--space-7)',
},

Font size

The following spacing classes are added to your tailwind/uno config.

You can use them like text-1, text-2, text-3, etc.

fontSize: {
  1: 'var(--text-1)',
  2: 'var(--text-2)',
  3: 'var(--text-3)',
  4: 'var(--text-4)',
  5: 'var(--text-5)',
  6: 'var(--text-6)',
  7: 'var(--text-7)',
  8: 'var(--text-8)',
}

Border radius

The following border radius classes are added to your tailwind/uno config.

You can use them like rounded-1, rounded-2, rounded-3, etc.

borderRadius: {
  1: 'var(--radius-1)',
  2: 'var(--radius-2)',
  3: 'var(--radius-3)',
}

Color classes

The following color classes are added to your tailwind/uno config.

You can use them like bg-color-1, text-base-2, border-base-6, etc.

colors: {
  color: {
    1: 'var(--color-1)',
    2: 'var(--color-2)',
    3: 'var(--color-3)',
    4: 'var(--color-4)',
    5: 'var(--color-5)',
    6: 'var(--color-6)',
    7: 'var(--color-7)',
    8: 'var(--color-8)',
    9: 'var(--color-9)',
    10: 'var(--color-10)',
    11: 'var(--color-11)',
    12: 'var(--color-12)',
    contrast: 'var(--color-contrast)',
    background: 'var(--color-background)',
  },
  base: {
    1: 'var(--color-base-1)',
    2: 'var(--color-base-2)',
    3: 'var(--color-base-3)',
    4: 'var(--color-base-4)',
    5: 'var(--color-base-5)',
    6: 'var(--color-base-6)',
    7: 'var(--color-base-7)',
    8: 'var(--color-base-8)',
    9: 'var(--color-base-9)',
    10: 'var(--color-base-10)',
    11: 'var(--color-base-11)',
    12: 'var(--color-base-12)',
    contrast: 'var(--color-base-contrast)',
    background: 'var(--color-base-background)',
  },
  brand: {
    1: 'var(--color-brand-1)',
    2: 'var(--color-brand-2)',
    3: 'var(--color-brand-3)',
    4: 'var(--color-brand-4)',
    5: 'var(--color-brand-5)',
    6: 'var(--color-brand-6)',
    7: 'var(--color-brand-7)',
    8: 'var(--color-brand-8)',
    9: 'var(--color-brand-9)',
    10: 'var(--color-brand-10)',
    11: 'var(--color-brand-11)',
    12: 'var(--color-brand-12)',
    contrast: 'var(--color-brand-contrast)',
    background: 'var(--color-brand-background)',
  }
}