├── .gitignore ├── README.md ├── gulpfile.js ├── package.json ├── public ├── images │ └── rocky.png ├── index.html ├── javascripts │ ├── app.js │ └── app.min.js └── stylesheets │ ├── screen.css │ └── screen.min.css └── src ├── images └── rocky.png ├── index.html ├── javascripts └── app.js └── sass └── screen.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .sass-cache 4 | .publish 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Starter for HTML/CSS/JS projects 2 | 3 | Includes Gulp to compile Sass into CSS, along with Autoprefixer and Browser Sync. 4 | 5 | ## Setup 6 | 7 | Before starting, you'll need [Node](https://nodejs.org/) (which includes NPM). 8 | 9 | If using OSX, I'd recommend this guide to [getting set up with Node and NPM](http://www.johnpapa.net/how-to-use-npm-global-without-sudo-on-osx/). 10 | 11 | Then install Gulp using `npm install -g gulp`. This installs Gulp globally and is needed later. 12 | 13 | Clone this repo to your local computer using this command: 14 | 15 | git clone https://git@github.com/cssanimation/gulp-sass-starter.git starter 16 | 17 | With the files downloaded, navigate to your `starter` folder on the command line (or Terminal) and run `npm install` to set things up. 18 | 19 | If that doesn't work, it may be necessary to use `sudo npm install`. 20 | 21 | With this set up, you should now be able to run: 22 | 23 | gulp 24 | 25 | This will process any Sass (SCSS) files and launch a web browser showing the current files. Making changes to the files should result in the page updating automatically. 26 | 27 | ## Questions 28 | 29 | Drop me a line at [hello@cssanimation.rocks](hello@cssanimation.rocks) with any questions or thoughts. Pull requests welcomed! 30 | 31 | ### License 32 | 33 | MIT 34 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | sass = require('gulp-sass'), 3 | autoprefixer = require('gulp-autoprefixer'), 4 | minifycss = require('gulp-minify-css'), 5 | jshint = require('gulp-jshint'), 6 | uglify = require('gulp-uglify'), 7 | rename = require('gulp-rename'), 8 | del = require('del'), 9 | concat = require('gulp-concat'), 10 | notify = require('gulp-notify'), 11 | cache = require('gulp-cache'), 12 | plumber = require('gulp-plumber'), 13 | browserSync = require('browser-sync'), 14 | cssshrink = require('gulp-cssshrink'), 15 | cp = require('child_process'), 16 | changed = require('gulp-changed'), 17 | imagemin = require('gulp-imagemin'), 18 | size = require('gulp-size'), 19 | ghPages = require('gulp-gh-pages'); 20 | 21 | 22 | gulp.task('styles', function() { 23 | gulp.src('./src/sass/**/*.scss') 24 | .pipe(sass().on('error', sass.logError)) 25 | .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 26 | .pipe(gulp.dest('public/stylesheets')) 27 | .pipe(rename({suffix: '.min'})) 28 | //.pipe(minifycss()) 29 | //.pipe(cssshrink()) 30 | .pipe(gulp.dest('public/stylesheets')) 31 | .pipe(browserSync.reload({stream:true})); 32 | }); 33 | 34 | gulp.task('scripts', function() { 35 | return gulp.src(['./src/javascripts/**/*.js']) 36 | //.pipe(jshint('.jshintrc')) 37 | //.pipe(jshint.reporter('default')) 38 | .pipe(plumber()) 39 | .pipe(concat('app.js')) 40 | .pipe(gulp.dest('public/javascripts')) 41 | .pipe(rename({suffix: '.min'})) 42 | .pipe(uglify()) 43 | .pipe(gulp.dest('public/javascripts')) 44 | .pipe(browserSync.reload({stream:true})); 45 | }); 46 | 47 | // Optimizes the images that exists 48 | gulp.task('images', function () { 49 | return gulp.src('src/images/**') 50 | .pipe(changed('public/images')) 51 | .pipe(imagemin({ 52 | // Lossless conversion to progressive JPGs 53 | progressive: true, 54 | // Interlace GIFs for progressive rendering 55 | interlaced: true 56 | })) 57 | .pipe(gulp.dest('public/images')) 58 | .pipe(size({title: 'images'})); 59 | }); 60 | 61 | gulp.task('html', function() { 62 | gulp.src('./src/**/*.html') 63 | .pipe(gulp.dest('public/')) 64 | }); 65 | 66 | gulp.task('browser-sync', ['styles', 'scripts'], function() { 67 | browserSync({ 68 | server: { 69 | baseDir: "./public/", 70 | injectChanges: true // this is new 71 | } 72 | }); 73 | }); 74 | 75 | gulp.task('deploy', function() { 76 | return gulp.src('./public/**/*') 77 | .pipe(ghPages()); 78 | }); 79 | 80 | gulp.task('watch', function() { 81 | // Watch .html files 82 | gulp.watch('src/**/*.html', ['html', browserSync.reload]); 83 | gulp.watch("public/*.html").on('change', browserSync.reload); 84 | // Watch .sass files 85 | gulp.watch('src/sass/**/*.scss', ['styles', browserSync.reload]); 86 | // Watch .js files 87 | gulp.watch('src/javascripts/*.js', ['scripts', browserSync.reload]); 88 | // Watch image files 89 | gulp.watch('src/images/**/*', ['images', browserSync.reload]); 90 | }); 91 | 92 | gulp.task('default', function() { 93 | gulp.start('styles', 'scripts', 'images', 'html', 'browser-sync', 'watch'); 94 | }); 95 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Gulp-Starter", 3 | "version": "0.0.1", 4 | "description": "", 5 | "main": "gulpfile.js", 6 | "author": "Donovan Hutchinson, CSSAnimation.rocks", 7 | "license": "MIT", 8 | "homepage": "https://cssanimation.rocks", 9 | "repository": { 10 | "type": "git", 11 | "url": "git://github.com/cssanimation/gulp-sass-starter.git" 12 | }, 13 | "devDependencies": { 14 | "browser-sync": "^2.7.5", 15 | "del": "^1.2.0", 16 | "gulp": "^3.8.11", 17 | "gulp-autoprefixer": "^2.3.0", 18 | "gulp-cache": "^0.2.9", 19 | "gulp-changed": "^1.2.1", 20 | "gulp-concat": "^2.5.2", 21 | "gulp-cssshrink": "^0.1.4", 22 | "gulp-gh-pages": "^0.5.1", 23 | "gulp-imagemin": "^2.2.1", 24 | "gulp-jshint": "^1.11.0", 25 | "gulp-minify-css": "^1.1.1", 26 | "gulp-notify": "^2.2.0", 27 | "gulp-plumber": "^1.0.1", 28 | "gulp-rename": "^1.2.2", 29 | "gulp-sass": "^2.0.1", 30 | "gulp-size": "^1.2.1", 31 | "gulp-uglify": "^1.2.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /public/images/rocky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssanimation/gulp-sass-starter/909246dd89dbdc9d7743d6e21b09dc6b44c41744/public/images/rocky.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | New site 7 | 8 | 9 | 10 | 11 |

