Frameworks
Fulldev UI integrates with all CSS and JS frameworks.
All 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
. - To prevent conflicts, all styles only apply if there is a
full
class on the element too.
This means you can apply Fulldev UI styles to any framework component as follows:
---import { Button } from 'fulldev-ui'---
<a class="full button variant-solid contrast radius-auto"> Button </a><Button contrast> Button </Button>
CSS frameworks
All Fulldev UI styles have low specificity, because they are in a native CSS fulldev
layer. This means you can overwrite them with any CSS framework.
The only thing to be aware of is that styles you want Fulldev UI to overwrite (like a reset), should be in a native CSS base
layer.
Tailwind
You can place Tailwind’s base
styles in a native CSS base
layer as follows:
-
Set
applyBaseStyles
to false in the tailwind configuration.astro.config.mjs import { defineConfig } from 'astro/config'import tailwind from '@astrojs/tailwind'export default defineConfig({integrations: [tailwind({applyBaseStyles: false,}),],}) -
Manually import Tailwind CSS into your project, making sure the
base
layer is in an actual native CSS layer.@import 'tailwindcss/base' layer(base);@import 'tailwindcss/components';@import 'tailwindcss/utilities';
Plugin
We have created a plugin to utilize fulldev-ui styles with tailwindcss on top of tailwind classes. Installation is pretty simple:
import fulldevUI from 'fulldev-ui/tailwind'
export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], plugins: [fulldevUI],}
You can now start using the following in your project on top of tailwind classes like pt-space-1
, rounded-radius-1
, or bg-variant
. For all availabilities see plugin classes.
UnoCSS
UnoCSS does not inject base/reset styles by default. Fulldev UI does not rely on style resets, so you you don’t need them, you’re done here.
If do need a reset, make sure you import it in a native CSS base
layer. For example:
@import '@unocss/reset/tailwind.css' layer(base);
Preset
We have created a preset to utilize fulldev-ui styles with unocss. Installation is pretty simple:
import { defineConfig } from 'unocss'import fulldevUI from 'fulldev-ui/unocss'
export default defineConfig({ presets: [fulldevUI],})
You can now start using the following in your project on top of tailwind classes like pt-space-1
, rounded-radius-1
, or bg-variant
. For all availabilities see plugin classes.
Plugin classes
The following classes are available when using the Tailwind plugin or UnoCSS preset.
Spacing
You can use these classes for paddings, margins, heights, widths etc.
All space classes are dynamic and adapt to the size
and compact
props on Fulldev UI components.
...-space-1
...-space-2
...-space-3
...-space-4
...-space-5
...-space-6
...-space-7
Font size
All font size classes are dynamic and adapt to the size
and compact
props on Fulldev UI components.
text-1
text-2
text-3
text-4
text-5
text-6
text-7
Border radius
The border radius classes are also dynamic, adapting to size
and compact
props on Fulldev UI components.
rounded-1
rounded-2
rounded-3
Color classes
The following colors are avaiable and adapt to theme
, color
, contrast
and variant
props. Therefore you only need 3 colors.
...-background
...-border
...-text
You can use them like bg-background
, border-border
and text-text
. But you can also do bg-text
if you like.
We know the naming feels a bit weird, but at least for now we will stick with this.
Other CSS frameworks
Make sure all styles you want Fulldev UI to overwrite are in a native CSS base
layer. That’s it.