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

Merge pull request #3 from sthag/development

Browse source 
Development
This commit is contained in:
Stephan 2017-09-29 23:06:19 +02:00 • committed by GitHub
commit 6e4b8cf94b
13 changed files with 202 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

11
demo-index.html
View file

@ -394,6 +394,8 @@
<h1>Struktur</h1>
<div class="box__placeholder"></div>
<hr class="hr__hidden"/>
<div class="box__placeholder">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%">
<line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
@ -631,36 +633,45 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
</header>
<article>
<section class="sec_main_status demo__status">
<div class="main_center">
<h1>404</h1>
<p>Hier ist nichts.</p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</div>
<div class="pos_abs pin_bottom width_full">
<p class="txt_center">domain.tld * <a class="lineLink" href="mailto:admin@domain.tld">admin@domain.tld</a></p>
<address class="txt_center">Server Application/ver.s.ion (System Name) serving domain.tld : port</address>
</div>
</section>
<section class="sec_main_status demo__status">
<div class="main_center">
<h1>403</h1>
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
<blockquote>
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</div>
<div class="pos_abs pin_bottom width_full">
<p class="txt_center">domain.tld * <a class="lineLink" href="mailto:admin@domain.tld">admin@domain.tld</a></p>
<address class="txt_center">Server Application/ver.s.ion (System Name) serving domain.tld : port</address>
</div>
</section>
<section class="sec_main_status demo__status">
<div class="main_center">
<h1>400</h1>
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
<blockquote>
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</div>
<div class="pos_abs pin_bottom width_full">
<p class="txt_center">domain.tld * <a class="lineLink" href="mailto:admin@domain.tld">admin@domain.tld</a></p>
<address class="txt_center">Server Application/ver.s.ion (System Name) serving domain.tld : port</address>
</div>
</section>
</article>

6
gulpfile.js
View file

@ -23,7 +23,8 @@ const gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
cssnano = require('gulp-cssnano'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
uglifyjs = require('uglify-es'),
composer = require('gulp-uglify/composer'),
// imagemin = require('gulp-imagemin'),
cache = require('gulp-cached'),
remember = require('gulp-remember'),
@ -31,6 +32,7 @@ const gulp = require('gulp'),
notify = require('gulp-notify'),
browsersync = require('browser-sync').create();
var minify = composer(uglifyjs, console);
// Task - Clean build directory
gulp.task('clean', function() {
@ -62,7 +64,7 @@ gulp.task('scripts', function(cb) {
jshint('.jshintrc'),
jshint.reporter('default'),
sourcemap.init(),
uglify(),
minify(),
remember('scripts'),
concat('all.min.js'),
sourcemap.write(),

28
package-lock.json generated
View file

@ -5686,15 +5686,6 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true
},
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"string-width": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@ -5706,6 +5697,15 @@
"strip-ansi": "3.0.1"
}
},
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"stringstream": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@ -5862,6 +5862,16 @@
"integrity": "sha1-BMgamb3V3FImPqKdJMa/jUgYpLs=",
"dev": true
},
"uglify-es": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.1.2.tgz",
"integrity": "sha512-ULYW1xj/yW0IAkLW1XzIXB3O888275E2/r4tFy83D9wPRKGlUjKWeQAZoyHXujr/fsHeh6QMlc1ayCE8kqnoaw==",
"dev": true,
"requires": {
"commander": "2.11.0",
"source-map": "0.5.7"
}
},
"uglify-js": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.1.2.tgz",

3
package.json
View file

@ -33,7 +33,8 @@
"gulp-sourcemaps": "^2.6.1",
"gulp-uglify": "^3.0.0",
"jshint": "^2.9.5",
"pump": "^1.0.2"
"pump": "^1.0.2",
"uglify-es": "^3.1.2"
},
"dependencies": {}
}

16
source/code/functions.js
View file

