https://github.com/hanynan8/hany-sass-utils
A lightweight and modular SCSS utility library that provides responsive spacing, flexbox, grid system, typography, buttons, and color classes. Built for fast front-end development with clean code and full SCSS customization. Gulp is used for SCSS compilation and optional CSS optimization.
https://github.com/hanynan8/hany-sass-utils
css-framework front-end-development frontend gulp gulp-plugin html javascript landing-page responsive-design responsive-web-design sass sass-mixins scss scss-files scss-framework scss-grid scss-library scss-mixins scss-styles scss-utilities
Last synced: about 2 months ago
JSON representation
A lightweight and modular SCSS utility library that provides responsive spacing, flexbox, grid system, typography, buttons, and color classes. Built for fast front-end development with clean code and full SCSS customization. Gulp is used for SCSS compilation and optional CSS optimization.
- Host: GitHub
- URL: https://github.com/hanynan8/hany-sass-utils
- Owner: hanynan8
- Created: 2025-06-26T15:28:31.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-26T16:14:13.000Z (12 months ago)
- Last Synced: 2025-06-26T17:25:56.864Z (12 months ago)
- Topics: css-framework, front-end-development, frontend, gulp, gulp-plugin, html, javascript, landing-page, responsive-design, responsive-web-design, sass, sass-mixins, scss, scss-files, scss-framework, scss-grid, scss-library, scss-mixins, scss-styles, scss-utilities
- Language: SCSS
- Homepage: https://github.com/hanynan8/hany-sass-utils.git
- Size: 411 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎯 Hany SCSS Utilities
A lightweight, customizable SCSS utility library for fast and clean front-end development.
This library provides pre-built utility classes to speed up layout creation, reduce repetitive code, and maintain consistent styling across your projects.
---
## 📦 Features
- ✅ Margin & Padding Utilities (e.g. `.m-1`, `.p-2`, `.pt-3`, `.mb-4`)
- ✅ Flexbox Helpers (e.g. `.d-flex`, `.justify-center`, `.align-items-center`)
- ✅ Text Utilities (e.g. `.text-center`, `.text-uppercase`, `.fw-bold`)
- ✅ Grid System (e.g. `.row`, `.col-6`, `.gap-3`)
- ✅ Pre-styled Buttons (e.g. `.btn`, `.btn-primary`, `.btn-outline`)
- ✅ Color Classes (e.g. `.bg-primary`, `.text-danger`)
- ✅ Responsive classes for mobile, tablet, and desktop
- ✅ Easy customization using SCSS variables and mixins
- ✅ Clean, modular structure
---
## 🚀 How to Use
1. **Clone or Download the Repository:**
```bash
git clone https://github.com/hanynan8/hany-sass-utils.git
```
2. **Install dependencies:**
```bash
npm install
```
3. **Run Gulp to compile SCSS:**
```bash
npx gulp
```
> This will compile SCSS files into CSS and optionally purge unused styles if configured.
4. **Import the main SCSS file in your project:**
```scss
@import "path-to/hany-sass-utils/main";
```
5. **Use the utility classes directly in your HTML:**
```html
Column 1
Column 2
Click Me
```
6. **Customize variables** in `_variables.scss` before compiling to adjust spacing, colors, breakpoints, etc.
---
## 🛠 Built With
- **SASS / SCSS** – compiled with `dart-sass`
- **Gulp** – task runner to compile SCSS and clean up unused CSS
- Modular architecture for scalability
- No external dependencies
---
## 📄 License
This project is licensed under the **MIT License** – free for personal and commercial use.
---
## 👨💻 Author
**Hany Younan**
GitHub: [@hanynan8](https://github.com/hanynan8)
Upwork: [My Upwork Profile](https://www.upwork.com/freelancers/~01999a6834f779f66d)