Configuration

Prefix

You can change the prefix of the modifiers by setting the `prefix` option. This is useful if you want to introduce PhlexyUI into a project without clashing with existing CSS classes.

1
# config/initializers/phlexy_ui.rb
2
PhlexyUI.configure do |config|
3
  config.prefix = "foo-"
4
end

This will add the `foo-` prefix to all the modifiers. For example:

1
Card :compact do
2
end

Will render as:

1
<section class="foo-card foo-card-compact"></section>

Custom Modifiers

Component specific modifiers

PhlexyUI allows you to add custom modifiers to your components. These modifiers are used to add custom styles to your components. For example:

1
# config/initializers/phlexy_ui.rb
2
PhlexyUI.configure do |config|
3
  config.modifiers.add(
4
    :my_modifier,
5
    component: PhlexyUI::Card,
6
    classes: "w-96 shadow-xl"
7
  )
8
end

This will add a `my-modifier` modifier to the `Card` component. You can then use this modifier in your components like this:

1
Card :my_modifier do
2
end

Which will render as:

1
<section class="card w-96 shadow-xl"></section>

Global modifiers

You can also add a modifier to all components by adding a global modifier. For example:

1
# config/initializers/phlexy_ui.rb
2
PhlexyUI.configure do |config|
3
  config.modifiers.add(
4
    :my_global_modifier,
5
    classes: "w-96 shadow-xl"
6
  )
7
end

This will add a `my_global_modifier ` modifier to all components. For example:

1
Card :my_global_modifier do
2
end
3
4
Button :my_global_modifier do
5
end

Which will render as:

1
<section class="card w-96 shadow-xl"></section>
2
<button class="button w-96 shadow-xl"></button>