Offizielle Demo von demokratie.today Offizielle Demo von demokratie.today
Consul-Demo
von demokratie.today
Inhalt
Info
Beteiligung

Quellcode

Dies ist eine Übersichtsseite, die den Umgang mit Quellcode in Rahmen der Beteiligungsprojekte umfassend erläutert.
Startseite
/
Bibliothek
/
Quellcode
Meine Seite: Quellcode

Anwendung

Installation der Erweiterung

  • Linke Leiste unter Erweiterungen
  • Suche und installiere: Prettier - Code formatter

Tipps & Tricks VS Code

  • Neue Datei: STRG + N
  • Quellcode optimieren: ALT + Umschalt + F
  • Suchen: STRG + F
  • Suchen & Ersetzen: STRG + H
  • Mehr Platz für den Editor: Klick auf Symbol in linker Seitenleiste

Code Ressourcen

demokratie.today Bibliothek

Andere Ressourcen

Tipps & Tricks Quellcode

1. Styles

  • Abstand zu anderen Blöcken
    <div style="margin: 25px;">Fügt überall 25 Pixel Abstand hinzu</div>
    <div style="margin-top: 25px;">Fügt oben 25 Pixel Abstand hinzu</div>
    <div style="margin-bottom: 25px;">Fügt unten 25 Pixel Abstand hinzu</div>
    <div style="margin-left: 25px;">Fügt links 25 Pixel Abstand hinzu</div>
    <div style="margin-right: 25px;">Fügt links 25 Pixel Abstand hinzu</div>
2. Klassen (https://get.foundation/sites/docs/button.html)

<a href="about.html" class="button tiny">Sehr kleiner Button</a>
<a href="about.html" class="button small">Kleiner Button</a>
<a href="about.html" class="button">Normaler Button</a>
<a href="about.html" class="button large">Großer Button</a>
<a href="about.html" class="button expanded">Sehr großer Button</a>
<a href="about.html" class="button success">Grüner Button</a>
<a href="about.html" class="button alert">Roter Button</a>
<a href="about.html" class="button warning">Gelber Button</a>

3. Klassen und Styles kombiniert

<a href="about.html" class="button" style="background-color:aqua; color:black">Individueller Button</a>

4. Mobile Optimierung (https://get.foundation/sites/docs/visibility.html)

<p class="show-for-medium">Zeigt den Textblock auf normalen und großen Bildschirmen an, NICHT aber auf Mobilgeräten.</p>
<p class="show-for-medium-only">Zeigt den Textblock NUR auf normalen Bildschirmen an.</p>
<p class="show-for-small-only">Zeigt den Textblock NUR für mobile Bildschirme an.</p>
<p class="hide-for-medium">Zeigt den Textblock NICHT auf normalen und großen Bildschirmen an, aber auf Mobilgeräten.</p>
<p class="hide-for-small-only">Zeigt den Textblock NICHT für mobile Bildschirme an.</p>

5. Unterschiedliche Größen der Inhaltsblöcke (https://get.foundation/sites/docs/grid.html)

  • Es stehen immer 12 Spalten zur Verfügung
  • Es wird immer versucht die Spalten voll zu bekommen
  • Mobile first: Klasse "columns small" ist die wichtigste Klasse, alle andere erben ihre Einstellungen

<div class="row">
    <div class="columns small-2">2</div>
    <div class="columns small-10">10</div>
</div>
<div class="row">
    <div class="columns medium-2">2</div>
    <div class="columns medium-10">10</div>
</div>
<div class="row">
    <div class="columns large-1">1</div>
    <div class="columns large-11">11</div>
</div>
<div class="row">
    <div class="columns small-12 medium-6 large-3">Mobile: Vollbild; Ab mittelgroße Bildschirme: linke Hälfte; Ab große Bildschirme: 3 Spalten links</div>
    <div class="columns medium-6 large-9">Mobile: Neue Zeile; Ab mittelgroße Bildschirme: rechte Hälfte; Ab große Bildschirme: 9 Spalten rechts</div>
</div>

Tipps & Tricks Consul Editor

  • Kopieren von Inhalten aus Word immer mit: STRG + Umschalt + V
  • Doppelklick auf Bilder lässt Bilder einfach ersetzen
  • Bilder im Image-Slider lassen sich nur per URL ersetzen
  • Bilder nur als PNG und JPEG, SVG ist nicht unterstützt und bringt den Editor zum Absturz
  • Bei Bildern immer nur die Breite definieren (860px), die Höhe immer leer lassen bzw. Wert rauslöschen
  • Interne Links immer als relative Links einfügen, nicht als absolute Links: