diff --git a/code/functions.js b/code/functions.js index 5b53ae6..b1c0a3d 100644 --- a/code/functions.js +++ b/code/functions.js @@ -1,6 +1,6 @@ function setup() { if($('#js_tph').length && full_view_hover) { - // $('body').prepend("
"); + // $('body').prepend("
"); $('#js_tph').addClass("hover_full_view_change"); } } diff --git a/demo-index.html b/demo-index.html index 0e01ada..7badeca 100644 --- a/demo-index.html +++ b/demo-index.html @@ -17,7 +17,7 @@ -
+
hr.center_50
hr.hr__dotted.center_25
-

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.p__column_2
-

Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.

p.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.
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.

+

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.block__column_2
+

Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.

p.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.
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.

Es gibt die Möglichkeit vorformatierten Text darzustellen <pre>.

Dadurch
	bleiben
		Einrückungen
			durch
				Tabulatoren
					erhalten.

Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <ul> und geordnete Listen <ol> sowie Beschreibungslisten <dl>. Die beiden ersten Varianten beinhalten das Listenelement <li>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <dt> und Beschreibung <dd>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:

@@ -174,7 +174,7 @@
table.width_full>tbody>tr>td*2^tr>td[colspan=2]
- +
@@ -186,7 +186,7 @@
Eine
table>tbody>tr>td*2^tr>td[colspan=2]
- +
@@ -348,11 +348,11 @@

Interaktive Elemente können durch das Attribut <readonly> nur lesbar gemacht werden oder mittels <disabled> gänzlich deaktiviert werden.

Das Element <label> ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.

-
-
+
+
-
+
@@ -449,7 +449,7 @@ 
nav>ul>(li>a.a__button{Punkt $})*4
 nav>ul>(li>a.a__button_border{Stufe $})*4
-
-
+
diff --git a/elements/_grouping.scss b/elements/_grouping.scss index e096a75..f40b6c2 100644 --- a/elements/_grouping.scss +++ b/elements/_grouping.scss @@ -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 { @@ -153,7 +138,7 @@ ul { .list__horizontal { overflow: auto; li { - @extend .float_left; + @extend .float_space_left; } } @@ -199,12 +184,31 @@ div { // width: 100%; } + // Inline .box__inline_left { - @extend .float_left; + @extend .float_space_left; // 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 .box__space { position: relative; @@ -245,22 +249,15 @@ div { background-color: rgba($darkest_color,.1); } + // Data .box__file_tile { - @extend .float_left; + @extend .float_space_left; } + // Flex -.box__column_old { - overflow: auto; - - .column_old { - float: left; - width: 50%; - } -} - -.box__column { +.flex__column_wrap { @extend .flex; .column { diff --git a/elements/_sections.scss b/elements/_sections.scss index ab04a89..8e49649 100644 --- a/elements/_sections.scss +++ b/elements/_sections.scss @@ -25,8 +25,10 @@ body { ::after { box-sizing: inherit; } + &:hover { - .trigger__hover { + + .layer__hover { background-color: transparent; } } @@ -42,6 +44,9 @@ section { .sec__main_center { width: $basic_width; + margin: 0 auto; + padding-top: $space_3; + @media screen and (orientation: landscape) { @media (min-width: $screen_small) { width: $width_small; @@ -53,16 +58,16 @@ section { width: $width_large; } } + @media screen and (orientation: portrait) { @media (min-width: $screen_small) { width: $width_small; } } - margin: 0 auto; - padding-top: $space_3; } aside { + &.right + section { margin-right: calc(#{$basic_aside_width} + #{$basic_space}); } @@ -79,12 +84,15 @@ nav { aside { width: $basic_aside_width; + &.left { float: left; } + &.right { float: right; } + *:first-child { margin-top: 0; } diff --git a/example.css b/example.css index 5933e47..df6ef13 100644 --- a/example.css +++ b/example.css @@ -107,12 +107,16 @@ textarea:not([disabled]):focus { .clear::before, .clear::after { 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; margin-right: 32px; } -.overflow, .nav__horizontal ul, .nav__center_old ul, .header__page nav ul { - overflow: auto; } +.float_half_size { + float: left; + width: 50%; } .x_long { overflow-x: scroll; } @@ -161,7 +165,7 @@ textarea:not([disabled]):focus { transition: background-color .2s ease-in-out; 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; } .flex__wrap { @@ -171,7 +175,7 @@ textarea:not([disabled]):focus { flex-direction: column; 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__child_one { @@ -193,7 +197,7 @@ textarea:not([disabled]):focus { color: white; 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-size: 1em; line-height: 1.5; } @@ -203,7 +207,7 @@ pre, code, .code__solo, input[type="color"], input[type="date"], input[type="dat font-size: 1em; 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-size: 1em; line-height: 1.5; } @@ -255,7 +259,7 @@ body { body ::before, body ::after { box-sizing: inherit; } - body:hover .trigger__hover { + body:hover .layer__hover { background-color: transparent; } .sec__main_center, .demo__intro { @@ -316,24 +320,13 @@ h6 { text-transform: none; font-weight: bold; } -p, .p__column_2, .p__column_3, caption { +p, .block__column_2, .block__column_3, caption { 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; font-size: 1em; 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 { margin: 32px auto; border-width: 1px 0 0; @@ -359,9 +352,9 @@ hr, .hr__hidden, .hr__dotted { blockquote { 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"; } -.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"; } .quote__mark .quote__source::before, .quote__mark .quote__source::after { content: ""; } @@ -415,6 +408,17 @@ figure { .box__main_indent { 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 { position: relative; width: 100%; } @@ -448,13 +452,7 @@ figure { background: url("data:image/svg+xml;utf8,") no-repeat; background-color: rgba(0, 0, 0, 0.1); } -.box__column_old { - overflow: auto; } - .box__column_old .column_old { - float: left; - width: 50%; } - -.box__column .column { +.flex__column_wrap .column { flex-grow: 1; } a { @@ -882,7 +880,7 @@ nav li { font-size: 24px; line-height: 1.4em; 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-bottom: 16px; font-size: 12px; @@ -994,7 +992,7 @@ nav li { -o-transition: height 0.5s ease; transition: height 0.5s ease; } -.print_body *[class^="din"] { +.print_body [class^="din"] { background-color: white; } .print_body { @@ -1057,7 +1055,7 @@ nav li { flex-direction: row; } .print_body *[class^="din"] .page_foot *:last-child { 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; margin: 0; font-size: 8pt; @@ -1068,7 +1066,7 @@ nav li { font-size: 20pt; line-height: 1; 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; } .print_body *[class^="din"] .page_content { margin-top: 10cm; diff --git a/global/_common.scss b/global/_common.scss index 7368e63..6415f2c 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -68,13 +68,18 @@ } } -.float_left { +.overflow { + overflow: auto; +} + +.float_space_left { float: left; margin-right: $space_3; } -.overflow { - overflow: auto; +.float_half_size { + float: left; + width: 50%; } .x_long { diff --git a/gulpfile.js b/gulpfile.js index 6e07165..da8e356 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,10 +13,7 @@ gulp.task('sass', () => sass('./*.scss', {sourcemap: true}) // .on('error', sass.logError) .pipe(plumber(errorReport("sass error"))) -.pipe(sourcemaps.write('./', { - includeContent: false, - sourceRoot: 'source' -})) +.pipe(sourcemaps.write('./')) .pipe(gulp.dest('./')) .pipe(livereload()) ); diff --git a/modules/navigation/_nav_module.scss b/modules/navigation/_nav_module.scss index 1236da5..a8c8fa7 100644 --- a/modules/navigation/_nav_module.scss +++ b/modules/navigation/_nav_module.scss @@ -19,7 +19,7 @@ nav { } li { - @extend .float_left; + @extend .float_space_left; margin-right: $basic_space; margin-bottom: 0;
Mit