Breathe

12 | Fork me on GitHub 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/javascripts/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssanimation/gulp-sass-starter/909246dd89dbdc9d7743d6e21b09dc6b44c41744/public/javascripts/app.js -------------------------------------------------------------------------------- /public/javascripts/app.min.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssanimation/gulp-sass-starter/909246dd89dbdc9d7743d6e21b09dc6b44c41744/public/javascripts/app.min.js -------------------------------------------------------------------------------- /public/stylesheets/screen.css: -------------------------------------------------------------------------------- 1 | /* Your styles (and Sass) start here */ 2 | /*** Example styles ***/ 3 | body { 4 | background: #36a1d9; } 5 | 6 | h1 { 7 | -webkit-transition: all 3s ease-out; 8 | transition: all 3s ease-out; 9 | -webkit-animation: pulsate 8s ease-out infinite; 10 | animation: pulsate 8s ease-out infinite; 11 | position: absolute; 12 | top: 50%; 13 | left: 50%; 14 | -webkit-transform: translate(-50%, -50%); 15 | -ms-transform: translate(-50%, -50%); 16 | transform: translate(-50%, -50%); 17 | margin: 0; 18 | font-family: Helvetica, Arial, Sand-serif; 19 | font-weight: bold; 20 | font-size: 6em; 21 | color: white; 22 | color: rgba(255, 255, 255, 0.8); 23 | text-align: center; 24 | text-transform: uppercase; } 25 | 26 | h1:hover { 27 | color: #5cefaf; } 28 | 29 | /*** Keyframes - used with the "animation" property in the h1 ***/ 30 | @-webkit-keyframes pulsate { 31 | 0%, 20% { 32 | -webkit-transform: translate(-50%, -50%) scale(1); 33 | transform: translate(-50%, -50%) scale(1); 34 | -webkit-filter: blur(5px); 35 | filter: blur(5px); } 36 | 50%, 70% { 37 | -webkit-transform: translate(-50%, -50%) scale(1.5); 38 | transform: translate(-50%, -50%) scale(1.5); 39 | -webkit-filter: none; 40 | filter: none; } 41 | 100% { 42 | -webkit-transform: translate(-50%, -50%) scale(1); 43 | transform: translate(-50%, -50%) scale(1); 44 | -webkit-filter: blur(5px); 45 | filter: blur(5px); } } 46 | @keyframes pulsate { 47 | 0%, 20% { 48 | -webkit-transform: translate(-50%, -50%) scale(1); 49 | transform: translate(-50%, -50%) scale(1); 50 | -webkit-filter: blur(5px); 51 | filter: blur(5px); } 52 | 50%, 70% { 53 | -webkit-transform: translate(-50%, -50%) scale(1.5); 54 | transform: translate(-50%, -50%) scale(1.5); 55 | -webkit-filter: none; 56 | filter: none; } 57 | 100% { 58 | -webkit-transform: translate(-50%, -50%) scale(1); 59 | transform: translate(-50%, -50%) scale(1); 60 | -webkit-filter: blur(5px); 61 | filter: blur(5px); } } 62 | 63 | /*** Media queries for adjusting to different screen sizes ***/ 64 | @media only screen and (max-width: 600px) { 65 | h1 { 66 | font-size: 2em; } } 67 | -------------------------------------------------------------------------------- /public/stylesheets/screen.min.css: -------------------------------------------------------------------------------- 1 | /* Your styles (and Sass) start here */ 2 | /*** Example styles ***/ 3 | body { 4 | background: #36a1d9; } 5 | 6 | h1 { 7 | -webkit-transition: all 3s ease-out; 8 | transition: all 3s ease-out; 9 | -webkit-animation: pulsate 8s ease-out infinite; 10 | animation: pulsate 8s ease-out infinite; 11 | position: absolute; 12 | top: 50%; 13 | left: 50%; 14 | -webkit-transform: translate(-50%, -50%); 15 | -ms-transform: translate(-50%, -50%); 16 | transform: translate(-50%, -50%); 17 | margin: 0; 18 | font-family: Helvetica, Arial, Sand-serif; 19 | font-weight: bold; 20 | font-size: 6em; 21 | color: white; 22 | color: rgba(255, 255, 255, 0.8); 23 | text-align: center; 24 | text-transform: uppercase; } 25 | 26 | h1:hover { 27 | color: #5cefaf; } 28 | 29 | /*** Keyframes - used with the "animation" property in the h1 ***/ 30 | @-webkit-keyframes pulsate { 31 | 0%, 20% { 32 | -webkit-transform: translate(-50%, -50%) scale(1); 33 | transform: translate(-50%, -50%) scale(1); 34 | -webkit-filter: blur(5px); 35 | filter: blur(5px); } 36 | 50%, 70% { 37 | -webkit-transform: translate(-50%, -50%) scale(1.5); 38 | transform: translate(-50%, -50%) scale(1.5); 39 | -webkit-filter: none; 40 | filter: none; } 41 | 100% { 42 | -webkit-transform: translate(-50%, -50%) scale(1); 43 | transform: translate(-50%, -50%) scale(1); 44 | -webkit-filter: blur(5px); 45 | filter: blur(5px); } } 46 | @keyframes pulsate { 47 | 0%, 20% { 48 | -webkit-transform: translate(-50%, -50%) scale(1); 49 | transform: translate(-50%, -50%) scale(1); 50 | -webkit-filter: blur(5px); 51 | filter: blur(5px); } 52 | 50%, 70% { 53 | -webkit-transform: translate(-50%, -50%) scale(1.5); 54 | transform: translate(-50%, -50%) scale(1.5); 55 | -webkit-filter: none; 56 | filter: none; } 57 | 100% { 58 | -webkit-transform: translate(-50%, -50%) scale(1); 59 | transform: translate(-50%, -50%) scale(1); 60 | -webkit-filter: blur(5px); 61 | filter: blur(5px); } } 62 | 63 | /*** Media queries for adjusting to different screen sizes ***/ 64 | @media only screen and (max-width: 600px) { 65 | h1 { 66 | font-size: 2em; } } 67 | -------------------------------------------------------------------------------- /src/images/rocky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssanimation/gulp-sass-starter/909246dd89dbdc9d7743d6e21b09dc6b44c41744/src/images/rocky.png -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | New site 7 | 8 | 9 | 10 | 11 |

Breathe

12 | Fork me on GitHub 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/javascripts/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssanimation/gulp-sass-starter/909246dd89dbdc9d7743d6e21b09dc6b44c41744/src/javascripts/app.js -------------------------------------------------------------------------------- /src/sass/screen.scss: -------------------------------------------------------------------------------- 1 | /* Your styles (and Sass) start here */ 2 | 3 | /*** Example styles ***/ 4 | body { 5 | background: #36a1d9; 6 | } 7 | 8 | h1 { 9 | // Transition: Used for hover effect 10 | transition: all 3s ease-out; 11 | 12 | // Animation: Used with the keyframes below 13 | animation: pulsate 8s ease-out infinite; 14 | 15 | // Normal stylin' 16 | position: absolute; 17 | top: 50%; 18 | left: 50%; 19 | transform: translate(-50%, -50%); 20 | 21 | margin: 0; 22 | 23 | font-family: Helvetica, Arial, Sand-serif; 24 | font-weight: bold; 25 | font-size: 6em; 26 | color: white; 27 | color: rgba(255,255,255,0.8); 28 | 29 | text-align: center; 30 | text-transform: uppercase; 31 | 32 | } 33 | 34 | h1:hover { 35 | color: #5cefaf; 36 | } 37 | 38 | /*** Keyframes - used with the "animation" property in the h1 ***/ 39 | 40 | @keyframes pulsate { 41 | 0%, 20% { 42 | transform: translate(-50%, -50%) scale(1); 43 | filter: blur(5px); 44 | } 45 | 50%, 70% { 46 | transform: translate(-50%, -50%) scale(1.5); 47 | filter: none; 48 | } 49 | 100% { 50 | transform: translate(-50%, -50%) scale(1); 51 | filter: blur(5px); 52 | } 53 | } 54 | 55 | /*** Media queries for adjusting to different screen sizes ***/ 56 | 57 | @media only screen and (max-width: 600px) { 58 | h1 { 59 | font-size: 2em; 60 | } 61 | } 62 | 63 | --------------------------------------------------------------------------------