Skip to content

Commit 9c0f406

Browse files
hardikforallhardikforall
committed
Update to version 0.3.0 with major enhancements including a modernized Sass module system, improved grid layout using CSS Grid, new components (Toast, Pagination, Progress), and expanded utility classes. Documentation updated to reflect new features and usage examples.
1 parent debcf35 commit 9c0f406

72 files changed

Lines changed: 15541 additions & 10613 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎.github/workflows/build.yml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
name: Build
2+
3+
on:
4+
push:
5+
branches: [master, main]
6+
pull_request:
7+
branches: [master, main]
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v4
14+
15+
- name: Use Node.js
16+
uses: actions/setup-node@v4
17+
with:
18+
node-version: 20
19+
cache: npm
20+
21+
- name: Install dependencies
22+
run: npm ci || npm install
23+
24+
- name: Lint
25+
run: npm run lint
26+
27+
- name: Build
28+
run: npm run build
29+
30+
- name: Upload build artifacts
31+
uses: actions/upload-artifact@v4
32+
with:
33+
name: minimacss-dist
34+
path: dist/

‎.stylelintrc.json‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"extends": ["stylelint-config-standard-scss"],
3+
"rules": {
4+
"selector-class-pattern": null,
5+
"scss/dollar-variable-pattern": null,
6+
"scss/at-mixin-pattern": null,
7+
"no-descending-specificity": null,
8+
"declaration-block-no-redundant-longhand-properties": null,
9+
"scss/no-global-function-names": null,
10+
"color-function-notation": null,
11+
"color-function-alias-notation": null,
12+
"alpha-value-notation": null,
13+
"hue-degree-notation": null,
14+
"declaration-property-value-no-unknown": null,
15+
"media-feature-range-notation": null,
16+
"property-no-vendor-prefix": null,
17+
"value-no-vendor-prefix": null,
18+
"custom-property-empty-line-before": null,
19+
"custom-property-pattern": null,
20+
"scss/double-slash-comment-empty-line-before": null,
21+
"scss/double-slash-comment-whitespace-inside": null,
22+
"rule-empty-line-before": null,
23+
"at-rule-empty-line-before": null,
24+
"comment-empty-line-before": null,
25+
"declaration-empty-line-before": null,
26+
"scss/dimension-no-non-numeric-values": null,
27+
"scss/operator-no-newline-after": null,
28+
"scss/operator-no-unspaced": null,
29+
"length-zero-no-unit": null,
30+
"number-max-precision": null,
31+
"shorthand-property-no-redundant-values": null,
32+
"declaration-block-no-shorthand-property-overrides": null,
33+
"selector-not-notation": null,
34+
"no-duplicate-selectors": null,
35+
"comment-whitespace-inside": null,
36+
"color-hex-length": null,
37+
"color-hex-alpha": null,
38+
"color-no-invalid-hex": true,
39+
"property-no-deprecated": [true, {"ignoreProperties": ["-webkit-box-orient", "line-clamp"]}],
40+
"block-no-empty": null,
41+
"no-empty-source": null,
42+
"scss/comment-no-empty": null,
43+
"scss/at-extend-no-missing-placeholder": null,
44+
"function-no-unknown": null,
45+
"selector-pseudo-element-colon-notation": null,
46+
"declaration-block-no-duplicate-properties": null,
47+
"keyframes-name-pattern": null,
48+
"declaration-block-single-line-max-declarations": null,
49+
"selector-pseudo-class-no-unknown": [true, {"ignorePseudoClasses": ["details"]}],
50+
"no-invalid-position-at-import-rule": null,
51+
"value-keyword-case": null,
52+
"scss/dollar-variable-empty-line-before": null,
53+
"scss/at-mixin-argumentless-call-parentheses": null,
54+
"scss/at-function-pattern": null,
55+
"scss/at-each-key-value-single-line": null,
56+
"scss/at-rule-no-unknown": null,
57+
"at-rule-no-unknown": null,
58+
"scss/no-duplicate-mixins": null,
59+
"scss/declaration-nested-properties": null,
60+
"scss/at-use-no-redundant-alias": null,
61+
"scss/at-rule-conditional-no-parentheses": null,
62+
"scss/at-if-no-null": null,
63+
"scss/at-else-empty-line-before": null,
64+
"scss/at-else-if-parentheses-space-before": null,
65+
"media-query-no-invalid": null,
66+
"import-notation": null
67+
},
68+
"ignoreFiles": ["dist/**/*", "node_modules/**/*", "docs/**/*"]
69+
}

‎README.md‎

Lines changed: 186 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,233 @@
1-
<img src="https://i.ibb.co/BBw7NLd/M-2.png" alt="MinimaCSS Logo" style="height: 100px; width:100px;"/>
1+
# MinimaCSS
22

