diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk index 566d527..bb0a2cc 100644 --- a/source/screens/demo/basics.njk +++ b/source/screens/demo/basics.njk @@ -203,24 +203,20 @@ tags:
figure>figcaption+{element}
-

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

Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch <div>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.

-
+

Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.

-
- div.div_info>p -

Textebene

{# // a // em // strong // small // s // cite // q // dfn // abbr // ruby // rb // rt // rtc // rp // data // time // code // var // samp // kbd // sub // sup // i // b // u // mark // bdi // bdo // span // br // wbr // -- Edits -- // ins // del #}

Verweise

-

Ein wesentlicher Bestandteil von Hypertext sind 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 Verweise @@ -594,7 +590,8 @@ tags: Tabelle - + + mit @@ -602,27 +599,117 @@ tags: - + Kopf- und + Fußzeile - Fußzeile + Fußzeile A B

- table.width_full.table_fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2 + table.width_full.table_fix>caption+thead>tr>th*3^^tbody>(tr>td*3)*3^^tfoot>tr>td*3
-

Viele weitere Formate sind möglich.

+
+

Viele weitere Formate sind möglich. Hier nur einige typische Beispiele:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KopfzeileAB
VorspalteEine
1erweiterte
2Tabelle
+
+ table.width_full.table_stripe.table_free>tr>td*3 +
+ + + + + + + + + + + + + + + + + + + + + +
Tabelle
ohneRahmen
jedochmit
Streifen
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
BezeichnungMengeWert
Alpha18990
Bravo101
Charlie11
Summe9001

Formulare

diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk index 795e41f..4e12ad5 100644 --- a/source/screens/demo/components.njk +++ b/source/screens/demo/components.njk @@ -46,9 +46,8 @@ tags:

Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (www.w3.org/TR/2017/REC-html52-20171214/index.html#contents) verwendet.

Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.

- 
article>h1+p{Elemente:}+pre+h4{Varianten}
-

Bereiche

+

Bereiche

Elemente:

// body
// article
// section
// nav
// aside
// h1-h6
// header
// footer

<body>

@@ -63,125 +62,6 @@ tags:

<h3>

<h4>

-
-

Gruppierung

-

Elemente:

- 
// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div
-

<p>

-

Varianten

- 
p.txt_center
- 
p.txt_right
- 
p.column_2
- 
p.column_3.column_line
-

<hr>

-

Varianten

- 
hr.hr_hidden
- 
hr.hr_dotted
- 
hr.space_even_half
- 
hr.hr_dotted.space_even_fourth
-

<blockquote>

- 
blockquote>p+p.quote_source
-

<figure>

- 
figure>figcaption+{element}
-

<div>

- 
div.div_info>p
-

Varianten

-
-
-

Tabellen

-

Elemente:

- 
// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th
-

<table>

-

Varianten

- 
table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KopfzeileAB
VorspalteEine
1erweiterte
2Tabelle
- 
table.width_full.table_stripe.table_fix.table_free>tr>td*3
- - - - - - - - - - - - - - - - - - - - - -
Tabelle
ohneRahmen
jedochmit
Streifen
- 
table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
BezeichnungMengeWert
Alpha18990
Bravo101
Charlie11
Summe9001
-
{% endblock %} diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk index 15c24b1..61ab554 100755 --- a/source/screens/demo/examples/ui/drag.njk +++ b/source/screens/demo/examples/ui/drag.njk @@ -147,6 +147,6 @@ tags: // Create a new NewDiv instance const newDiv = new NewDiv(100, 100, 800, 600, '#000'); newDiv.createDiv(); - newDiv.appendToFrame(space); + newDiv.appendToFrame(document.getElementById('space')); {% endblock %} \ No newline at end of file diff --git a/source/templates/hippie/partials/_body_nav.njk b/source/templates/hippie/partials/_body_nav.njk index f38e940..7d500b3 100644 --- a/source/templates/hippie/partials/_body_nav.njk +++ b/source/templates/hippie/partials/_body_nav.njk @@ -10,10 +10,9 @@
  • {# #} - {# +
    -     #} - +