pr0gramm.css

Ein Stylesheet für pr0gramm-esque Seiten.

Hat bis auf das Aussehen nichts mit dem pr0gramm.min.css zu tun, das auf pr0gramm verwendet wird.

Zuerst ein paar Schmuser.

Verwendung / Installation

npm install pr0gramm.css
# CSS liegt in node_modules/pr0gramm.css/pr0gramm.min.css
# import "pr0gramm.css"; // bei einem CSS-in-JS-Bundler (z. B. create-react-app)

oder <link rel="stylesheet" href="//unpkg.com/pr0gramm.css@^1/pr0gramm.min.css">

Standard-Styles für Controls

Tolle Radio-Buttons

Hier ist noch ein Range-Slider:

Hier klicken zum Ausklappen

Wer das liest ist doof. Hihi

Code Anzeigen

<textarea placeholder="Kommentar schreiben…"></textarea>

<input type="text" placeholder="Eine tolle Textbox">

<button>Ein Button<button>
<button class="secondary">Abbrechen<button>
<button disabled>Deaktiviert<button>

<div>
	<label>
		<input type="radio" name="some-readio-button" value="0">
		<!--
			Ja, der span ist nötig. Dafür brauchst du kein for=""
			...und musst keine ID vergeben.
		-->
		<span>Tolle</span>
	</label>
	<label>
		<input type="radio" name="some-readio-button" value="1" checked>
		<span>Radio-Buttons</span>
	</label>
</div>

<!-- Range-Slider: -->
<input type="range">

<!-- details / summary -->
<details>
	<summary>Hier klicken zum Ausklappen</summary>
	<div>Wer das liest ist doof. Hihi</div>
</details>

<button class="large">Krass abspeichern</button>
<a class="button large">Link als Button</a>

Links

Ein Link, eine Aktion, mit Klammern, ein Navigationslink und ein aktiver Navigationslink

Code Anzeigen

<a href="#">Ein Link</a>,
<a href="#" class="action">eine Aktion</a>,
<a href="#" class="action serious">mit Klammern</a>,
ein <a href="#" class="nav-link"> Navigationslink</a> und
ein <a href="#" class="nav-link active">aktiver Navigationslink</a>

<!-- Auch ohne a-Tag mit der link-Klasse: -->
<span class="link">Ein Link</span>

Komponente: Nutzerränge

EinUser IchBinNeuHier Benutzer cha0s Blauschwuchtel froschler Marina Keith Wichtel EdlerSpender KeineAltschwuchtel Seglormeister RundesBalli NutzerBot SystemBot

Mit OP-Tag:
holzmaster

Als Link: Gamb

Code Anzeigen

<span class="user" data-mark="0">EinUser</span>
<span class="user" data-mark="1">IchBinNeuHier</span>
<span class="user" data-mark="2">Benutzer</span>
<span class="user" data-mark="3">cha0s</span>
<span class="user" data-mark="4">Blauschwuchtel</span>
<span class="user" data-mark="5">froschler</span>
<span class="user" data-mark="6">Marina</span>
<span class="user" data-mark="7">Keith</span>
<span class="user" data-mark="8">Wichtel</span>
<span class="user" data-mark="9">EdlerSpender</span>
<span class="user" data-mark="10">KeineAltschwuchtel</span>
<span class="user" data-mark="11">Seglormeister</span>
<span class="user" data-mark="12">RundesBalli</span>
<span class="user" data-mark="13">NutzerBot</span>
<span class="user" data-mark="14">SystemBot</span>

<!-- alternativ kann auch die "pr0gramm-Notation" verwendet werden: -->
<span class="user um3">cha0s</span>

<!-- Mit OP-Tag: -->
<span class="user op" data-mark="2">holzmaster</span>
<!-- Als Link: -->
<a class="user" data-mark="3" href="//pr0gramm.com/user/Gamb">Gamb</a>

Komponente: Tags

gute nudel Falsche Zielgruppe auch mit votes + - und mit Verlinkung mit votes und Verlinkung + -

Code Anzeigen

<span class="tag">gute nudel</span>
<span class="tag">Falsche Zielgruppe</span>

<span class="tag">
	auch mit votes
	<a href="#" class="vote-up">+</a>
	<a href="#" class="vote-down">-</a>
</span>

<a href="#" class="tag">und mit Verlinkung</a>

<span class="tag">
	<a href="#">mit votes und Verlinkung</a>
	<a href="#" class="vote-up">+</a>
	<a href="#" class="vote-down">-</a>
</span>

Komponente: Navbar

Siehe diese Seite

Code Anzeigen

Strg+U

Farbschema Ändern

bewährtes Orange angenehmes Grün Olivgrün des Friedens episches Blau altes Pink

Code Anzeigen

/*
 * 0: bewährtes Orange
 * 1: angenehmes Grün
 * 2: Olivgrün des Friedens
 * 3: episches Blau
 * 4: altes Pink
 */
:root {
	--primary-color: var(--theme-color-primary-0);
	--secondary-color: var(--theme-color-secondary-0);
}

Komponente: Separator

Das hier ist ein ganz toller Text. Vielleicht gibt es hier sogar Controls. Wer weiß! oder Vielleicht möchtest du ja auch das tun, was unter diesem tollen "oder"-Teiler steht.

Code Anzeigen

Inhalt über dem Teiler
<span class="separator">oder</span>
Inhalt unter dem Teiler

Komponente: Plus/Minus

Statische plus/minus:

Interaktiv (mit hover):

Mit a- oder button-Tag und anderer Größe:

Code Anzeigen

<!-- Statische plus/minus -->
<i class="vote plus"></i>
<i class="vote minus"></i>

<!-- Interaktiv (mit hover) -->
<i class="vote plus interactive"></i>
<i class="vote minus interactive"></i>

<!-- Als a- oder button-Tag: -->
<a class="vote plus interactive" href="#gib-blussi" style="width: 50px; height: 50px;"></a>
<button class="vote minus interactive" style="width: 50px; height: 50px;"></button>
<!--
	Du solltest bei Dir natürlich die Größe ordentlich setzen.
	"width" und "height" müssen immer gleich sein,
	sonst kommt es zu merkwürdigen Effekten.
-->

CSS-Variablen

Die aktuelle Primärfarbe (diese hier) und die Linkfarbe (diese hier) sind über CSS-Variablen verfügbar. Dies gilt auch für das richtige Grau und die passenden Schriftarten. element { color: var(--primary-color); /* Primärarbe des aktuellen Themes */ color: var(--secondary-color); /* Linkfarbe */ background-color: var(--pr0gramm-background-color); /* richtiges Grau */ font-family: var(--pr0gramm-font-family); /* passende Schriftart */ }