3-
# MinimaCSS ✨
3+
**A minimal CSS framework, fully modern. ~24 KB gzipped. Built for Baseline 2024+.**
44

5-
MinimaCSS is an elegantly designed and versatile CSS framework, perfect for crafting beautiful websites. Launched in 2017 and refined in 2018 for a variety of web projects, MinimaCSS encapsulates the vision of providing an accessible yet sophisticated tool for web design. It's an ideal solution for newcomers seeking beauty in simplicity and professionals demanding aesthetic finesse in their projects.
5+
MinimaCSS isn't another Bootstrap-alike. It's a small CSS framework built on the features that finally let CSS solve problems that used to require JavaScript or huge utility-class bundles: `light-dark()`, `color-mix()`, `@starting-style`, `:user-invalid`, container queries, cascade layers, Popover + Anchor Positioning, and `:has()`.
66

7-
This framework celebrates the beauty of design, offering a harmonious balance between ease of use and the ability to create stunning visual experiences.
7+
```html
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hardikforall/MinimaCSS@v0.3.0/dist/minimacss.min.css">
9+
```
10+
11+
[Live component showcase](https://hardikforall.github.io/MinimaCSS/examples/) · [Docs](https://hardikforall.github.io/MinimaCSS/docs/) · [Dashboard demo](https://hardikforall.github.io/MinimaCSS/examples/dashboard.html)
12+
13+
---
814

9-
### Why MinimaCSS?
15+
## Pain points it solves (that other frameworks don't)
1016

11-
In an era where front-end frameworks can be cumbersome and complex, MinimaCSS emerges as a beacon of aesthetic clarity. It revives the essence of CSS design, blending simplicity with the capability to create visually appealing interfaces.
17+
### 1. One-token rebrand
1218

13-
### Features 🚀
19+
Change a single CSS variable; every button, link, focus ring, and accent in the framework re-tints automatically via `color-mix(in oklch, …)`.
1420

15-
- Extensive Components: Extensive selection of pre-built components, ready for integration into diverse web projects.
16-
- Design Flexibility: Each element is meticulously crafted for visual excellence, supporting a wide range of aesthetic preferences.
17-
- Utility Classes: Comprehensive and intuitive utility classes for rapid, flexible design adjustments.
18-
- Responsive Design: Built for seamless responsiveness, ensuring compatibility across all devices.
19-
- Utilities: Handy utility classes for spacing, visibility, backgrounds, text colors, and more.
20-
- Light and Dark Mode : Light and Dark mode Included by default. Default dark mode for modern aesthetics.
21-
- Comprehensive Documentation : Detailed documentation and support for a smooth development experience.
21+
```css
22+
:root { --accent-color: #ff5a5f; }
23+
/* Hover, focus, ring, link, nav, progress bar, toast — all updated. */
24+
```
25+
26+
No Tailwind config rebuild. No Bootstrap Sass recompile. No theme file with 80 redeclarations.
2227

23-
## Installation 💾
28+
### 2. One declaration per token (light *and* dark)
2429

25-
To get started with MinimaCSS, you have two options: download the compiled CSS directly or download the project, customise it and build your own css.
30+
Themes are defined once using `light-dark()`:
31+
32+
```css
33+
--surface-primary-color: light-dark(#ffffff, #111a33);
34+
--text-primary-color: light-dark(#182447, #c8d3f7);
35+
```
2636

27-
### CDN Include
37+
`<html data-theme="dark">` flips `color-scheme`; the values resolve automatically. No `dark:` utility prefixes. No second `.dark { … }` block.
2838

29-
You can directly use latest minimacss from CDN use the below link in your html
39+
### 3. Forms that aren't angry by default
40+
41+
`:user-invalid` styles only fire **after the user has interacted with the field** — no more red borders on every input the moment the page loads.
3042

3143
```html
32-
<link
33-
rel="stylesheet"
34-
href="https://cdn.jsdelivr.net/gh/hardikforall/MinimaCSS/dist/minimacss.css"
35-
/>
44+
<div class="field">
45+
<label for="email">Email</label>
46+
<input id="email" class="input" type="email" required>
47+
<small class="helper-text">We never share your email.</small>
48+
</div>
49+
```
50+
51+
The `.field` wrapper auto-appends a required asterisk (via `:has(:required)`) and flips the helper-text colour on `:user-invalid`. No JavaScript, no `.is-invalid` class to toggle.
52+
53+
### 4. JS-free menus, dropdowns, modals, accordions
54+
55+
| Component | How it works |
56+
|---|---|
57+
| **Modal** | Native `<dialog>` + `@starting-style` + `transition-behavior: allow-discrete` |
58+
| **Dropdown / Popover** | Native `popover` attribute + CSS Anchor Positioning |
59+
| **Accordion** | Native `<details>` / `<summary>` |
60+
| **Tooltip** | CSS-only via `:hover` / `:focus-within` |
61+
| **Theme switcher** | `<input type="radio">` + `:checked` + `color-scheme` |
62+
63+
No focus-trap library. No `aria-*` attribute juggling. The browser handles open/close, escape-to-dismiss, light-dismiss, focus restoration, and stacking.
64+
65+
### 5. Animate from `display: none`
66+
67+
Modal, slideover, toast, and popover all use `@starting-style` + `allow-discrete` so they animate both open *and* close — even though the closed state is `display: none`. No `animation-fill-mode` games, no `setTimeout` workarounds.
68+
69+
### 6. Container-query-aware components
70+
71+
`.card` is itself a query container. The same card adapts its padding to its own width — narrower in a sidebar, more generous in a hero. No JS observer, no breakpoint guess-work.
72+
73+
### 7. Cascade layers — no `!important`
74+
75+
```css
76+
@layer reset, base, components, utilities;
3677
```
3778

38-
or you can use Minified css
79+
Utility classes reliably override component styles because they live in a later layer. The framework ships ~13 `!important` declarations total — all in print or reduced-motion contexts.
80+
81+
### 8. Layout primitives for the patterns you actually write
3982

4083
```html
41-
<link
42-
rel="stylesheet"
43-
href="https://cdn.jsdelivr.net/gh/hardikforall/MinimaCSS/dist/minimacss.min.css"
44-
/>
84+
<div class="stack">…</div> <!-- vertical rhythm -->
85+
<div class="cluster">…</div> <!-- wrap with gap -->
86+
<article class="center">…</article> <!-- centered measure -->
87+
<div class="sidebar-layout">…</div> <!-- sidebar + main, wraps -->
88+
<div class="switcher">…</div> <!-- row → column at threshold -->
4589
```
4690

47-
### Direct Download 📦
91+
Inspired by [Every-Layout](https://every-layout.dev/). One-line solutions for 80% of the layouts you currently write by hand.
4892

49-
Download the `minimacss.css` file from the `/dist` folder and include it in your project:
93+
### 9. Modern input affixes (without "input-group" choreography)
5094

5195
```html
52-
<link rel="stylesheet" href="path-to-minimacss/minimacss.css" />
96+
<div class="input-affix">
97+
<span class="input-affix-prefix">$</span>
98+
<input class="input" type="number">
99+
<span class="input-affix-suffix">USD</span>
100+
</div>
53101
```
54102

55-
### Customization and Building 🛠️
103+
`:has(:focus-visible)` on the wrapper lifts the focus ring onto the whole affix. No nested-control choreography.
56104

57-
MinimaCSS is designed to be easily customizable. To create a version tailored to your needs, follow these steps:
105+
### 10. Drop-in skeleton, empty state, scroll-snap
58106

59-
1. Clone the repository:
107+
```html
108+
<div class="skeleton skeleton-text"></div>
60109

61-
```bash
62-
git clone https://github.com/hardikforall/MinimaCSS.git
110+
<div class="empty-state">
111+
<h3 class="empty-state-title">No orders yet</h3>
112+
<p class="empty-state-description">When customers place an order it'll appear here.</p>
113+
</div>
114+
115+
<div class="scroll-x snap-x">
116+
<article class="card snap-start">…</article>
117+
<article class="card snap-start">…</article>
118+
</div>
63119
```
64120

65-
2. Navigate to the project directory
121+
Skeleton shimmer respects `prefers-reduced-motion`. Empty state is a one-line component. Carousels are a no-JS CSS pattern.
122+
123+
### 11. Named z-index scale (no more `9999`)
124+
125+
```css
126+
--z-dropdown: 100;
127+
--z-sticky: 200;
128+
--z-overlay: 900;
129+
--z-modal: 1000;
130+
--z-popover: 1100;
131+
--z-toast: 1200;
132+
--z-tooltip: 1300;
133+
```
134+
135+
Layer overlays by name. Modals can never sit above toasts by accident.
136+
137+
### 12. Self-contained
66138

67-
3. Install the required dependencies:
139+
- No external font import (system stack by default; opt in to Inter via one variable).
140+
- No icon font requirement (framework is icon-agnostic; examples use inline SVG).
141+
- No JavaScript bundle. Pages that don't use Tabs work with zero JS.
142+
143+
---
144+
145+
## Quick feature list
146+
147+
- **25+ components** — buttons, inputs, **`.field`**, **`.input-affix`**, **`.kbd`**, modals, accordion, navigation, cards, slideovers, steps, tabs, segments, loader, progress, tables, avatars, badges, dividers, tooltips, toasts, pagination, alerts, **popover**, **skeleton**, **empty-state**
148+
- **Layout primitives** — `.stack`, `.cluster`, `.center`, `.sidebar-layout`, `.switcher`, `.cover`, `.box`
149+
- **Container queries** — `.cq`, `.cq-named`, plus `.card` is itself a container
150+
- **Scroll-snap utilities** — `.scroll-x`, `.snap-x/-y`, `.snap-start/-center/-end`, plus `.scroll-x-hide-scrollbar`
151+
- **Theme-aware visibility** — `.only-light` / `.only-dark`
152+
- **Cascade layers** — utilities beat components without `!important`
153+
- **Light & Dark mode** built in via `light-dark()` + `color-scheme`
154+
- **Modern Sass** — `@use`/`@forward`, no `@import`, no `map-get`, no `green()`/`blue()` — zero deprecation warnings on Dart Sass 1.100+
155+
- **Accessibility-first** — `:focus-visible`, WCAG-AA contrast tokens, `prefers-reduced-motion`, 40px+ touch targets, print stylesheet, `.sr-only`
156+
- **Tiny** — ~126 KB minified, ~24 KB gzipped, **0 npm vulnerabilities**
157+
158+
## Installation
159+
160+
### From CDN
161+
162+
```html
163+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hardikforall/MinimaCSS@v0.3.0/dist/minimacss.min.css">
164+
```
165+
166+
### From npm
68167

69168
```bash
70-
npm install
169+
npm install minimacss
71170
```
72171

73-
4. Make your customizations: Edit the SCSS files in the /src directory to suit your project's needs. You can modify variables, adjust styles, or even add new components.
172+
```html
173+
<link rel="stylesheet" href="/node_modules/minimacss/dist/minimacss.min.css">
174+
```
74175

75-
5. Build your custom CSS: Once you've made your changes, you can build your custom version of MinimaCSS by running:
176+
### From source
76177

77178
```bash
179+
git clone https://github.com/hardikforall/MinimaCSS.git
180+
cd MinimaCSS
181+
npm install
78182
npm run build
79183
```
80184

81-
This command compiles your SCSS files and outputs a minified CSS file in the /dist directory.
82-
And you're done! You now have a version of MinimaCSS that's tailored specifically to your project's requirements.
185+
`dist/minimacss.css` and `dist/minimacss.min.css` (with autoprefixer + source map) land in `dist/`.
83186

84-
## Documentation 📘
187+
## Theming
85188

86-
**Get Started**: Quick and easy guides to get you up and running.
87-
**Advanced Usage**: In-depth tutorials for advanced features and customization.
88-
**Latest Updates**: Stay updated with new features and improvements.
189+
```css
190+
:root {
191+
--accent-color: #4f46e5; /* every interactive accent re-tints */
192+
}
193+
```
89194

90-
[Explore Documentation](https://hardikforall.github.io/MinimaCSS/docs/)
195+
Force a theme:
91196

92-
### Todo
197+
```html
198+
<html data-theme="dark"> <!-- or "light", or omit for OS-driven -->
199+
```
200+
201+
Customise any token — every CSS variable in [`src/themes/_theme.scss`](src/themes/_theme.scss) is fair game.
202+
203+
## Documentation
204+
205+
- [Getting Started](docs/GettingStarted.md)
206+
- [Theming & Dark Mode](docs/theme.md)
207+
- [Customisation](docs/customization.md)
208+
- [Accessibility](docs/accessibility.md)
209+
- [Best practices](docs/best-practices.md)
210+
- [Changelog](docs/changelog.md)
211+
212+
[Full docs](https://hardikforall.github.io/MinimaCSS/docs/) · [Component showcase](https://hardikforall.github.io/MinimaCSS/examples/) · [Dashboard demo](https://hardikforall.github.io/MinimaCSS/examples/dashboard.html)
213+
214+
## Browser support
215+
216+
Baseline 2024+ — Safari 17.5+, Chrome 117+, Firefox 121+. Uses `light-dark()`, `color-mix()`, `@starting-style`, `transition-behavior: allow-discrete`, `:user-invalid`, `field-sizing`, container queries, cascade layers, `text-wrap: balance/pretty`, Popover API, and CSS Anchor Positioning.
217+
218+
For older browsers, stay on [MinimaCSS 0.2](https://www.npmjs.com/package/minimacss/v/0.2.0).
219+
220+
## Contributing
221+
222+
```bash
223+
npm install
224+
npm run dev # watches SCSS + serves examples/ at http://localhost:4200
225+
npm run lint # stylelint
226+
npm run build # produces dist/ with autoprefixer
227+
```
93228

94-
- [ ] Create Documentation
229+
Open a PR. Linting and a clean build are required.
95230

96-
### Contributions
231+
## License
97232

98-
Contributions are welcome! If you'd like to improve MinimaCSS, feel free to fork the repository, make your changes, and submit a pull request.
233+
MIT.

0 commit comments

Comments
 (0)