CSS ApacheConf JavaScript HTML


forthebadge forthebadge forthebadge

Sassy Starter Stories in Ready

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

Getting Started

  1. If needed, install node and npm (Node Package Manager).
  2. If needed, install gulp with npm install gulp -g.
  3. Clone this repo with git clone https://github.com/minamarkham/sassy-starter or download the zip.
  4. 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).
  5. In terminal, type npm install. If (and only if) npm install isn't working, try sudo npm install. This should install all dependencies.
  6. In terminal, enter gulp.
  7. 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!
  8. Edit your code inside of the src folder.
  9. 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.
  10. 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:


  "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

Directory structure

β”Œβ”€β”€ .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

Bugs & Support

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

Thanks & Resources

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