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.