LayX is designed with flexibility at its core, allowing you to tailor the framework for your project’s unique needs. Whether you want to adjust styles, add new components, or configure the build, LayX provides all the tools necessary to make customization simple.
With LayX, customization begins even before installation. Its no-dependency approach allows you to modify the setup entirely to create a unique experience for your projects.
By customizing LayX's setup before installation, each new project you create will be uniquely suited to your needs.
LayX utilizes CSS variables for easy customization. You can change default values in your project's CSS file:
.my__container {
--edge-offset-x: .75rem;
@media (width >= 576px) {
--edge-offset-x: 2.5%;
}
}
LayX allows you to extend its components by adding new classes or modifying existing ones. To customize a button, for example:
.my__button {
--padding-x: 1rem;
--padding-y: .5rem;
--bg: var(--primary-color);
}
If LayX’s pre-built components aren’t enough for your project, you can create your
own custom components in layx/components. Include your custom CSS and
JS in layx/layx.css and layx/layx.js.
By following these steps, you can fully customize LayX to fit your project’s specific requirements.