├── .bowerrc ├── .editorconfig ├── .eslintrc ├── .github └── dependabot.yml ├── .gitignore ├── .travis.yml ├── README.md ├── assets ├── fonts │ └── .gitkeep ├── images │ └── .gitkeep ├── manifest.json ├── scripts │ └── main.js └── styles │ ├── common │ ├── _global.scss │ ├── _mixins.scss │ └── _variables.scss │ ├── components │ ├── _buttons.scss │ ├── _forms.scss │ ├── _grid.scss │ └── _icons.scss │ ├── layouts │ ├── _footer.scss │ ├── _header.scss │ ├── _pages.scss │ ├── _posts.scss │ └── _sidebar.scss │ └── main.scss ├── bower.json ├── gulpfile.js ├── humans.txt ├── index.html ├── package-lock.json ├── package.json └── robots.txt /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | indent_style = space 7 | indent_size = 4 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": "eslint:recommended", 4 | "env": { 5 | "es6": true, 6 | "amd": true, 7 | "browser": true, 8 | "jquery": true, 9 | "node": true 10 | }, 11 | "rules": { 12 | "no-console": 0 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: weekly 7 | time: "13:00" 8 | open-pull-requests-limit: 10 9 | ignore: 10 | - dependency-name: cssnano 11 | versions: 12 | - 5.0.0 13 | - dependency-name: autoprefixer 14 | versions: 15 | - 10.2.4 16 | - dependency-name: critical 17 | versions: 18 | - 3.0.0 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Include your project-specific ignores in this file 2 | # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files 3 | dist 4 | bower_components 5 | node_modules 6 | npm-debug.log 7 | sage-starter.sublime-workspace 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - "12" 5 | - "8" 6 | - "node" 7 | 8 | env: 9 | - TRAVIS_NODE_VERSION="12" 10 | - TRAVIS_NODE_VERSION="8" 11 | 12 | cache: 13 | directories: 14 | - bower_components 15 | - node_modules 16 | - vendor 17 | 18 | install: 19 | - source ~/.nvm/nvm.sh && nvm install $TRAVIS_NODE_VERSION && nvm use $TRAVIS_NODE_VERSION 20 | - travis_retry npm install -g npm@latest 21 | - travis_retry npm install -g bower gulp 22 | - node -v && npm -v && bower -v && gulp -v 23 | - npm rebuild 24 | - travis_retry npm install 25 | - npm prune 26 | 27 | script: 28 | - npm run build 29 | - npm run lint 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > [!NOTE] 2 | > I will deprecate this project in favor of a new starter theme based on Sage 9 called [Forage](https://github.com/asuh/forage). I highly recommend to switch to Forage which is in active development and has fewer dependencies. 3 | 4 | # [Sage Starter](https://github.com/asuh/sage/) 5 | 6 | Sage Starter is a starter theme based on Roots Sage theme version 8.6, which references HTML5 Boilerplate, Gulp, and Bower that will help you make better websites. 7 | 8 | * Homepage: [https://github.com/asuh/sage-starter/](https://github.com/asuh/sage-starter/) 9 | * Source: [https://github.com/roots/sage](https://github.com/roots/sage) 10 | * Documentation: [https://roots.io/sage/docs/](https://roots.io/sage/docs/) 11 | 12 | ## Requirements 13 | 14 | | Prerequisite | How to check | How to install 15 | | ----------------- | ------------ | ------------- | 16 | | Node.js >= 6.9.x | `node -v` | [nodejs.org](https://nodejs.org/) | 17 | | gulp-cli >= 2.0.0 | `gulp -v` | `npm install -g gulp-cli` | 18 | | Bower >= 1.3.12 | `bower -v` | `npm install -g bower` | 19 | | Optional | | | 20 | | PHP >= 7.x.x | `php -v` | [php.net](https://www.php.net/manual/en/install.php) | 21 | 22 | PHP is optional, but use the latest PHP version that's available. 23 | 24 | For more installation notes, refer to the [Install gulp and Bower](#install-gulp-and-bower) section in this document. 25 | 26 | ## Features 27 | 28 | * [gulp](https://gulpjs.com/) build script that compiles both Sass and Less, checks for JavaScript errors, optimizes images, and concatenates and minifies files 29 | * [BrowserSync](https://www.browsersync.io/) for keeping multiple browsers and devices synchronized while testing, along with injecting updated CSS and JS into your browser while you're developing 30 | * [Bower](https://bower.io/) for front-end package management 31 | * [asset-builder](https://github.com/austinpray/asset-builder) for the JSON file based asset pipeline 32 | * ARIA roles and microformats 33 | 34 | ## Installation 35 | 36 | Clone the git repo - `git clone https://github.com/asuh/sage-starter.git` and then rename the directory to the name of your theme or website. 37 | 38 | ## Theme development 39 | 40 | Sage Starter uses [gulp](https://gulpjs.com/) as its build system and [Bower](https://bower.io/) to manage front-end packages. 41 | 42 | Bower is outdated and not recommended since the mid-2010s, but will remain in this starter project for the time being. 43 | 44 | ### Install gulp and Bower 45 | 46 | Building this project requires [node.js](https://nodejs.org/download/). For best results, update to the latest version of npm: `npm i -g npm@latest`. I personally recommend using [NVM](https://github.com/nvm-sh/nvm). 47 | 48 | From the command line: 49 | 50 | 1. Install [gulp-cli](https://gulpjs.com) and [Bower](https://bower.io/) globally with `npm i -g gulp bower` 51 | 2. Navigate to the theme directory, then run `npm i` 52 | 3. Run `bower install` 53 | 54 | You now have all the necessary dependencies to run the build process. 55 | 56 | ### Available gulp commands 57 | 58 | * `gulp` — Compile and optimize the files in your assets directory 59 | * `gulp watch` — Compile assets when file changes are made 60 | * `gulp --production` — Compile assets for production (no source maps). 61 | 62 | ### Using BrowserSync 63 | 64 | To use BrowserSync during `gulp watch` you need to update `devUrl` at the bottom of `assets/manifest.json` to reflect your local development hostname. 65 | 66 | For example, if your local development URL is `http://project-name.test` you would update the file to read: 67 | ```json 68 | ... 69 | "config": { 70 | "devUrl": "http://project-name.test" 71 | } 72 | ... 73 | ``` 74 | If your local development URL looks like `http://localhost:8888/project-name/` you would update the file to read: 75 | ```json 76 | ... 77 | "config": { 78 | "devUrl": "http://localhost:8888/project-name/" 79 | } 80 | ... 81 | ``` 82 | 83 | ### SVG support 84 | 85 | Sage Starter has built-in SVG support! The preferred method for using SVG as implemented is an SVG sprite. 86 | 87 | #### Usage 88 | 89 | Make sure each SVG has an ID. 90 | 91 | ```svg 92 | 93 | 94 | Twitter 95 | 96 | 97 | 98 | ``` 99 | 100 | Save any SVG files you want to use into `/assets/images/sprite` and the build process will combine all of those images into `/assets/images/sprite/sprite.svg`. 101 | 102 | To use in markup, apply the ID to an SVG's Use element. 103 | 104 | ```svg 105 | 106 | 107 | 108 | ``` 109 | 110 | Check out [SVG For Everybody](https://github.com/jonathantneal/svg4everybody) for IE and <=Edge 12 support of SVG sprites. 111 | 112 | ## Documentation 113 | 114 | Sage theme's original documentation is available at [https://docs.roots.io/sage/8.x/installation/](https://docs.roots.io/sage/8.x/installation/). These instructions aren't consistent with Sage Starter but provide historical context for installation and running Gulp. 115 | 116 | ## Contributing 117 | 118 | Contributions are welcome and encouraged from everyone! 119 | -------------------------------------------------------------------------------- /assets/fonts/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asuh/sage-starter/b8bfbe5b01f7cf55de942820c578b5a4f576f7b5/assets/fonts/.gitkeep -------------------------------------------------------------------------------- /assets/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asuh/sage-starter/b8bfbe5b01f7cf55de942820c578b5a4f576f7b5/assets/images/.gitkeep -------------------------------------------------------------------------------- /assets/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "main.js": { 4 | "files": [ 5 | "scripts/main.js" 6 | ], 7 | "main": true 8 | }, 9 | "main.css": { 10 | "files": [ 11 | "styles/main.scss" 12 | ], 13 | "main": true 14 | } 15 | }, 16 | "config": { 17 | "devUrl": "http://localhost:3000" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /assets/scripts/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Asset Builder has a quirk that allows custom scripts 3 | * to load before Bower scripts during concatenation. 4 | * To get around this, use one of the following methods. 5 | * 6 | * IIFE 7 | * (function(){ code goes here }()); 8 | * 9 | * Self-executing anonymous function 10 | * var foo = function() { code goes here }; 11 | * 12 | * document.ready (jQuery) 13 | * $(document).ready(function() { code goes here }); 14 | * $(function() { code goes here }); 15 | * 16 | * window.onload (Javascript) 17 | * window.onload = function() { code goes here }; 18 | * 19 | * 20 | * 21 | */ 22 | -------------------------------------------------------------------------------- /assets/styles/common/_global.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box 3 | } 4 | 5 | *, 6 | :after, 7 | :before { 8 | box-sizing: inherit; 9 | outline: 0 10 | } -------------------------------------------------------------------------------- /assets/styles/common/_mixins.scss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/styles/common/_variables.scss: -------------------------------------------------------------------------------- 1 | // Grid settings 2 | $main-sm-columns: 12; 3 | $sidebar-sm-columns: 4; 4 | 5 | // Colors 6 | $brand-primary: #bada55; 7 | -------------------------------------------------------------------------------- /assets/styles/components/_buttons.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asuh/sage-starter/b8bfbe5b01f7cf55de942820c578b5a4f576f7b5/assets/styles/components/_buttons.scss -------------------------------------------------------------------------------- /assets/styles/components/_forms.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asuh/sage-starter/b8bfbe5b01f7cf55de942820c578b5a4f576f7b5/assets/styles/components/_forms.scss -------------------------------------------------------------------------------- /assets/styles/components/_grid.scss: -------------------------------------------------------------------------------- 1 | // Grid system 2 | // This is for Bootstrap 4 only. Get rid if you don't use Bootstrap. 3 | // .main { 4 | // @include make-col-ready(); 5 | // @include media-breakpoint-up(sm) { 6 | // @include make-col($main-sm-columns); 7 | // .sidebar-primary & { 8 | // @include make-col($main-sm-columns - $sidebar-sm-columns); 9 | // } 10 | // } 11 | // } 12 | // .sidebar { 13 | // @include make-col-ready(); 14 | // @include media-breakpoint-up(sm) { 15 | // @include make-col($sidebar-sm-columns); 16 | // } 17 | // } 18 | -------------------------------------------------------------------------------- /assets/styles/components/_icons.scss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/styles/layouts/_footer.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asuh/sage-starter/b8bfbe5b01f7cf55de942820c578b5a4f576f7b5/assets/styles/layouts/_footer.scss -------------------------------------------------------------------------------- /assets/styles/layouts/_header.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asuh/sage-starter/b8bfbe5b01f7cf55de942820c578b5a4f576f7b5/assets/styles/layouts/_header.scss -------------------------------------------------------------------------------- /assets/styles/layouts/_pages.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asuh/sage-starter/b8bfbe5b01f7cf55de942820c578b5a4f576f7b5/assets/styles/layouts/_pages.scss -------------------------------------------------------------------------------- /assets/styles/layouts/_posts.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asuh/sage-starter/b8bfbe5b01f7cf55de942820c578b5a4f576f7b5/assets/styles/layouts/_posts.scss -------------------------------------------------------------------------------- /assets/styles/layouts/_sidebar.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asuh/sage-starter/b8bfbe5b01f7cf55de942820c578b5a4f576f7b5/assets/styles/layouts/_sidebar.scss -------------------------------------------------------------------------------- /assets/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import "common/_variables"; 2 | 3 | // Automatically injected Bower dependencies via wiredep (never manually edit this block) 4 | // bower:scss 5 | // endbower 6 | 7 | @import "common/_global"; 8 | @import "common/_mixins"; 9 | @import "components/_buttons"; 10 | @import "components/_forms"; 11 | @import "components/_grid"; 12 | @import "components/_icons"; 13 | @import "layouts/_header"; 14 | @import "layouts/_sidebar"; 15 | @import "layouts/_footer"; 16 | @import "layouts/_pages"; 17 | @import "layouts/_posts"; 18 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sage-starter", 3 | "license": "MIT", 4 | "private": true, 5 | "dependencies": { 6 | "jquery": "3.6.0" 7 | }, 8 | "overrides": { 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // ## Globals 2 | var argv = require('minimist')(process.argv.slice(2)); 3 | var autoprefixer = require('autoprefixer'); 4 | var browserSync = require('browser-sync').create(); 5 | var changed = require('gulp-changed'); 6 | var concat = require('gulp-concat'); 7 | var cssnano = require('cssnano'); 8 | var flatten = require('gulp-flatten'); 9 | var gulp = require('gulp'); 10 | var gulpif = require('gulp-if'); 11 | var imagemin = require('gulp-imagemin'); 12 | var eslint = require('gulp-eslint'); 13 | var lazypipe = require('lazypipe'); 14 | var less = require('gulp-less'); 15 | var log = require('fancy-log'); 16 | var merge = require('merge-stream'); 17 | var plumber = require('gulp-plumber'); 18 | var postcss = require('gulp-postcss'); 19 | var rev = require('gulp-rev'); 20 | var sass = require('gulp-sass'); 21 | var sourcemaps = require('gulp-sourcemaps'); 22 | var svgMin = require('gulp-svgmin'); 23 | var svgStore = require('gulp-svgstore'); 24 | var uglify = require('gulp-uglify'); 25 | 26 | // See https://github.com/austinpray/asset-builder 27 | var manifest = require('asset-builder')('./assets/manifest.json'); 28 | 29 | // `path` - Paths to base asset directories. With trailing slashes. 30 | // - `path.source` - Path to the source files. Default: `assets/` 31 | // - `path.dist` - Path to the build directory. Default: `dist/` 32 | var path = manifest.paths; 33 | 34 | // `config` - Store arbitrary configuration values here. 35 | // var config = manifest.config || {}; 36 | // 2016-11-19 - commented out because it is unused 37 | 38 | // `globs` - These ultimately end up in their respective `gulp.src`. 39 | // - `globs.js` - Array of asset-builder JS dependency objects. Example: 40 | // ``` 41 | // {type: 'js', name: 'main.js', globs: []} 42 | // ``` 43 | // - `globs.css` - Array of asset-builder CSS dependency objects. Example: 44 | // ``` 45 | // {type: 'css', name: 'main.css', globs: []} 46 | // ``` 47 | // - `globs.fonts` - Array of font path globs. 48 | // - `globs.images` - Array of image path globs. 49 | // - `globs.bower` - Array of all the main Bower files. 50 | var globs = manifest.globs; 51 | 52 | // `project` - paths to first-party assets. 53 | // - `project.js` - Array of first-party JS assets. 54 | // - `project.css` - Array of first-party CSS assets. 55 | var project = manifest.getProjectGlobs(); 56 | 57 | // CLI options 58 | var enabled = { 59 | // Enable static asset revisioning when `--production` 60 | rev: argv.production, 61 | // Disable source maps when `--production` 62 | maps: !argv.production, 63 | // Fail styles task on error when `--production` 64 | failStyleTask: argv.production, 65 | // Fail due to ESLint warnings only when `--production` 66 | failESLint: argv.production, 67 | // Strip debug statments from javascript when `--production` 68 | stripJSDebug: argv.production, 69 | }; 70 | 71 | // Path to the compiled assets manifest in the dist directory 72 | var revManifest = path.dist + 'assets.json'; 73 | 74 | // Error checking; produce an error rather than crashing. 75 | var onError = function (err) { 76 | console.log(err.toString()); 77 | this.emit('end'); 78 | }; 79 | 80 | // ## Reusable Pipelines 81 | // See https://github.com/OverZealous/lazypipe 82 | 83 | // ### Write to rev manifest 84 | // If there are any revved files then write them to the rev manifest. 85 | // See https://github.com/sindresorhus/gulp-rev 86 | var writeToManifest = function(directory, done) { 87 | return lazypipe() 88 | .pipe(gulp.dest, path.dist + directory) 89 | .pipe(browserSync.stream, {match: '**/*.{js,css}'}) 90 | .pipe(rev.manifest, revManifest, { 91 | base: path.dist, 92 | merge: true 93 | }) 94 | .pipe(gulp.dest, path.dist)().on('end', done); 95 | }; 96 | 97 | // ### CSS processing pipeline 98 | // Example 99 | // ``` 100 | // gulp.src(cssFiles) 101 | // .pipe(cssTasks('main.css') 102 | // .pipe(gulp.dest(path.dist + 'styles')) 103 | // ``` 104 | var cssTasks = function(filename) { 105 | var plugins = [ 106 | autoprefixer({ grid:true }), 107 | cssnano() 108 | ]; 109 | return lazypipe() 110 | .pipe(function() { 111 | return gulpif(!enabled.failStyleTask, plumber()); 112 | }) 113 | .pipe(function() { 114 | return gulpif(enabled.maps, sourcemaps.init()); 115 | }) 116 | .pipe(function() { 117 | return gulpif('*.less', less()); 118 | }) 119 | .pipe(function() { 120 | return gulpif('*.scss', sass({ 121 | outputStyle: 'nested', // libsass doesn't support expanded yet 122 | precision: 10, 123 | includePaths: ['.'], 124 | errLogToConsole: !enabled.failStyleTask 125 | })); 126 | }) 127 | .pipe(concat, filename) 128 | .pipe(postcss, plugins) 129 | .pipe(function() { 130 | return gulpif(enabled.rev, rev()); 131 | }) 132 | .pipe(function() { 133 | return gulpif(enabled.maps, sourcemaps.write('.', { 134 | sourceRoot: 'assets/styles/' 135 | })); 136 | })(); 137 | }; 138 | 139 | var processStyles = function(done) { 140 | var merged = merge(); 141 | manifest.forEachDependency('css', function(dep) { 142 | var cssTasksInstance = cssTasks(dep.name); 143 | if (!enabled.failStyleTask) { 144 | cssTasksInstance.on('error', function(err) { 145 | console.error(err.message); 146 | this.emit('end'); 147 | }); 148 | } 149 | merged.add(gulp.src(dep.globs, {base: 'styles'}) 150 | .pipe(plumber({errorHandler: onError})) 151 | .pipe(cssTasksInstance)); 152 | }); 153 | return merged 154 | .pipe(writeToManifest('styles', done)); 155 | }; 156 | 157 | // ### JS processing pipeline 158 | // Example 159 | // ``` 160 | // gulp.src(jsFiles) 161 | // .pipe(jsTasks('main.js') 162 | // .pipe(gulp.dest(path.dist + 'scripts')) 163 | // ``` 164 | var jsTasks = function(filename) { 165 | return lazypipe() 166 | .pipe(function() { 167 | return gulpif(enabled.maps, sourcemaps.init()); 168 | }) 169 | .pipe(concat, filename) 170 | .pipe(uglify, { 171 | compress: { 172 | 'drop_debugger': enabled.stripJSDebug 173 | } 174 | }) 175 | .pipe(function() { 176 | return gulpif(enabled.rev, rev()); 177 | }) 178 | .pipe(function() { 179 | return gulpif(enabled.maps, sourcemaps.write('.', { 180 | sourceRoot: 'assets/scripts/' 181 | })); 182 | })(); 183 | }; 184 | 185 | var processScripts = function(done) { 186 | var merged = merge(); 187 | manifest.forEachDependency('js', function(dep) { 188 | merged.add( 189 | gulp.src(dep.globs, {base: 'scripts'}) 190 | .pipe(plumber({errorHandler: onError})) 191 | .pipe(jsTasks(dep.name)) 192 | ); 193 | }); 194 | return merged 195 | .pipe(writeToManifest('scripts', done)); 196 | }; 197 | 198 | // ## Gulp tasks 199 | // Run `gulp -T` for a task summary 200 | 201 | // ### Wiredep 202 | // `gulp wiredep` - Automatically inject Less and Sass Bower dependencies. See 203 | // https://github.com/taptapship/wiredep 204 | gulp.task('wiredep', function() { 205 | var wiredep = require('wiredep').stream; 206 | return gulp.src(project.css) 207 | .pipe(wiredep()) 208 | .pipe(changed(path.source + 'styles', { 209 | hasChanged: changed.compareSha1Digest 210 | })) 211 | .pipe(gulp.dest(path.source + 'styles')); 212 | }); 213 | 214 | // ### ESLint 215 | // `gulp lint` - Lints configuration JSON and project JS. 216 | gulp.task('lint', function() { 217 | return gulp.src([ 218 | 'gulpfile.js' 219 | ].concat(project.js)) 220 | .pipe(eslint()) 221 | .pipe(eslint.format()) 222 | .pipe(gulpif(enabled.failESLint, eslint.failAfterError())); 223 | }); 224 | 225 | // ### Styles 226 | // `gulp styles` - Compiles, combines, and optimizes Bower CSS and project CSS. 227 | // By default this task will only log a warning if a precompiler error is 228 | // raised. If the `--production` flag is set: this task will fail outright. 229 | gulp.task('styles', gulp.series('wiredep', processStyles)); 230 | 231 | // ### Scripts 232 | // `gulp scripts` - Runs ESLint then compiles, combines, and optimizes Bower JS 233 | // and project JS. 234 | gulp.task('scripts', gulp.series('lint', processScripts)); 235 | 236 | // ### Fonts 237 | // `gulp fonts` - Grabs all the fonts and outputs them in a flattened directory 238 | // structure. See: https://github.com/armed/gulp-flatten 239 | gulp.task('fonts', function() { 240 | return gulp.src(globs.fonts) 241 | .pipe(flatten()) 242 | .pipe(gulp.dest(path.dist + 'fonts')) 243 | .pipe(browserSync.stream()); 244 | }); 245 | 246 | // ### Images 247 | // `gulp images` - Run lossless compression on all the images. 248 | gulp.task('images', function() { 249 | return gulp.src(globs.images) 250 | .pipe(imagemin([ 251 | imagemin.mozjpeg({progressive: true}), 252 | imagemin.gifsicle({interlaced: true}), 253 | imagemin.svgo({plugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]}) 254 | ])) 255 | .pipe(gulp.dest(path.dist + 'images')) 256 | .pipe(browserSync.stream()); 257 | }); 258 | 259 | // ### Svg 260 | // `gulp svg` - Minifies all svg files 261 | gulp.task('svg', function() { 262 | return gulp.src(path.source + 'images/sprite/*.svg') 263 | .pipe(svgMin()) 264 | .pipe(svgStore({ 265 | inlineSvg: true 266 | })) 267 | .pipe(gulp.dest(path.dist + 'images/sprite')) 268 | .pipe(browserSync.stream()); 269 | }); 270 | 271 | // ### Rename 272 | gulp.task('copystyles', function () { 273 | return gulp.src(['dist/styles/main.css']) 274 | .pipe($.rename({ 275 | basename: "site" // site.css 276 | })) 277 | .pipe(gulp.dest('dist/styles')); 278 | }); 279 | 280 | // ### Clean 281 | // `gulp clean` - Deletes the build folder entirely. 282 | gulp.task('clean', require('del').bind(null, [path.dist])); 283 | 284 | // ### Watch 285 | // `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code 286 | // changes across devices. Specify the hostname of your dev server at 287 | // `manifest.config.devUrl`. When a modification is made to an asset, run the 288 | // build step for that asset and inject the changes into the page. 289 | // See: http://www.browsersync.io 290 | gulp.task('watch', function() { 291 | browserSync.init({ 292 | files: ['*.html'], 293 | server: { 294 | baseDir: "./" 295 | } 296 | //files: ['{lib,templates}/**/*.php', '*.php'], 297 | //proxy: config.devUrl, 298 | //snippetOptions: { 299 | // whitelist: ['/wp-admin/admin-ajax.php'], 300 | // blacklist: ['/wp-admin/**'], 301 | //}, 302 | }); 303 | gulp.watch([path.source + 'styles/**/*'], gulp.series('styles')); 304 | gulp.watch([path.source + 'scripts/**/*'], gulp.series('lint', 'scripts')); 305 | gulp.watch([path.source + 'fonts/**/*'], gulp.series('fonts')); 306 | gulp.watch([path.source + 'images/**/*'], gulp.series('images')); 307 | gulp.watch([path.source + 'images/sprite/**/*'], gulp.series('svg')); 308 | gulp.watch(['bower.json', 'assets/manifest.json'], gulp.series('build')); 309 | }); 310 | 311 | // ### Build 312 | // `gulp build` - Run all the build tasks but don't clean up beforehand. 313 | // Generally you should be running `gulp` instead of `gulp build`. 314 | gulp.task( 315 | 'build', 316 | gulp.series('styles', 'scripts', gulp.parallel('fonts', 'images')) 317 | ); 318 | 319 | // ### Gulp 320 | // `gulp` - Run a complete build. To compile for production run `gulp --production`. 321 | gulp.task('default', gulp.series('clean', 'build')); 322 | -------------------------------------------------------------------------------- /humans.txt: -------------------------------------------------------------------------------- 1 | # humanstxt.org/ 2 | # The humans responsible & technology colophon 3 | 4 | # TEAM 5 | 6 | -- -- 7 | 8 | # THANKS 9 | 10 | 11 | 12 | # TECHNOLOGY COLOPHON 13 | 14 | CSS3, HTML5 15 | jQuery, Gulp, Bower, Node.js 16 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Page Title 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

