Customizing

MiniKit is designed to be customized without modifying library source files.

Every project has different design requirements. MiniKit provides a flexible foundation that allows you to adjust styling, spacing, typography, colors, and component appearance while keeping the underlying markup unchanged. Instead of introducing complex configuration systems, MiniKit relies on familiar web standards such as CSS variables, cascading stylesheets, and progressive enhancement. This approach keeps customization simple, predictable, and easy to maintain across projects of any size.

Override Styles

MiniKit styles can be customized by loading your own stylesheet after the library stylesheet. Since MiniKit uses low-specificity selectors and design tokens, most visual changes can be made without editing library files or relying on !important.

<link rel="stylesheet" href="minikit.min.css"/>
<link rel="stylesheet" href="custom.css"/>

Any styles defined in your custom stylesheet automatically take precedence when loaded after MiniKit.

Picking and Choosing

MiniKit is intentionally small and can be included as a complete package in most projects. However, individual modules can also be loaded when finer control is required. The following files provide the foundation of the library and should always be included first.

00-base.css
01-theme.css
base.js

Additional component styles and scripts can then be loaded based on the needs of your application. This modular structure allows projects to include only the pieces they need while maintaining a consistent design system.

Best Practices

For the best customization experience, treat MiniKit as a design foundation rather than a framework that needs to be modified.

• Override variables before overriding component styles.
• Place custom styles in separate project stylesheets.
• Avoid editing MiniKit source files directly.
• Prefer semantic HTML over custom component abstractions.
• Keep customizations consistent across components.

Following these practices makes upgrading MiniKit easier and helps maintain consistency throughout your application.

Next Steps

Continue to the customization guides to learn how MiniKit's design tokens and color system work.