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 +5023 -170
12 changed files with 5023 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit e7ca01dd40 - Show all commits

18
.gitignore vendored
View file

@ -1,4 +1,6 @@
# https://gist.github.com/octocat/9257657 # https://gist.github.com/octocat/9257657
###################
###################
# Compiled source # # Compiled source #
################### ###################
@ -41,6 +43,8 @@ Thumbs.db
# https://github.com/github/gitignore # https://github.com/github/gitignore
###################
###################
# https://github.com/github/gitignore/blob/master/Global/Windows.gitignore # https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
################### ###################
@ -173,13 +177,13 @@ typings/
# dotenv environment variables file # dotenv environment variables file
.env .env
# https://github.com/github/gitignore/blob/master/Sass.gitignore
###################
.sass-cache/
*.css.map
# https://interaktionsweise.de/ # https://interaktionsweise.de/
###################
# ========================= ###################
# Other files
# =========================
.sass-cache/
*.css.map

6
README.md
View file

@ -9,3 +9,9 @@ Copy the source folder to your projects style folder.
Compile the SCSS files, for example like a so `sass --watch source/:./`. Compile the SCSS files, for example like a so `sass --watch source/:./`.
Load the screen.css file within the head section of your HTML document. `<link rel="stylesheet" type="text/css" media="all" href="./{your projects style folder}/screen.css"/>` Load the screen.css file within the head section of your HTML document. `<link rel="stylesheet" type="text/css" media="all" href="./{your projects style folder}/screen.css"/>`
## LOGIC
Klassennamen enthalten Objektnamen und Funktionen
Sie sind mit `-` und `_` unterteilt.
Der Bindestrich `-` trennt Objektnamen von Funktionen. Der Unterstrich `_` wiederum unterteilt Funktionsbezeichnungen.

6
_config.scss
View file

@ -4,7 +4,7 @@
// TEXT // TEXT
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$default_font_size: 15px !default; $default_font_size: 16px !default;
$basic_size: $default_font_size; $basic_size: $default_font_size;
$default_print_font_size: 10pt !default; $default_print_font_size: 10pt !default;
@ -79,6 +79,9 @@ $basic_border_color: $black;
// LAYOUT // LAYOUT
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$default_box_sizing: box-sizing !default;
$box_sizing: $default_box_sizing;
$basic_width: 96%; $basic_width: 96%;
$width_2: 80%; $width_2: 80%;
$width_3: 60%; $width_3: 60%;
@ -333,4 +336,3 @@ $webkit_ms_support: -webkit- -ms- '';
// $iv-shadow: 2; // inset vertical shaddow settings // $iv-shadow: 2; // inset vertical shaddow settings
// $is-shadow: 2; // inset spread shaddow settings // $is-shadow: 2; // inset spread shaddow settings
// $iblur: 3; // inset blur settings // $iblur: 3; // inset blur settings

12
_hippie.scss
View file

