• Stars
    star
    759
  • Rank 59,846 (Top 2 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 10 years ago
  • Updated almost 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐ŸŽ‰ Sassy starter - HTML / SCSS (SMACSS)

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).
  • If needed, install gulp with npm 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 type cd 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, try sudo 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 the dist/ folder, as it gets deleted frequently.
  • 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.

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 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.

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.