From e7ca01dd401036c2853a766a3e07c38ebc5b7a9b Mon Sep 17 00:00:00 2001 From: Stephan Hagedorn Date: Thu, 17 Aug 2017 19:47:06 +0200 Subject: [PATCH] Beispiel-Datei strukturiert --- .gitignore | 18 +- README.md | 6 + _config.scss | 6 +- _hippie.scss | 12 +- basic/_common.scss | 5 +- basic/_sections.scss | 5 +- basic/_tables.scss | 73 +- example.css | 108 +- example.html | 102 +- modules/tables/_tables_module.scss | 70 + package-lock.json | 4778 ++++++++++++++++++++++++++++ package.json | 10 +- 12 files changed, 5023 insertions(+), 170 deletions(-) create mode 100644 modules/tables/_tables_module.scss create mode 100644 package-lock.json diff --git a/.gitignore b/.gitignore index 6c7d6d4..0b9d427 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ # https://gist.github.com/octocat/9257657 +################### +################### # Compiled source # ################### @@ -41,6 +43,8 @@ Thumbs.db # https://github.com/github/gitignore +################### +################### # https://github.com/github/gitignore/blob/master/Global/Windows.gitignore ################### @@ -173,13 +177,13 @@ typings/ # dotenv environment variables file .env +# https://github.com/github/gitignore/blob/master/Sass.gitignore +################### +.sass-cache/ +*.css.map + # https://interaktionsweise.de/ - -# ========================= -# Other files -# ========================= - -.sass-cache/ -*.css.map +################### +################### diff --git a/README.md b/README.md index 896c34d..735778a 100644 --- a/README.md +++ b/README.md @@ -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/:./`. Load the screen.css file within the head section of your HTML document. `` + +## LOGIC + +Klassennamen enthalten Objektnamen und Funktionen +Sie sind mit `-` und `_` unterteilt. +Der Bindestrich `-` trennt Objektnamen von Funktionen. Der Unterstrich `_` wiederum unterteilt Funktionsbezeichnungen. diff --git a/_config.scss b/_config.scss index 6fd0fa1..66d399b 100644 --- a/_config.scss +++ b/_config.scss @@ -4,7 +4,7 @@ // TEXT // ------------------------------------------------------------------------------ -$default_font_size: 15px !default; +$default_font_size: 16px !default; $basic_size: $default_font_size; $default_print_font_size: 10pt !default; @@ -79,6 +79,9 @@ $basic_border_color: $black; // LAYOUT // ------------------------------------------------------------------------------ +$default_box_sizing: box-sizing !default; +$box_sizing: $default_box_sizing; + $basic_width: 96%; $width_2: 80%; $width_3: 60%; @@ -333,4 +336,3 @@ $webkit_ms_support: -webkit- -ms- ''; // $iv-shadow: 2; // inset vertical shaddow settings // $is-shadow: 2; // inset spread shaddow settings // $iblur: 3; // inset blur settings - diff --git a/_hippie.scss b/_hippie.scss index 8aab431..fc1ff2a 100644 --- a/_hippie.scss +++ b/_hippie.scss @@ -23,6 +23,7 @@ // Use a file outside of hippie i.e. other/normalize.css // ----------------------------------------------------------------------------- @import "other/normalize.css"; +// @import "other/YOUR-FILES.css"; @@ -48,8 +49,7 @@ // ----------------------------------------------------------------------------- @import "modules/vendor"; //@import modules/all deprecated because of the new vendor mixin -//@import modules/*/* needs sass-glob -// ADD HERE // @import "modules/example"; +// @import "modules/YOUR-MODULE/YOUR-FILES"; // Basic styles - this is the core of definitions // Individual styles can be added her @@ -64,18 +64,22 @@ @import "basic/embedded"; @import "basic/tables"; @import "basic/interactive"; -// ADD HERE // @import "{name}/example"; +// @import "YOU-NAME-IT"; // Individual Modules and variables // in dependency to other styles +// Additional modules can be defined here // ----------------------------------------------------------------------------- +@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"; +// Not yet sorted @import "basic/new"; -// NOTE // No css rules allowed in here \ No newline at end of file +// NOTE // No css rules allowed in here diff --git a/basic/_common.scss b/basic/_common.scss index f8a2168..92901ad 100644 --- a/basic/_common.scss +++ b/basic/_common.scss @@ -48,7 +48,7 @@ *, ::before, ::after { - box-sizing: border-box; + box-sizing: $box_sizing; } } @@ -82,8 +82,7 @@ background-color: transparentize($alpha_color, .5); } -.viewport-hover-body { - @extend %full_viewport; +.hover_background_change { background-color: darken($basic_background_color, 20%); transition: background-color .2s ease-in-out; &:hover { diff --git a/basic/_sections.scss b/basic/_sections.scss index 2143634..6cbf3b2 100644 --- a/basic/_sections.scss +++ b/basic/_sections.scss @@ -12,13 +12,13 @@ html { // ----------------------------------------------------------------------------- body { - box-sizing: border-box; + box-sizing: $box_sizing; font-family: $primary_font_family; font-size: $basic_size; line-height: $basic_line; color: $basic_font_color; background-color: $basic_background_color; - + *, ::before, ::after { @@ -108,4 +108,3 @@ h6 { text-transform: none; font-weight: bold; } - diff --git a/basic/_tables.scss b/basic/_tables.scss index 9574138..602c938 100644 --- a/basic/_tables.scss +++ b/basic/_tables.scss @@ -43,7 +43,7 @@ tfoot { .table_blank { border: $basic_border_width solid transparent; - + th, td { border: $basic_border_width solid transparent; } @@ -74,74 +74,3 @@ caption { border: $basic_border_width dotted $basic_border_color; 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; - } - } -} diff --git a/example.css b/example.css index 79b0d64..5a15c95 100644 --- a/example.css +++ b/example.css @@ -59,7 +59,7 @@ margin-right: 0; margin-left: 0; } -.viewport-full-body, .viewport-hover-body { +.viewport-full-body { position: absolute; top: 0; left: 0; @@ -78,10 +78,10 @@ .viewport-full-body { background-color: rgba(250, 216, 3, 0.5); } -.viewport-hover-body { +.hover_background_change { background-color: #4d4d4d; transition: background-color .2s ease-in-out; } - .viewport-hover-body:hover { + .hover_background_change:hover { background-color: gray; } .space_box { @@ -160,7 +160,7 @@ h5 { .span_solo { color: black; } -.table_link .cell_text .shorten { +.table-link_list .cell_text .shorten { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; } @@ -178,9 +178,9 @@ html { height: 100%; } body { - box-sizing: border-box; + box-sizing: box-sizing; font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans; - font-size: 15px; + font-size: 16px; line-height: 1; color: black; background-color: gray; } @@ -428,46 +428,6 @@ caption { border: 1px dotted black; 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 { margin: 8px 0; border: 1px solid black; } @@ -490,6 +450,46 @@ legend { background-color: black; 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 { position: absolute; top: 0; @@ -617,19 +617,19 @@ legend { .exp_marker_pop { position: absolute; - top: -11.25px; - right: -7.5px; - width: 15px; - height: 15px; + top: -12px; + right: -8px; + width: 16px; + height: 16px; border: 1px solid white; - border-radius: 15px; + border-radius: 16px; color: white; background-color: black; } .exp_overlay_btn { position: fixed; - width: 60px; - height: 60px; + width: 64px; + height: 64px; cursor: pointer; } .exp_help_btn { @@ -804,4 +804,6 @@ legend { .label_1, .label_2, .label_3 { padding: 0 4px; } + + /*# sourceMappingURL=example.css.map */ diff --git a/example.html b/example.html index a561e56..3f0be4e 100644 --- a/example.html +++ b/example.html @@ -14,7 +14,7 @@ - +
?
@@ -122,7 +122,7 @@

