-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
my-library is still in the process of being built
- Loading branch information
1 parent
eb3bdbe
commit 962dfe3
Showing
80 changed files
with
24,349 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"presets": [ "@babel/preset-env" ], | ||
"compact": false | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"directory": "bower_components" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
# Browsers that we support | ||
last 2 versions | ||
ie >= 9 | ||
ios >= 7 | ||
android >= 4.4 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
.DS_Store | ||
node_modules | ||
npm-debug.log | ||
bower_components | ||
dist | ||
*.swp | ||
.cache | ||
.idea |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
# Changelog | ||
|
||
## Version 1.0 (November 19, 2015) | ||
|
||
Initial release. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
# Your project's server will run on localhost:xxxx at this port | ||
PORT: 8000 | ||
|
||
# UnCSS will use these settings | ||
UNCSS_OPTIONS: | ||
html: | ||
# Search for used CSS classes in generated HTML files | ||
- "dist/**/*.html" | ||
ignore: | ||
- !!js/regexp .foundation-mq | ||
- !!js/regexp ^\.is-.* | ||
|
||
# Gulp will reference these paths when it copies files | ||
PATHS: | ||
# Path to dist folder | ||
dist: "dist" | ||
# Paths to static assets that aren't images, CSS, or JavaScript | ||
assets: | ||
- "src/assets/**/*" | ||
- "!src/assets/{img,js,scss}/**/*" | ||
# Paths to Sass libraries, which can then be loaded with @import | ||
sass: | ||
- "node_modules/foundation-sites/scss" | ||
- "node_modules/motion-ui/src" | ||
# Paths to JavaScript entry points for webpack to bundle modules | ||
entries: | ||
- "src/assets/js/app.js" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,173 @@ | ||
'use strict'; | ||
|
||
import plugins from 'gulp-load-plugins'; | ||
import yargs from 'yargs'; | ||
import browser from 'browser-sync'; | ||
import gulp from 'gulp'; | ||
import panini from 'panini'; | ||
import rimraf from 'rimraf'; | ||
import sherpa from 'style-sherpa'; | ||
import yaml from 'js-yaml'; | ||
import fs from 'fs'; | ||
import webpackStream from 'webpack-stream'; | ||
import webpack2 from 'webpack'; | ||
import named from 'vinyl-named'; | ||
import uncss from 'uncss'; | ||
import autoprefixer from 'autoprefixer'; | ||
|
||
// Load all Gulp plugins into one variable | ||
const $ = plugins(); | ||
|
||
// Check for --production flag | ||
const PRODUCTION = !!(yargs.argv.production); | ||
|
||
// Load settings from settings.yml | ||
const { PORT, UNCSS_OPTIONS, PATHS } = loadConfig(); | ||
|
||
function loadConfig() { | ||
let ymlFile = fs.readFileSync('config.yml', 'utf8'); | ||
return yaml.load(ymlFile); | ||
} | ||
|
||
// Build the "dist" folder by running all of the below tasks | ||
// Sass must be run later so UnCSS can search for used classes in the others assets. | ||
gulp.task('build', | ||
gulp.series(clean, gulp.parallel(pages, javascript, images, copy), sass, styleGuide)); | ||
|
||
// Build the site, run the server, and watch for file changes | ||
gulp.task('default', | ||
gulp.series('build', server, watch)); | ||
|
||
// Delete the "dist" folder | ||
// This happens every time a build starts | ||
function clean(done) { | ||
rimraf(PATHS.dist, done); | ||
} | ||
|
||
// Copy files out of the assets folder | ||
// This task skips over the "img", "js", and "scss" folders, which are parsed separately | ||
function copy() { | ||
return gulp.src(PATHS.assets) | ||
.pipe(gulp.dest(PATHS.dist + '/assets')); | ||
} | ||
|
||
// Copy page templates into finished HTML files | ||
function pages() { | ||
return gulp.src('src/pages/**/*.{html,hbs,handlebars}') | ||
.pipe(panini({ | ||
root: 'src/pages/', | ||
layouts: 'src/layouts/', | ||
partials: 'src/partials/', | ||
data: 'src/data/', | ||
helpers: 'src/helpers/' | ||
})) | ||
.pipe(gulp.dest(PATHS.dist)); | ||
} | ||
|
||
// Load updated HTML templates and partials into Panini | ||
function resetPages(done) { | ||
panini.refresh(); | ||
done(); | ||
} | ||
|
||
// Generate a style guide from the Markdown content and HTML template in styleguide/ | ||
function styleGuide(done) { | ||
sherpa('src/styleguide/index.md', { | ||
output: PATHS.dist + '/styleguide.html', | ||
template: 'src/styleguide/template.html' | ||
}, done); | ||
} | ||
|
||
// Compile Sass into CSS | ||
// In production, the CSS is compressed | ||
function sass() { | ||
|
||
const postCssPlugins = [ | ||
// Autoprefixer | ||
autoprefixer(), | ||
|
||
// UnCSS - Uncomment to remove unused styles in production | ||
// PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS), | ||
].filter(Boolean); | ||
|
||
return gulp.src('src/assets/scss/app.scss') | ||
.pipe($.sourcemaps.init()) | ||
.pipe($.sass({ | ||
includePaths: PATHS.sass | ||
}) | ||
.on('error', $.sass.logError)) | ||
.pipe($.postcss(postCssPlugins)) | ||
.pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' }))) | ||
.pipe($.if(!PRODUCTION, $.sourcemaps.write())) | ||
.pipe(gulp.dest(PATHS.dist + '/assets/css')) | ||
.pipe(browser.reload({ stream: true })); | ||
} | ||
|
||
let webpackConfig = { | ||
mode: (PRODUCTION ? 'production' : 'development'), | ||
module: { | ||
rules: [ | ||
{ | ||
test: /\.js$/, | ||
use: { | ||
loader: 'babel-loader', | ||
options: { | ||
presets: [ "@babel/preset-env" ], | ||
compact: false | ||
} | ||
} | ||
} | ||
] | ||
}, | ||
devtool: !PRODUCTION && 'source-map' | ||
} | ||
|
||
// Combine JavaScript into one file | ||
// In production, the file is minified | ||
function javascript() { | ||
return gulp.src(PATHS.entries) | ||
.pipe(named()) | ||
.pipe($.sourcemaps.init()) | ||
.pipe(webpackStream(webpackConfig, webpack2)) | ||
.pipe($.if(PRODUCTION, $.terser() | ||
.on('error', e => { console.log(e); }) | ||
)) | ||
.pipe($.if(!PRODUCTION, $.sourcemaps.write())) | ||
.pipe(gulp.dest(PATHS.dist + '/assets/js')); | ||
} | ||
|
||
// Copy images to the "dist" folder | ||
// In production, the images are compressed | ||
function images() { | ||
return gulp.src('src/assets/img/**/*') | ||
.pipe($.if(PRODUCTION, $.imagemin([ | ||
$.imagemin.jpegtran({ progressive: true }), | ||
]))) | ||
.pipe(gulp.dest(PATHS.dist + '/assets/img')); | ||
} | ||
|
||
// Start a server with BrowserSync to preview the site in | ||
function server(done) { | ||
browser.init({ | ||
server: PATHS.dist, port: PORT | ||
}, done); | ||
} | ||
|
||
// Reload the browser with BrowserSync | ||
function reload(done) { | ||
browser.reload(); | ||
done(); | ||
} | ||
|
||
// Watch for changes to static assets, pages, Sass, and JavaScript | ||
function watch() { | ||
gulp.watch(PATHS.assets, copy); | ||
gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload)); | ||
gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload)); | ||
gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload)); | ||
gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload)); | ||
gulp.watch('src/assets/scss/**/*.scss').on('all', sass); | ||
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload)); | ||
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload)); | ||
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload)); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
# ZURB Template | ||
|
||
[](https://david-dm.org/zurb/foundation-zurb-template#info=devDependencies) | ||
|
||
**Please open all issues with this template on the main [Foundation for Sites](https://github.com/zurb/foundation-sites/issues) repo.** | ||
|
||
This is the official ZURB Template for use with [Foundation for Sites](http://foundation.zurb.com/sites). We use this template at ZURB to deliver static code to our clients. It has a Gulp-powered build system with these features: | ||
|
||
- Handlebars HTML templates with Panini | ||
- Sass compilation and prefixing | ||
- JavaScript module bundling with webpack | ||
- Built-in BrowserSync server | ||
- For production builds: | ||
- CSS compression | ||
- JavaScript module bundling with webpack | ||
- Image compression | ||
|
||
## Installation | ||
|
||
To use this template, your computer needs: | ||
|
||
- [NodeJS](https://nodejs.org/en/) (Version 6 or greater recommended, tested with 6.11.4 and 8.12.0) | ||
- [Git](https://git-scm.com/) | ||
|
||
This template can be installed with the Foundation CLI, or downloaded and set up manually. | ||
|
||
### Using the CLI | ||
|
||
Install the Foundation CLI with this command: | ||
|
||
```bash | ||
npm install foundation-cli --global | ||
``` | ||
|
||
Use this command to set up a blank Foundation for Sites project with this template: | ||
|
||
```bash | ||
foundation new --framework sites --template zurb | ||
``` | ||
|
||
The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name. | ||
|
||
Now `cd` to your project name and to start your project run | ||
|
||
```bash | ||
foundation watch | ||
``` | ||
|
||
### Manual Setup | ||
|
||
To manually set up the template, first download it with Git: | ||
|
||
```bash | ||
git clone https://github.com/zurb/foundation-zurb-template projectname | ||
``` | ||
|
||
Then open the folder in your command line, and install the needed dependencies: | ||
|
||
```bash | ||
cd projectname | ||
yarn | ||
``` | ||
|
||
Finally, run `yarn start` to run Gulp. Your finished site will be created in a folder called `dist`, viewable at this URL: | ||
|
||
``` | ||
http://localhost:8000 | ||
``` | ||
|
||
To create compressed, production-ready assets, run `yarn run build`. |
Oops, something went wrong.