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

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +749 -1033
7 changed files with 749 additions and 1033 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 534115ff28 - Show all commits

27
.eslintrc.js Normal file
View file

@ -0,0 +1,27 @@
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
};

2
gulp/config.js
View file

@ -20,6 +20,6 @@ const config = {
titlePrefix: ' - HIPPIE', titlePrefix: ' - HIPPIE',
pageBase: './' pageBase: './'
} }
} };
module.exports = config; module.exports = config;

7
gulp/tasks/sync.js
View file

@ -1,9 +1,10 @@
const config = require('../config'); const config = require('../config');
const browserSync = require('browser-sync'), server = browserSync.create(); // const browserSync = require('browser-sync'), server = browserSync.create();
const server = require('browser-sync').create();
// Automagically reload browsers // Automagically reload browsers
function reload(done) { function reload(done) {
server.reload(); server.reload;
done(); done();
} }
@ -21,5 +22,5 @@ function serve(done) {
module.exports = { module.exports = {
serve: serve, serve: serve,
reload: reload, reload: reload
}; };

17
gulpfile.js
View file

@ -28,7 +28,7 @@ const cleanCss = require('gulp-clean-css');
const pump = require('pump'); const pump = require('pump');
const cached = require('gulp-cached'); const cached = require('gulp-cached');
// const remember = require('gulp-remember'); // const remember = require('gulp-remember');
const concat = require('gulp-concat'); // const concat = require('gulp-concat');
const uglify = require('gulp-uglify'); const uglify = require('gulp-uglify');
const jshint = require('gulp-jshint'); const jshint = require('gulp-jshint');
const gulpIf = require('gulp-if'); const gulpIf = require('gulp-if');
@ -61,7 +61,7 @@ const input = {
sprites: config.src + 'art/sprites/**/*.png', sprites: config.src + 'art/sprites/**/*.png',
images: config.src + 'art/images/**/*.+(png|gif|jpg|svg|webp)' images: config.src + 'art/images/**/*.+(png|gif|jpg|svg|webp)'
}, },
vendor: 'vendor/**/*', vendor: 'vendor/**/*'
}; };
const output = { const output = {
@ -132,7 +132,8 @@ function nunjucks() {
function style() { function style() {
return src(input.style) return src(input.style)
.pipe(plumber()) .pipe(plumber())
.pipe(sass.sync({ // .pipe(sass.sync({
.pipe(sass({
includePaths: [input.vendor + '/**/*.s+(a|c)ss'] includePaths: [input.vendor + '/**/*.s+(a|c)ss']
}).on('error', sass.logError)) }).on('error', sass.logError))
.pipe(autoprefixer(['>= 4%', 'last 2 version'])) .pipe(autoprefixer(['>= 4%', 'last 2 version']))
@ -184,7 +185,7 @@ function code(cb) {
rename({ rename({
suffix: '.min' suffix: '.min'
}), }),
dest(output.code, { sourcemaps: '.' }), dest(output.code, { sourcemaps: '.' })
], cb); ], cb);
} }
@ -204,7 +205,7 @@ function codeLint() {
function fonts() { function fonts() {
return src(input.fonts) return src(input.fonts)
.pipe(plumber()) .pipe(plumber())
.pipe(dest(output.fonts)) .pipe(dest(output.fonts));
} }
// Add art // Add art
@ -213,7 +214,7 @@ function art() {
let favicons = src(input.art.favicons) let favicons = src(input.art.favicons)
.pipe(plumber()) .pipe(plumber())
.pipe(changed(output.art)) .pipe(changed(output.art))
.pipe(dest(config.dev)) .pipe(dest(config.dev));
// Move images to the root folder // Move images to the root folder
let images = src(input.art.images) let images = src(input.art.images)
@ -221,7 +222,7 @@ function art() {
.pipe(changed(output.art)) .pipe(changed(output.art))
.pipe(dest(output.art)); .pipe(dest(output.art));
return merge(favicons, images) return merge(favicons, images);
} }
// function art() { // function art() {
// // Move favicons and images to the root folder // // Move favicons and images to the root folder
@ -262,7 +263,7 @@ function sprites() {
function vendor() { function vendor() {
return src(input.vendor) return src(input.vendor)
.pipe(plumber()) .pipe(plumber())
.pipe(dest(output.vendor)) .pipe(dest(output.vendor));
} }
// TODO for distribution // TODO for distribution

1693
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

8
package.json
View file

@ -22,8 +22,8 @@
"devDependencies": { "devDependencies": {
"@babel/core": "~7", "@babel/core": "~7",
"@babel/preset-env": "~7", "@babel/preset-env": "~7",
"browser-sync": "^2.27.7", "browser-sync": "^2.27.10",
"del": "^6.0.0", "del": "^7.0.0",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0", "gulp-autoprefixer": "^8.0.0",
"gulp-babel": "~8.0", "gulp-babel": "~8.0",
@ -44,11 +44,11 @@
"gulp-sass-lint": "^1.4.0", "gulp-sass-lint": "^1.4.0",
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"gulp-useref": "^5.0.0", "gulp-useref": "^5.0.0",
"gulp.spritesmith": "^6.12.1", "gulp.spritesmith": "^6.13.0",
"jshint": "~2", "jshint": "~2",
"jshint-stylish": "^2.2.1", "jshint-stylish": "^2.2.1",
"merge-stream": "^2.0.0", "merge-stream": "^2.0.0",
"pump": "^3.0.0", "pump": "^3.0.0",
"sass": "^1.49.7" "sass": "^1.54.0"
} }
} }

22
source/style/modules/demo/_demo_module.scss
View file

@ -180,31 +180,31 @@
} }
.demo__query_example { .demo__query_example {
@include goingLarge($screen_tiny/1px) {background-color: $alpha_color; } @include goingLarge($screen_tiny * 1px) {background-color: $alpha_color; }
@include goingLarge($screen_small/1px) {background-color: $bravo_color; } @include goingLarge($screen_small * 1px) {background-color: $bravo_color; }
@include goingLarge($screen_medium/1px) {background-color: $charlie_color; } @include goingLarge($screen_medium * 1px) {background-color: $charlie_color; }
@include goingLarge($screen_large/1px) {background-color: $delta_color; } @include goingLarge($screen_large * 1px) {background-color: $delta_color; }
@include goingLarge($screen_huge/1px) {background-color: $echo_color; } @include goingLarge($screen_huge * 1px) {background-color: $echo_color; }
@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; } @include goingLarge($screen_gigantic * 1px) {background-color: $foxtrot_color; }
margin-bottom: $space_small; margin-bottom: $space_small;
padding: $space_small; padding: $space_small;
text-align: center; text-align: center;
&:after { &:after {
@extend code; @extend code;
@include goingLarge($screen_tiny/1px) { @include goingLarge($screen_tiny * 1px) {
& { content: '768px'; } & { content: '768px'; }
} }
@include goingLarge($screen_small/1px) { @include goingLarge($screen_small * 1px) {
& { content: '1024px'; } & { content: '1024px'; }
} }
@include goingLarge($screen_medium/1px) { @include goingLarge($screen_medium * 1px) {
& { content: '1280px'; } & { content: '1280px'; }
} }
@include goingLarge($screen_huge/1px) { @include goingLarge($screen_huge * 1px) {
& { content: '1680px'; } & { content: '1680px'; }
} }
@include goingLarge($screen_gigantic/1px) { @include goingLarge($screen_gigantic * 1px) {
& { content: '1920px'; } & { content: '1920px'; }
} }
content: '< 768px'; content: '< 768px';