https://github.com/9itish/neatu
A lightweight mobile-first CSS framework for you to quickly create responsive websites that look great everywhere with least possible HTML bloat.
https://github.com/9itish/neatu
css-flexbox css-framework css3 javascript responsive-layout scss-framework web-development
Last synced: about 1 month ago
JSON representation
A lightweight mobile-first CSS framework for you to quickly create responsive websites that look great everywhere with least possible HTML bloat.
- Host: GitHub
- URL: https://github.com/9itish/neatu
- Owner: 9itish
- Created: 2024-08-02T09:48:38.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-05-27T04:28:25.000Z (about 1 year ago)
- Last Synced: 2025-06-20T14:40:37.436Z (about 1 year ago)
- Topics: css-flexbox, css-framework, css3, javascript, responsive-layout, scss-framework, web-development
- Language: SCSS
- Homepage: https://hellonitish.com/neatu/
- Size: 170 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NeatU CSS Framework
**NeatU** is a lightweight, utility-first CSS framework built for speed, clarity, and control. It’s a no-BS alternative to bloated CSS libraries — gzipped under **6KB**, yet packed with everything you actually need.
> ⚡ Built to help you move fast without fighting your CSS.
I’m continuously refining it, and I’m open to feedback, ideas, or pull requests.
## Features
- Utility-first classes (`ntu-flex`, `ntu-pad-tb`, `ntu-tcl-error`, etc.)
- Fully functional important components like accordions, navigation, and tabs.
- Clean, semantic class naming (`ntu-` prefix to avoid conflicts)
- Generated from SCSS to keep it modular and easily customizable.
- Responsive and minimal — no junk
## 📦 File Structure
```
css/
├── neatu.css # Compiled main CSS
├── neatu.min.css # Minified CSS
├── ... more files # More files
scss/
├── _accordion.scss # Accordion Partials
├── _buttons.scss # Button Partials
├── _flexbox.scss # Flexbox based layout (Grid coming soon!)
├── _variables.scss # Colors, breakpoints, etc.
├── neatu.scss # Main SCSS import
js/
├── neatu.js # All framework functionality
...
```
## 🧱 Basic Usage
### Include in HTML
```html
```
### Example: Flexbox
```html
Item 1
Item 2
```
### Example: Accordion
```html
Click me
Hidden content
```
## 🎨 Customization
Edit `scss/_variables.scss` to tweak:
```scss
$colors: (
'success': #4CAF50,
'error': #E53935,
'warning': #F57C00,
'normal': #2196F3,
'text': #222222,
'border': #AAAAAA,
'brand-primary': #00796B,
'brand-secondary': #0C3671
);
```
Run SCSS build:
```bash
npm run sass:build
```
## Philosophy
- Don’t ship what you won’t use
- Prefix everything to avoid namespace pollution
- Give devs control, not assumptions
- Optimize for small size + mental load
## 📉 Size
| File | Size |
|-----------------|---------|
| `neatu.css` | ~42 KB |
| `ntu.min.css` | ~34 KB |
| Gzipped | **~5.73 KB** |
## 🛠 Browser Support
- ✅ Chrome
- ✅ Firefox
- ✅ Edge
- ✅ Safari
- IE (Let it die)
## Roadmap
1. Support for grid based layout.
2. More theming options and config overrides.
3. Improved accessibility.
## 📃 License
MIT — use it, modify it, make it your own.