From 8ec7ce370f017c5ab3dfd8280c6ac5e687816ee2 Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Wed, 23 Aug 2017 11:25:00 +0200 Subject: [PATCH] Renaming --- elements/_grouping.scss | 14 ++++++------ elements/_sections.scss | 6 ++--- example.css | 24 ++++++++++---------- example.html | 6 ++--- global/_config.scss | 2 +- modules/demo/_demo_module.scss | 4 ++-- modules/explanation/_explanation_module.scss | 4 ++-- modules/navigation/_nav_module.scss | 2 +- 8 files changed, 31 insertions(+), 31 deletions(-) diff --git a/elements/_grouping.scss b/elements/_grouping.scss index cbe9550..ae1f035 100644 --- a/elements/_grouping.scss +++ b/elements/_grouping.scss @@ -12,17 +12,17 @@ p { } } -.p__col_line { +.p__column_line { column-rule: $basic_border_width solid $darkest_color; } -.p__col_2, .p__col_3 { +.p__column_2, .p__column_3 { @extend p; } -.p__col_2 { +.p__column_2 { column-count: 2; column-gap: $space_3; } -.p__col_3 { +.p__column_3 { column-count: 3; column-gap: $space_4; } @@ -89,7 +89,7 @@ blockquote { // List dl, ul, ol { - margin: $space_2 0 $basic_space; + margin: $double_space 0 $basic_space; } ul, ol { @@ -156,7 +156,7 @@ ul { // Embedded figure { - margin: $space_2 $basic_indent; + margin: $double_space $basic_indent; } figcaption { @@ -177,7 +177,7 @@ div { } .box__info { - padding: $space_2 $basic_indent; + padding: $double_space $basic_indent; border-right: $basic_space solid rgba($echo_color, .6); background-color: rgba($echo_color, .1) !important; } diff --git a/elements/_sections.scss b/elements/_sections.scss index 4ea1354..ab04a89 100644 --- a/elements/_sections.scss +++ b/elements/_sections.scss @@ -121,19 +121,19 @@ h2 { h3 { @extend %head_3; - margin: $space_2 0 $space_2; + margin: $double_space 0 $double_space; text-transform: uppercase; } h4 { @extend %head_3; - margin: $space_2 0 $space_2; + margin: $double_space 0 $double_space; text-transform: none; } h5 { @extend %head_4; - margin: $space_2 0 $basic_space; + margin: $double_space 0 $basic_space; text-transform: none; } diff --git a/example.css b/example.css index 9c293da..e542a19 100644 --- a/example.css +++ b/example.css @@ -180,7 +180,7 @@ textarea:not([disabled]):focus { color: white; border-color: transparent; } -.span__solo, h6, p, .p__col_2, .p__col_3, caption, li, dt, dd, figcaption, th, td, legend, label { +.span__solo, h6, p, .p__column_2, .p__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; } @@ -190,7 +190,7 @@ pre, code, .code__solo { font-size: 1em; line-height: 1.5; } -.print_body *[class^="din"] p, .print_body *[class^="din"] .p__col_2, .print_body *[class^="din"] .p__col_3, .print_body *[class^="din"] caption { +.print_body *[class^="din"] p, .print_body *[class^="din"] .p__column_2, .print_body *[class^="din"] .p__column_3, .print_body *[class^="din"] caption { font-family: Courier New, monospace; font-size: 1em; line-height: 1.5; } @@ -303,21 +303,21 @@ h6 { text-transform: none; font-weight: bold; } -p, .p__col_2, .p__col_3, caption { +p, .p__column_2, .p__column_3, caption { margin: 8px 0; } - p code, .p__col_2 code, .p__col_3 code, caption code { + p code, .p__column_2 code, .p__column_3 code, caption code { padding: 1px 4px; font-size: 1em; line-height: 1; } -.p__col_line { +.p__column_line { column-rule: 1px solid black; } -.p__col_2 { +.p__column_2 { column-count: 2; column-gap: 32px; } -.p__col_3 { +.p__column_3 { column-count: 3; column-gap: 64px; } @@ -346,9 +346,9 @@ hr, .hr__hidden, .hr__dotted { blockquote { margin: 8px 2em; } -.quote__mark p::before, .quote__mark .p__col_2::before, .quote__mark .p__col_3::before, .quote__mark caption::before { +.quote__mark p::before, .quote__mark .p__column_2::before, .quote__mark .p__column_3::before, .quote__mark caption::before { content: "\201E \0020"; } -.quote__mark p::after, .quote__mark .p__col_2::after, .quote__mark .p__col_3::after, .quote__mark caption::after { +.quote__mark p::after, .quote__mark .p__column_2::after, .quote__mark .p__column_3::after, .quote__mark caption::after { content: "\201C \0020"; } .quote__mark .quote__source::before, .quote__mark .quote__source::after { content: ""; } @@ -775,7 +775,7 @@ nav li { font-size: 24px; line-height: 1.4em; font-weight: normal; } - .card_body p, .card_body .p__col_2, .card_body .p__col_3, .card_body caption { + .card_body p, .card_body .p__column_2, .card_body .p__column_3, .card_body caption { margin-top: 0; margin-bottom: 16px; font-size: 12px; @@ -950,7 +950,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__col_2, .print_body *[class^="din"] .page_foot .p__col_3, .print_body *[class^="din"] .page_foot caption { + .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 { flex: 1 0 auto; margin: 0; font-size: 8pt; @@ -961,7 +961,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__col_2:first-child, .print_body *[class^="din"] .page_foot .p__col_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 .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 { text-align: left; } .print_body *[class^="din"] .page_content { margin-top: 10cm; diff --git a/example.html b/example.html index ff7ecc6..774cc7a 100644 --- a/example.html +++ b/example.html @@ -83,9 +83,9 @@
hr.hr__dotted
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__col_2
-

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

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

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:

diff --git a/global/_config.scss b/global/_config.scss index 09ca3d8..f22266c 100644 --- a/global/_config.scss +++ b/global/_config.scss @@ -128,7 +128,7 @@ $width_large: 48%; $basic_space: $default_space; $half_space: $basic_space / 2; -$space_2: $basic_space * 2; +$double_space: $basic_space * 2; $space_3: $basic_space * 4; $space_4: $basic_space * 8; $space_5: $basic_space * 16; diff --git a/modules/demo/_demo_module.scss b/modules/demo/_demo_module.scss index 036054b..7ef6617 100644 --- a/modules/demo/_demo_module.scss +++ b/modules/demo/_demo_module.scss @@ -7,7 +7,7 @@ } .demo__header { - padding: $space_2; + padding: $double_space; nav { @@ -59,7 +59,7 @@ .demo__footer { width: 100%; // height: 128px; - padding: $space_2 0; + padding: $double_space 0; background-color: $dark_color; color: $bright_color; diff --git a/modules/explanation/_explanation_module.scss b/modules/explanation/_explanation_module.scss index e6412dd..a2a016f 100644 --- a/modules/explanation/_explanation_module.scss +++ b/modules/explanation/_explanation_module.scss @@ -83,8 +83,8 @@ } .exp_help_btn { display: table; - right: $space_2; - bottom: $space_2; + right: $double_space; + bottom: $double_space; background-color: rgba($darkest_color, .4); &:hover { background-color: $brightest_color; diff --git a/modules/navigation/_nav_module.scss b/modules/navigation/_nav_module.scss index 0ee17ad..5d8267d 100644 --- a/modules/navigation/_nav_module.scss +++ b/modules/navigation/_nav_module.scss @@ -120,7 +120,7 @@ nav { // display: table; // width: 3em; right: 0; - bottom: $space_2; + bottom: $double_space; ul { margin: $basic_space 0;