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
Usage
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 nachdoc-tocplatziert werden.doc-toc- Die Spalte „Inhaltsverzeichnis“ wird als erstes indoc-containerplatziert.doc-links- Die Spalte „Verwandte Links“, dessen div als letztes innerhalb desDoc-Containersplatziert 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" | '''Type'''
| style="width: 100%" | CSS
|-
| style="width: fit-content" | '''Release status'''
| style="width: 100%" | Stable
|-
| style="width: fit-content" | '''Description'''
| style="width: 100%" | Layout template, mimicking MDN Web Doc's.
|-
| style="width: fit-content" | '''Author(s)'''
| style="width: 100%" | [[User:Headquarter8302|Headquarter8302]]
|-
| style="width: fit-content" | '''Other attribution'''
| style="width: 100%" | [https://developer.mozilla.org MDN Web Docs]
|-
| style="width: fit-content" | '''Scope'''
| style="width: 100%" | Site-wide
|-
| style="width: fit-content" | '''Updated'''
| style="width: 100%" | ''Unbekannt''
|-
| style="width: fit-content" | '''Code'''
| style="width: 100%" | [[Specia:Diff/183342]]
|-
| style="width: fit-content" | '''Example(s)'''
| 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.
Aussehen
Helles Aussehen
Dunkles Aussehen