A lightweight CLI tool that quickly generates a modern frontend project setup with structured SCSS, HTML, JavaScript, and automated Gulp tasks. Perfect for developers who want a ready-to-use SCSS architecture, optimized build workflow, and faster web deve
npm install scss-projectbash
npm install -g scss-project
npx scss-project
`
You can use the scss/ folder with any modern frontend setup like:
- Angular
- React
- Vue
It provides a modular architecture (base, components, layout, pages, utilities, vendors) for clean, reusable, and maintainable styles.
You can also add third-party libraries like Bootstrap or Owl Carousel in the vendors/ folder for extended functionality.
$3
`bash
scss-project g foldername/filename
`
This will:
- š§ Create src/scss/foldername/\_filename.scss
- āļø Add boilerplate SCSS with @use "utilities/\_\_utilities-dir"
- š Auto-import into \_\_\*-dir.scss (sorted alphabetically)
$3
Running gulp minifycss merges duplicate media queries, cleans and minifies the CSS, and outputs a smaller, optimized file as bundle.min.css for your website.
`bash
npm run buildcss
`
`
.card {
padding: 1rem;
@media (max-width: 768px) {
padding: 0.5rem;
}
}
.header {
font-size: 2rem;
@media (max-width: 768px) {
font-size: 1.5rem;
}
}
`
Compiles to:
`
.card {
padding: 1rem;
}
.header {
font-size: 2rem;
}
@media (max-width: 768px) {
.card {
padding: 0.5rem;
}
.header {
font-size: 1.5rem;
}
}
`
$3
`
Project/
āāā .gitignore
āāā gulpfile.js
āāā index.html
āāā package.json
āāā src/
āāā css/
āāā fonts/
āāā icons/
āāā images/
āāā js/
ā āāā index.js
ā āāā bootstrap/
ā āāā jquery/
ā āāā owl_carousel/
āāā scss/
āāā style.scss
āāā base/
ā āāā _base.scss
ā āāā _typography.scss
ā āāā __base-dir.scss
āāā components/
ā āāā __components-dir.scss
āāā layout/
ā āāā _footer.scss
ā āāā _header.scss
ā āāā _layout.scss
ā āāā _main.scss
ā āāā _navigation.scss
ā āāā _sidebar.scss
ā āāā __layout-dir.scss
āāā pages/
ā āāā _login.scss
ā āāā __pages-dir.scss
āāā ui/
ā āāā _button.scss
ā āāā __ui-dir.scss
āāā utilities/
ā āāā _extend.scss
ā āāā _function.scss
ā āāā _icons.scss
ā āāā _mixins.scss
ā āāā _utils.scss
ā āāā _variables.scss
ā āāā __utilities-dir.scss
āāā vendors/
āāā __vendors-dir.scss
āāā bootstrap/
ā āāā bootstrap.min.css
āāā owl_carousel/
āāā owl.carousel.min.css
āāā owl.theme.default.min.css
``