/Starter-Site-Sass-Gulp

Basic starter site with responsive breakpoints, using a modified Twitter Bootstrap, Sass and Gulp

Primary LanguageCSS

Responsive Starter Site with Sass, Gulp and Sourcemaps

Starter skeleton with responsive breakpoints, using a modified Twitter Bootstrap grid and Gulp for optimization

Dependencies

  • Node.js

Install using NPM

$ npm install

Process javascript, sass and any gulp tasks

$ gulp

Watch javascript, sass and any gulp tasks

$ gulp watch

Add SVG to spritemap

Drop any svg into the /src/svg folder. The name of the svg will become the id of the svg. Make any changes such as fill="currentColor" to the svg inside of the /src/svg folder and Gulp will process.

$ gulp watch

JavaScript

File structure

  • /src/lib -> /js/lib -- Any standalone JavaScript file. Usually for polyfills that only need to be loaded in IE.
  • /src/plugins -> /js/plugins.js -- All files get concat, and minified into one plugins.js
  • /src/scripts.js -> /js/scripts.js -- Minified

Changelog

Version 4.0

  • Completely restructed build process
    • All site files live inside /public
    • One src directory that holds all sass and javascript
    • src will compile out to /public/css or relative directory
  • Added empty _assets directory with subdirectories for all project files
  • Reworked and simplified gulpfile.js
    • gulp-autoprefixer
    • gulp-concat
    • gulp-sass
    • gulp-sourcemaps
    • gulp-svg-sprite
  • Sourcemaps are being used

Version 3.1

  • Added base styles
    • centerVert
    • centerVertLarge
    • centerVertAll
    • .resp-break
  • Added @trans(prop) mixin
  • Reworked Gulp process

Version 3.0

  • Removed Bourbon mixin library
  • Added Gulp
  • Added Gulp Plugins
    • Sass
    • UnCSS
    • Autoprefixer
    • Imagemin
    • Clean
    • Notify
    • Rename
    • Concat
    • Uglify
    • Cache
    • Minify CSS
    • HTML Min

Version 2.1

  • Modify responsive breakpoints to offer mobile first and standard breakpoints
  • Adjust base typography
  • Add transition variables and use of bourbon for base transitions
  • Add textToImg placeholder for image heading backgrounds

Version 2.0

  • Updated to the Bootstrap 3 grid. Read the documentation for grid classes.

Breakpoint variables

There are two sets or breakpoints to use based on need

Mobile First

  • breakFirst(medium)
  • breakFirst(large)
  • breakFirst(wide)
  • breakFirst(xxx) - Uses min-width to the custom pixel size

Set breakpoints, with desktop first

  • break(small)
  • break(medium)
  • break(mediumLand)
  • break(mediumPort)
  • break(wide)
  • break(xxx) - Uses min-width to the custom pixel size