Eine sehr klar definierte Gruppierung stellt das Element <main> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.

Textebene

Verweise

-

Ein wesentlicher Bestandteil von Hypertext sind Verweise <a>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. Interne Verweisetable>tbody>tr>td*2^tr>td[colspan=2] können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. Externe Verweise verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.

+

Ein wesentlicher Bestandteil von Hypertext sind Verweise <a>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. Interne Verweisea.link_line können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. Externe Verweise verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.

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. Farbige oder unterstrichene Varianten sind möglich.

Wird der Verweis innerhalb eines <nav> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Auf diese Verwendung wird im Folgenden genauer eingegangen ...

Formatierungen

@@ -292,42 +292,41 @@ - +
+ - - - + + + + + + + + + + - - - + + + - - - - - - - - + + + - + + +
Beschreibung bzw. Zusammenhang der Tabelle
 Ab / Zy Neu / AltKopfzeile1>9000
Fußzeile--
NameURLYYYY-MM-DDAlpha09000
-
Beschreibung
-
NameURLYYYY-MM-DDBravo19001
-
Beschreibung
- 		Charlie09000
-
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
-

Formulare

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. (Vielleicht ist das auch scheiße, hier darauf einzugehen) ...

@@ -369,6 +368,61 @@

Medien

Druck

+ +
+
+

Ende der Einführung

+
+
+

Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.

+
+
+ +
+
+

Einzelene Elemente

+
+
+

Tabellen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Ab / Zy Neu / Alt
NameURLYYYY-MM-DD
+
Beschreibung
+
NameURLYYYY-MM-DD
+
Beschreibung
+
+
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
+ + +
+
+