@ -23,6 +23,7 @@
// Use a file outside of hippie i.e. other/normalize.css // Use a file outside of hippie i.e. other/normalize.css
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@import "other/normalize.css"; @import "other/normalize.css";
// @import "other/YOUR-FILES.css";
@ -48,8 +49,7 @@
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@import "modules/vendor"; @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/*/* needs sass-glob // @import "modules/YOUR-MODULE/YOUR-FILES";
// ADD HERE // @import "modules/example";
// Basic styles - this is the core of definitions // Basic styles - this is the core of definitions
// Individual styles can be added her // Individual styles can be added her
@ -64,18 +64,22 @@
@import "basic/embedded"; @import "basic/embedded";
@import "basic/tables"; @import "basic/tables";
@import "basic/interactive"; @import "basic/interactive";
// ADD HERE // @import "{name}/example"; // @import "YOU-NAME-IT";
// Individual Modules and variables // Individual Modules and variables
// in dependency to other styles // in dependency to other styles
// Additional modules can be defined here
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@import "modules/tables/tables_module";
@import "modules/card/card_module"; @import "modules/card/card_module";
@import "modules/editor/editor_module"; @import "modules/editor/editor_module";
@import "modules/explanation/explanation_module"; @import "modules/explanation/explanation_module";
@import "modules/print/print_module"; @import "modules/print/print_module";
// @import "modules/YOUR-MODULE/YOUR-FILES";
// Not yet sorted
@import "basic/new"; @import "basic/new";
// NOTE // No css rules allowed in here // NOTE // No css rules allowed in here

5
basic/_common.scss
View file

@ -48,7 +48,7 @@
*, *,
::before, ::before,
::after { ::after {
box-sizing: border-box; box-sizing: $box_sizing;
} }
} }
@ -82,8 +82,7 @@
background-color: transparentize($alpha_color, .5); background-color: transparentize($alpha_color, .5);
} }
.viewport-hover-body { .hover_background_change {
@extend %full_viewport;
background-color: darken($basic_background_color, 20%); background-color: darken($basic_background_color, 20%);
transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
&:hover { &:hover {

5
basic/_sections.scss
View file

@ -12,13 +12,13 @@ html {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
body { body {
box-sizing: border-box; box-sizing: $box_sizing;
font-family: $primary_font_family; font-family: $primary_font_family;
font-size: $basic_size; font-size: $basic_size;
line-height: $basic_line; line-height: $basic_line;
color: $basic_font_color; color: $basic_font_color;
background-color: $basic_background_color; background-color: $basic_background_color;
*, *,
::before, ::before,
::after { ::after {
@ -108,4 +108,3 @@ h6 {
text-transform: none; text-transform: none;
font-weight: bold; font-weight: bold;
} }

73
basic/_tables.scss
View file

@ -43,7 +43,7 @@ tfoot {
.table_blank { .table_blank {
border: $basic_border_width solid transparent; border: $basic_border_width solid transparent;
th, td { th, td {
border: $basic_border_width solid transparent; border: $basic_border_width solid transparent;
} }
@ -74,74 +74,3 @@ caption {
border: $basic_border_width dotted $basic_border_color; border: $basic_border_width dotted $basic_border_color;
text-align: center; text-align: center;
} }
.table_link {
width: 100%;
border: 0;
table-layout: auto;
tbody {
border-bottom: $cell_border;
&:hover {
background-color: $light_color;
}
}
th, td {
border: 0;
}
.cell_icon {
width: 48px;
text-align: center;
img {
vertical-align: text-top;
}
}
.cell_link {
padding-right: $basic_space;
padding-left: $basic_space;
&:hover {
background-color: $foxtrot_color;
}
a {
display: block;
}
.link_url {
display: none;
}
&:hover .link_url {
display: block;
color: $basic_highlight_color;
}
&:hover .link_text {
display: none;
}
}
.cell_date {
width: 12%;
text-align: center;
}
.cell_text {
padding-right: $basic_space;
padding-left: $basic_space;
div {
width: 100%;
}
.shorten {
@extend %short;
max-height: 44px;
}
}
}

108
example.css
View file

@ -59,7 +59,7 @@
margin-right: 0; margin-right: 0;
margin-left: 0; } margin-left: 0; }
.viewport-full-body, .viewport-hover-body { .viewport-full-body {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -78,10 +78,10 @@
.viewport-full-body { .viewport-full-body {
background-color: rgba(250, 216, 3, 0.5); } background-color: rgba(250, 216, 3, 0.5); }
.viewport-hover-body { .hover_background_change {
background-color: #4d4d4d; background-color: #4d4d4d;
transition: background-color .2s ease-in-out; } transition: background-color .2s ease-in-out; }
.viewport-hover-body:hover { .hover_background_change:hover {
background-color: gray; } background-color: gray; }
.space_box { .space_box {
@ -160,7 +160,7 @@ h5 {
.span_solo { .span_solo {
color: black; } color: black; }
.table_link .cell_text .shorten { .table-link_list .cell_text .shorten {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow: ellipsis; } -o-text-overflow: ellipsis; }
@ -178,9 +178,9 @@ html {
height: 100%; } height: 100%; }
body { body {
box-sizing: border-box; box-sizing: box-sizing;
font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans; font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
font-size: 15px; font-size: 16px;
line-height: 1; line-height: 1;
color: black; color: black;
background-color: gray; } background-color: gray; }
@ -428,46 +428,6 @@ caption {
border: 1px dotted black; border: 1px dotted black;
text-align: center; } text-align: center; }
.table_link {
width: 100%;
border: 0;
table-layout: auto; }
.table_link tbody {
border-bottom: 1px solid #666666; }
.table_link tbody:hover {
background-color: #8c8c8c; }
.table_link th, .table_link td {
border: 0; }
.table_link .cell_icon {
width: 48px;
text-align: center; }
.table_link .cell_icon img {
vertical-align: text-top; }
.table_link .cell_link {
padding-right: 8px;
padding-left: 8px; }
.table_link .cell_link:hover {
background-color: #0c85ff; }
.table_link .cell_link a {
display: block; }
.table_link .cell_link .link_url {
display: none; }
.table_link .cell_link:hover .link_url {
display: block;
color: white; }
.table_link .cell_link:hover .link_text {
display: none; }
.table_link .cell_date {
width: 12%;
text-align: center; }
.table_link .cell_text {
padding-right: 8px;
padding-left: 8px; }
.table_link .cell_text div {
width: 100%; }
.table_link .cell_text .shorten {
max-height: 44px; }
fieldset { fieldset {
margin: 8px 0; margin: 8px 0;
border: 1px solid black; } border: 1px solid black; }
@ -490,6 +450,46 @@ legend {
background-color: black; background-color: black;
color: white; } color: white; }
.table-link_list {
width: 100%;
border: 0;
table-layout: auto; }
.table-link_list tbody {
border-bottom: 1px solid #666666; }
.table-link_list tbody:hover {
background-color: #8c8c8c; }
.table-link_list th, .table-link_list td {
border: 0; }
.table-link_list .cell_icon {
width: 48px;
text-align: center; }
.table-link_list .cell_icon img {
vertical-align: text-top; }
.table-link_list .cell_link {
padding-right: 8px;
padding-left: 8px; }
.table-link_list .cell_link:hover {
background-color: #0c85ff; }
.table-link_list .cell_link a {
display: block; }
.table-link_list .cell_link .link_url {
display: none; }
.table-link_list .cell_link:hover .link_url {
display: block;
color: white; }
.table-link_list .cell_link:hover .link_text {
display: none; }
.table-link_list .cell_date {
width: 12%;
text-align: center; }
.table-link_list .cell_text {
padding-right: 8px;
padding-left: 8px; }
.table-link_list .cell_text div {
width: 100%; }
.table-link_list .cell_text .shorten {
max-height: 44px; }
.card_body .bkg_box { .card_body .bkg_box {
position: absolute; position: absolute;
top: 0; top: 0;
@ -617,19 +617,19 @@ legend {
.exp_marker_pop { .exp_marker_pop {
position: absolute; position: absolute;
top: -11.25px; top: -12px;
right: -7.5px; right: -8px;
width: 15px; width: 16px;
height: 15px; height: 16px;
border: 1px solid white; border: 1px solid white;
border-radius: 15px; border-radius: 16px;
color: white; color: white;
background-color: black; } background-color: black; }
.exp_overlay_btn { .exp_overlay_btn {
position: fixed; position: fixed;
width: 60px; width: 64px;
height: 60px; height: 64px;
cursor: pointer; } cursor: pointer; }
.exp_help_btn { .exp_help_btn {
@ -804,4 +804,6 @@ legend {
.label_1, .label_2, .label_3 { .label_1, .label_2, .label_3 {
padding: 0 4px; } padding: 0 4px; }
/*# sourceMappingURL=example.css.map */ /*# sourceMappingURL=example.css.map */