Hello world! This is HTML5 Boilerplate.

37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sage-starter", 3 | "version": "2.5.0", 4 | "author": "Micah Cambre ", 5 | "homepage": "https://github.com/asuh/sage-starter", 6 | "private": true, 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/asuh/sage-starter" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/asuh/sage-starter/issues" 13 | }, 14 | "licenses": [ 15 | { 16 | "type": "MIT", 17 | "url": "http://opensource.org/licenses/MIT" 18 | } 19 | ], 20 | "browserslist": [ 21 | "last 2 versions", 22 | "not bb < 10" 23 | ], 24 | "scripts": { 25 | "build": "bower install && gulp", 26 | "lint": "gulp lint" 27 | }, 28 | "engines": { 29 | "node": ">= 6.9" 30 | }, 31 | "devDependencies": { 32 | "asset-builder": "github:austinpray/asset-builder", 33 | "autoprefixer": "^10.4.12", 34 | "browser-sync": "^2.27.10", 35 | "browserslist": "^4.21.4", 36 | "cssnano": "~5.1.13", 37 | "del": "^6.0.0", 38 | "gulp": "^4.0.0", 39 | "gulp-changed": "4.0.3", 40 | "gulp-concat": "^2.6.1", 41 | "gulp-flatten": "^0.4.0", 42 | "gulp-if": "^3.0.0", 43 | "gulp-imagemin": "^7.1.0", 44 | "gulp-eslint": "^6.0.0", 45 | "gulp-less": "^5.0.0", 46 | "gulp-plumber": "^1.2.1", 47 | "gulp-postcss": "^9.0.0", 48 | "gulp-rename": "^2.0.0", 49 | "gulp-rev": "^9.0.0", 50 | "gulp-sass": "^5.1.0", 51 | "gulp-sourcemaps": "^3.0.0", 52 | "gulp-svgmin": "^4.1.0", 53 | "gulp-svgstore": "^9.0.0", 54 | "gulp-uglify": "^3.0.1", 55 | "imagemin-pngcrush": "^7.0.0", 56 | "imagemin-mozjpeg": "^9.0.0", 57 | "lazypipe": "^1.0.2", 58 | "merge-stream": "^2.0.0", 59 | "minimist": "^1.2.6", 60 | "traverse": "^0.6.6", 61 | "wiredep": "^4.0.0" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org/ 2 | 3 | # Allow crawling of all content 4 | User-agent: * 5 | Disallow: 6 | --------------------------------------------------------------------------------