Sassy Starter
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
- If needed, install
node
andnpm
(Node Package Manager).
- If needed, install
gulp
withnpm 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 typecd
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, trysudo 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 thedist/
folder, as it gets deleted frequently. - Keep
gulp
running while you're making changes. When you want to stop the gulp task, hitctrl + C
.
For theming: add separate file (theme.scss) insrc/scss/themes/
, override the default $theme
variable, and run gulp themes
.
Requirements
- Node/NPM
- LibSass
- Gulp
Features
- 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
toem
,px
torem
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 fixesCSS Pesticide
for easy CSS debuggingjQuery
via CDN, with a local fallbackModernizr
, via CDN, for feature detectionApache Server Configs
that, among other, improve the web site's performance and security
Dependencies
"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"
Tasks
- 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.