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

Mostly renaming

Browse source
This commit is contained in:
Stephan Hagedorn 2017-09-01 15:32:07 +02:00
parent e8ab9a51d7
commit 7e5c9cdf0d
8 changed files with 90 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

2
code/functions.js
View file

@ -1,6 +1,6 @@
function setup() { function setup() {
if($('#js_tph').length && full_view_hover) { if($('#js_tph').length && full_view_hover) {
// $('body').prepend("<div id=\"js_tph\" class=\"trigger__hover hover_full_view_change\"></div>"); // $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>");
$('#js_tph').addClass("hover_full_view_change"); $('#js_tph').addClass("hover_full_view_change");
} }
} }

22
demo-index.html
View file

@ -17,7 +17,7 @@
</head> </head>
<body> <body>
<div id="js_tph" class="trigger__hover"></div> <div id="js_tph" class="layer__hover"></div>
<div class="temp__layer"> <div class="temp__layer">
<!-- <div class="exp_overlay_btn exp_help_btn"> <!-- <div class="exp_overlay_btn exp_help_btn">
@ -83,9 +83,9 @@
<hr class="hr__dotted js_pop" emmet/><div class="exp_pop"><code class="code__solo">hr.hr__dotted</code></div><!--hr.hr__dotted--> <hr class="hr__dotted js_pop" emmet/><div class="exp_pop"><code class="code__solo">hr.hr__dotted</code></div><!--hr.hr__dotted-->
<hr class="center_50 js_pop"/><div class="exp_pop"><code class="code__solo">hr.center_50</code></div> <hr class="center_50 js_pop"/><div class="exp_pop"><code class="code__solo">hr.center_50</code></div>
<hr class="hr__dotted center_25 js_pop"/><div class="exp_pop"><code class="code__solo">hr.hr__dotted.center_25</code></div> <hr class="hr__dotted center_25 js_pop"/><div class="exp_pop"><code class="code__solo">hr.hr__dotted.center_25</code></div>
<p class="p__column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code__solo">p.p__column_2</code></div> <p class="block__column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code__solo">p.block__column_2</code></div>
<p class="p__column_3 p__column_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code__solo">p.p__column_3.p__column_line</code></div> <p class="block__column_3 block__column_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code__solo">p.block__column_3.block__column_line</code></div>
<p class="p__column_3 p__column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p> <p class="block__column_3 block__column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
<p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code>&lt;pre&gt;</code>.</p> <p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code>&lt;pre&gt;</code>.</p>
<pre>Dadurch<br> bleiben<br> Einrückungen<br> durch<br> Tabulatoren<br> erhalten.</pre> <pre>Dadurch<br> bleiben<br> Einrückungen<br> durch<br> Tabulatoren<br> erhalten.</pre>
<p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code>&lt;ul&gt;</code> und geordnete Listen <code>&lt;ol&gt;</code> sowie Beschreibungslisten <code>&lt;dl&gt;</code>. Die beiden ersten Varianten beinhalten das Listenelement <code>&lt;li&gt;</code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code>&lt;dt&gt;</code> und Beschreibung <code>&lt;dd&gt;</code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p> <p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code>&lt;ul&gt;</code> und geordnete Listen <code>&lt;ol&gt;</code> sowie Beschreibungslisten <code>&lt;dl&gt;</code>. Die beiden ersten Varianten beinhalten das Listenelement <code>&lt;li&gt;</code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code>&lt;dt&gt;</code> und Beschreibung <code>&lt;dd&gt;</code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>
@ -174,7 +174,7 @@
</table> </table>
<div class="exp_pop"><code class="code__solo">table.width_full>tbody>tr>td*2^tr>td[colspan=2]</code></div> <div class="exp_pop"><code class="code__solo">table.width_full>tbody>tr>td*2^tr>td[colspan=2]</code></div>
<div class="overflow"> <div class="overflow">
<table class="float_left js_pop"> <table class="float_space_left js_pop">
<tbody> <tbody>
<tr> <tr>
<td>Eine</td> <td>Eine</td>
@ -186,7 +186,7 @@
</tbody> </tbody>
</table> </table>
<div class="exp_pop"><code class="code__solo">table>tbody>tr>td*2^tr>td[colspan=2]</code></div> <div class="exp_pop"><code class="code__solo">table>tbody>tr>td*2^tr>td[colspan=2]</code></div>
<table class="table__blank float_left js_pop"> <table class="table__blank float_space_left js_pop">
<tbody> <tbody>
<tr> <tr>
<td>Mit</td> <td>Mit</td>
@ -348,11 +348,11 @@
<p>Interaktive Elemente können durch das Attribut <code>&lt;readonly&gt;</code> nur lesbar gemacht werden oder mittels <code>&lt;disabled&gt;</code> gänzlich deaktiviert werden.</p> <p>Interaktive Elemente können durch das Attribut <code>&lt;readonly&gt;</code> nur lesbar gemacht werden oder mittels <code>&lt;disabled&gt;</code> gänzlich deaktiviert werden.</p>
<p><input type="text" value="Read Only Text" readonly><input type="text" value="Disabled Text" disabled><button disabled>Button</button></p> <p><input type="text" value="Read Only Text" readonly><input type="text" value="Disabled Text" disabled><button disabled>Button</button></p>
<p>Das Element <code>&lt;label&gt;</code> ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.</p> <p>Das Element <code>&lt;label&gt;</code> ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.</p>
<div class="box__column_old"> <div class="overflow">
<div class="column_old"> <div class="float_half_size">
<label for="demo__input">Beschriftung:</label><input type="text" id="demo__input"> <label for="demo__input">Beschriftung:</label><input type="text" id="demo__input">
</div> </div>
<div class="column_old"> <div class="float_half_size">
<input type="text" id="demo__input" class="input__label_right"><label for="demo__input">Beschriftung</label> <input type="text" id="demo__input" class="input__label_right"><label for="demo__input">Beschriftung</label>
</div> </div>
</div> </div>
@ -449,7 +449,7 @@
<pre class="pre__code"><code>nav>ul>(li>a.a__button{Punkt $})*4 <pre class="pre__code"><code>nav>ul>(li>a.a__button{Punkt $})*4
nav>ul>(li>a.a__button_border{Stufe $})*4</code></pre> nav>ul>(li>a.a__button_border{Stufe $})*4</code></pre>
<div class="overflow"> <div class="overflow">
<nav class="float_left"> <nav class="float_space_left">
<ul> <ul>
<li><a href="" class="a__button">Punkt 1</a></li> <li><a href="" class="a__button">Punkt 1</a></li>
<li><a href="" class="a__button">Punkt 2</a></li> <li><a href="" class="a__button">Punkt 2</a></li>
@ -535,7 +535,7 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
<div class="flex__child"></div> <div class="flex__child"></div>
<div class="flex__child"></div> <div class="flex__child"></div>
</div> </div>
<div class="box__column"> <div class="flex__column_wrap">
<div class="column"><input value="Undefiniert"/></div> <div class="column"><input value="Undefiniert"/></div>
<div class="column"><input type="text" size="8" value="Text"/></div> <div class="column"><input type="text" size="8" value="Text"/></div>
<div class="column"><input type="text" size="8" value="Deaktiviert" disabled/></div> <div class="column"><input type="text" size="8" value="Deaktiviert" disabled/></div>

