sshikhrakar/sass-starter

SASS Starter - SCSS boilerplate for SMACSS

Sass-Starter

SASS Starter - SCSS for SMACSS

Starter code for SASS based on Scalar and Modular Architecture for CSS (SMACSS). SMACSS (pronounced “smacks”) is more style guide than rigid framework. This allows for more customization to the structure as we see fit.

Visit this link for documentation.

Features

• SMACSS structure for SASS.
• Mixins for BEM naming conventions and Media queries.
• SASS functions for unit conversions.
• Bootstrap Grid and Print CSS.
• Normalize CSS.
• Live reloading with BrowserSync.
• Packages such as JS/CSS minification and CSS autoprefixer included.

Getting Started

Initial Checks:

• Install node and npm, yarn (recommended) if not installed.

Installation:

1. Clone Sass-Starter repo with git clone [email protected]:sshikhrakar/Sass-Starter.git (using SSH - recommended) or git clone https://github.com/sshikhrakar/Sass-Starter.git (using HTTPS) or download the zip.
2. Go to your project folder using a terminal, and run npm install or yarn install.
3. After installing npm packages, run npm run start or yarn start to start the server. Your default browser will open automatically and the server will be hosted at http://localhost:8080.

For building your minified css code and optimized images run npm run build or yarn build. All files will be created at dist/ folder.

Include or remove bootstrap at utilities/_manifest.scss.

Prerequisites

1. Node/NPM >= 12
2. Yarn (recommended/optional)

Contributing

Please read the CONTRIBUTING guidelines for details on how to contribute. Also read the Code of Conduct here.

See also the list of contributors who participated in this project.

Bugs and Features

Report a bug or request a new feature by opening an issue.

Guidelines for bug report at CONTRIBUTING.md.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgments

This project uses awesome work of other projects:

• normalize.css
• bootstrap
• SMACSS

sass-starter's Issues

Watch Images during development.

• Watch Images during development.

Add support for javascript files.

Add support for javascript files.

Image path does not match in dist folder.

Image path does not match in dist folder.