From 0ba3659cb7e5b6bbe8733841b2395df99b882252 Mon Sep 17 00:00:00 2001 From: pgalias Date: Sun, 11 Sep 2016 18:56:44 +0200 Subject: [PATCH] inital commit --- docs/.babelrc | 5 ++ docs/.editorconfig | 13 ++++ docs/.eslintrc | 31 +++++++++ docs/.gitattributes | 1 + docs/.gitignore | 6 ++ docs/.yo-rc.json | 12 ++++ docs/README.md | 54 ++++++++++++++++ docs/gulp/browserSync.js | 23 +++++++ docs/gulp/browserify.js | 94 ++++++++++++++++++++++++++++ docs/gulp/clean.js | 14 +++++ docs/gulp/copy.js | 19 ++++++ docs/gulp/eslint.js | 31 +++++++++ docs/gulp/imagemin.js | 22 +++++++ docs/gulp/jade.js | 78 +++++++++++++++++++++++ docs/gulp/less.js | 38 +++++++++++ docs/gulp/watch.js | 41 ++++++++++++ docs/gulpfile.babel.js | 66 ++++++++++++++++++++ docs/package.json | 85 +++++++++++++++++++++++++ docs/src/README.md | 44 +++++++++++++ docs/src/_data/README.md | 55 ++++++++++++++++ docs/src/_images/README.md | 4 ++ docs/src/_images/yeogurt-swirl.png | Bin 0 -> 4074 bytes docs/src/_layouts/README.md | 63 +++++++++++++++++++ docs/src/_layouts/base.jade | 35 +++++++++++ docs/src/_modules/README.md | 48 ++++++++++++++ docs/src/_modules/link/link.jade | 10 +++ docs/src/_modules/link/link.js | 7 +++ docs/src/_modules/link/link.less | 21 +++++++ docs/src/_scripts/README.md | 97 +++++++++++++++++++++++++++++ docs/src/_scripts/main.js | 12 ++++ docs/src/_styles/README.md | 26 ++++++++ docs/src/_styles/main.less | 43 +++++++++++++ docs/src/favicon.ico | Bin 0 -> 1150 bytes docs/src/index.jade | 15 +++++ docs/src/robots.txt | 5 ++ 35 files changed, 1118 insertions(+) create mode 100644 docs/.babelrc create mode 100644 docs/.editorconfig create mode 100644 docs/.eslintrc create mode 100644 docs/.gitattributes create mode 100644 docs/.gitignore create mode 100644 docs/.yo-rc.json create mode 100644 docs/README.md create mode 100644 docs/gulp/browserSync.js create mode 100644 docs/gulp/browserify.js create mode 100644 docs/gulp/clean.js create mode 100644 docs/gulp/copy.js create mode 100644 docs/gulp/eslint.js create mode 100644 docs/gulp/imagemin.js create mode 100644 docs/gulp/jade.js create mode 100644 docs/gulp/less.js create mode 100644 docs/gulp/watch.js create mode 100644 docs/gulpfile.babel.js create mode 100644 docs/package.json create mode 100644 docs/src/README.md create mode 100644 docs/src/_data/README.md create mode 100644 docs/src/_images/README.md create mode 100644 docs/src/_images/yeogurt-swirl.png create mode 100644 docs/src/_layouts/README.md create mode 100644 docs/src/_layouts/base.jade create mode 100644 docs/src/_modules/README.md create mode 100644 docs/src/_modules/link/link.jade create mode 100644 docs/src/_modules/link/link.js create mode 100644 docs/src/_modules/link/link.less create mode 100644 docs/src/_scripts/README.md create mode 100644 docs/src/_scripts/main.js create mode 100644 docs/src/_styles/README.md create mode 100644 docs/src/_styles/main.less create mode 100644 docs/src/favicon.ico create mode 100644 docs/src/index.jade create mode 100644 docs/src/robots.txt diff --git a/docs/.babelrc b/docs/.babelrc new file mode 100644 index 0000000..4014219 --- /dev/null +++ b/docs/.babelrc @@ -0,0 +1,5 @@ + +{ + "presets": ["es2015"], + "plugins": [["add-module-exports"]] +} diff --git a/docs/.editorconfig b/docs/.editorconfig new file mode 100644 index 0000000..e717f5e --- /dev/null +++ b/docs/.editorconfig @@ -0,0 +1,13 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/docs/.eslintrc b/docs/.eslintrc new file mode 100644 index 0000000..3bf8f2f --- /dev/null +++ b/docs/.eslintrc @@ -0,0 +1,31 @@ +{ + "parser": "babel-eslint", + "env": { + "browser": true, + "node": true, + "es6": true + }, + "globals": { + "DocumentFragment": true + }, + "rules": { + "indent": [2, 2], + "valid-jsdoc": 0, + "brace-style": [1, "stroustrup"], + "no-constant-condition": 1, + "no-underscore-dangle": 0, + "no-use-before-define": 1, + "func-names": 0, + "semi": [2, "always"], + "no-new": 0, + "new-parens": 2, + "no-ternary": 0, + "new-cap": 0, + "no-unused-vars": [1, {"vars": "local", "args": "none"}], + "quotes": [2, "single"], + "one-var": 0, + "space-infix-ops": 0, + "strict": 0, + "camelcase": [2, {"properties": "never"}] + } +} diff --git a/docs/.gitattributes b/docs/.gitattributes new file mode 100644 index 0000000..2125666 --- /dev/null +++ b/docs/.gitattributes @@ -0,0 +1 @@ +* text=auto \ No newline at end of file diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 0000000..2778c5f --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,6 @@ +node_modules +*.log +build +tmp +.grunt +.DS_Store diff --git a/docs/.yo-rc.json b/docs/.yo-rc.json new file mode 100644 index 0000000..8b01e10 --- /dev/null +++ b/docs/.yo-rc.json @@ -0,0 +1,12 @@ +{ + "generator-yeogurt": { + "config": { + "projectName": "Pure-css-components", + "htmlOption": "jade", + "jsPreprocessor": "es6", + "cssOption": "less", + "testFramework": "none" + }, + "version": "1.5.3" + } +} \ No newline at end of file diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..d2d0ad3 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,54 @@ +# Pure-Css-Components readme + +Generated on 2016-09-11 using +[generator-yeogurt@1.5.3](https://github.com/larsonjj/generator-yeogurt) + +## Description + +This is an example readme file. +Describe your site/app here. + +## Technologies used + +JavaScript +- [Browserify](http://browserify.org/) with ES6/2015 support through [Babel](https://babeljs.io/) +- [Node](https://nodejs.org/) + +Styles +- [Less](http://lesscss.org/) + +Markup +- [Jade](http://jade-lang.com/) + +Optimization +- [Imagemin](https://github.com/imagemin/imagemin) +- [Uglify](https://github.com/mishoo/UglifyJS) + +Server +- [BrowserSync](http://www.browsersync.io/) + +Linting +- [ESlint](http://eslint.org/) + +Automation +- [Gulp](http://gulpjs.com) + +Code Management +- [Editorconfig](http://editorconfig.org/) +- [Git](https://git-scm.com/) + + +## Automated tasks + +This project uses [Gulp](http://gulpjs.com) to run automated tasks for development and production builds. +The tasks are as follows: + +`gulp --production`: Same as `gulp serve --production` also run `gulp test` and not boot up production server + +`gulp serve`: Compiles preprocessors and boots up development server +`gulp serve --open`: Same as `gulp serve` but will also open up site/app in your default browser +`gulp serve --production`: Same as `gulp serve` but will run all production tasks so you can view the site/app in it's final optimized form + +`gulp test`: Lints all `*.js` file in the `source` folder using eslint + +***Adding the `--debug` option to any gulp task displays extra debugging information (ex. data being loaded into your templates)*** diff --git a/docs/gulp/browserSync.js b/docs/gulp/browserSync.js new file mode 100644 index 0000000..5270ea4 --- /dev/null +++ b/docs/gulp/browserSync.js @@ -0,0 +1,23 @@ +'use strict'; + +export default function(gulp, plugins, args, config, taskTarget, browserSync) { + // BrowserSync + gulp.task('browserSync', () => { + browserSync.init({ + open: args.open ? 'local' : false, + startPath: config.baseUrl, + port: config.port || 3000, + server: { + baseDir: taskTarget, + routes: (() => { + let routes = {}; + + // Map base URL to routes + routes[config.baseUrl] = taskTarget; + + return routes; + })() + } + }); + }); +} diff --git a/docs/gulp/browserify.js b/docs/gulp/browserify.js new file mode 100644 index 0000000..fdd5b61 --- /dev/null +++ b/docs/gulp/browserify.js @@ -0,0 +1,94 @@ +'use strict'; + +import path from 'path'; +import glob from 'glob'; +import browserify from 'browserify'; +import watchify from 'watchify'; +import envify from 'envify'; +import babelify from 'babelify'; +import _ from 'lodash'; +import vsource from 'vinyl-source-stream'; +import buffer from 'vinyl-buffer'; +import gulpif from 'gulp-if'; + +export default function(gulp, plugins, args, config, taskTarget, browserSync) { + let dirs = config.directories; + let entries = config.entries; + + let browserifyTask = (files) => { + return files.map((entry) => { + let dest = path.resolve(taskTarget); + + // Options + let customOpts = { + entries: [entry], + debug: true, + transform: [ + babelify, // Enable ES6 features + envify // Sets NODE_ENV for better optimization of npm packages + ] + }; + + let bundler = browserify(customOpts); + + if (!args.production) { + // Setup Watchify for faster builds + let opts = _.assign({}, watchify.args, customOpts); + bundler = watchify(browserify(opts)); + } + + let rebundle = function() { + let startTime = new Date().getTime(); + bundler.bundle() + .on('error', function(err) { + plugins.util.log( + plugins.util.colors.red('Browserify compile error:'), + '\n', + err.stack, + '\n' + ); + this.emit('end'); + }) + .on('error', plugins.notify.onError(config.defaultNotification)) + .pipe(vsource(entry)) + .pipe(buffer()) + .pipe(plugins.sourcemaps.init({loadMaps: true})) + .pipe(gulpif(args.production, plugins.uglify())) + .on('error', plugins.notify.onError(config.defaultNotification)) + .pipe(plugins.rename(function(filepath) { + // Remove 'source' directory as well as prefixed folder underscores + // Ex: 'src/_scripts' --> '/scripts' + filepath.dirname = filepath.dirname.replace(dirs.source, '').replace('_', ''); + })) + .pipe(plugins.sourcemaps.write('./')) + .pipe(gulp.dest(dest)) + // Show which file was bundled and how long it took + .on('end', function() { + let time = (new Date().getTime() - startTime) / 1000; + console.log( + plugins.util.colors.cyan(entry) + + ' was browserified: ' + + plugins.util.colors.magenta(time + 's')); + return browserSync.reload('*.js'); + }); + }; + + if (!args.production) { + bundler.on('update', rebundle); // on any dep update, runs the bundler + bundler.on('log', plugins.util.log); // output build logs to terminal + } + return rebundle(); + }); + }; + + // Browserify Task + gulp.task('browserify', (done) => { + return glob('./' + path.join(dirs.source, dirs.scripts, entries.js), function(err, files) { + if (err) { + done(err); + } + + return browserifyTask(files); + }); + }); +} diff --git a/docs/gulp/clean.js b/docs/gulp/clean.js new file mode 100644 index 0000000..0eac4f4 --- /dev/null +++ b/docs/gulp/clean.js @@ -0,0 +1,14 @@ +'use strict'; + +import path from 'path'; +import del from 'del'; + +export default function(gulp, plugins, args, config, taskTarget, browserSync) { + let dirs = config.directories; + + // Clean + gulp.task('clean', del.bind(null, [ + path.join(dirs.temporary), + path.join(dirs.destination) + ])); +} diff --git a/docs/gulp/copy.js b/docs/gulp/copy.js new file mode 100644 index 0000000..ffd2e7e --- /dev/null +++ b/docs/gulp/copy.js @@ -0,0 +1,19 @@ +'use strict'; + +import path from 'path'; + +export default function(gulp, plugins, args, config, taskTarget, browserSync) { + let dirs = config.directories; + let dest = path.join(taskTarget); + + // Copy + gulp.task('copy', () => { + return gulp.src([ + path.join(dirs.source, '**/*'), + '!' + path.join(dirs.source, '{**/\_*,**/\_*/**}'), + '!' + path.join(dirs.source, '**/*.jade') + ]) + .pipe(plugins.changed(dest)) + .pipe(gulp.dest(dest)); + }); +} diff --git a/docs/gulp/eslint.js b/docs/gulp/eslint.js new file mode 100644 index 0000000..271322e --- /dev/null +++ b/docs/gulp/eslint.js @@ -0,0 +1,31 @@ +/*eslint no-process-exit:0 */ + +'use strict'; + +import path from 'path'; +import gulpif from 'gulp-if'; + +export default function(gulp, plugins, args, config, taskTarget, browserSync) { + let dirs = config.directories; + + // ESLint + gulp.task('eslint', () => { + gulp.src([ + path.join('gulpfile.js'), + path.join(dirs.source, '**/*.js'), + // Ignore all vendor folder files + '!' + path.join('**/vendor/**', '*') + ]) + .pipe(browserSync.reload({stream: true, once: true})) + .pipe(plugins.eslint({ + useEslintrc: true + })) + .pipe(plugins.eslint.format()) + .pipe(gulpif(!browserSync.active, plugins.eslint.failAfterError())) + .on('error', function() { + if (!browserSync.active) { + process.exit(1); + } + }); + }); +} diff --git a/docs/gulp/imagemin.js b/docs/gulp/imagemin.js new file mode 100644 index 0000000..b8d55d4 --- /dev/null +++ b/docs/gulp/imagemin.js @@ -0,0 +1,22 @@ +'use strict'; + +import path from 'path'; +import gulpif from 'gulp-if'; +import pngquant from 'imagemin-pngquant'; + +export default function(gulp, plugins, args, config, taskTarget, browserSync) { + let dirs = config.directories; + let dest = path.join(taskTarget, dirs.images.replace(/^_/, '')); + + // Imagemin + gulp.task('imagemin', () => { + return gulp.src(path.join(dirs.source, dirs.images, '**/*.{jpg,jpeg,gif,svg,png}')) + .pipe(plugins.changed(dest)) + .pipe(gulpif(args.production, plugins.imagemin({ + progressive: true, + svgoPlugins: [{removeViewBox: false}], + use: [pngquant({speed: 10})] + }))) + .pipe(gulp.dest(dest)); + }); +} diff --git a/docs/gulp/jade.js b/docs/gulp/jade.js new file mode 100644 index 0000000..42936da --- /dev/null +++ b/docs/gulp/jade.js @@ -0,0 +1,78 @@ +'use strict'; + +import fs from 'fs'; +import path from 'path'; +import foldero from 'foldero'; +import jade from 'jade'; +import yaml from 'js-yaml'; + +export default function(gulp, plugins, args, config, taskTarget, browserSync) { + let dirs = config.directories; + let dest = path.join(taskTarget); + let dataPath = path.join(dirs.source, dirs.data); + + // Jade template compile + gulp.task('jade', () => { + let siteData = {}; + if (fs.existsSync(dataPath)) { + // Convert directory to JS Object + siteData = foldero(dataPath, { + recurse: true, + whitelist: '(.*/)*.+\.(json|ya?ml)$', + loader: function loadAsString(file) { + let json = {}; + try { + if (path.extname(file).match(/^.ya?ml$/)) { + json = yaml.safeLoad(fs.readFileSync(file, 'utf8')); + } + else { + json = JSON.parse(fs.readFileSync(file, 'utf8')); + } + } + catch(e) { + console.log('Error Parsing DATA file: ' + file); + console.log('==== Details Below ===='); + console.log(e); + } + return json; + } + }); + } + + // Add --debug option to your gulp task to view + // what data is being loaded into your templates + if (args.debug) { + console.log('==== DEBUG: site.data being injected to templates ===='); + console.log(siteData); + console.log('\n==== DEBUG: package.json config being injected to templates ===='); + console.log(config); + } + + return gulp.src([ + path.join(dirs.source, '**/*.jade'), + '!' + path.join(dirs.source, '{**/\_*,**/\_*/**}') + ]) + .pipe(plugins.changed(dest)) + .pipe(plugins.plumber()) + .pipe(plugins.jade({ + jade: jade, + pretty: true, + locals: { + config: config, + debug: true, + site: { + data: siteData + } + } + })) + .pipe(plugins.htmlmin({ + collapseBooleanAttributes: true, + conservativeCollapse: true, + removeCommentsFromCDATA: true, + removeEmptyAttributes: true, + removeRedundantAttributes: true + })) + .pipe(gulp.dest(dest)) + .on('end', browserSync.reload); + }); +} diff --git a/docs/gulp/less.js b/docs/gulp/less.js new file mode 100644 index 0000000..9124bc9 --- /dev/null +++ b/docs/gulp/less.js @@ -0,0 +1,38 @@ +'use strict'; + +import path from 'path'; +import autoprefixer from 'autoprefixer'; +import gulpif from 'gulp-if'; + +export default function(gulp, plugins, args, config, taskTarget, browserSync) { + let dirs = config.directories; + let entries = config.entries; + let dest = path.join(taskTarget, dirs.styles.replace(/^_/, '')); + + // Less compilation + gulp.task('less', () => { + return gulp.src(path.join(dirs.source, dirs.styles, entries.css)) + .pipe(plugins.plumber()) + .pipe(plugins.sourcemaps.init()) + .pipe(plugins.less({ + paths: [ + path.join(dirs.source, dirs.styles), + path.join(dirs.source, dirs.modules) + ] + })) + .on('error', function(err) { + plugins.util.log(err); + }) + .on('error', plugins.notify.onError(config.defaultNotification)) + .pipe(plugins.postcss([autoprefixer({browsers: ['last 2 version', '> 5%', 'safari 5', 'ios 6', 'android 4']})])) + .pipe(plugins.rename(function(path) { + // Remove 'source' directory as well as prefixed folder underscores + // Ex: 'src/_styles' --> '/styles' + path.dirname = path.dirname.replace(dirs.source, '').replace('_', ''); + })) + .pipe(gulpif(args.production, plugins.cssnano({rebase: false}))) + .pipe(plugins.sourcemaps.write('./')) + .pipe(gulp.dest(dest)) + .pipe(browserSync.stream({match: '**/*.css'})); + }); +} diff --git a/docs/gulp/watch.js b/docs/gulp/watch.js new file mode 100644 index 0000000..8196501 --- /dev/null +++ b/docs/gulp/watch.js @@ -0,0 +1,41 @@ +'use strict'; + +import path from 'path'; + +export default function(gulp, plugins, args, config, taskTarget, browserSync) { + let dirs = config.directories; + + // Watch task + gulp.task('watch', () => { + if (!args.production) { + gulp.watch([ + path.join(dirs.source, dirs.styles, '**/*.less'), + path.join(dirs.source, dirs.modules, '**/*.less'), + ], ['less']); + + // Jade Templates + gulp.watch([ + path.join(dirs.source, '**/*.jade'), + path.join(dirs.source, dirs.data, '**/*.{json,yaml,yml}') + ], ['jade']); + + // Copy + gulp.watch([ + path.join(dirs.source, '**/*'), + '!' + path.join(dirs.source, '{**/\_*,**/\_*/**}'), + '!' + path.join(dirs.source, '**/*.jade') + ], ['copy']); + + // Images + gulp.watch([ + path.join(dirs.source, dirs.images, '**/*.{jpg,jpeg,gif,svg,png}') + ], ['imagemin']); + + // All other files + gulp.watch([ + path.join(dirs.temporary, '**/*'), + '!' + path.join(dirs.temporary, '**/*.{css,map,html,js}') + ]).on('change', browserSync.reload); + } + }); +} diff --git a/docs/gulpfile.babel.js b/docs/gulpfile.babel.js new file mode 100644 index 0000000..33880b6 --- /dev/null +++ b/docs/gulpfile.babel.js @@ -0,0 +1,66 @@ +'use strict'; + +import gulp from 'gulp'; +import gulpLoadPlugins from 'gulp-load-plugins'; +import browserSyncLib from 'browser-sync'; +import pjson from './package.json'; +import minimist from 'minimist'; +import wrench from 'wrench'; + +// Load all gulp plugins based on their names +// EX: gulp-copy -> copy +const plugins = gulpLoadPlugins(); + +const defaultNotification = function(err) { + return { + subtitle: err.plugin, + message: err.message, + sound: 'Funk', + onLast: true, + }; +}; + +let config = Object.assign({}, pjson.config, defaultNotification); + +let args = minimist(process.argv.slice(2)); +let dirs = config.directories; +let taskTarget = args.production ? dirs.destination : dirs.temporary; + +// Create a new browserSync instance +let browserSync = browserSyncLib.create(); + +// This will grab all js in the `gulp` directory +// in order to load all gulp tasks +wrench.readdirSyncRecursive('./gulp').filter((file) => { + return (/\.(js)$/i).test(file); +}).map(function(file) { + require('./gulp/' + file)(gulp, plugins, args, config, taskTarget, browserSync); +}); + +// Default task +gulp.task('default', ['clean'], () => { + gulp.start('build'); +}); + +// Build production-ready code +gulp.task('build', [ + 'copy', + 'imagemin', + 'jade', + 'less', + 'browserify' +]); + +// Server tasks with watch +gulp.task('serve', [ + 'imagemin', + 'copy', + 'jade', + 'less', + 'browserify', + 'browserSync', + 'watch' +]); + +// Testing +gulp.task('test', ['eslint']); diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 0000000..3bb8c38 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,85 @@ +{ + "name": "pure-css-components", + "version": "0.0.1", + "dependencies": { + "jquery": "~2.2.0", + "normalize.css": "~3.0.3" + }, + "devDependencies": { + "babelify": "~7.3.0", + "babel-core": "~6.9.1", + "babel-preset-es2015": "~6.9.0", + "babel-plugin-add-module-exports": "~0.2.1", + "babel-eslint": "~6.0.4", + "lodash": "~4.0.0", + "foldero": "~0.1.1", + "minimist": "~1.2.0", + "rimraf": "~2.5.0", + "wrench": "~1.5.8", + "gulp-plumber": "~1.0.1", + "gulp-changed": "~1.3.0", + "gulp-notify": "~2.2.0", + "gulp-rename": "~1.2.2", + "gulp-uglify": "~1.5.1", + "del": "~2.2.0", + "gulp-if": "~2.0.0", + "glob": "~6.0.4", + "gulp-data": "~1.2.1", + "gulp-sourcemaps": "~1.6.0", + "gulp-load-plugins": "~1.2.0", + "gulp-cssnano": "~2.1.0", + "vinyl-source-stream": "~1.1.0", + "vinyl-buffer": "~1.0.0", + "gulp-util": "~3.0.7", + "gulp": "~3.9.0", + "browser-sync": "~2.13.0", + "gulp-jade": "~1.1.0", + "jade": "~1.11.0", + "gulp-postcss": "~6.0.1", + "autoprefixer": "~6.3.1", + "gulp-htmlmin": "~1.3.0", + "envify": "~3.4.0", + "gulp-imagemin": "~2.4.0", + "imagemin-svgo": "~4.2.0", + "imagemin-pngquant": "~4.2.0", + "gulp-eslint": "~1.1.1", + "gulp-less": "~3.0.5", + "gulp-newer": "~1.1.0", + "js-yaml": "~3.5.2", + "watchify": "~3.7.0 ", + "browserify" : "~13.0.1" + }, + "scripts": { + "clean-deps": "rimraf node_modules" + }, + "engines": { + "node": ">=0.12.0" + }, + "//": "CUSTOM CONFIGURATION", + "config": { + "//": "Local Server Settings", + "host": "127.0.0.1", + "port": "3000", + "baseUrl": "./", + "//": "Gulp Task Directories", + "//": "NOTE: folders prefixed with an underscore (_) will have it removed when moved to build target (ex: src/_images -> build/images)", + "//": "NOTE: folders NOT prefixed with underscore (_) will be copied to build target 1 to 1 (ex: src/fonts -> build/fonts)", + "directories": { + "source": "src", + "destination": "build", + "temporary": "tmp", + "//": "Directories relative to `source` directory", + "modules": "_modules", + "layouts": "_layouts", + "images": "_images", + "styles": "_styles", + "scripts": "_scripts", + "data": "_data" + }, + "//": "Entry files", + "entries": { + "js": "main**.js", + "css": "main**.less" + } + } +} diff --git a/docs/src/README.md b/docs/src/README.md new file mode 100644 index 0000000..5c05003 --- /dev/null +++ b/docs/src/README.md @@ -0,0 +1,44 @@ +# Source + +This "Source" folder is where all of your files associated with this site will go +and is considered the root ('/') of your site. +This is also where all of your pages will be generated when using the [page subgenerator](#Subgenerator). + +## Pages + +Pages are the main driver for static sites and also determine your site's routes. +All page templates (except index.{jade,nunjucks}) should be placed in a folder named by your desired route. +For example, a contact page would most likely be loaded at the `/contact` route. +You would acheive this by creating the following structure: + +``` +└── src + └── contact + └── index.{jade,nunjucks} +``` + +### Subgenerator + +You can easily create new pages using the built-in sub-generator like so: + +``` +yo yeogurt:page about +``` + +This will create the structure you saw above: + +``` +└── src + └── about + └── index.{jade,nunjucks} +``` + +So when you boot up your site and go to `/about` you will see your new page. + +### Specifying a layout + +You can also create a new page that extends from a different layout file than `base.{jade,nunjucks}`. + +``` +yo yeogurt:page about --layout=two-col +``` diff --git a/docs/src/_data/README.md b/docs/src/_data/README.md new file mode 100644 index 0000000..13ce092 --- /dev/null +++ b/docs/src/_data/README.md @@ -0,0 +1,55 @@ +# Data + +This "Data" folder is the designated location for `json` and `yaml` file data +that will be injected into your templates under the `site.data` property. + +## Example + +If you have two data files in this data folder with the following contents: + +``` +└── _data + ├── global.yml + └── menu.json +``` + +***global.yml*** + +```yml +siteName: Sample +``` + +***menu.json*** + +```json +[{ + "name": "Home" +},{ + "name": "About" +}] +``` + +They would be converted to the following object: + +```js +{ + menu: [{ + name: "Home" + }, { + name: "About" + }], + global: { + siteName: "Sample" + } +} +``` + +And would then be injected into your template within the `site.data` property +so you could access your data like so: + +```jade +h1= site.data.global.siteName //- Sample +ul.menu + each val in site.data.menu + li= val.name //- Home, About +``` diff --git a/docs/src/_images/README.md b/docs/src/_images/README.md new file mode 100644 index 0000000..b593af9 --- /dev/null +++ b/docs/src/_images/README.md @@ -0,0 +1,4 @@ +# Images + +This "Images" folder is designated for all image files (jpg, jpeg, png, gif, svg). +During development and production builds, images will be compressed using [imagemin](https://github.com/imagemin/imagemin). diff --git a/docs/src/_images/yeogurt-swirl.png b/docs/src/_images/yeogurt-swirl.png new file mode 100644 index 0000000000000000000000000000000000000000..7fdcadd56f9008bbbae96747a45e1809330d8590 GIT binary patch literal 4074 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 literal 0 HcmV?d00001 diff --git a/docs/src/_layouts/README.md b/docs/src/_layouts/README.md new file mode 100644 index 0000000..5318192 --- /dev/null +++ b/docs/src/_layouts/README.md @@ -0,0 +1,63 @@ +# Layouts + +This "Layouts" folder is designated for all page layouts. + +## Example + +An example layout: + +```jade +extend ./base + +// Add extra stylesheets +block append stylesheets + +block content + //- Provides layout level markup + .layout-wrapper.two-col + block first + //- Add first column content here + block second + //- Add second column content here + +// Add extra scripts +block append scripts +``` + +> NOTE: The `append stylesheets` and `append scripts` blocks allow you to add on any layout-specific scripts or stylesheets. +> The `content` block is overriding the parent `base.jade` file's block by the same name since we are extending from it. +> The `first` and `second` blocks can contain default markup, but also allow you to extend from this layout and overwrite them. +> You can read more about extensions and blocks on the [Jade website](http://jade-lang.com/reference/) + +## Sub-generator + +You can easily create new layouts using the built-in sub-generator like so: + +``` +yo yeogurt:layout two-col +``` + +### Extend from a layout other than `base` + +You can also create a new layout that extends from a different layout file than `base.jade`. + +``` +yo yeogurt:layout three-col --layout=two-col +``` + +This new layout will look something like this: + +```jade +extend ./two-col + +// Add extra stylesheets +block append stylesheets + +block content + //- Provides layout level markup + .layout-wrapper.three-col + block three-col + +// Add extra scripts +block append scripts +``` diff --git a/docs/src/_layouts/base.jade b/docs/src/_layouts/base.jade new file mode 100644 index 0000000..557aaa8 --- /dev/null +++ b/docs/src/_layouts/base.jade @@ -0,0 +1,35 @@ +//- Custom Configuration +block config + //- Setup site's base URL to match the "baseUrl" key within `package.json` + //- Otherwise default to relative pathing + - var baseUrl = config.baseUrl || './' + +doctype html + + + + + + +head + meta(charset='utf-8') + meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1') + title Pure-css-components + meta(name='description', content= 'A new Yeogurt application') + meta(name='viewport', content='width=device-width, initial-scale=1.0') + block stylesheets + link(rel='stylesheet', href= baseUrl + 'styles/main.css') + +body + + + block content + + block scripts + script(src= baseUrl + 'scripts/main.js') + + diff --git a/docs/src/_modules/README.md b/docs/src/_modules/README.md new file mode 100644 index 0000000..9a075fc --- /dev/null +++ b/docs/src/_modules/README.md @@ -0,0 +1,48 @@ +# Modules + +This "Modules" folder is designated for reusable pieces of code that are used within layouts and pages. + +## Example + +An example link module: + +``` +└── link + ├── __tests__ + | └── link.spec.js + ├── link.{jade,nunjucks} + ├── link.js + └── link.scss +``` + +Each module should include a template, javascript file, stylesheet, and unit test file (if doing unit testing). +These files should use the same name, i.e `link`. If you don't need one of the files in a module, feel free to delete it. + +## Sub-generator + +You can easily create new modules using the built-in sub-generator like so: + +``` +yo yeogurt:module link +``` + +### Atomic modules + +You can also create modules specific to [atomic design](http://patternlab.io/about.html) as well +by using the `--atomic` option with the following values: `atom`, `molecule`, and `organism`: + +``` +yo yeogurt:module link --atomic=atom +``` + +This will place your new module within the corresponding atomic folder like the following: + +``` +└── atoms + └── link + ├── __tests__ + | └── link.spec.js + ├── link.{jade,nunjucks} + ├── link.js + └── link.scss +``` diff --git a/docs/src/_modules/link/link.jade b/docs/src/_modules/link/link.jade new file mode 100644 index 0000000..ad37307 --- /dev/null +++ b/docs/src/_modules/link/link.jade @@ -0,0 +1,10 @@ +mixin link(spec) + - spec = spec || {} + - spec.__class = spec.__class || '' + - spec.text = spec.text || 'Default Link' + + a.link(class=spec.__class)&attributes(attributes) + if block + block + else + != spec.text diff --git a/docs/src/_modules/link/link.js b/docs/src/_modules/link/link.js new file mode 100644 index 0000000..7ea985c --- /dev/null +++ b/docs/src/_modules/link/link.js @@ -0,0 +1,7 @@ +'use strict'; + +export default class Link { + constructor() { + console.log('Link module'); + } +} diff --git a/docs/src/_modules/link/link.less b/docs/src/_modules/link/link.less new file mode 100644 index 0000000..dc9f4bc --- /dev/null +++ b/docs/src/_modules/link/link.less @@ -0,0 +1,21 @@ +// link styles + +// unvisited link +a:link { + color: #ff0000; +} + +// visited link +a:visited { + color: #00ff00; +} + +// mouse over link +a:hover { + color: #ff00ff; +} + +// selected link +a:active { + color: #0000ff; +} diff --git a/docs/src/_scripts/README.md b/docs/src/_scripts/README.md new file mode 100644 index 0000000..bf7cf65 --- /dev/null +++ b/docs/src/_scripts/README.md @@ -0,0 +1,97 @@ +# Scripts + +This "Scripts" folder is designated for all of your global stylesheet files. +The key file in this folder is `main.js` as it is designated as your bootstrapping file (intializes all your scripts) and is included in the `base.jade` file + +By default, ES6/2015 features are enabled in your scripts by using [Babel](https://babeljs.io) + +## Adding third-party script libraries +Odds are that you will need to add some third party libraries to your project at some point. +To do so, it is strongly recommended that you install them using [NPM](http://npmjs.com/): + +``` +npm install [package name] --save +``` + +Once installed, you can access scripts within your JavaScript files like so: + +```js +// Example using jquery + +// ES5 +var $ = require('jquery'); + +$(function() { + console.log('Hello'); +}); + +// ES6 +import $ from 'jquery'; + +$(() => { + console.log('Hello'); +}); +``` + +#### Using Non-CommonJS modules with browserify-shim + +Sometimes you need to use libraries that attach themselves to the window object and don't work with browserify very well. +In this case, you can use a transform called [browserify-shim](https://github.com/thlorenz/browserify-shim). + +***Step 1: Install browserify-shim transform for browserify*** + +Browserify doesn't support Non-CommonJS scripts out of the box (jQuery plugins, window.* libs, etc), but you can install a transform called 'browserify-shim' to remedy that: + +``` +npm install --save-dev browserify-shim +``` + +***Step 2: Install desired npm package*** + +Now you can install your desired npm package: + +``` +// Example: jQuery plugin + +npm install --save slick-carousel +``` + +***Step 3: Setup browserify-shim*** + +Add the following to your `package.json` file: + +```json +"browserify": { + "transform": [ "browserify-shim" ] +}, +"browser": { + "slick-carousel": "./node_modules/slick-carousel/slick/slick.js" +}, +"browserify-shim": { + "slick-carousel": { + "exports": null, + "depends": "jquery:$" + } +}, +``` +> Note: [slick-carousel](http://kenwheeler.github.io/slick/) requires jQuery, hence the `"depends": "jquery:$"` + +***Step 4: Import file to your project*** + +Now you can include your desired module/lib within your `src/_scripts/main.js` file: + +```js +// ES5 +require('slick-carousel'); + +// ES6 +import 'slick-carousel'; + +... + +$('#someId').slick(); // Activates slick plugin +``` + +#### Using Bower + +Check out the instructions for using bower on the [Yeogurt README](https://github.com/larsonjj/generator-yeogurt#using-bower) diff --git a/docs/src/_scripts/main.js b/docs/src/_scripts/main.js new file mode 100644 index 0000000..f2a16be --- /dev/null +++ b/docs/src/_scripts/main.js @@ -0,0 +1,12 @@ +// Main javascript entry point +// Should handle bootstrapping/starting application + +'use strict'; + +import $ from 'jquery'; +import Link from '../_modules/link/link'; + +$(() => { + new Link(); // Activate Link modules logic + console.log('Welcome to Yeogurt!'); +}); diff --git a/docs/src/_styles/README.md b/docs/src/_styles/README.md new file mode 100644 index 0000000..bf3d862 --- /dev/null +++ b/docs/src/_styles/README.md @@ -0,0 +1,26 @@ +# Styles + +This "Styles" folder is designated for all of your global stylesheet files. +The key file in this folder is `main` as it is designated as your bootstrapping file (intializes/imports all your stylesheets) and is included in the `base.jade` file + +## Adding third-party stylesheet libraries +Odds are that you will need to add some third party libraries to your project at some point. +To do so, it is strongly recommended that you install them using [NPM](http://npmjs.com/): + +``` +npm install [package name] --save +``` + +**Using LESS:** + +```less +// LESS +@import 'node_modules/bootstrap/less/bootstrap'; + +// CSS +@import (inline) 'node_modules/normalize.css/normalize.css'; +``` + +#### Using Bower + +Check out the instructions for using bower on the [Yeogurt README](https://github.com/larsonjj/generator-yeogurt#using-bower) diff --git a/docs/src/_styles/main.less b/docs/src/_styles/main.less new file mode 100644 index 0000000..298d4e3 --- /dev/null +++ b/docs/src/_styles/main.less @@ -0,0 +1,43 @@ +// Normalize Styles +@import (inline) 'node_modules/normalize.css/normalize.css'; + +// Import Modules +@import '../_modules/link/link'; + +// Box sizing partial styles: +// Apply a natural box layout model to all elements +*, +*:before, +*:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.yeogurt-info { + text-align: center; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} + +.version { + font-size: 14px; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + position: absolute; + bottom: 10px; + right: 10px; +} + +.logo { + margin-top: 15px; +} + +// Styling on warning for users on IE7 or below +.browsehappy { + text-align: center; + margin: 0; + background: #fff8e2; + color: #000; + padding: 0.5em 0; +} diff --git a/docs/src/favicon.ico b/docs/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..b9351a3dd27c773154e3f123dbe1354c1296cffb GIT binary patch literal 1150 zcmZ`(OK2295UofQL@}$us22%FP!vJPK@i0c-n_Vxo|zZ|(M%Li&0U85JjSiPIoUFKSU(1j;|(8GK}jkZ>#Iod)-?-wM$fmcP2yl ztfzc6Q5_L22S9{aPDDnp^&x>aSMEdoTpHR?m|n~$2pGFw^4gsD1_6pyGLrV#<}J+{Hqba0cr1K zE|j?`b_Vku-vro4;;c^gi}vAph;I_!F(LI{q4X-@>&?(Un5x-sthd8^7O@w--u0AT zGgUXCtE_OP_R#wk@RyrZX%X~SBaO1}HWtEa?jQLu_CAUG+n4lvzFm*}ZG!91=5-zN zuMww$O@IBbkYD6p5?byz>5cmL@qFMLzG;g5%Dg~+-NAk-|Ky#;yilKNA}#x+ zX^H&4J`e7Dbf-LT|G)cjqOc0}*Q^nKsgeDn-7ZD`8~YVKY1U%R^Y_o$JR_LvbzFmX zki9X$-2#5{{P2t+-bY?$EudX#yD+m0v3}1S-*xQeI5AVv?7ndSw3?&z