القائمة
Complete Mint CSS design system with grid, typography, colors, utilities, and theming. Use for building consistent, responsive, and accessible web applications with a complete CSS framework.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
Accordion component with collapsible sections. Use for FAQs, nested content, or expandable details sections.
Button component with variants, sizes, loading states, and icon support. Use when creating clickable actions, forms, or navigation buttons.
Calendar component for date and month selection. Use when building date pickers, scheduling interfaces, or date range selectors.
Carousel component for image/content sliders with navigation controls. Use for image galleries, hero sections, or content that scrolls horizontally.
Checkbox component for boolean or multi-select inputs. Use when building forms with boolean toggles or multiple selection lists.
Dropdown menu component with trigger and content pattern. Use when building selectable menus, action menus, or nested navigation.
استنادا إلى تصنيف SOC المهني
| name | mint-css |
| description | Complete Mint CSS design system with grid, typography, colors, utilities, and theming. Use for building consistent, responsive, and accessible web applications with a complete CSS framework. |
A comprehensive CSS design system by Groww for building modern web applications.
npm install @groww-tech/mint-css
import '@groww-tech/mint-css/dist/index.css';
/* Grid system */
@import '@groww-tech/mint-css/dist/base/grid.css';
/* Typography */
@import '@groww-tech/mint-css/dist/typography/index.css';
/* Utility classes */
@import '@groww-tech/mint-css/dist/base/utility.css';
/* Theme/Colors */
@import '@groww-tech/mint-css/dist/fragments/allVariables.css';
/* Fonts */
@import '@groww-tech/mint-css/dist/fragments/fonts.css';
/* Preloader/Shimmer */
@import '@groww-tech/mint-css/dist/base/preloader.css';
@groww-tech/mint-css/
├── base/ # Core utilities
│ ├── app.css # Base styles, z-index
│ ├── grid.css # 12-column responsive grid
│ ├── utility.css # Utility classes
│ ├── preloader.css # Shimmer/skeleton loaders
│ ├── temp-utils.css # Temporary utilities
│ └── temp-vars.css # Theme variables
├── fragments/ # Aggregated outputs
│ ├── allVariables.css # All design tokens
│ ├── fonts.css # Font declarations
│ ├── themeUtilities.css # Theme utilities
│ └── typographyUtilities.css
├── typography/
│ ├── fonts/ # Font files
│ ├── tokens/ # Typography tokens
│ │ ├── body-tokens.css
│ │ ├── button-tokens.css
│ │ ├── display-tokens.css
│ │ └── heading-tokens.css
│ └── variables/ # Typography variables
├── designSystemConfig.js # Design token config
└── generateDesignSystem.js # CSS generation
| Skill | Description |
|---|---|
| mint-css-grid | 12-column responsive grid system |
| mint-css-utilities | Utility CSS classes |
| Skill | Description |
|---|---|
| mint-css-typography | Font families, sizes, token classes |
| Skill | Description |
|---|---|
| mint-css-theme | Light/dark theme switching |
| mint-css-colors | Design token colors |
| Skill | Description |
|---|---|
| mint-css-preloader | Skeleton/shimmer loading |
| Skill | Description |
|---|---|
| mint-css-zindex | Z-index layering scale |
<div class="row">
<div class="col s12 m6 l4">Column</div>
</div>
<p class="bodyBase">Body text</p>
<h1 class="headingLarge">Heading</h1>
<div class="flex vspace-between">...</div>
<div class="absolute-center">...</div>
/* Use semantic tokens */
color: var(--content-primary);
background: var(--background-primary);
<div class="ph-item">
<div class="ph-row">
<div class="ph-col-6"></div>
</div>
</div>
The system generates CSS variables for:
// Using CSS Modules
import styles from './Component.module.css';
<div className={`${styles.container} ${styles.card}`}>
<h2 className="headingLarge">Title</h2>
<p className="bodyBase">Content</p>
</div>
import styled from 'styled-components';
const Container = styled.div`
background: var(--background-secondary);
padding: var(--spacing-md);
border-radius: var(--border-radius-md);
`;
const Title = styled.h2`
font-family: var(--font-family-primary);
color: var(--content-primary);
`;
var(--content-primary) over hex colors