interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Major step for build process

Browse source 
- updated to 0.4.0
- corrected license for npm
- update to gulp 4
- updated all dependencies
- new and removed packages, see `package.json`
- changed file structure, renamed `pages` to `screen` and new `data` 
folder
- complete change of `gulpfile.js` with similar output
This commit is contained in:
Stephan 2019-03-16 13:21:57 +01:00
parent 90894f3253
commit 45f59f578b
26 changed files with 2702 additions and 2436 deletions
Download patch file Download diff file Expand all files Collapse all files

24
.gitignore vendored
View file

@ -1,3 +1,16 @@
# hippie
###################
###################
build/**
reports/**
source/art/*.*
source/art/images/*.*
source/art/sprites/
!source/art/**/demo/
# https://gist.github.com/octocat/9257657
###################
###################
@ -181,14 +194,3 @@ typings/
###################
.sass-cache/
*.css.map
# https://interaktionsweise.de/
###################
###################
build/
source/art/*.*
source/art/images/*.*
source/art/sprites/
!source/art/**/demo/

3
.jscsrc
View file

@ -1,3 +0,0 @@
{
"preset": "google"
}

6
.jshintrc
View file

@ -19,13 +19,13 @@
"nonbsp" : true, // true: Prohibit "non-breaking whitespace" characters.
"nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment)
"plusplus" : false, // true: Prohibit use of `++` and `--`
"quotmark" : false, // Quotation mark consistency:
"quotmark" : true, // Quotation mark consistency:
// false : do nothing (default)
// true : ensure whatever is used is consistent
// "single" : require single quotes
// "double" : require double quotes
"undef" : true, // true: Require all non-global variables to be declared (prevents global leaks)
"unused" : true, // Unused variables:
"unused" : false, // Unused variables:
// true : all variables, last function parameter
// "vars" : all variables only
// "strict" : all variables, all function parameters
@ -87,5 +87,5 @@
"yui" : false, // Yahoo User Interface
// Custom Globals
"globals" : {} // additional predefined global variables
"globals" : {"hippie": true} // additional predefined global variables
}

178
.sass-lint.yml
View file

@ -1,178 +0,0 @@
# sass-lint config generated by make-sass-lint-config v0.1.2
#
# The following scss-lint Linters are not yet supported by sass-lint:
# DisableLinterReason, ElsePlacement, PropertyCount, SelectorDepth
# SpaceAroundOperator, TrailingWhitespace, UnnecessaryParentReference, Compass::*
#
# The following settings/values are unsupported by sass-lint:
# Linter Indentation, option "allow_non_nested_indentation"
# Linter Indentation, option "character"
# Linter NestingDepth, option "ignore_parent_selectors"
# Linter PropertySortOrder, option "min_properties"
# Linter PropertySortOrder, option "separate_groups"
# Linter SpaceBeforeBrace, option "allow_single_line_padding"
# Linter VendorPrefix, option "identifier_list"
files:
include: '**/*.scss'
options:
formatter: stylish
merge-default-rules: false
rules:
bem-depth:
- 0
- max-depth: 1
border-zero:
- 1
- convention: zero
brace-style:
- 1
- allow-single-line: true
class-name-format:
- 1
- convention: hyphenatedlowercase
clean-import-paths:
- 1
- filename-extension: false
leading-underscore: false
empty-line-between-blocks:
- 1
- ignore-single-line-rulesets: true
extends-before-declarations: 1
extends-before-mixins: 1
final-newline:
- 1
- include: true
force-attribute-nesting: 1
force-element-nesting: 1
force-pseudo-nesting: 1
function-name-format:
- 1
- allow-leading-underscore: true
convention: hyphenatedlowercase
hex-length:
- 1
- style: short
hex-notation:
- 1
- style: lowercase
id-name-format:
- 1
- convention: hyphenatedlowercase
indentation:
- 1
- size: 2
leading-zero:
- 1
- include: false
mixin-name-format:
- 1
- allow-leading-underscore: true
convention: hyphenatedlowercase
mixins-before-declarations: 1
nesting-depth:
- 1
- max-depth: 3
no-color-keywords: 1
no-color-literals: 1
no-css-comments: 1
no-debug: 1
no-duplicate-properties: 1
no-empty-rulesets: 1
no-extends: 0
no-ids: 1
no-important: 1
no-invalid-hex: 1
no-mergeable-selectors: 1
no-misspelled-properties:
- 1
- extra-properties: []
no-qualifying-elements:
- 1
- allow-element-with-attribute: false
allow-element-with-class: false
allow-element-with-id: false
no-trailing-zero: 1
no-transition-all: 0
no-url-protocols: 1
no-vendor-prefixes:
- 1
- additional-identifiers: []
excluded-identifiers: []
placeholder-in-extend: 1
placeholder-name-format:
- 1
- convention: hyphenatedlowercase
property-sort-order:
- 1
- ignore-custom-properties: false
property-units:
- 1
- global:
- ch
- em
- ex
- rem
- cm
- in
- mm
- pc
- pt
- px
- q
- vh
- vw
- vmin
- vmax
- deg
- grad
- rad
- turn
- ms
- s
- Hz
- kHz
- dpi
- dpcm
- dppx
- '%'
per-property: {}
quotes:
- 1
- style: single
shorthand-values:
- 1
- allowed-shorthands:
- 1
- 2
- 3
single-line-per-selector: 1
space-after-bang:
- 1
- include: false
space-after-colon:
- 1
- include: true
space-after-comma:
- 1
- include: true
space-before-bang:
- 1
- include: true
space-before-brace:
- 1
- include: true
space-before-colon: 1
space-between-parens:
- 1
- include: false
trailing-semicolon: 1
url-quotes: 1
variable-for-property:
- 0
- properties: []
variable-name-format:
- 1
- allow-leading-underscore: true
convention: hyphenatedlowercase
zero-unit: 1

