Customizing

A guide to customizing Fluxon components.

Fluxon components come with a polished design out of the box, and most include different variants. However, these pre-designed options might not fully meet every project's specific design requirements. To address this, Fluxon components are built to be customizable, allowing developers to adapt them to their unique visual needs.

The Foundation: Tailwind CSS

Fluxon components are styled using Tailwind CSS. This choice aligns with the Phoenix framework, which includes Tailwind CSS by default. Additionally, Tailwind CSS has become widely adopted within the Elixir community, making it a natural fit for Fluxon UI.

Customization Approach

Fluxon components can be customized using the class attribute. This attribute is accepted by most Fluxon components and allows for the application of additional Tailwind CSS classes to modify their appearance.

It's important to note that the classes passed through the class attribute do not replace the default classes. Instead, they compose on top of the existing classes. This approach allows developers to refine and extend the component's appearance rather than completely redefining it.

To better understand how this works, let's consider the button component:

<.button>Default button</.button>

Adding custom styles:

<.button class="font-bold">
  Bold button
</.button>

In this example, a font-bold class has been added to create a bold button variant. This new class works together with the default classes, refining the button's appearance.

For more complex customizations, multiple Tailwind classes can be combined:

<.button class={[
  "font-bold rounded-full px-10",
  "text-[#e65c00] border-[#e65c00]",
  "shadow-none shadow-orange-500/40",
  "border-2"
]}>
  Bold button
</.button>

This method provides detailed control over various aspects of the component's design, from typography to borders and shadows, while still building upon the component's base styles.

Handling Class Conflicts

When customizing Fluxon components, it's important to understand how the library handles potential class conflicts. The rule is straightforward: custom classes provided via the class attribute will take precedence over the default component classes.

<.badge>Default badge</.badge>

<.badge class="p-3">
  Default badge
</.badge>

In this example above, the badge component has a default padding class of px-2 py-0.5. When a custom class of p-3 is provided, this new padding definition will completely replace the default padding.

This system ensures that you have the flexibility to customize components to your exact specifications while still benefiting from Fluxon's default styling where desired.