@ -6,14 +6,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() {

3
source/code/global.js
View file

@ -33,7 +33,10 @@ $( document ).ready(function() {
$(this).next(".exp_pop").css({
"top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4,
"left": ev.pageX + 8
// "left": ev.pageX - $(this).offset().left + 8
});
// TODO - needs more love
console.log(ev.pageX);
}
);

2
source/style/_hippie.scss
View file

@ -57,7 +57,7 @@
// Additional modules can be defined here
// -----------------------------------------------------------------------------
@import "modules/vendor";
//@import modules/all deprecated because of the new vendor mixin
// @import modules/all deprecated because of the new vendor mixin
// @import "modules/YOUR-MODULE/YOUR-FILES";
// Basic styles - this is the core of definitions

20
source/style/elements/_grouping.scss
View file

@ -55,7 +55,9 @@ pre {
// Quote
blockquote {
margin: $basic_space $basic_indent;
margin: $basic_space 0;
padding-right: $basic_indent;
padding-left: $basic_indent;
}
.quote__mark {
@ -225,24 +227,20 @@ div {
.box__placeholder {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($darkest_color,.1);
border: $border_width_4 solid rgba($alpha_color,.1);
border-radius: $basic_corner;
padding: $basic_space;
background-color: rgba($darkest_color,.1);
svg {
vertical-align: top;
}
background-color: rgba($alpha_color,.2);
}
.box__placeholder_bkg {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($darkest_color,.1);
height: $space_4 * 2;
border: $border_width_4 solid rgba($brightest_color,.1);
border-radius: $basic_corner;
padding: $basic_space;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
background-color: rgba($darkest_color,.1);
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='#FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#FFF' stroke-width='.5'/></svg>") no-repeat;
background-color: rgba($brightest_color,.1);
}

2
source/style/elements/_sections.scss
View file

@ -59,8 +59,6 @@ section {
}
.sec__main_status {
@extend .sec__main_center;
position: relative;
border-top-width: $border_width_8;
border-top-style: solid;
border-color: $basic_border_color;

4
source/style/elements/_textlevel.scss
View file

@ -80,6 +80,10 @@ dfn {
}
address {
}
abbr {
}

20
source/style/global/_common.scss
View file

@ -59,6 +59,26 @@
margin-right: $space_3;
}
.main_center {
& > * {
margin-right: (100% - $basic_width) / 2;
margin-left: (100% - $basic_width) / 2;
@include forTabletPortraitUp {
margin-right: (100% - $width_small) / 2;
margin-left: (100% - $width_small) / 2;
}
@include forTabletLandscapeUp {
margin-right: 1(00% - $width_medium) / 2;
margin-left: 1(00% - $width_medium) / 2;
}
@include forBigDesktopUp {
margin-right: (100% - $width_large) / 2;
margin-left: (100% - $width_large) / 2;
}
}
}
// Clearing and floating

101
source/style/maintenance.scss Normal file
View file

@ -0,0 +1,101 @@
/*
* # TABLE OF CONTENTS
*
* - Reset
* - Global functions and mixins
* - Configuration
* - Special modules
* - Basic styles
* - Common
* - Typography
*
* - Sections
* - Grouping
* - Textlevel
* - Embedded
* - Tables
* - Interactive
* - Modules
*
*/
// Reset
// Use a file outside of hippie i.e. vendor/normalize.css
// -----------------------------------------------------------------------------
@import "../../vendor/normalizecss/normalize.css";
// @import "vendor/YOUR-FILES.css";
// Functions and Mixins
// Important code constructions
// -----------------------------------------------------------------------------
@import "functions/all";
@import "mixins/all";
// Fonts
// Use a central file outside of hippie for font definitions with @font-face
// -----------------------------------------------------------------------------
// @import "vendor/fonts.css";
// Global configuration with default values
// Adjustments can be made by copying values from _config.scss to _override.scss
// Be careful though changes will get lost if hippie gets updated
// -----------------------------------------------------------------------------
// @import "global/default"; // DO NOT EDIT
@import "settings"; // EDIT
@import "global/config"; // DO NOT EDIT
// Modules and variables
// Additional modules can be defined here
// -----------------------------------------------------------------------------
// @import "modules/vendor";
// @import modules/all deprecated because of the new vendor mixin
// @import "modules/YOUR-MODULE/YOUR-FILES";
// Basic styles - this is the core of definitions
// Individual styles can be added her
// -----------------------------------------------------------------------------
@import "global/common";
@import "elements/typography";
// Following the w3c document element structure
// https://w3c.github.io/html/index.html#contents
@import "elements/sections";
@import "elements/grouping";
@import "elements/textlevel";
@import "elements/embedded";
@import "elements/tables";
@import "elements/interactive";
// @import "YOU-NAME-IT";
// Individual Modules and variables
// in dependency to other styles
// Additional modules can be defined here
// -----------------------------------------------------------------------------
@import "modules/breakpoint/breakpoint_module";
// @import "modules/navigation/nav_module";
@import "modules/tables/tables_module";
// @import "modules/card/card_module";
// @import "modules/editor/editor_module";
// @import "modules/explanation/explanation_module";
// @import "modules/print/print_module";
// @import "modules/YOUR-MODULE/YOUR-FILES";
// Demonstration
@import "modules/demo/demo_module";
// Not yet sorted
// @import "elements/new";
// NOTE // No css rules allowed in here

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

@ -1,9 +1,11 @@
.demo__intro {
@extend .sec__main_center;
@extend .sec__main_status;
}
.demo__status {
@extend .sec__main_status;
position: relative;
min-height: 50vh;
border-color: $foxtrot_color;