:tada: Sassy starter - HTML / SCSS (SMACSS)
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
node
and npm
(Node Package Manager).gulp
with npm install gulp -g
.git clone https://github.com/minamarkham/sassy-starter
or download the zip.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).npm install
. If (and only if) npm install
isn't working, try sudo npm install
. This should install all dependencies.gulp
.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!src
folder.dist/
. Never edit files within the dist/
folder, as it gets deleted frequently.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
.
px
to em
, px
to rem
and other useful functions.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 "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"
┌── .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.