102
example.html
View file

@ -14,7 +14,7 @@
<link rel="stylesheet" type="text/css" media="all" href="./example.css"/> <link rel="stylesheet" type="text/css" media="all" href="./example.css"/>
</head> </head>
<body class="viewport-hover-body"> <body class="hover_background_change">
<div class="layer"> <div class="layer">
<div class="exp_overlay_btn exp_help_btn"><span class="span_solo">?</span></div> <div class="exp_overlay_btn exp_help_btn"><span class="span_solo">?</span></div>
@ -122,7 +122,7 @@
<p>Eine sehr klar definierte Gruppierung stellt das Element <code>&lt;main&gt;</code> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p> <p>Eine sehr klar definierte Gruppierung stellt das Element <code>&lt;main&gt;</code> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
<h1 id="textlevel">Textebene</h1> <h1 id="textlevel">Textebene</h1>
<h2>Verweise</h2> <h2>Verweise</h2>
<p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="link_line js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code_solo">table>tbody>tr>td*2^tr>td[colspan=2]</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="link_line" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.</p> <p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="link_line js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code_solo">a.link_line</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="link_line" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.</p>
<p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. <a href="#">Farbige</a> oder <a class="link_line" href="#">unterstrichene Varianten</a> sind möglich.</p> <p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. <a href="#">Farbige</a> oder <a class="link_line" href="#">unterstrichene Varianten</a> sind möglich.</p>
<p>Wird der Verweis innerhalb eines <code>&lt;nav&gt;</code> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Auf diese Verwendung wird im Folgenden genauer eingegangen <span class="wip_txt">...</span></p> <p>Wird der Verweis innerhalb eines <code>&lt;nav&gt;</code> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Auf diese Verwendung wird im Folgenden genauer eingegangen <span class="wip_txt">...</span></p>
<h2>Formatierungen</h2> <h2>Formatierungen</h2>
@ -292,42 +292,41 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="table_link js_pop"> <table class="table_fix">
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
<thead> <thead>
<tr> <tr>
<th>&nbsp;</th> <th>Kopfzeile</th>
<th>Ab / Zy</th> <th>1</th>
<th> Neu / Alt</th> <th>&gt;9000</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<td>Fußzeile</td>
<td>-</td>
<td>-</td>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td> <td>Alpha</td>
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td> <td>0</td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td> <td>9000</td>
</tr> </tr>
<tr> <tr>
<td class="cell_text"> <td>Bravo</td>
<div class="shorten">Beschreibung</div> <td>1</td>
</td> <td>9001</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
</tr> </tr>
<tr> <tr>
<td class="cell_text"> <td>Charlie</td>
<div class="shorten">Beschreibung</div> <td>0</td>
</td> <td>9000</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="exp_pop"><code class="code_solo">table.table_link>thead>tr>th*3^^(tbody>tr>td.cell_icon[rowspan=2]>img[width=16 height=16]^+td.cell_link>a.link_text[target=_blank]+a.link_url[target=_blank]^+td.cell_date[rowspan=2]{YYYY-MM-DD}^tr>td.cell_text>div.shorten)*2</code></div>
<h1>Formulare</h1> <h1>Formulare</h1>
<p>Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Sie sind in ihrer unveränderten Gestalt, System- bzw. Browser-Abhängig. <span class="wip_txt">(Vielleicht ist das auch scheiße, hier darauf einzugehen) ...</span></p> <p>Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Sie sind in ihrer unveränderten Gestalt, System- bzw. Browser-Abhängig. <span class="wip_txt">(Vielleicht ist das auch scheiße, hier darauf einzugehen) ...</span></p>
<input/> <input/>
@ -369,6 +368,61 @@
<div class="div_placeholder_bkg"></div> <div class="div_placeholder_bkg"></div>
<h1>Medien</h1> <h1>Medien</h1>
<h1>Druck</h1> <h1>Druck</h1>
<section>
<header>
<h1>Ende der Einführung</h1>
</header>
<article>
<p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.</p>
</article>
</section>
<section>
<header>
<h1>Einzelene Elemente</h1>
</header>
<article>
<h2>Tabellen</h2>
<table class="table-link_list js_pop">
<thead>
<tr>
<th>&nbsp;</th>
<th>Ab / Zy</th>
<th> Neu / Alt</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
</tr>
<tr>
<td class="cell_text">
<div class="shorten">Beschreibung</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
</tr>
<tr>
<td class="cell_text">
<div class="shorten">Beschreibung</div>
</td>
</tr>
</tbody>
</table>
<div class="exp_pop"><code class="code_solo">table.table-link_list>thead>tr>th*3^^(tbody>tr>td.cell_icon[rowspan=2]>img[width=16 height=16]^+td.cell_link>a.link_text[target=_blank]+a.link_url[target=_blank]^+td.cell_date[rowspan=2]{YYYY-MM-DD}^tr>td.cell_text>div.shorten)*2</code></div>
</article>
</section>
</div> </div>
<script <script
src="https://code.jquery.com/jquery-3.1.1.min.js" src="https://code.jquery.com/jquery-3.1.1.min.js"

