Doqs — dev

Doqs is a stylesheet and layout design that mimic MDN Web Docs' 3-column layout. Doqs works well both in dark and light themes.

Installation

Usage

Doqs use a div-based flex column layout to organise its contents, there are 5 main divs that makes up Doqs:

doc-container - The main div that wraps around the whole layout.
doc-column - Content columns, it is recommended to have three of them in a Doqs layout but you can add one more.
doc-main - The main content column, this div should be placed second right after doc-toc.
doc-toc - The Table Of Contents column, this div is placed first inside doc-container.
doc-links - The "related links" column, this div is placed last inside doc-container.

Doqs also have a table class you can use to style a table, which is:

doc-properties - Used to style a "properties" table, similar to an infobox but more MDN-y.

A standard Doq page should look like this:

<div id="doc-container"><div class="doc-column doc-toc">
__FORCETOC__
__TOC__
</div><div class="doc-column doc-main">
== "Main" title ==
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%" | ''Unknown''
|-
| style="width: fit-content" | '''Code'''
| style="width: 100%" |  [[Specia:Diff/183342]]
|-
| style="width: fit-content" | '''Example(s)'''
| style="width: 100%" | This page
|}

== Second heading ==
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.

== Third heading ==
* 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">
;Related topics
:*<code>[[#|lorem]]</code>
:*<code>[[#|ipsum]]</code>
:*<code>[[#|dolor]]</code>
:*<code>[[#|lorem]]</code>
<div class="mw-collapsible mw-collapsed">
;Elements
<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">
;:Sub-elements
<div class="mw-collapsible-content">
:::*<code>lorem</code>
:::*<code>ipsum</code>
:::*<code>dolor</code>
:::*<code>lorem</code></div></div></div></div></div></div>

It is recommended to tinker and experiment with the Doq stylesheet and div placements, although the original TOC-Content-Link order is made to ensure semantics is covered.

Appearance

Text above can be found here (edit)