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
Quick start
- Fork & clone the repo, or download zip file directly.
- Install dependencies –
npm install. - Watch for changes -
gulp.
Requirements
- Node
- LibSass
- Gulp
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.