diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid index bb9e6d2..017fcfd 100644 --- a/source/screens/demo/basics.liquid +++ b/source/screens/demo/basics.liquid @@ -9,7 +9,6 @@ tags: {% block title %}Grundlagen{% endblock %} {% block main %} -
Dies ist einfach nur Text.
Weniger wäre nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid new file mode 100644 index 0000000..75c6eeb --- /dev/null +++ b/source/screens/demo/components.liquid @@ -0,0 +1,399 @@ +--- +title: Components +tags: +- demoIndex +--- +{% layout "hippie/page.liquid" %} + +{% block title %}Komponenten{% endblock %} + +{% block main %} +
+
+

Medienformat Abfragen

+
+
+
Umbruch bei 
+
+

Telefone und größer

+

Nur Telefone

+

Nur Schreibtafeln hochkant

+

Schreibtafeln und größer

+

Schreibtafeln im Querformat

+

Schreibtafeln quer und größer

+

Nur Arbeitsplatzrechner

+

Arbeitsplatzrechner und größer

+

Richtige Monitore und größer

+
+
+
+ +
+
+

Übersicht aller Elemente

+

Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (html.spec.whatwg.org/multipage/#toc-semantics) verwendet.

+

Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.

+
+ 
article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}
+
+

Bereiche

+

Elemente:

+ 
// body
// article
// section
// nav
// aside
// h1-h6
// header
// footer
+

<body>

+

Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.

+

<article>

+
Ein Artikel.
+

<section>

+
Ein Bereich.
+

Varianten

+ 
section.sec_main_center
+
+

Ende.

+

Zentrierter Bereich.

+
+ 
section.sec_main_status
+
Status-Bereich
+

<nav>

+ +

<aside>

+

Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit .bside.

+ 
aside.right+div.bside
+
+ +
Hauptbereich
+
+

<h*>

+

Überschrift 1

+

Überschrift 2

+

Überschrift 3

+

Überschrift 4

+
Überschrift 5
+
+
Überschrift 6
+

Mit Absatz innerhalb von <hgroup>.

+
+
+

Überschrift 1 oder 2

+

Mit Absatz innerhalb von <hgroup>.

+
+

<header>

+
Kopfbereich
+ 
header.header_page
+ 
header.header_txt>h1
+
+

Überschrift 1

+

Innerhalb eines <header>.

+
+

<footer>

+

Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.

+
Fußbereich
+
+ {% render "hippie/partials/footer-pinned.liquid" %} +
+
+
+

Gruppierung

+

Elemente:

+ 
// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div
+

<p>

+

Ein Absatz. Ein code Element innerhalb wird besonders behandelt.

+

Varianten

+ 
p.column_2
+

Spalten können angegeben werden.

+ 
p.column_3.column_line
+

Spalten können angegeben werden.

+

<address>

+
Anschrift, mit bestimmtem, ##### Format.
+

<hr>

+
+

Varianten

+ 
hr.hidden+hr.dotted+hr.double
+ +
+
+ 
hr.vertical
+
+

<pre>

+ 
Vorformatierter Text.
+	erhält Umbrüche und Einrückung.
+
+ 
pre.pre_code>code*2
+ 
let variable = true;
+()(){}
+

<blockquote>

+
Ein Zitat ist eingerückt.
+ 
blockquote.quote_mark>p+p.quote_source
+
+

Zitat mit automatischen Anführungszeichen

+

und Quellenangabe.

+
+

<dl>, <ol>, <ul>

+
+
Begriff
+
Definition
+
+
    +
  1. Eins
    2. +
  2. Zwei
    3. +
+
    +
  • Obst
    • +
  • Gemüse
    • +
+

Varianten

+ 
ul.list_basic.list_dash>li*2
+
    +
  • Mehr Abstand und
    • +
  • mit Unterstrichen.
    • +
+ 
ul.list_link>(li>a)*2
+ +

<figure>

+ 
figure>figcaption+{element}
+
+
Bezeichnung
+ Grafisches Element. +
+

<main>

+
Hauptbereich
+

<div>

+

Varianten

+ 
div.div_info>p
+
+

Absatz in Informationsbox.

+
+ 
div.box_space>div.box_cube>span
+
+
+ Text
+
+ 
div.box_placeholder+hr+div.box_placeholder_bkg
+
+
+
+
+
+

Tabellen

+

Elemente:

+ 
// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th
+

<table>

+

Varianten

+ 
table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KopfzeileAB
VorspalteEine
1erweiterte
2Tabelle
+ 
table.width_full.table_stripe.table_fix.table_free>tr>td*3
+ + + + + + + + + + + + + + + + + + + + + +
Tabelle
ohneRahmen
jedochmit
Streifen
+ 
table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
BezeichnungMengeWert
Alpha18990
Bravo101
Charlie11
Summe9001
+
+
+

Formulare

+

Elemente:

+ 
// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend
+

<input>

+
+ + + + + +
+

Varianten

+ 
input.button_io+button.button_io
+
+ + +
+
+ + + +
+
+
+ + + + Caps Lock is ON. +
+
+

<select>

