A starter toolkit based on Scalable and Modular Architecture for CSS (SMACSS) and Atomic Design for Sass (SCSS) projects. Do what you'd like with it :)

Styles are broken down into the following groups: Base, Layout, Atoms, Molecules, Organisms, States, Themes, Utilities and Overrides

1. If needed, install node and npm (Node Package Manager).

• If needed, install gulp with npm install gulp -g.
• Clone this repo with git clone https://github.com/minamarkham/sassy-starter or download the zip.
• In terminal, cd to the folder containing your project. Alternatively, you can type cd and drag the location of the folder into your terminal and hit enter (on Macs).
• In terminal, type npm install. If (and only if) npm install isn't working, try sudo npm install. This should install all dependencies.
• In terminal, enter gulp.
• Your browser should open at http://localhost:3000. You can access this same page on any device on the same wifi network and they'll see whats on your screen. It'll even sync scrolls and clicks!
• Edit your code inside of the src folder.
• Your complied and minified css, html, and javascript files will be created and updated in dist/. Never edit files within the dist/ folder, as it gets deleted frequently.
• Keep gulp running while you're making changes. When you want to stop the gulp task, hit ctrl + C.

For theming: add separate file (theme.scss) insrc/scss/themes/, override the default $theme variable, and run gulp themes.

• Node/NPM
• LibSass
• Gulp

• Live reloading with BrowserSync
• Image Minification
• Github Pages deployment
• Sass linting (based on default config)
• Autoprefixer configuration
• SMACSS and Atomic Design-based folder structure
• px to em, px to rem and other useful functions.
• Mixins for inlining media queries.

• Useful CSS helper classes.
• Default print styles, performance optimized.
• "Delete-key friendly." Easy to strip out parts you don't need.

• Includes:
  • Normalize.css for CSS normalizations and common bug fixes
  • CSS Pesticide for easy CSS debugging
  • jQuery via CDN, with a local fallback
  • Modernizr, via CDN, for feature detection
  • Apache Server Configs that, among other, improve the web site's performance and security

 "browser-sync": "^2.0.0-rc4", "colors": "^1.1.2", "del": "^2.0.2", "gulp-autoprefixer": "^2.1.0", "gulp-concat": "^2.4.3", "gulp-gh-pages": "^0.4.0", "gulp-imagemin": "^2.1.0", "gulp-jshint": "^1.9.0", "gulp-minify-css": "^0.3.12", "gulp-minify-html": "^0.1.8", "gulp-notify": "^2.2.0", "gulp-plumber": "^0.6.6", "gulp-rename": "^1.2.0", "gulp-sass": "^1.3.2", "gulp-sass-lint": "1.0.1", "gulp-size": "^1.2.0", "gulp-sourcemaps": "^1.5.2", "gulp-uglify": "^1.0.2", "imagemin-pngquant": "^4.0.0", "sassdoc": "^2.1.15", "vinyl-paths": "^2.0.0" 

• clean:dist
• styles
• browser-sync
• deploy
• js-app
• js-libs
• sass-lint
• minify-html
• watch
• imagemin
• stats
• sassdoc
• themes
• default
  • clean:dist
  • browser-sync
  • js-app
  • js-libs
  • imgmin
  • minify-html
  • styles
  • watch
• build
  • clean:dist
  • js-app
  • js-libs
  • imgmin
  • minify-html
  • styles
  • copy
• audit
  • sass-lint
  • stats

┌── .gitignore ├── .htaccess ├── .sass-lint.yml ├── .travis.yml ├── src │   ├── browserconfig.xml │   ├── crossdomain.xml │   ├── humans.txt │   ├── icons │   │   ├── apple-touch-icon-114x114-precomposed.png │   │   ├── apple-touch-icon-57x57-precomposed.png │   │   ├── apple-touch-icon-72x72-precomposed.png │   │   ├── apple-touch-icon-precomposed.png │   │   ├── apple-touch-icon.png │   │   ├── favicon.ico │   │   └── favicon.png │   ├── img │   ├── index.html │   ├── js │   ├── robots.txt │   └── scss │   ├── atoms │   │   └── _index.scss │   ├── base │   │   ├── _base.scss │   │   └── _index.scss │   ├── layout │   │   └── _index.scss │   ├── libs │   │   ├── _index.scss │   │   ├── _normalize.scss │   │   └── _pesticide.scss │   ├── molecules │   │   └── _index.scss │   ├── organisms │   │   └── _index.scss │   ├── overrides │   │   └── _index.scss │   ├── states │   │   ├── _index.scss │   │   └── _print.scss │   ├── themes │   │   └── rebeccapurple.scss │   ├── utilities │   │   ├── _colors.scss │   │   ├── _config.scss │   │   ├── _fonts.scss │   │   ├── _functions.scss │   │   ├── _index.scss │   │   ├── _mixins.scss │   │ └── _typography.scss │   ├── styles.scss │   └── _shame.scss ├── gulpfile.js └── package.json 

Developed by @MinaMarkham. Please list all bugs and feature requests in the Github issue tracker.

This toolkit is based on the work of the following fine people & projects.

• HTML5 Boilerplate
• Scalable and Modular Architecture for CSS (SMACSS)
• Atomic Design