https://github.com/moonstruckdev/sassy-structure

A Comprehensive SCSS/SASS File Structure Generator for Streamlined Development
https://github.com/moonstruckdev/sassy-structure

javascript js nodejs npm npm-package sass sass-boilerplate sass-template scss scss-modules scss-template web webdevelopment

Last synced: 7 months ago
JSON representation

A Comprehensive SCSS/SASS File Structure Generator for Streamlined Development

• Host: GitHub
• URL: https://github.com/moonstruckdev/sassy-structure
• Owner: MoonstruckDev
• Created: 2023-12-21T13:21:18.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-28T12:41:11.000Z (almost 2 years ago)
• Last Synced: 2025-03-04T01:34:13.884Z (7 months ago)
• Topics: javascript, js, nodejs, npm, npm-package, sass, sass-boilerplate, sass-template, scss, scss-modules, scss-template, web, webdevelopment
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/sassy-structure?activeTab=readme
• Size: 8.79 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# Sassy Structure

  [![License](https://img.shields.io/static/v1?label=License&message=MIT&color=blue&?style=plastic&logo=appveyor)](https://opensource.org/license/MIT)

[![made-with-javascript](https://img.shields.io/badge/Made%20with-JavaScript-1f425f.svg)](https://www.javascript.com)

![GitHub stars](https://badgen.net/github/stars/moonstruckdev/sassy-structure)

![GitHub stars](https://badgen.net/github/watchers/moonstruckdev/sassy-structure)

## Table Of Content

- [Description](#description)

- [Deployed website link](#deployedWebsite)

- [Installation](#installation)

- [Usage](#usage)

- [GitHub](#github)

- [Contact](#contact)

- [License](#license)

## Description

  What was my motivation? 

- Everytime I booted up a project I hated creating all the files and folders as it was slow.

Why did I build to project and what did it solve?

- I built this project so it's more efficient when starting a new project and it solves having to create the whole scss file structure manually. just run the command and it does it automatically.

### File Structure (Files can be toggled as of 1.2.0)


.

├── base

│   ├── _reset.scss

│   └── _typography.scss

├── components

│   ├── _buttons.scss

│   ├── _carousel.scss

│   ├── _cover.scss

│   └── _dropdown.scss

├── layout

│   ├── _footer.scss

│   ├── _forms.scss

│   ├── _grid.scss

│   ├── _header.scss

│   ├── _navigation.scss

│   └── _sidebar.scss

├── pages

│   ├── _contact.scss

│   └── _home.scss

├── sass-utils

│   ├── _functions.scss

│   ├── _mixins.scss

│   └── _variables.scss

└── style.scss



Deployed website: https://www.npmjs.com/package/sassy-structure

## Installation

npm i sassy-structure


Sassy-Structure is built with the following tools and libraries: 


Javascript

npm

Node.js



## Usage

 

To run the script just type

npm run create-sassy-structure


## Special Thanks

Special thanks to @AdamMarsden for the stucture inspiration

https://gist.github.com/AdamMarsden/7b85e8d5bdb5bef969a0

## Contact

MoonstruckDev

Feel free to reach out to me on my email:

dev@moonstruck.pro

## License

[![License](https://img.shields.io/static/v1?label=Licence&message=MIT&color=blue)](https://opensource.org/license/MIT)