55
.sasslintrc Normal file
View file

@ -0,0 +1,55 @@
{
"options": {
"merge-default-rules": false,
"formatter": "html"
},
"rules": {
"extends-before-mixins": 2,
"extends-before-declarations": 2,
"placeholder-in-extend": 2,
"mixins-before-declarations": [
2,
{
"exclude": [
"breakpoint",
"mq"
]
}
],
"no-warn": 1,
"no-debug": 1,
"no-ids": 2,
"no-important": 2,
"hex-notation": [
2,
{
"style": "uppercase"
}
],
"indentation": [
2,
{
"size": 2
}
],
"property-sort-order": [
1,
{
"order": [
"display",
"margin"
],
"ignore-custom-properties": true
}
],
"variable-for-property": [
2,
{
"properties": [
"margin",
"content"
]
}
]
}
}

327
DEPRECATED.md
View file

@ -1,327 +0,0 @@
# Deprecated stuff
## Gulp
### Packages
```
"gulp-ruby-sass": "^2.1.1",
"gulp-cssnano": "^2.1.3",
"gulp-rename": "^1.2.3",
"gulp-changed": "^3.2.0",
"gulp-newer": "^1.4.0",
"gulp-useref": "^3.1.5",
```
### Code
```
// NOTE // to be deleted
var oldsource = {
watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'],
styles: ['source/style/demo.scss', 'source/style/maintenance.scss'],
scripts: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ],
images: 'source/art/**/*',
pages: 'source/pages/**/*.+(html|njk)',
vendor: 'vendor/**/*'
};
var oldbuild = {
styles: 'build/css',
scripts: 'build/js',
images: 'build/art',
vendor: 'build/vendor',
root: 'build'
}
// Task - Clean build directory
gulp.task('clean', function() {
return del([oldbuild.scripts, oldbuild.styles, oldbuild.images]);
});
// Task - Styles
gulp.task('styles', () => rubysass(oldsource.styles, {sourcemap: true})
.on('error', rubysass.logError)
// .pipe(newer({dest: oldbuild.styles, ext: '.css'}))
.pipe(prefix('last 2 version'))
.pipe(gulp.dest(oldbuild.styles))
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(sourcemap.write('.', {
includeContent: false,
sourceRoot: 'source'
}))
.pipe(gulp.dest(oldbuild.styles))
.pipe(browsersync.stream({match: '**/*.css'}))
// .pipe(notify({message: 'Style task complete'}))
);
// Task - Scripts
gulp.task('scripts', function(cb) {
pump([
gulp.src(oldsource.scripts),
cache('scripts'),
jshint('.jshintrc'),
jshint.reporter('default'),
sourcemap.init(),
minify(),
remember('scripts'),
concat('all.min.js'),
sourcemap.write(),
gulp.dest(oldbuild.scripts),
browsersync.stream()
], cb);
});
// Task - Images
gulp.task('images', function() {
return gulp.src(oldsource.images)
.pipe(changed(oldbuild.images))
// .pipe(cache(imagemin({
// optimizationLevel: 3,
// progressive: true,
// interlaced: true })))
// )
.pipe(gulp.dest(oldbuild.images))
// .pipe(notify({ message: 'Images task complete' }))
;
});
// Task - Vendor
gulp.task('oldvendor', function() {
return gulp.src(oldsource.vendor)
.pipe(plumbError())
.pipe(gulp.dest(oldbuild.vendor))
;
});
//Task - Nunjucks
gulp.task('oldnunjucks', function() {
return gulp.src(oldsource.pages)
// .pipe(changed(oldbuild.root))
.pipe(nunjucks({
path: ['source/templates'],
envOptions: {
trimBlocks: true
}
}))
.pipe(gulp.dest(oldbuild.root))
});
// a task that ensures the other task is complete before reloading browsers
gulp.task('prewatch', ['oldnunjucks', 'styles'], function(done) {
browsersync.reload();
done();
});
// Old watch for file changes
gulp.task('oldwatch', ['styles', 'scripts', 'oldnunjucks'], function() {
browsersync.init({
open: false,
server: oldbuild.root,
// proxy: "http://verser.vrt/virtual/"
});
gulp.watch(oldsource.scripts, ['scripts']).on('change', function(event) {
if (event.type === 'deleted') {
delete cache.caches['scripts'][event.path];
remember.forget('scripts', event.path);
}
});
// gulp.watch(oldsource.watch, ['prewatch']);
gulp.watch(oldsource.watch, ['styles', 'oldnunjucks']).on('change', browsersync.reload);
// gulp.watch(oldsource.images, ['images']);
});
gulp.task('olddefault', ['clean', 'styles', 'scripts', 'images', 'nunjucks']);
// function errorHandler(err) {
// // Logs out error in the command line
// console.log(err.toString());
// // Ends the current pipe, so Gulp watch doesn't break
// this.emit('end');
// }
```
## Style
```
The config file is intended to allow users to quickly redefine core elements of the design
that will cascade throughout the css to get your design up and running FAST!
For instruction, please see https://github.com/Anotheruiguy/toadstool/blob/master/sass/doc-src/config.md
///// Typography configuration///////
-----------------------------------------------------------------------------
$font_size: 12;
$heading_1: 46;
$heading_2: 32;
$heading_3: 28;
$heading_4: 18;
$heading_5: 18;
$heading_6: 18;
$line: $font_size * 1.5;
$small_point_size: 10;
$large_point_size: 14;
$primary_font_family: #{"Helvetica Neue", Arial, sans-serif};
$secondary_font_family: #{"Helvetica Neue", Arial, sans-serif};
$heading_font_family: #{"Helvetica Neue", Arial, sans-serif};
$icon_font_alpha: #{'ico-fonts'};
///// Default webfont directory///////
-----------------------------------------------------------------------------
$webfont_directory: "/fonts/";
///// default image directory ///////
-----------------------------------------------------------------------------
In Sinatra, the images folder resides in the public directory. This directory is not made publically accessible,
so simply referencing the images directory will be fine.
$imgDir: "/images/";
///// OOCSS generic base colors///////
-----------------------------------------------------------------------------
Red, green, yellow, blue, accent and black is not law, but a common theme in most designs.
Using Toadstool, all you need to do is edit these 6 hex values and everything else is created
by magic, unicorns and fairy dust!
$alpha_primary: #5a2e2e; // red
$bravo_primary: #3e4147; // green
$charlie_primary: #fffedf; // yellow
$delta_primary: #2a2c31; // blue
$echo_primary: #dfba69; // accent
$alpha_gray: #333; //black
///// Toadstool color math ///////
-----------------------------------------------------------------------------
Local color functions to create default color palette
@import "color/color_math";
@import "color/grayscale_math";
@import "color/color_defaults";
///// Grid configuration ///////
-----------------------------------------------------------------------------
setting default units of measurement for Toadstool grid solution
$grid_type: 12; // sets default column grid
$grid_uom: percent; // use either ``em`` or ``percent``
$grid_padding_l: 0; // sets default left/right padding inside grid block
$grid_padding_r: 0; // sets default left/right padding inside grid block
$grid_padding_tb: 0; // sets default top/bottom padding inside grid block
$grid_border: 0; // sets default border width on all grid blocks
$grid_child: none; // sets parent child relationship between grid blocks
$grid_align: default; // by default grids float left. Optional argument is ``center``
$col_base: 10; // equal to 10px in the standard 960.gs
$col_gutter: $col_base * 2; // sets default grid gutter width
$grid_960: 960 / 100%; // grid math for percentages
///// HTML 5 feature colors ///////
-----------------------------------------------------------------------------
used with the `ins` tag
http://www.w3schools.com/tags/tag_ins.asp
$ins_color: $charlie_color;
used with the `mark` tag
http://www.w3schools.com/html5/tag_mark.asp
$mark_color: $charlie_color;
webkit tap highlight color
$webkit_tap_hightlight: $delta_color_bravo;
overrides the default content selection color in the browser
$selection_color: $charlie_color;
$selection_text_color: $primary_text;
///// Config defaults for forms ///////
-----------------------------------------------------------------------------
$alert_back_color: $alpha_color;
$input_disabled: $bravo_gray;
$input_disabled_bkg: lighten($input_disabled, 75%);
$input_disabled_border: lighten($input_disabled, 50%);
$input_disabled_text: lighten($input_disabled, 50%);
$form_field_back_color: $brightest_color;
$form_field_focus_color: $brightest_color;
$form_field_fail_bkg: $alpha_color_juliet;
$form_field_border: $charlie_gray;
$form_field_border_fail: $alpha_color_echo;
$form_field_focus_border_color: $charlie_gray;
$form_field_text_fail: $alpha_color_echo;
$form_label_color: $alpha_gray;
$optional_field_text_color: $delta_gray;
$instructional_text: $charlie_gray;
$placeholder_text: $hotel_gray;
$inline_alert_bkg_color: $alpha_color_delta;
$inline_alert_text_color: $brightest_color;
Non-color defaults (currently not represented in the SG view)
---------------------------------------------------------
$form_field_border_radius: $standard_round_corner;
$form_field_text: $primary_text;
$form_field_height: 35;
$form_field_padding: 6;
$form_label_weight: bold;
$form_label_lineheight: 20;
$inline_alert_lineheight: 30;
$inline_alert_left_padding: 12;
$inline_alert_weight: bold;
$inline_alert_top_margin: 12;
$inline_alert_border_width: 1;
///// Config defaults for buttons ///////
-----------------------------------------------------------------------------
$button-color: $delta-color;
$button-text-color: $brightest_color;
$button-line-height: 32;
$button-border-radius: 3;
$button-padding: 20;
$button-font-size: 18;
$button-weight: bold;
$button-text-shadow: true;
$button-box-shadow: true;
///// Config defaults for ``standard_rounded_border`` mixin ///////
-----------------------------------------------------------------------------
$standard_round_corner: 3; // sets default border radius
$standard_corner_width: 1px; // sets default border width
$standard_border_color: $border_color; // sets default border color
///// Config defaults for ``standard_block_spacing`` mixin ///////
-----------------------------------------------------------------------------
$default_block_spacing: 20; // sets margin-bottom
///// Config defaults for site border style ///////
-----------------------------------------------------------------------------
$standard_border_style: solid;
///// Config defaults for ``standard_hr`` mixin ///////
-----------------------------------------------------------------------------
$standard_hr_spacing: 40; // sets padding and margin bottom
$standard_hr_color: $delta_gray;
$standard_hr_width: 1px;
///// Config values for all default shadows ///////
-----------------------------------------------------------------------------
$h-shadow: 0; // horizontal shadow settings
$v-shadow: 2; // vertical shaddow settings
$blur: 3; // blur settings
$inset_color: $shadow_color; // for use with ``dual_box_shadow`` mixin
$ih-shadow: 0; // inset horizontal shadow settings
$iv-shadow: 2; // inset vertical shaddow settings
$is-shadow: 2; // inset spread shaddow settings
$iblur: 3; // inset blur settings
```