70
modules/tables/_tables_module.scss Normal file
View file

@ -0,0 +1,70 @@
.table-link_list {
width: 100%;
border: 0;
table-layout: auto;
tbody {
border-bottom: $cell_border;
&:hover {
background-color: $light_color;
}
}
th, td {
border: 0;
}
.cell_icon {
width: 48px;
text-align: center;
img {
vertical-align: text-top;
}
}
.cell_link {
padding-right: $basic_space;
padding-left: $basic_space;
&:hover {
background-color: $foxtrot_color;
}
a {
display: block;
}
.link_url {
display: none;
}
&:hover .link_url {
display: block;
color: $basic_highlight_color;
}
&:hover .link_text {
display: none;
}
}
.cell_date {
width: 12%;
text-align: center;
}
.cell_text {
padding-right: $basic_space;
padding-left: $basic_space;
div {
width: 100%;
}
.shorten {
@extend %short;
max-height: 44px;
}
}
}

4778
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

10
package.json
View file

@ -17,6 +17,12 @@
}, },
"homepage": "https://github.com/sthag/hippie#readme", "homepage": "https://github.com/sthag/hippie#readme",
"devDependencies": { "devDependencies": {
"gulp": "^3.9.1" "gulp": "^3.9.1",
} "gulp-livereload": "^3.8.1",
"gulp-notify": "^3.0.0",
"gulp-plumber": "^1.1.0",
"gulp-ruby-sass": "^2.1.1",
"gulp-sourcemaps": "^2.6.0"
},
"dependencies": {}
} }