Doqs/de

Doqs ist ein Stylesheet und ein Layout-Design, das das 3-Spalten-Layout von MDN Web Docs nachahmt. Doqs funktioniert sowohl in dunklen als auch in hellen Aussehen gut.

Installation[]

Verwendung[]

Doqs verwendet ein div-basiertes Flex-Spalten-Layout, um seinen Inhalt zu organisieren. Es gibt 5 Haupt-divs, aus denen Doqs besteht:

doc-container - Das Haupt-div, welches das gesamte Layout umschließt.
doc-column - Es wird empfohlen, drei Inhaltsspalten in einem Doqs-Layout zu haben, aber es können auf weitere hinzufügt werden.
doc-main - Die Hauptinhaltsspalte, dessen div sollte an zweiter Stelle direkt nach doc-toc platziert werden.
doc-toc - Die Spalte „Inhaltsverzeichnis“ wird als erstes in doc-container platziert.
doc-links - Die Spalte „Verwandte Links“, dessen div als letztes innerhalb des Doc-Containers platziert wird.

Doqs haben auch eine Tabellenklasse, die verwendet werden kann, um eine Tabelle damit zu gestalten:

doc-properties - Wird verwendet, um eine „Eigenschaften“-Tabelle zu gestalten, ähnlich einer Infobox, aber mehr MDN-artig.

Eine Standard Doq-Seite sollte folgendermaßen aussehen:

<div id="doc-container"><div class="doc-column doc-toc">
__FORCETOC__
__TOC__
</div><div class="doc-column doc-main">
== „Haupt“-Titel ==
Lorem Ipsum

{| class="doc-properties" style="width: 100%;"
|+ '''MDNDoc'''
|-
! style="width: 100%; text-align: center;" colspan="2" | Information
|-
| style="width: fit-content" | '''Typ'''
| style="width: 100%" | CSS
|-
| style="width: fit-content" | '''Freigabe&shy;status'''
| style="width: 100%" | Stabil
|-
| style="width: fit-content" | '''Beschrei&shy;bung'''
| style="width: 100%" | Layout template, mimicking MDN Web Doc's.
|-
| style="width: fit-content" | '''Autor(en)'''
| style="width: 100%" | [[User:Headquarter8302|Headquarter8302]]
|-
| style="width: fit-content" | '''Sonstige Zuordnung'''
| style="width: 100%" | [https://developer.mozilla.org MDN Web Docs]
|-
| style="width: fit-content" | '''Nutzung'''
| style="width: 100%" | Seitenweit
|-
| style="width: fit-content" | '''Aktua&shy;li&shy;siert'''
| style="width: 100%" | ''Unbekannt''
|-
| style="width: fit-content" | '''Code'''
| style="width: 100%" |  [[Specia:Diff/183342]]
|-
| style="width: fit-content" | '''Beispiel(e)'''
| style="width: 100%" | Diese Seite
|}

== Zweite Überschrift ==
Vivamus <code>magna</code> justo, lacinia <code>eget</code> consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat.

== Dritte Überschrift ==
* Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
* Nulla porttitor accumsan tincidunt.
</div><div class="doc-column doc-links">
;Bezogene Themen
:*<code>[[#|lorem]]</code>
:*<code>[[#|ipsum]]</code>
:*<code>[[#|dolor]]</code>
:*<code>[[#|lorem]]</code>
<div class="mw-collapsible mw-collapsed">
;Elemente
<div class="mw-collapsible-content">
::*<code>lorem</code>
::*<code>ipsum</code>
::*<code>dolor</code>
::*<code>lorem</code>
::*<code>ipsum</code>
::*<code>dolor</code>
<div class="mw-collapsible mw-collapsed">
;:Unterelemente
<div class="mw-collapsible-content">
:::*<code>lorem</code>
:::*<code>ipsum</code>
:::*<code>dolor</code>
:::*<code>lorem</code></div></div></div></div></div></div>

Es wird empfohlen, mit dem Doq-Stylesheet und der Platzierung von divs zu experimentieren, obwohl die ursprüngliche TOC-Content-Link-Reihenfolge hergestellt wird, um sicherzustellen, dass die Semantik abgedeckt ist.

Doqs/de

Installation[]

Verwendung[]

Aussehen[]