53
elements/_grouping.scss
View file

@ -12,21 +12,6 @@ p {
} }
} }
.p__column_line {
column-rule: $basic_border_width solid $darkest_color;
}
.p__column_2, .p__column_3 {
@extend p;
}
.p__column_2 {
column-count: 2;
column-gap: $space_3;
}
.p__column_3 {
column-count: 3;
column-gap: $space_4;
}
// Address // Address
address { address {
@ -153,7 +138,7 @@ ul {
.list__horizontal { .list__horizontal {
overflow: auto; overflow: auto;
li { li {
@extend .float_left; @extend .float_space_left;
} }
} }
@ -199,12 +184,31 @@ div {
// width: 100%; // width: 100%;
} }
// Inline // Inline
.box__inline_left { .box__inline_left {
@extend .float_left; @extend .float_space_left;
// padding: $basic_space / 2; // padding: $basic_space / 2;
} }
// Columns
.block__column_line {
column-rule: $basic_border;
}
.block__column_2, .block__column_3 {
@extend p;
}
.block__column_2 {
column-count: 2;
column-gap: $space_3;
}
.block__column_3 {
column-count: 3;
column-gap: $space_4;
}
// Space and placeholders // Space and placeholders
.box__space { .box__space {
position: relative; position: relative;
@ -245,22 +249,15 @@ div {
background-color: rgba($darkest_color,.1); background-color: rgba($darkest_color,.1);
} }
// Data // Data
.box__file_tile { .box__file_tile {
@extend .float_left; @extend .float_space_left;
} }
// Flex // Flex
.box__column_old { .flex__column_wrap {
overflow: auto;
.column_old {
float: left;
width: 50%;
}
}
.box__column {
@extend .flex; @extend .flex;
.column { .column {

14
elements/_sections.scss
View file

@ -25,8 +25,10 @@ body {
::after { ::after {
box-sizing: inherit; box-sizing: inherit;
} }
&:hover { &:hover {
.trigger__hover {
.layer__hover {
background-color: transparent; background-color: transparent;
} }
} }
@ -42,6 +44,9 @@ section {
.sec__main_center { .sec__main_center {
width: $basic_width; width: $basic_width;
margin: 0 auto;
padding-top: $space_3;
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
@media (min-width: $screen_small) { @media (min-width: $screen_small) {
width: $width_small; width: $width_small;
@ -53,16 +58,16 @@ section {
width: $width_large; width: $width_large;
} }
} }
@media screen and (orientation: portrait) { @media screen and (orientation: portrait) {
@media (min-width: $screen_small) { @media (min-width: $screen_small) {
width: $width_small; width: $width_small;
} }
} }
margin: 0 auto;
padding-top: $space_3;
} }
aside { aside {
&.right + section { &.right + section {
margin-right: calc(#{$basic_aside_width} + #{$basic_space}); margin-right: calc(#{$basic_aside_width} + #{$basic_space});
} }
@ -79,12 +84,15 @@ nav {
aside { aside {
width: $basic_aside_width; width: $basic_aside_width;
&.left { &.left {
float: left; float: left;
} }
&.right { &.right {
float: right; float: right;
} }
*:first-child { *:first-child {
margin-top: 0; margin-top: 0;
} }

66
example.css
View file

@ -107,12 +107,16 @@ textarea:not([disabled]):focus {
.clear::before, .clear::after { .clear::before, .clear::after {
clear: both; } clear: both; }
.float_left, .list__horizontal li, .box__inline_left, .box__file_tile, .nav__horizontal ul li, .nav__center_old ul li, .header__page nav ul li { .overflow, .nav__horizontal ul, .nav__center_old ul, .header__page nav ul {
overflow: auto; }
.float_space_left, .list__horizontal li, .box__inline_left, .box__file_tile, .nav__horizontal ul li, .nav__center_old ul li, .header__page nav ul li {
float: left; float: left;
margin-right: 32px; } margin-right: 32px; }
.overflow, .nav__horizontal ul, .nav__center_old ul, .header__page nav ul { .float_half_size {
overflow: auto; } float: left;
width: 50%; }
.x_long { .x_long {
overflow-x: scroll; } overflow-x: scroll; }
@ -161,7 +165,7 @@ textarea:not([disabled]):focus {
transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
pointer-events: none; } pointer-events: none; }
.flex, .flex__wrap, .flex__row, .box__column, .nav__column ul { .flex, .flex__wrap, .flex__row, .flex__column_wrap, .nav__column ul {
display: flex; } display: flex; }
.flex__wrap { .flex__wrap {
@ -171,7 +175,7 @@ textarea:not([disabled]):focus {
flex-direction: column; flex-direction: column;
justify-content: flex-start; } justify-content: flex-start; }
.flex__child, .box__column .column, .nav__column ul li { .flex__child, .flex__column_wrap .column, .nav__column ul li {
flex: 0 1 auto; } flex: 0 1 auto; }
.flex__child_one { .flex__child_one {
@ -193,7 +197,7 @@ textarea:not([disabled]):focus {
color: white; color: white;
border-color: transparent; } border-color: transparent; }
.span__solo, h6, p, .p__column_2, .p__column_3, caption, li, dt, dd, figcaption, th, td, legend, label { .span__solo, h6, p, .block__column_2, .block__column_3, caption, li, dt, dd, figcaption, th, td, legend, label {
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
font-size: 1em; font-size: 1em;
line-height: 1.5; } line-height: 1.5; }
@ -203,7 +207,7 @@ pre, code, .code__solo, input[type="color"], input[type="date"], input[type="dat
font-size: 1em; font-size: 1em;
line-height: 1.5; } line-height: 1.5; }
.print_body *[class^="din"] p, .print_body *[class^="din"] .p__column_2, .print_body *[class^="din"] .p__column_3, .print_body *[class^="din"] caption { .print_body *[class^="din"] p, .print_body *[class^="din"] .block__column_2, .print_body *[class^="din"] .block__column_3, .print_body *[class^="din"] caption {
font-family: Courier New, monospace; font-family: Courier New, monospace;
font-size: 1em; font-size: 1em;
line-height: 1.5; } line-height: 1.5; }
@ -255,7 +259,7 @@ body {
body ::before, body ::before,
body ::after { body ::after {
box-sizing: inherit; } box-sizing: inherit; }
body:hover .trigger__hover { body:hover .layer__hover {
background-color: transparent; } background-color: transparent; }
.sec__main_center, .demo__intro { .sec__main_center, .demo__intro {
@ -316,24 +320,13 @@ h6 {
text-transform: none; text-transform: none;
font-weight: bold; } font-weight: bold; }
p, .p__column_2, .p__column_3, caption { p, .block__column_2, .block__column_3, caption {
margin: 8px 0; } margin: 8px 0; }
p code, .p__column_2 code, .p__column_3 code, caption code { p code, .block__column_2 code, .block__column_3 code, caption code {
padding: 1px 4px; padding: 1px 4px;
font-size: 1em; font-size: 1em;
line-height: 1; } line-height: 1; }
.p__column_line {
column-rule: 1px solid black; }
.p__column_2 {
column-count: 2;
column-gap: 32px; }
.p__column_3 {
column-count: 3;
column-gap: 64px; }
hr, .hr__hidden, .hr__dotted { hr, .hr__hidden, .hr__dotted {
margin: 32px auto; margin: 32px auto;
border-width: 1px 0 0; border-width: 1px 0 0;
@ -359,9 +352,9 @@ hr, .hr__hidden, .hr__dotted {
blockquote { blockquote {
margin: 8px 2em; } margin: 8px 2em; }
.quote__mark p::before, .quote__mark .p__column_2::before, .quote__mark .p__column_3::before, .quote__mark caption::before { .quote__mark p::before, .quote__mark .block__column_2::before, .quote__mark .block__column_3::before, .quote__mark caption::before {
content: "\201E \0020"; } content: "\201E \0020"; }
.quote__mark p::after, .quote__mark .p__column_2::after, .quote__mark .p__column_3::after, .quote__mark caption::after { .quote__mark p::after, .quote__mark .block__column_2::after, .quote__mark .block__column_3::after, .quote__mark caption::after {
content: "\201C \0020"; } content: "\201C \0020"; }
.quote__mark .quote__source::before, .quote__mark .quote__source::after { .quote__mark .quote__source::before, .quote__mark .quote__source::after {
content: ""; } content: ""; }
@ -415,6 +408,17 @@ figure {
.box__main_indent { .box__main_indent {
margin-left: 25%; } margin-left: 25%; }
.block__column_line {
column-rule: 1px solid black; }
.block__column_2 {
column-count: 2;
column-gap: 32px; }
.block__column_3 {
column-count: 3;
column-gap: 64px; }
.box__space { .box__space {
position: relative; position: relative;
width: 100%; } width: 100%; }
@ -448,13 +452,7 @@ figure {
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: 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(0, 0, 0, 0.1); } background-color: rgba(0, 0, 0, 0.1); }
.box__column_old { .flex__column_wrap .column {
overflow: auto; }
.box__column_old .column_old {
float: left;
width: 50%; }
.box__column .column {
flex-grow: 1; } flex-grow: 1; }
a { a {
@ -882,7 +880,7 @@ nav li {
font-size: 24px; font-size: 24px;
line-height: 1.4em; line-height: 1.4em;
font-weight: normal; } font-weight: normal; }
.card_body p, .card_body .p__column_2, .card_body .p__column_3, .card_body caption { .card_body p, .card_body .block__column_2, .card_body .block__column_3, .card_body caption {
margin-top: 0; margin-top: 0;
margin-bottom: 16px; margin-bottom: 16px;
font-size: 12px; font-size: 12px;
@ -994,7 +992,7 @@ nav li {
-o-transition: height 0.5s ease; -o-transition: height 0.5s ease;
transition: height 0.5s ease; } transition: height 0.5s ease; }
.print_body *[class^="din"] { .print_body [class^="din"] {
background-color: white; } background-color: white; }
.print_body { .print_body {
@ -1057,7 +1055,7 @@ nav li {
flex-direction: row; } flex-direction: row; }
.print_body *[class^="din"] .page_foot *:last-child { .print_body *[class^="din"] .page_foot *:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .p__column_2, .print_body *[class^="din"] .page_foot .p__column_3, .print_body *[class^="din"] .page_foot caption { .print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .block__column_2, .print_body *[class^="din"] .page_foot .block__column_3, .print_body *[class^="din"] .page_foot caption {
flex: 1 0 auto; flex: 1 0 auto;
margin: 0; margin: 0;
font-size: 8pt; font-size: 8pt;
@ -1068,7 +1066,7 @@ nav li {
font-size: 20pt; font-size: 20pt;
line-height: 1; line-height: 1;
text-align: right; } text-align: right; }
.print_body *[class^="din"] .page_foot p:first-child, .print_body *[class^="din"] .page_foot .p__column_2:first-child, .print_body *[class^="din"] .page_foot .p__column_3:first-child, .print_body *[class^="din"] .page_foot caption:first-child { .print_body *[class^="din"] .page_foot p:first-child, .print_body *[class^="din"] .page_foot .block__column_2:first-child, .print_body *[class^="din"] .page_foot .block__column_3:first-child, .print_body *[class^="din"] .page_foot caption:first-child {
text-align: left; } text-align: left; }
.print_body *[class^="din"] .page_content { .print_body *[class^="din"] .page_content {
margin-top: 10cm; margin-top: 10cm;

11
global/_common.scss
View file

@ -68,13 +68,18 @@
} }
} }
.float_left { .overflow {
overflow: auto;
}
.float_space_left {
float: left; float: left;
margin-right: $space_3; margin-right: $space_3;
} }
.overflow { .float_half_size {
overflow: auto; float: left;
width: 50%;
} }
.x_long { .x_long {

5
gulpfile.js
View file

@ -13,10 +13,7 @@ gulp.task('sass', () =>
sass('./*.scss', {sourcemap: true}) sass('./*.scss', {sourcemap: true})
// .on('error', sass.logError) // .on('error', sass.logError)
.pipe(plumber(errorReport("sass error"))) .pipe(plumber(errorReport("sass error")))
.pipe(sourcemaps.write('./', { .pipe(sourcemaps.write('./'))
includeContent: false,
sourceRoot: 'source'
}))
.pipe(gulp.dest('./')) .pipe(gulp.dest('./'))
.pipe(livereload()) .pipe(livereload())
); );

2
modules/navigation/_nav_module.scss
View file

@ -19,7 +19,7 @@ nav {
} }
li { li {
@extend .float_left; @extend .float_space_left;
margin-right: $basic_space; margin-right: $basic_space;
margin-bottom: 0; margin-bottom: 0;