├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── _assets ├── icons │ └── cog.svg ├── images │ └── .gitkeep ├── js │ └── main.js └── sass │ ├── components │ └── _header.scss │ ├── core │ ├── _icons.scss │ ├── _normalize.scss │ └── _reboot.scss │ ├── main.scss │ ├── pages │ └── _home.scss │ ├── utils │ ├── _mixins.scss │ └── _var.scss │ └── vendor │ └── .gitkeep ├── _config.yml ├── _includes ├── footer.html ├── head.html ├── header.html └── icon.html ├── _layouts └── default.html ├── _posts └── .gitkeep ├── _tasks ├── browser-sync.js ├── build.js ├── deploy.js ├── htmlmin.js ├── icons.js ├── imagemin.js ├── jekyll.js ├── sass.js ├── scripts.js └── serve.js ├── gulpfile.babel.js ├── index.html └── package.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | .jekyll-metadata 4 | .DS_Store 5 | node_modules 6 | *.sublime-* 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 Max Böck 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Jekyll-Gulp Boilerplate 2 | 3 | A customized starter kit for static websites, using [Jekyll](https://jekyllrb.com/) and Gulp for the build process. 4 | 5 | ### Features 6 | 7 | * Livereloading with BrowserSync 8 | * ES6 ready (with Babel) 9 | * JS Bundling with Webpack 10 | * Sass with Autoprefixer and Sourcemaps 11 | * SVG Icons with gulp-svg-sprite 12 | * Image Optim, Minification and other production goodies 13 | 14 | ### Usage 15 | 16 | Follow the Quick Install Intructions at [https://jekyllrb.com](https://jekyllrb.com/) 17 | Then run: 18 | ``` 19 | git clone https://github.com/maxboeck/jekyll-gulp.git 20 | cd jekyll-gulp 21 | npm install 22 | gulp 23 | ``` 24 | 25 | ### Icons 26 | 27 | To add an icon, place an SVG file in `_assets/icons`, then include it on a page with: 28 | ``` 29 | {% include icon.html icon="cog" %} 30 | ``` 31 | The Icon name is the SVG filename. Run `gulp icons` to generate the icon sprite. 32 | !Since this uses an external SVG file, you will need a polyfill like [svgxuse](https://github.com/Keyamoon/svgxuse) to correctly display icons in IE. -------------------------------------------------------------------------------- /_assets/icons/cog.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /_assets/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxboeck/jekyll-gulp/f38a567318398e7435bedf061f9bc56ff1735af2/_assets/images/.gitkeep -------------------------------------------------------------------------------- /_assets/js/main.js: -------------------------------------------------------------------------------- 1 | //import FontFaceObserver from 'fontfaceobserver'; 2 | 3 | console.log('JS is up and running!'); -------------------------------------------------------------------------------- /_assets/sass/components/_header.scss: -------------------------------------------------------------------------------- 1 | /* Header Component */ -------------------------------------------------------------------------------- /_assets/sass/core/_icons.scss: -------------------------------------------------------------------------------- 1 | //-------------------- 2 | // ICON CLASSES 3 | //-------------------- 4 | 5 | // SVG ICONS ---------------------- 6 | 7 | // default styling 8 | .icon { 9 | display:inline-block; 10 | width: 20px; 11 | height: 20px; 12 | vertical-align: middle; 13 | margin-right:5px; 14 | 15 | svg { 16 | width: 100%; 17 | height:100%; 18 | } 19 | 20 | path { 21 | fill:currentColor; 22 | } 23 | } -------------------------------------------------------------------------------- /_assets/sass/core/_normalize.scss: -------------------------------------------------------------------------------- 1 | /* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | // 4 | // 1. Set default font family to sans-serif. 5 | // 2. Prevent iOS and IE text size adjust after device orientation change, 6 | // without disabling user zoom. 7 | // 8 | 9 | html { 10 | font-family: sans-serif; // 1 11 | -ms-text-size-adjust: 100%; // 2 12 | -webkit-text-size-adjust: 100%; // 2 13 | } 14 | 15 | // 16 | // Remove default margin. 17 | // 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | // HTML5 display definitions 24 | // ========================================================================== 25 | 26 | // 27 | // Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | // Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | // and Firefox. 30 | // Correct `block` display not defined for `main` in IE 11. 31 | // 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | // 50 | // 1. Correct `inline-block` display not defined in IE 8/9. 51 | // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | // 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; // 1 59 | vertical-align: baseline; // 2 60 | } 61 | 62 | // 63 | // Prevent modern browsers from displaying `audio` without controls. 64 | // Remove excess height in iOS 5 devices. 65 | // 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | // 73 | // Address `[hidden]` styling not present in IE 8/9/10. 74 | // Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 75 | // 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | // Links 83 | // ========================================================================== 84 | 85 | // 86 | // Remove the gray background color from active links in IE 10. 87 | // 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | // 94 | // Improve readability of focused elements when they are also in an 95 | // active/hover state. 96 | // 97 | 98 | a { 99 | &:active { 100 | outline: 0; 101 | } 102 | &:hover { 103 | outline: 0; 104 | } 105 | } 106 | 107 | // Text-level semantics 108 | // ========================================================================== 109 | 110 | // 111 | // Address styling not present in IE 8/9/10/11, Safari, and Chrome. 112 | // 113 | 114 | abbr[title] { 115 | border-bottom: 1px dotted; 116 | } 117 | 118 | // 119 | // Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 120 | // 121 | 122 | b, 123 | strong { 124 | font-weight: bold; 125 | } 126 | 127 | // 128 | // Address styling not present in Safari and Chrome. 129 | // 130 | 131 | dfn { 132 | font-style: italic; 133 | } 134 | 135 | // 136 | // Address variable `h1` font-size and margin within `section` and `article` 137 | // contexts in Firefox 4+, Safari, and Chrome. 138 | // 139 | 140 | h1 { 141 | font-size: 2em; 142 | margin: 0.67em 0; 143 | } 144 | 145 | // 146 | // Address styling not present in IE 8/9. 147 | // 148 | 149 | mark { 150 | background: #ff0; 151 | color: #000; 152 | } 153 | 154 | // 155 | // Address inconsistent and variable font size in all browsers. 156 | // 157 | 158 | small { 159 | font-size: 80%; 160 | } 161 | 162 | // 163 | // Prevent `sub` and `sup` affecting `line-height` in all browsers. 164 | // 165 | 166 | sub, 167 | sup { 168 | font-size: 75%; 169 | line-height: 0; 170 | position: relative; 171 | vertical-align: baseline; 172 | } 173 | 174 | sup { 175 | top: -0.5em; 176 | } 177 | 178 | sub { 179 | bottom: -0.25em; 180 | } 181 | 182 | // Embedded content 183 | // ========================================================================== 184 | 185 | // 186 | // Remove border when inside `a` element in IE 8/9/10. 187 | // 188 | 189 | img { 190 | border: 0; 191 | } 192 | 193 | // 194 | // Correct overflow not hidden in IE 9/10/11. 195 | // 196 | 197 | svg:not(:root) { 198 | overflow: hidden; 199 | } 200 | 201 | // Grouping content 202 | // ========================================================================== 203 | 204 | // 205 | // Address margin not present in IE 8/9 and Safari. 206 | // 207 | 208 | figure { 209 | margin: 1em 40px; 210 | } 211 | 212 | // 213 | // Address differences between Firefox and other browsers. 214 | // 215 | 216 | hr { 217 | box-sizing: content-box; 218 | height: 0; 219 | } 220 | 221 | // 222 | // Contain overflow in all browsers. 223 | // 224 | 225 | pre { 226 | overflow: auto; 227 | } 228 | 229 | // 230 | // Address odd `em`-unit font size rendering in all browsers. 231 | // 232 | 233 | code, 234 | kbd, 235 | pre, 236 | samp { 237 | font-family: monospace, monospace; 238 | font-size: 1em; 239 | } 240 | 241 | // Forms 242 | // ========================================================================== 243 | 244 | // 245 | // Known limitation: by default, Chrome and Safari on OS X allow very limited 246 | // styling of `select`, unless a `border` property is set. 247 | // 248 | 249 | // 250 | // 1. Correct color not being inherited. 251 | // Known issue: affects color of disabled elements. 252 | // 2. Correct font properties not being inherited. 253 | // 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 254 | // 255 | 256 | button, 257 | input, 258 | optgroup, 259 | select, 260 | textarea { 261 | color: inherit; // 1 262 | font: inherit; // 2 263 | margin: 0; // 3 264 | } 265 | 266 | // 267 | // Address `overflow` set to `hidden` in IE 8/9/10/11. 268 | // 269 | 270 | button { 271 | overflow: visible; 272 | } 273 | 274 | // 275 | // Address inconsistent `text-transform` inheritance for `button` and `select`. 276 | // All other form control elements do not inherit `text-transform` values. 277 | // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 278 | // Correct `select` style inheritance in Firefox. 279 | // 280 | 281 | button, 282 | select { 283 | text-transform: none; 284 | } 285 | 286 | // 287 | // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 288 | // and `video` controls. 289 | // 2. Correct inability to style clickable `input` types in iOS. 290 | // 3. Improve usability and consistency of cursor style between image-type 291 | // `input` and others. 292 | // 293 | 294 | button, 295 | html input[type="button"], // 1 296 | input[type="reset"], 297 | input[type="submit"] { 298 | -webkit-appearance: button; // 2 299 | cursor: pointer; // 3 300 | } 301 | 302 | // 303 | // Re-set default cursor for disabled elements. 304 | // 305 | 306 | button[disabled], 307 | html input[disabled] { 308 | cursor: default; 309 | } 310 | 311 | // 312 | // Remove inner padding and border in Firefox 4+. 313 | // 314 | 315 | button::-moz-focus-inner, 316 | input::-moz-focus-inner { 317 | border: 0; 318 | padding: 0; 319 | } 320 | 321 | // 322 | // Address Firefox 4+ setting `line-height` on `input` using `!important` in 323 | // the UA stylesheet. 324 | // 325 | 326 | input { 327 | line-height: normal; 328 | } 329 | 330 | // 331 | // It's recommended that you don't attempt to style these elements. 332 | // Firefox's implementation doesn't respect box-sizing, padding, or width. 333 | // 334 | // 1. Address box sizing set to `content-box` in IE 8/9/10. 335 | // 2. Remove excess padding in IE 8/9/10. 336 | // 337 | 338 | input[type="checkbox"], 339 | input[type="radio"] { 340 | box-sizing: border-box; // 1 341 | padding: 0; // 2 342 | } 343 | 344 | // 345 | // Fix the cursor style for Chrome's increment/decrement buttons. For certain 346 | // `font-size` values of the `input`, it causes the cursor style of the 347 | // decrement button to change from `default` to `text`. 348 | // 349 | 350 | input[type="number"]::-webkit-inner-spin-button, 351 | input[type="number"]::-webkit-outer-spin-button { 352 | height: auto; 353 | } 354 | 355 | // 356 | // 1. Address `appearance` set to `searchfield` in Safari and Chrome. 357 | // 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 358 | // 359 | 360 | input[type="search"] { 361 | -webkit-appearance: textfield; // 1 362 | box-sizing: content-box; //2 363 | } 364 | 365 | // 366 | // Remove inner padding and search cancel button in Safari and Chrome on OS X. 367 | // Safari (but not Chrome) clips the cancel button when the search input has 368 | // padding (and `textfield` appearance). 369 | // 370 | 371 | input[type="search"]::-webkit-search-cancel-button, 372 | input[type="search"]::-webkit-search-decoration { 373 | -webkit-appearance: none; 374 | } 375 | 376 | // 377 | // Define consistent border, margin, and padding. 378 | // 379 | 380 | fieldset { 381 | border: 1px solid #c0c0c0; 382 | margin: 0 2px; 383 | padding: 0.35em 0.625em 0.75em; 384 | } 385 | 386 | // 387 | // 1. Correct `color` not being inherited in IE 8/9/10/11. 388 | // 2. Remove padding so people aren't caught out if they zero out fieldsets. 389 | // 390 | 391 | legend { 392 | border: 0; // 1 393 | padding: 0; // 2 394 | } 395 | 396 | // 397 | // Remove default vertical scrollbar in IE 8/9/10/11. 398 | // 399 | 400 | textarea { 401 | overflow: auto; 402 | } 403 | 404 | // 405 | // Don't inherit the `font-weight` (applied by a rule above). 406 | // NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 407 | // 408 | 409 | optgroup { 410 | font-weight: bold; 411 | } 412 | 413 | // Tables 414 | // ========================================================================== 415 | 416 | // 417 | // Remove most spacing between table cells. 418 | // 419 | 420 | table { 421 | border-collapse: collapse; 422 | border-spacing: 0; 423 | } 424 | 425 | td, 426 | th { 427 | padding: 0; 428 | } 429 | -------------------------------------------------------------------------------- /_assets/sass/core/_reboot.scss: -------------------------------------------------------------------------------- 1 | // Reboot 2 | // 3 | // Global resets to common HTML elements and more for easier usage by Bootstrap. 4 | // Adds additional rules on top of Normalize.css, including several overrides. 5 | 6 | 7 | // Reset the box-sizing 8 | // 9 | // Change from `box-sizing: content-box` to `border-box` so that when you add 10 | // `padding` or `border`s to an element, the overall declared `width` does not 11 | // change. For example, `width: 100px;` will always be `100px` despite the 12 | // `border: 10px solid red;` and `padding: 20px;`. 13 | // 14 | // Heads up! This reset may cause conflicts with some third-party widgets. For 15 | // recommendations on resolving such conflicts, see 16 | // http://getbootstrap.com/getting-started/#third-box-sizing. 17 | // 18 | // Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ 19 | 20 | html { 21 | box-sizing: border-box; 22 | } 23 | 24 | *, 25 | *::before, 26 | *::after { 27 | box-sizing: inherit; 28 | } 29 | 30 | 31 | // Make viewport responsive 32 | // 33 | // @viewport is needed because IE 10+ doesn't honor in 34 | // some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/. 35 | // Eventually @viewport will replace . It's been manually 36 | // prefixed for forward-compatibility. 37 | // 38 | // However, `device-width` is broken on IE 10 on Windows (Phone) 8, 39 | // (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497) 40 | // and the fix for that involves a snippet of JavaScript to sniff the user agent 41 | // and apply some conditional CSS. 42 | // 43 | // See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack. 44 | // 45 | // Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g., 46 | // `.class-name { @import "bootstrap"; }`). 47 | // 48 | // Includes future-proofed vendor prefixes as well. 49 | @at-root { 50 | @-moz-viewport { width: device-width; } 51 | @-ms-viewport { width: device-width; } 52 | @-o-viewport { width: device-width; } 53 | @-webkit-viewport { width: device-width; } 54 | @viewport { width: device-width; } 55 | } 56 | 57 | 58 | // 59 | // Reset HTML, body, and more 60 | // 61 | 62 | html { 63 | // Sets a specific default `font-size` for user with `rem` type scales. 64 | font-size: $font-size-root; 65 | // Changes the default tap highlight to be completely transparent in iOS. 66 | -webkit-tap-highlight-color: rgba(0,0,0,0); 67 | } 68 | 69 | body { 70 | // Make the `body` use the `font-size-root` 71 | font-family: $font-family-base; 72 | font-size: $font-size-base; 73 | line-height: $line-height; 74 | // Go easy on the eyes and use something other than `#000` for text 75 | color: $body-color; 76 | // By default, `` has no `background-color` so we set one as a best practice. 77 | background-color: $body-bg; 78 | } 79 | 80 | // Suppress the focus outline on elements that cannot be accessed via keyboard. 81 | // This prevents an unwanted focus outline from appearing around elements that 82 | // might still respond to pointer events. 83 | // 84 | // Credit: https://github.com/suitcss/base 85 | [tabindex="-1"]:focus { 86 | outline: none !important; 87 | } 88 | 89 | 90 | // 91 | // Typography 92 | // 93 | 94 | // Remove top margins from headings 95 | // 96 | // By default, `

`-`

` all receive top and bottom margins. We nuke the top 97 | // margin for easier control within type scales as it avoids margin collapsing. 98 | h1, h2, h3, h4, h5, h6 { 99 | margin-top: 0; 100 | margin-bottom: .5rem; 101 | } 102 | 103 | // Reset margins on paragraphs 104 | // 105 | // Similarly, the top margin on `

`s get reset. However, we also reset the 106 | // bottom margin to use `rem` units instead of `em`. 107 | p { 108 | margin-top: 0; 109 | margin-bottom: 1rem; 110 | } 111 | 112 | // Abbreviations and acronyms 113 | abbr[title], 114 | // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 115 | abbr[data-original-title] { 116 | cursor: help; 117 | border-bottom: 1px dotted $link-color; 118 | } 119 | 120 | address { 121 | margin-bottom: 1rem; 122 | font-style: normal; 123 | line-height: inherit; 124 | } 125 | 126 | ol, 127 | ul, 128 | dl { 129 | margin-top: 0; 130 | margin-bottom: 1rem; 131 | } 132 | 133 | ol ol, 134 | ul ul, 135 | ol ul, 136 | ul ol { 137 | margin-bottom: 0; 138 | } 139 | 140 | dt { 141 | font-weight: 700; 142 | } 143 | 144 | dd { 145 | margin-bottom: .5rem; 146 | margin-left: 0; // Undo browser default 147 | } 148 | 149 | blockquote { 150 | margin: 0 0 1rem; 151 | } 152 | 153 | 154 | // 155 | // Links 156 | // 157 | 158 | a { 159 | color: $link-color; 160 | text-decoration: $link-decoration; 161 | 162 | &:hover, &:focus { 163 | color: $link-hover-color; 164 | text-decoration: $link-hover-decoration; 165 | } 166 | } 167 | 168 | 169 | // 170 | // Code 171 | // 172 | 173 | pre { 174 | // Remove browser default top margin 175 | margin-top: 0; 176 | // Reset browser default of `1em` to use `rem`s 177 | margin-bottom: 1rem; 178 | } 179 | 180 | 181 | // 182 | // Figures 183 | // 184 | 185 | figure { 186 | // Normalize adds `margin` to `figure`s as browsers apply it inconsistently. 187 | // We reset that to create a better flow in-page. 188 | margin: 0 0 1rem; 189 | } 190 | 191 | 192 | // 193 | // Images 194 | // 195 | 196 | img { 197 | // By default, ``s are `inline-block`. This assumes that, and vertically 198 | // centers them. This won't apply should you reset them to `block` level. 199 | vertical-align: middle; 200 | // Note: ``s are deliberately not made responsive by default. 201 | // For the rationale behind this, see the comments on the `.img-fluid` class. 202 | } 203 | 204 | 205 | // iOS "clickable elements" fix for role="button" 206 | // 207 | // Fixes "clickability" issue (and more generally, the firing of events such as focus as well) 208 | // for traditionally non-focusable elements with role="button" 209 | // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 210 | 211 | [role="button"] { 212 | cursor: pointer; 213 | } 214 | 215 | 216 | // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. 217 | // 218 | // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 219 | // DON'T remove the click delay when `` is present. 220 | // However, they DO support removing the click delay via `touch-action: manipulation`. 221 | // See: 222 | // * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch 223 | // * http://caniuse.com/#feat=css-touch-action 224 | // * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay 225 | 226 | a, 227 | area, 228 | button, 229 | [role="button"], 230 | input, 231 | label, 232 | select, 233 | summary, 234 | textarea { 235 | touch-action: manipulation; 236 | } 237 | 238 | 239 | // 240 | // Tables 241 | // 242 | 243 | th { 244 | // Centered by default, but left-align-ed to match the `td`s below. 245 | text-align: left; 246 | } 247 | 248 | 249 | // 250 | // Forms 251 | // 252 | 253 | label { 254 | // Allow labels to use `margin` for spacing. 255 | display: inline-block; 256 | margin-bottom: .5rem; 257 | } 258 | 259 | // Work around a Firefox/IE bug where the transparent `button` background 260 | // results in a loss of the default `button` focus styles. 261 | // 262 | // Credit: https://github.com/suitcss/base/ 263 | button:focus { 264 | outline: 1px dotted; 265 | outline: 5px auto -webkit-focus-ring-color; 266 | } 267 | 268 | input, 269 | button, 270 | select, 271 | textarea { 272 | // Remove all `margin`s so our classes don't have to do it themselves. 273 | margin: 0; 274 | // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are 275 | // properly inherited. However, `line-height` isn't addressed there. Using this 276 | // ensures we don't need to unnecessarily redeclare the global font stack. 277 | line-height: inherit; 278 | // iOS adds rounded borders by default 279 | border-radius: 0; 280 | } 281 | 282 | textarea { 283 | // Textareas should really only resize vertically so they don't break their (horizontal) containers. 284 | resize: vertical; 285 | } 286 | 287 | fieldset { 288 | // Chrome and Firefox set a `min-width: min-content;` on fieldsets, 289 | // so we reset that to ensure it behaves more like a standard block element. 290 | // See https://github.com/twbs/bootstrap/issues/12359. 291 | min-width: 0; 292 | // Reset the default outline behavior of fieldsets so they don't affect page layout. 293 | padding: 0; 294 | margin: 0; 295 | border: 0; 296 | } 297 | 298 | legend { 299 | // Reset the entire legend element to match the `fieldset` 300 | display: block; 301 | width: 100%; 302 | padding: 0; 303 | margin-bottom: .5rem; 304 | font-size: 1.5rem; 305 | line-height: inherit; 306 | // border: 0; 307 | } 308 | 309 | input[type="search"] { 310 | // Undo Normalize's default here to match our global overrides. 311 | box-sizing: inherit; 312 | // This overrides the extra rounded corners on search inputs in iOS so that our 313 | // `.form-control` class can properly style them. Note that this cannot simply 314 | // be added to `.form-control` as it's not specific enough. For details, see 315 | // https://github.com/twbs/bootstrap/issues/11586. 316 | -webkit-appearance: none; 317 | } 318 | 319 | // todo: needed? 320 | output { 321 | display: inline-block; 322 | // font-size: $font-size-base; 323 | // line-height: $line-height; 324 | // color: $input-color; 325 | } 326 | 327 | // Always hide an element with the `hidden` HTML attribute (from PureCSS). 328 | [hidden] { 329 | display: none !important; 330 | } 331 | -------------------------------------------------------------------------------- /_assets/sass/main.scss: -------------------------------------------------------------------------------- 1 | //-------------------- 2 | // MIXINS & VARIABLES 3 | //-------------------- 4 | 5 | @import "utils/var"; 6 | @import "utils/mixins"; 7 | 8 | //-------------------- 9 | // CORE MODULES 10 | // partials for site-wide styling 11 | //-------------------- 12 | 13 | @import "core/normalize"; 14 | @import "core/reboot"; 15 | 16 | @import "core/icons"; 17 | 18 | //-------------------- 19 | // COMPONENTS 20 | // partials directly tied to an element 21 | //-------------------- 22 | 23 | //@import "components/header" 24 | 25 | //-------------------- 26 | // PAGES 27 | // styles for specific page configurations 28 | //-------------------- 29 | 30 | //@import "pages/home" 31 | 32 | //-------------------- 33 | // VENDOR STYLES 34 | //-------------------- 35 | 36 | //@import "vendor/..." -------------------------------------------------------------------------------- /_assets/sass/pages/_home.scss: -------------------------------------------------------------------------------- 1 | /* Home Page */ -------------------------------------------------------------------------------- /_assets/sass/utils/_mixins.scss: -------------------------------------------------------------------------------- 1 | //-------------------- 2 | // SCSS MIXINS 3 | //-------------------- 4 | 5 | 6 | // dynamic z-index function 7 | @function z($layer) { 8 | @if map-has-key($z-layers, $layer) == false { 9 | @warn "No layer found for `#{$layer}` in $z-layers map. Property omitted."; 10 | } 11 | 12 | @return map-get($z-layers, $layer); 13 | } -------------------------------------------------------------------------------- /_assets/sass/utils/_var.scss: -------------------------------------------------------------------------------- 1 | //-------------------- 2 | // SCSS VARIABLES 3 | //-------------------- 4 | 5 | // Grid breakpoints 6 | // 7 | // Define the minimum and maximum dimensions at which your layout will change, 8 | // adapting to different screen sizes, for use in media queries. 9 | 10 | $grid-breakpoints: ( 11 | // Extra small screen / phone 12 | xs: 0, 13 | // Medium screen / tablet 14 | md: 768px, 15 | // Large screen / desktop 16 | lg: 1000px, 17 | // Extra large screen / wide desktop 18 | xl: 1268px 19 | ); 20 | 21 | // Grid containers 22 | // 23 | // Define the maximum width of `.container` for different screen sizes. 24 | 25 | $container-max-widths: ( 26 | md: 640px, 27 | lg: 922px, 28 | xl: 1204px 29 | ); 30 | 31 | 32 | // Z-Index Stack 33 | // 34 | // Control the order of layers in the application 35 | $z-layers: ( 36 | "modal":100 37 | ); 38 | 39 | 40 | // Colors 41 | // 42 | // Grayscale and brand colors. 43 | 44 | $gray-dark: #373a3c; 45 | $gray: #55595c; 46 | $gray-light: #818a91; 47 | $gray-lighter: #eceeef; 48 | $gray-lightest: #f7f7f9; 49 | 50 | $brand-red: #fc6767; 51 | $brand-green: #99c432; 52 | 53 | // Links 54 | // 55 | // Style anchor elements. 56 | 57 | $link-color: $brand-red; 58 | $link-decoration: none; 59 | $link-hover-color: darken($link-color, 5%); 60 | $link-hover-decoration: underline; 61 | 62 | // Body 63 | // 64 | // Settings for the `` element. 65 | 66 | $body-bg: $gray-lightest; 67 | $body-color: $gray-dark; 68 | 69 | // Typography 70 | // 71 | // Font, line-height, and color for body text, headings, and more. 72 | 73 | $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; 74 | $font-family-serif: Georgia, "Times New Roman", Times, serif; 75 | $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; 76 | 77 | $font-family-base: $font-family-sans-serif; 78 | 79 | $font-size-root: 16px; 80 | $font-size-base: 1rem; 81 | $line-height: 1.5; 82 | 83 | $font-size-h1: 2.5rem; //40px 84 | $font-size-h2: 2rem; //32px 85 | $font-size-h3: 1.75rem; //28px 86 | $font-size-h4: 1.5rem; //24px 87 | $font-size-h5: 1.125rem; //18px 88 | 89 | 90 | // Misc Shared 91 | // 92 | // common shared styles 93 | 94 | $border-radius: .25rem; //4px 95 | 96 | 97 | // Components 98 | // 99 | // Variables related to specific elements 100 | 101 | -------------------------------------------------------------------------------- /_assets/sass/vendor/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxboeck/jekyll-gulp/f38a567318398e7435bedf061f9bc56ff1735af2/_assets/sass/vendor/.gitkeep -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole blog, values 4 | # which you are expected to set up once and rarely need to edit after that. 5 | # For technical reasons, this file is *NOT* reloaded automatically when you use 6 | # 'jekyll serve'. If you change this file, please restart the server process. 7 | 8 | # Site settings 9 | title: A Jekyll powered static website 10 | description: > 11 | This site is built with Jekyll, a static HTML generator. 12 | It also uses Gulp for some nice development magic. 13 | baseurl: "" 14 | url: https://mxb.at 15 | email: hello@mxb.at 16 | twitter_username: "@mxbck" 17 | 18 | # Markdown settings 19 | markdown: kramdown 20 | kramdown: 21 | input: GFM 22 | syntax_highlighter: rouge 23 | 24 | # Sass settings 25 | sass: 26 | add_charset: true 27 | sass_dir: assets/sass 28 | style: :compressed 29 | 30 | # Build settings 31 | exclude: 32 | - package.json 33 | - gulpfile.babel.js 34 | - README.md 35 | - _tasks 36 | - _assets 37 | - node_modules 38 | 39 | #Files generated by Gulp 40 | keep_files: 41 | - assets 42 | 43 | # Plugin settings 44 | gems: 45 | - jekyll-feed 46 | - jekyll-sitemap 47 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | {% if jekyll.environment == "production" %} 2 | 3 | 4 | 12 | 13 | {% else %} 14 | 15 | 16 | 17 | {% endif %} 18 | 19 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} 7 | 8 | 9 | 10 | {% if jekyll.environment == "production" %} 11 | 12 | {% else %} 13 | 14 | {% endif %} 15 | 16 | 17 | 18 | {% feed_meta %} 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxboeck/jekyll-gulp/f38a567318398e7435bedf061f9bc56ff1735af2/_includes/header.html -------------------------------------------------------------------------------- /_includes/icon.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 8 | {% include header.html %} 9 | 10 |

11 | {{ content }} 12 |
13 | 14 | {% include footer.html %} 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /_posts/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxboeck/jekyll-gulp/f38a567318398e7435bedf061f9bc56ff1735af2/_posts/.gitkeep -------------------------------------------------------------------------------- /_tasks/browser-sync.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import gulp from 'gulp'; 4 | import browserSync from 'browser-sync'; 5 | 6 | gulp.task('browser-sync', ['build'], () => { 7 | browserSync({ 8 | server: { 9 | baseDir: '_site' 10 | } 11 | }); 12 | }); -------------------------------------------------------------------------------- /_tasks/build.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import gulp from 'gulp'; 4 | import browserSync from 'browser-sync'; 5 | import runSequence from 'run-sequence'; 6 | import del from 'del'; 7 | 8 | const reload = browserSync.reload; 9 | 10 | gulp.task('build', function(cb) { 11 | runSequence('jekyll', 'scripts', 'sass', 'imagemin', 'icons', cb); 12 | }); 13 | 14 | gulp.task('build:prod', ['clean'], function(cb) { 15 | runSequence('jekyll:prod', 'scripts', 'sass', 'imagemin', 'icons', 'htmlmin'); 16 | }); 17 | 18 | gulp.task('clean', del.bind(null, ['_site'], {dot: true})); -------------------------------------------------------------------------------- /_tasks/deploy.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import gulp from 'gulp'; 4 | 5 | gulp.task('deploy', ['build:prod'], () => { 6 | // add some sort of deployment here, e.g. Github Pages or FTP Push 7 | }); -------------------------------------------------------------------------------- /_tasks/htmlmin.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import gulp from 'gulp'; 4 | import browserSync from 'browser-sync'; 5 | import gulpLoadPlugins from 'gulp-load-plugins'; 6 | 7 | const $ = gulpLoadPlugins(); 8 | const reload = browserSync.reload; 9 | 10 | gulp.task('htmlmin', () => { 11 | return gulp.src('_site/**/*.html') 12 | .pipe($.htmlmin( {collapseWhitespace: true})) 13 | .pipe(gulp.dest('_site/')) 14 | .pipe(reload({stream: true})); 15 | }); -------------------------------------------------------------------------------- /_tasks/icons.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import gulp from 'gulp'; 4 | import gutil from 'gulp-util'; 5 | import svgSprite from 'gulp-svg-sprite'; 6 | import plumber from 'gulp-plumber'; 7 | 8 | const config = { 9 | mode: { 10 | inline: true, 11 | symbol: { // symbol mode to build the SVG 12 | dest: 'icons', // destination foldeer 13 | sprite: 'sprite.svg', //sprite name 14 | example: false // do not build sample page 15 | } 16 | }, 17 | svg: { 18 | xmlDeclaration: false, // strip out the XML attribute 19 | doctypeDeclaration: false // don't include the !DOCTYPE declaration 20 | } 21 | }; 22 | 23 | gulp.task('icons', () => { 24 | return gulp.src('_assets/icons/**/*.svg') 25 | .pipe(plumber({ 26 | errorHandler: function (err) { 27 | gutil.log(gutil.colors.red(err)); 28 | this.emit('end'); 29 | } 30 | })) 31 | .pipe(svgSprite(config)) 32 | .pipe(gulp.dest('_site/assets')); 33 | }); -------------------------------------------------------------------------------- /_tasks/imagemin.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import gulp from 'gulp'; 4 | import gulpLoadPlugins from 'gulp-load-plugins'; 5 | 6 | const $ = gulpLoadPlugins(); 7 | 8 | gulp.task('imagemin', () => { 9 | return gulp.src('assets/images/**/*') 10 | .pipe($.imagemin()) 11 | .pipe(gulp.dest('_site/assets/images')); 12 | }); -------------------------------------------------------------------------------- /_tasks/jekyll.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import gulp from 'gulp'; 4 | import gutil from 'gulp-util'; 5 | import childProcess from 'child_process'; 6 | import browserSync from 'browser-sync'; 7 | 8 | const reload = browserSync.reload; 9 | 10 | gulp.task('jekyll', done => { 11 | return childProcess.spawn('jekyll', ['build', '--drafts'], {stdio: 'inherit'}) 12 | .on('error', (error) => gutil.log(gutil.colors.red(error.message))) 13 | .on('close', done); 14 | }); 15 | 16 | gulp.task('jekyll:reload', ['jekyll'], () => { reload(); }); 17 | 18 | gulp.task('jekyll:prod', done => { 19 | var productionEnv = process.env; 20 | productionEnv.JEKYLL_ENV = 'production'; 21 | 22 | return childProcess.spawn('jekyll', ['build'], {stdio: 'inherit' , env: productionEnv}) 23 | .on('close', done); 24 | }); -------------------------------------------------------------------------------- /_tasks/sass.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import gulp from 'gulp'; 4 | import browserSync from 'browser-sync'; 5 | import gulpLoadPlugins from 'gulp-load-plugins'; 6 | 7 | const $ = gulpLoadPlugins(); 8 | const reload = browserSync.reload; 9 | const AUTOPREFIXER_BROWSERS = [ 10 | '> 1%', 11 | 'last 3 versions', 12 | 'Firefox ESR', 13 | 'Opera 12.1', 14 | 'Explorer 8' 15 | ]; 16 | 17 | gulp.task('sass', () => { 18 | return gulp.src('_assets/sass/main.scss') 19 | .pipe($.plumber({ 20 | errorHandler: function (err) { 21 | gutil.log(gutil.colors.red(err)); 22 | this.emit('end'); 23 | } 24 | })) 25 | .pipe($.sourcemaps.init()) 26 | .pipe($.sass({ 27 | precision: 10, 28 | onError: browserSync.notify 29 | })) 30 | .pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS})) 31 | .pipe($.sourcemaps.write()) 32 | .pipe($.rename({extname: '.css'})) 33 | .pipe(gulp.dest('_site/assets/css')) 34 | .pipe(reload({stream: true})) 35 | .pipe($.cleanCss({keepBreaks: false, keepSpecialComments:true})) 36 | .pipe($.rename({extname: '.min.css'})) 37 | .pipe(gulp.dest('_site/assets/css')); 38 | }); -------------------------------------------------------------------------------- /_tasks/scripts.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import gulp from 'gulp'; 4 | import browserSync from 'browser-sync'; 5 | import gulpLoadPlugins from 'gulp-load-plugins'; 6 | import webpack from 'webpack-stream'; 7 | 8 | const $ = gulpLoadPlugins(); 9 | const reload = browserSync.reload; 10 | 11 | gulp.task('scripts', () => { 12 | return gulp.src('_assets/js/main.js') 13 | .pipe($.plumber({ 14 | errorHandler: function (err) { 15 | gutil.log(gutil.colors.red(err)); 16 | this.emit('end'); 17 | } 18 | })) 19 | .pipe(webpack({ 20 | module: { 21 | loaders: [{ 22 | test: /\.js$/, 23 | loader: 'babel', 24 | exclude: '/node_modules/', 25 | query: { compact: false } 26 | }] 27 | } 28 | })) 29 | .pipe($.rename('bundle.js')) 30 | .pipe(gulp.dest('_site/assets/js')) 31 | .pipe(reload({stream: true})) 32 | .pipe($.uglify({onError: browserSync.notify})) 33 | .pipe($.rename({extname: '.min.js'})) 34 | .pipe(gulp.dest('_site/assets/js')); 35 | }); -------------------------------------------------------------------------------- /_tasks/serve.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import gulp from 'gulp'; 4 | 5 | gulp.task('serve', ['browser-sync'], () => { 6 | //asset pipeline 7 | gulp.watch(['_assets/sass/**/*.scss'], ['sass']); 8 | gulp.watch(['_assets/js/**/*.js'], ['scripts']); 9 | gulp.watch(['_assets/images/**/*'], ['imagemin']); 10 | gulp.watch(['_assets/icons/**/*.svg'], ['icons']); 11 | 12 | //jekyll 13 | gulp.watch([ 14 | '*.html', 15 | '_layouts/**/*', 16 | '_includes/**/*', 17 | '_posts/**/*', 18 | '_projects/**/*' 19 | ], ['jekyll:reload']); 20 | }); 21 | 22 | gulp.task('default', ['serve']); -------------------------------------------------------------------------------- /gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import fs from 'fs'; 4 | const tasks = fs.readdirSync('./_tasks/'); 5 | 6 | tasks.forEach(task => { 7 | if (task.slice(-3) !== '.js') { 8 | return; 9 | } 10 | require('./_tasks/' + task); 11 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |

Hello world!

6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Jekyll_Gulp_Boilerplate", 3 | "version": "1.0.0", 4 | "description": "A static website building kit", 5 | "repository": { 6 | "type": "git", 7 | "url": "http://github.com/maxboeck/jekyll-gulp" 8 | }, 9 | "author": "@mxbck", 10 | "license": "MIT", 11 | "dependencies": { 12 | "fontfaceobserver": "^1.6.3" 13 | }, 14 | "devDependencies": { 15 | "babel-loader": "^6.2.2", 16 | "babel-preset-es2015": "^6.5.0", 17 | "babel-register": "^6.9.0", 18 | "browser-sync": "^2.2.0", 19 | "del": "^2.2.2", 20 | "gulp": "^3.8.8", 21 | "gulp-autoprefixer": "^2.3.1", 22 | "gulp-clean-css": "^2.0.11", 23 | "gulp-htmlmin": "^2.0.0", 24 | "gulp-imagemin": "^2.4.0", 25 | "gulp-load-plugins": "^1.2.4", 26 | "gulp-plumber": "^1.1.0", 27 | "gulp-rename": "^1.2.2", 28 | "gulp-sass": "^2.1.0", 29 | "gulp-sourcemaps": "^1.6.0", 30 | "gulp-svg-sprite": "^1.3.6", 31 | "gulp-uglify": "^1.5.1", 32 | "run-sequence": "^1.2.2", 33 | "webpack-stream": "^3.1.0" 34 | } 35 | } 36 | --------------------------------------------------------------------------------