Global Styles
This guide explains how to manage global CSS styles in your KimiStores application, especially when adding components from the full version to a starter project.
Global CSS Structure
The main global styles file is located at src/global.css. This file contains CSS imports for various components and global style rules.
File Structure
The global CSS file is organized into several sections:
• External imports - Component-specific CSS
• Font imports - Typography resources
• Global resets - Base element styles
• Global utilities - Helper classes
/* src/global.css */
/* --------------------------------------------------------------------- */
/* COMPONENT STYLES IMPORTS */
/* --------------------------------------------------------------------- */
/* scrollbar */
@import './components/scrollbar/styles.css';
/* map */
@import './components/map/styles.css';
/* lightbox */
@import './components/lightbox/styles.css';
/* chart */
@import './components/chart/styles.css';
/* --------------------------------------------------------------------- */
/* FONT IMPORTS */
/* --------------------------------------------------------------------- */
@import '@fontsource-variable/inter';
@import '@fontsource-variable/barlow';
/* --------------------------------------------------------------------- */
/* GLOBAL RESETS & BASE STYLES */
/* --------------------------------------------------------------------- */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
/* --------------------------------------------------------------------- */
/* UTILITY CLASSES & HELPERS */
/* --------------------------------------------------------------------- */
/* Add your global utility classes here */
Adding Component Styles
When integrating components from the full version into your starter project, you may need to add their corresponding CSS.
Step 1: Identify Required Styles
Determine which component styles you need to import. Common components that require additional CSS include:
Charts and visualizations
Lightbox image galleries
Maps and geolocation
Custom scrollbars
Step 2: Copy CSS Files
Copy the required CSS files from the full version to your starter project.
# Example folder structure after copying
src/
├── components/
│ ├── chart/
│ │ └── styles.css
│ ├── lightbox/
│ │ └── styles.css
│ ├── map/
│ │ └── styles.css
│ └── scrollbar/
│ └── styles.css
└── global.css
Step 3: Import in global.css
Add the import statements to your global.css file:
/* Add to the top of your src/global.css */
/* scrollbar */
@import './components/scrollbar/styles.css';
/* map */
@import './components/map/styles.css';
/* lightbox */
@import './components/lightbox/styles.css';
/* chart */
@import './components/chart/styles.css';
Best Practices
1. Minimize Global Styles: Use component-scoped styles when possible to reduce conflicts.
2. Document Imports: Add comments to explain the purpose of each CSS import.
3. Optimize CSS: Remove unused styles to reduce bundle size.
4. Test Thoroughly: Verify styles work correctly across different browsers and devices.
Component-Specific Style Examples
Scrollbar Styles
/* src/components/scrollbar/styles.css */
.simplebar-scrollbar:before {
background-color: rgba(145, 158, 171, 0.48);
}
.simplebar-track.simplebar-vertical {
width: 8px;
}
.simplebar-track.simplebar-horizontal {
height: 8px;
}
Chart Styles
/* src/components/chart/styles.css */
.apexcharts-tooltip {
background-color: var(--white);
border: 0;
box-shadow: var(--shadow-card);
border-radius: 8px;
font-family: var(--font-family-primary);
}
.apexcharts-tooltip-title {
font-weight: 700;
padding: 8px 12px;
}