+ +
+
+{% endblock %} + +{% block script %} +{{ block.super -}} + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk deleted file mode 100644 index 4d4ba16..0000000 --- a/source/screens/demo/components.njk +++ /dev/null @@ -1,407 +0,0 @@ ---- -title: Components -tags: - - demoIndex ---- -{% set pageBase = "../" %} -{% set pageId = page.fileSlug %} - -{% extends "demo/_main.njk" %} -{% import "hippie/macros/_footer.njk" as footer %} - -{% block title %}Komponenten{% endblock %} -{% block head %} - {{ super() }} -{% endblock %} - -{% block main %} - -
-
-

Medienformat Abfragen

-
-
-
Umbruch bei 
-
-

Telefone und größer

-

Nur Telefone

-

Nur Schreibtafeln hochkant

-

Schreibtafeln und größer

-

Schreibtafeln im Querformat

-

Schreibtafeln quer und größer

-

Nur Arbeitsplatzrechner

-

Arbeitsplatzrechner und größer

-

Richtige Monitore und größer

-
-
-
- -
-
-

Übersicht aller Elemente

-

Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (html.spec.whatwg.org/multipage/#toc-semantics) verwendet.

-

Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.

-
- 
article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}
-
-

Bereiche

-

Elemente:

- 
// body
// article
// section
// nav
// aside
// h1-h6
// header
// footer
-

<body>

-

Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.

-

<article>

-
Ein Artikel.
-

<section>

-
Ein Bereich.
-

Varianten

- 
section.sec_main_center
-
-

Ende.

-

Zentrierter Bereich.

-
- 
section.sec_main_status
-
Status-Bereich
-

<nav>

- -

<aside>

-

Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit .bside.

- 
aside.right+div.bside
-
- -
Hauptbereich
-
-

<h*>

-

Überschrift 1

-

Überschrift 2

-

Überschrift 3

-

Überschrift 4

-
Überschrift 5
-
-
Überschrift 6
-

Mit Absatz innerhalb von <hgroup>.

-
-
-

Überschrift 1 oder 2

-

Mit Absatz innerhalb von <hgroup>.

-
-

<header>

-
Kopfbereich
- 
header.header_page
- 
header.header_txt>h1
-
-

Überschrift 1

-

Innerhalb eines <header>.

-
-

<footer>

-

Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.

-
Fußbereich
-
- {{ footer.pinned() }} -
-
-
-

Gruppierung

-

Elemente:

- 
// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div
-

<p>

-

Ein Absatz. Ein code Element innerhalb wird besonders behandelt.

-

Varianten

- 
p.column_2
-

Spalten können angegeben werden.

- 
p.column_3.column_line
-

Spalten können angegeben werden.

-

<address>

-
Anschrift, mit bestimmtem, ##### Format.
-

<hr>

-
-

Varianten

- 
hr.hidden+hr.dotted+hr.double
- -
-
- 
hr.vertical
-
-

<pre>

- 
Vorformatierter Text.
-	erhält Umbrüche und Einrückung.
-
- 
pre.pre_code>code*2
- 
let variable = true;
-()(){}
-

<blockquote>

-
Ein Zitat ist eingerückt.
- 
blockquote.quote_mark>p+p.quote_source
-
-

Zitat mit automatischen Anführungszeichen

-

und Quellenangabe.

-
-

<dl>, <ol>, <ul>

-
-
Begriff
-
Definition
-
-
    -
  1. Eins
    2. -
  2. Zwei
    3. -
-
    -
  • Obst
    • -
  • Gemüse
    • -
-

Varianten

- 
ul.list_basic.list_dash>li*2
-
    -
  • Mehr Abstand und
    • -
  • mit Unterstrichen.
    • -
- 
ul.list_link>(li>a)*2
- -

<figure>

- 
figure>figcaption+{element}
-
-
Bezeichnung
- Grafisches Element. -
-

<main>

-
Hauptbereich
-

<div>

-

Varianten

- 
div.div_info>p
-
-

Absatz in Informationsbox.

-
- 
div.box_space>div.box_cube>span
-
-
- Text
-
- 
div.box_placeholder+hr+div.box_placeholder_bkg
-
-
-
-
-
-

Tabellen

-

Elemente:

- 
// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th
-

<table>

-

Varianten

- 
table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KopfzeileAB
VorspalteEine
1erweiterte
2Tabelle
- 
table.width_full.table_stripe.table_fix.table_free>tr>td*3
- - - - - - - - - - - - - - - - - - - - - -
Tabelle
ohneRahmen
jedochmit
Streifen
- 
table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
BezeichnungMengeWert
Alpha18990
Bravo101
Charlie11
Summe9001
-
-
-

Formulare

-

Elemente:

- 
// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend
-

<input>

-
- - - - - -
-

Varianten

- 
input.button_io+button.button_io
-
- - -
-
- - - -
-
-
- - - - Caps Lock is ON. -
-
-

<select>

- -
-
-{% endblock %} - -{% block script %} - {{ super() }} - -{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 34fb1d5..ea927c6 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -3,13 +3,12 @@ title: Clock tags: - demoExample --- -{% assign pageBase = "../../" -%} {% assign bodyClass = "body_clock" -%} -{% layout "hippie/full.liquid" %} +{% layout "hippie/simple.liquid" %} {% block body %}
- +

@@ -17,10 +16,9 @@ tags: {% endblock %} {% block script %} -{{ block.super -}} - - + + - - + +