24
bower.json
View file

@ -1,24 +0,0 @@
{
"name": "hippie",
"description": "Hippie interweaves preeminent personal interface elements",
"main": "gulpfile.js",
"authors": [
"Interaktionsweise"
],
"license": "ISC",
"homepage": "https://github.com/sthag/hippie",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"build/bower_components",
"build/vendor",
"test",
"tests"
],
"dependencies": {
"jquery": "^3.2.1",
"normalize-css": "^7.0.0"
}
}

569
gulpfile.js
View file

@ -1,243 +1,404 @@
// Setup project
var source_folder = {
watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'],
styles: ['source/style/hippie/*.+(scss|sass)', 'source/style/**/*.+(scss|sass)'],
scripts: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ],
images: 'source/art/images/**/*',
pages: 'source/pages/**/*.+(html|njk)',
vendor: 'vendor/**/*',
root: 'source'
};
var build_folder = {
styles: 'build/css',
scripts: 'build/js',
art: 'build/art',
vendor: 'build/vendor',
pages: 'build/**/*.html',
root: 'build'
const hippie = {
brand: 'hippie',
jsFile: 'main',
dbFile: 'db'
}
// Load plugins
const fs = require('fs');
const gulp = require('gulp');
// const rename = require('gulp-rename');
const del = require('del');
const gulpif = require('gulp-if');
const sequencer = require('run-sequence');
const sourcemap = require('gulp-sourcemaps');
const prefix = require('gulp-autoprefixer');
const sass = require('gulp-sass');
// const rubysass = require('gulp-ruby-sass');
const nunjucks = require('gulp-nunjucks-render');
// const cssnano = require('gulp-cssnano');
const jshint = require('gulp-jshint');
const jscs = require('gulp-jscs');
// const useref = require('gulp-useref');
const sasslint = require('gulp-sass-lint');
// const imagemin = require('gulp-imagemin');
const spritesmith = require('gulp.spritesmith');
// const changed = require('gulp-changed');
// const newer = require('gulp-newer');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const data = require('gulp-data');
const browsersync = require('browser-sync').create();
// Gulp requirements
const { watch, series, parallel } = require('gulp');
const { src, dest } = require('gulp');
// only used for js task
const concat = require('gulp-concat');
const fs = require('fs');
const del = require('del');
const plumber = require('gulp-plumber');
// const notify = require('gulp-notify');
const nunjucksRender = require('gulp-nunjucks-render');
const data = require('gulp-data');
const jsonConcat = require('gulp-json-concat');
const browserSync = require('browser-sync'), server = browserSync.create();
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sassLint = require('gulp-sass-lint');
const rename = require('gulp-rename');
const cleanCss = require('gulp-clean-css');
const pump = require('pump');
const composer = require('gulp-uglify/composer');
const uglifyjs = require('uglify-es');
const minify = composer(uglifyjs, console);
const cache = require('gulp-cached');
const remember = require('gulp-remember');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const jshint = require('gulp-jshint');
const gulpif = require('gulp-if');
const changed = require('gulp-changed');
const merge = require('merge-stream');
// const spritesmith = require('gulp.spritesmith');
// const buffer = require('vinyl-buffer');
// const imagemin = require('gulp-imagemin');
// Paths to data
const input = {
root: 'source',
screens: 'source/screens/**/*.+(njk|html)',
templates: 'source/templates',
data: {
hippie: 'source/data/demo.json',
app: ['source/data/**/*.json', '!source/data/demo_data.json'],
watch: 'source/data/**/*.json',
},
style: 'source/style/**/*.s+(a|c)ss',
code: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', '!source/vendor/**/*'],
fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
art: {
favicons: 'source/art/favicons/**/*.+(ico|png)',
sprites: 'source/art/sprites/**/*.png',
images: 'source/art/images/**/*.+(png|gif|jpg)'
},
vendor: 'vendor/**/*'
// watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/screens/**/*.+(html|njk)']
};
const output = {
root: 'build',
screens: 'build/**/*.html',
data: 'build/json',
style: 'build/css',
code: 'build/js',
fonts: 'build/fonts',
art: 'build/art',
reports: 'reports',
vendor: 'build/vendor'
};
// Create tasks
// this is for the looks
gulp.task('sass', function() {
return gulp.src(source_folder.styles)
.pipe(plumbError('Error Running Sass'))
.pipe(sourcemap.init())
// Clean build folder
function clean() {
// You can use multiple globbing patterns as you would with `gulp.src`,
// for example if you are using del 2.0 or above, return its promise
return del(output.root +'/**');
}
// cleans the build folder
// gulp.task('clean:dev', function() {
// return del.sync([
// output.style,
// output.screens,
// output.root+'/*.html'
// ]);
// });
// Automagically reload browsers
function reload(done) {
server.reload();
done();
}
// Concatenate JSON files
function json() {
return src(input.data.app)
.pipe(jsonConcat(jsonFile +'.json', function(data) {
return new Buffer(JSON.stringify(data));
}))
.pipe(gulp.dest(output.data));
}
// Transpile HTML
function nunjucks() {
return src(input.screens)
.pipe(plumber())
.pipe(data(function() {
let data = JSON.parse(fs.readFileSync(input.data.hippie));
object = {hippie, data};
return object;
}))
.pipe(nunjucksRender({
path: input.templates,
envOptions: {
trimBlocks: true
}
}))
.pipe(dest(output.root));
}
// templating engine
// gulp.task('nunjucks', function() {
// return gulp.src('source/screens/**/*.+(html|njk)')
// .pipe(plumbError('Error Running Nunjucks'))
// .pipe(data(function() {
// return JSON.parse(fs.readFileSync('./source/demo_data.json'))
// }))
// .pipe(nunjucks({
// path: output.templates,
// envOptions: {
// trimBlocks: true
// }
// }))
// .pipe(gulp.dest(output.root))
// .pipe(server.reload({
// stream: true
// }))
// });
// Serve files to the browser
function serve(done) {
server.init({
index: "demo.html",
open: false,
server: output.root
});
done();
}
// automagically reload browsers
// gulp.task('syncreload', function() {
// server.init({
// // ------------------------------------------------------------------------------
// // comment out the line below to get rid of the demo index page.
// // ------------------------------------------------------------------------------
// index: "demo.html",
// open: false,
// server: 'build'
// // online: false,
// // logLevel: "info",
// // proxy: "http://verser.vrt/virtual/",
// // watch: true,
// });
// });
// This is for the looks
function style() {
return src(input.style)
.pipe(plumber())
// .pipe(plumbError('STYLE problems'))
.pipe(sass({
includePaths: [source_folder.root+'/bower_components']
includePaths: [input.vendor +'/**/*.s+(a|c)ss']
}))
.pipe(prefix(['>= 4%', 'last 2 version']))
// .pipe(cssnano())
.pipe(sourcemap.write())
.pipe(gulp.dest(build_folder.styles))
.pipe(browsersync.reload({
stream: true
.pipe(autoprefixer(['>= 4%', 'last 2 version']))
.pipe(dest(output.style))
.pipe(cleanCss())
.pipe(rename({
suffix: '.min'
}))
});
// linting ...
gulp.task('lint:scss', function() {
return gulp.src('source/style/**/*.scss')
.pipe(plumbError('SASSLint Error'))
.pipe(sasslint({
configFile: '.sass-lint.yml'
.pipe(dest(output.style));
}
// Linting
function styleLint() {
var file = fs.createWriteStream(output.reports +'/sass-lint.html');
var stream = src(input.style)
.pipe(plumber())
.pipe(sassLint({
configFile: '.sasslintrc',
files: {
ignore: input.vendor +'/**/*.s+(a|c)ss'
}
}))
})
.pipe(sassLint.format(file));
stream.on('finish', function() {
file.end();
});
// and this is functionality
gulp.task('js', function(cb) {
return stream;
}
// this is for the looks
// gulp.task('sass', function() {
// return gulp.src(input.style)
// .pipe(plumbError('Error Running Sass'))
// .pipe(sourcemap.init())
// .pipe(sass({
// includePaths: [input.root+'/bower_components']
// }))
// .pipe(autoprefixer(['>= 4%', 'last 2 version']))
// // .pipe(cssnano())
// .pipe(sourcemap.write())
// .pipe(gulp.dest(output.style))
// .pipe(server.reload({
// stream: true
// }))
// });
// // linting ...
// gulp.task('lint:scss', function() {
// return gulp.src('source/style/**/*.scss')
// .pipe(plumbError('SASSLint Error'))
// .pipe(sasslint({
// configFile: '.sass-lint.yml'
// }))
// })
// Javascript for the win
function code(cb) {
pump([
gulp.src(source_folder.scripts),
cache('scripts'),
// jshint('.jshintrc'),
// jshint.reporter('default'),
sourcemap.init(),
minify(),
remember('scripts'),
concat('all.min.js'),
sourcemap.write(),
gulp.dest(build_folder.scripts),
browsersync.stream()
src(input.code, { sourcemaps: true }),
cache('code'),
concat(hippie.jsFile +'.js'),
dest(output.code),
uglify(),
remember('code'),
rename({
suffix: '.min'
}),
dest(output.code, { sourcemaps: '.' }),
], cb);
});
// linting ...
gulp.task('lint:js', function() {
return gulp.src('source/code/**/*.js')
.pipe(plumbError('JSHint Error'))
}
// Linting
function codeLint() {
return src(input.code)
.pipe(plumber())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(jshint.reporter('fail', {
ignoreWarning: true,
ignoreInfo: true
}))
.pipe(jscs({
fix: false,
configPath: '.jscsrc'
}))
// .pipe(jscs.reporter());
});
}));
}
// and this is functionality
// gulp.task('js', function(cb) {
// pump([
// gulp.src(input.code),
// cache('code'),
// // jshint('.jshintrc'),
// // jshint.reporter('default'),
// sourcemap.init(),
// minify(),
// remember('code'),
// concat('all.min.js'),
// sourcemap.write(),
// gulp.dest(output.code),
// server.stream()
// ], cb);
// });
// // linting ...
// gulp.task('lint:js', function() {
// return gulp.src('source/code/**/*.js')
// .pipe(plumbError('JSHint Error'))
// .pipe(jshint())
// .pipe(jshint.reporter('jshint-stylish'))
// .pipe(jshint.reporter('fail', {
// ignoreWarning: true,
// ignoreInfo: true
// }))
// .pipe(jscs({
// fix: false,
// configPath: '.jscsrc'
// }))
// // .pipe(jscs.reporter());
// });
// Fonts
function fonts() {
return src(input.fonts)
.pipe(plumber())
.pipe(dest(output.fonts))
}
// templating engine
gulp.task('nunjucks', function() {
return gulp.src('source/pages/**/*.+(html|njk)')
.pipe(plumbError('Error Running Nunjucks'))
.pipe(data(function() {
return JSON.parse(fs.readFileSync('./source/demo_data.json'))
}))
.pipe(nunjucks({
path: ['source/templates'],
envOptions: {
trimBlocks: true
}
}))
.pipe(gulp.dest(build_folder.root))
.pipe(browsersync.reload({
stream: true
}))
});
// Add art
function art() {
// Move favicons to the root folder
let favicons = src(input.art.favicons)
.pipe(changed(output.art))
.pipe(dest(output.root))
// Assemble sprites
// automagically reload browsers
gulp.task('syncreload', function() {
browsersync.init({
// ------------------------------------------------------------------------------
// comment out the line below to get rid of the demo index page.
// ------------------------------------------------------------------------------
index: "demo.html",
open: false,
server: 'build'
// online: false,
// logLevel: "info",
// proxy: "http://verser.vrt/virtual/",
// watch: true,
});
});
// Move images to the root folder
let images = src(input.art.images)
.pipe(changed(output.art))
.pipe(dest(output.art))
return merge(favicons, images)
}
// creates sprites from files in art/sprites folder
gulp.task('sprites', function() {
gulp.src('source/art/sprites/**/*')
.pipe(spritesmith({
cssName: '_sprites.scss',
imgName: 'sprites.png',
imgPath: '../art/sprites.png',
// retinaSrcFilter: 'source/art/sprites/*@2x.png',
// retinaImgName: 'sprites@2x.png',
// retinaImgPath: '../art/sprites@2x.png'
}))
.pipe(gulpif('*.png', gulp.dest(build_folder.art)))
.pipe(gulpif('*.scss', gulp.dest('source/style/hippie/mixins')));
});
// gulp.task('sprites', function() {
// gulp.src('source/art/sprites/**/*')
// .pipe(spritesmith({
// cssName: '_sprites.scss',
// imgName: 'sprites.png',
// imgPath: '../art/sprites.png',
// // retinaSrcFilter: 'source/art/sprites/*@2x.png',
// // retinaImgName: 'sprites@2x.png',
// // retinaImgPath: '../art/sprites@2x.png'
// }))
// .pipe(gulpif('*.png', gulp.dest(output.art)))
// .pipe(gulpif('*.scss', gulp.dest('source/style/hippie/mixins')));
// });
// copy art files
gulp.task('art', function() {
return gulp.src(source_folder.images)
.pipe(plumbError())
.pipe(gulp.dest(build_folder.art))
;
});
// copy vendor files
gulp.task('vendor', function() {
return gulp.src(source_folder.vendor)
.pipe(plumbError())
.pipe(gulp.dest(build_folder.vendor))
;
});
// gulp.task('art', function() {
// return gulp.src(input.art)
// .pipe(plumbError())
// .pipe(gulp.dest(output.art))
// ;
// });
// copy additional files
gulp.task('favicon', function() {
return gulp.src('source/favicon.ico')
.pipe(plumbError())
.pipe(gulp.dest(build_folder.root))
;
});
// cleans the build folder
gulp.task('clean:dev', function() {
return del.sync([
build_folder.styles,
build_folder.pages,
build_folder.root+'/*.html'
]);
});
// gulp.task('favicon', function() {
// return gulp.src('source/favicon.ico')
// .pipe(plumbError())
// .pipe(gulp.dest(output.root))
// ;
// });
// Gather dependencies for tools
function vendor() {
return src(input.vendor)
.pipe(plumber())
.pipe(dest(output.vendor))
}
// copy vendor files
// gulp.task('vendor', function() {
// return gulp.src(input.vendor)
// .pipe(plumbError())
// .pipe(gulp.dest(output.vendor))
// ;
// });
function overview() {
watch([input.screens, input.data.watch], series(nunjucks, reload));
watch(input.style, series(styleLint, style, reload));
watch(input.code, series(codeLint, code, reload));
watch(input.fonts, series(fonts, reload));
watch([input.art.favicons, input.art.sprites, input.art.images], series(art, reload));
// watch(input.data.app, series(json, reload));
}
const assets = parallel(fonts, art, vendor);
const build = series(clean, assets, parallel(nunjucks, series(styleLint, style), series(codeLint, code)));
exports.lint = parallel(styleLint, codeLint);
exports.assets = assets;
exports.build = build;
exports.default = series(build, serve, overview);
// watch over changes and react
// split up into sub tasks
gulp.task('watch-js', ['lint:js', 'js'], browsersync.reload);
// gulp.task('watch-js', ['lint:js', 'js'], server.reload);
//
// gulp.task('overwatch', function() {
// gulp.watch('source/code/**/*.js', ['watch-js'])
// gulp.watch('source/style/**/*.+(scss|sass)', ['sass', 'lint:scss']);
// gulp.watch([
// 'source/templates/**/*',
// 'source/screens/**/*.+(html|njk)',
// 'source/demo_data.json'
// ], ['nunjucks']);
// gulp.watch('source/art/**/*', ['sprites']);
// });
//
//
// // The default task (called when you run `gulp` from cli)
// gulp.task('default', function(callback) {
// sequencer(
// 'clean:dev',
// ['sprites', 'art', 'vendor', 'favicon', 'lint:js', 'lint:scss'],
// ['sass', 'js', 'nunjucks'],
// ['syncreload', 'overwatch'],
// callback
// )
// });
gulp.task('overwatch', function() {
gulp.watch('source/code/**/*.js', ['watch-js'])
gulp.watch('source/style/**/*.+(scss|sass)', ['sass', 'lint:scss']);
gulp.watch([
'source/templates/**/*',
'source/pages/**/*.+(html|njk)',
'source/demo_data.json'
], ['nunjucks']);
gulp.watch('source/art/**/*', ['sprites']);
});
// The default task (called when you run `gulp` from cli)
gulp.task('default', function(callback) {
sequencer(
'clean:dev',
['sprites', 'art', 'vendor', 'favicon', 'lint:js', 'lint:scss'],
['sass', 'js', 'nunjucks'],
['syncreload', 'overwatch'],
callback
)
});
function plumbError(errTitle) {
return plumber({
errorHandler: notify.onError({
// Customizing error title
title: errTitle || "Error running Gulp",
message: "<%= error.message %>"
})
});
}
// function plumbError(errTitle) {
// return plumber({
// errorHandler: notify.onError({
// // Customizing error title
// title: errTitle || "GULP GENERAL PROBLEM",
// message: "<%= error.message %>"
// })
// });
// }

3873
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

35
package.json
View file

@ -1,6 +1,6 @@
{
"name": "hippie",
"version": "0.3.3",
"version": "0.4.0",
"description": "Hippie interweaves preeminent personal interface elements",
"main": "gulpfile.js",
"scripts": {
@ -10,37 +10,38 @@
"type": "git",
"url": "git+https://github.com/sthag/hippie.git"
},
"author": "Interaktionsweise",
"license": "ISC",
"author": "Stephan Hagedorn",
"license": "MIT",
"bugs": {
"url": "https://github.com/sthag/hippie/issues"
},
"homepage": "https://github.com/sthag/hippie#readme",
"devDependencies": {
"browser-sync": "^2.24.4",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.1.0",
"browser-sync": "^2.26.3",
"del": "^4.0.0",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-cached": "^1.1.1",
"gulp-changed": "^3.2.0",
"gulp-clean-css": "^4.0.0",
"gulp-concat": "^2.6.1",
"gulp-data": "^1.3.1",
"gulp-if": "^2.0.2",
"gulp-jscs": "^4.1.0",
"gulp-jshint": "^2.1.0",
"gulp-json-concat": "^0.1.1",
"gulp-notify": "^3.2.0",
"gulp-nunjucks-render": "^2.2.2",
"gulp-plumber": "^1.2.0",
"gulp-remember": "^0.3.1",
"gulp-sass": "^4.0.1",
"gulp-plumber": "^1.2.1",
"gulp-remember": "^1.0.1",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"gulp-sass-lint": "^1.4.0",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.0",
"gulp-uglify": "^3.0.2",
"gulp.spritesmith": "^6.9.0",
"jshint": "^2.9.5",
"jshint": "^2.10.2",
"jshint-stylish": "^2.2.1",
"pump": "^1.0.3",
"run-sequence": "^2.2.1",
"uglify-es": "^3.3.10"
"merge-stream": "^1.0.1",
"pump": "^3.0.0"
},
"dependencies": {}
}

0
source/favicon.ico → source/art/favicons/favicon.ico
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

16
source/code/hippie/functions.js
View file

@ -11,14 +11,14 @@ function setup() {
}
// get document coordinates of the element
function getCoords(elem) {
let box = elem.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}
// function getCoords(elem) {
// let box = elem.getBoundingClientRect();
//
// return {
// top: box.top + pageYOffset,
// left: box.left + pageXOffset
// };
// }
// https://stackoverflow.com/a/488073/1444149
function Utils() {}

0
source/demo_data.json → source/data/demo.json
View file

8
source/pages/demo.njk → source/screens/demo.njk
View file

@ -12,7 +12,7 @@
{% block body_content %}
<div class="wrap">
<div class="hello">
<h2>This is HIPPIE</h2>
<h2>This is {{hippie.brand | upper}}</h2>
<p>You can start using it by replacing this file with your own index page.</p>
<p>To do this you need to open the file <code>/gulpfile.js</code> and comment out the line <code>index: "demo.html",</code>. Then you need to place your index file (<code>index.njk</code>) into the folder <code>/source/pages</code>.</p>
<p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <code>/source/pages/demo</code>.</p>
@ -20,7 +20,7 @@
<h3>Overview</h3>
<ul class="list_link">
<!-- Loops through "demoadditionallinks" array -->
{% for link in demoadditionallinks %}
{% for link in data.demoadditionallinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
@ -33,7 +33,7 @@ C(")(")</pre>
</div>
<ul class="list_link">
<!-- Loops through "demo-links" array -->
{% for link in demolinks %}
{% for link in data.demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
@ -43,7 +43,7 @@ C(")(")</pre>
{% block script %}
{{ super() }}
<script src="./js/all.min.js" type="text/javascript"></script>
<script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------

0
source/pages/demo/blank.njk → source/screens/demo/blank.njk
View file

2
source/pages/demo/elements.njk → source/screens/demo/elements.njk
View file

@ -67,7 +67,7 @@
{% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/all.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------

0
source/pages/demo/error/304.njk → source/screens/demo/error/304.njk
View file

0
source/pages/demo/error/400.njk → source/screens/demo/error/400.njk
View file

0
source/pages/demo/error/403.njk → source/screens/demo/error/403.njk
View file

0
source/pages/demo/error/404.njk → source/screens/demo/error/404.njk
View file

0
source/pages/demo/error/500.njk → source/screens/demo/error/500.njk
View file

2
source/pages/demo/examples.njk → source/screens/demo/examples.njk
View file

@ -230,7 +230,7 @@
{% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/all.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------

2
source/pages/demo/intro.njk → source/screens/demo/intro.njk
View file

@ -586,7 +586,7 @@
{% block script %}
{{ super() }}
<script src="../js/all.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------

0
source/pages/demo/maintenance.njk → source/screens/demo/maintenance.njk
View file

2
source/pages/demo/os.njk → source/screens/demo/os.njk
View file

@ -138,7 +138,7 @@
{% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/all.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------

2
source/pages/demo/tests.njk → source/screens/demo/tests.njk
View file

@ -34,7 +34,7 @@
{% block script %}
{{ super() }}
<script src="../js/all.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------