Formulare
- Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig. (Vielleicht ist das auch scheiße, hier darauf einzugehen) ... Üblicherweise stehen alle Formularelemente innerhalb eines <form> Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.
+ Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig.<form> Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.
Grundlegend ist das Element <input>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.
-
- Ein spezieller Typ des Eingabefeldes verändert seine Funktion zu einer Schaltfläche <input[type="button"]>. Es gibt allerdings auch ein eigenes Element <button> dafür.
+
+ Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche <input[type="button"]>. Es gibt allerdings auch ein eigenes Element <button> dafür.
Button
+ Button
Interaktive Elemente können durch das Attribut <readonly> nur lesbar gemacht werden oder mittels <disabled> gänzlich deaktiviert werden.
- Button
+ Deaktivierte Schaltfläche
+ Deaktivierte Schaltfläche
Das Element <label> ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.
+
+ Beschriftung:
+
-
- Beschriftung:
-
Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <fieldset> realisiert.
- Beschriftung:
+ Input: Output:
Sie können mittels <legend> auch eine eigene Beschriftung erhalten.
- Einfache Eingabefelder
- Texteingabe
- Schaltfläche
+ Einfache Eingabeelemente
+
+
+
+ Einfache Eingabeelemente mit Stil
+
Weitere Eingabemöglichkeiten
- Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf. Hier nun eine Liste möglicher Arten von Eingabefeldern.
- ul>(li>label>input[type="text"])
-
- Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.
-
-
- Mehrzeilige Texteingabe
-
-
+
Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf.
+
Hier nun eine Liste weiterer Arten von Eingabefeldern:
+
-
-
-
-
-
Interaktive Elemente
diff --git a/source/style/hippie/elements/_grouping.scss b/source/style/hippie/elements/_grouping.scss
index 460515b..e1feca4 100644
--- a/source/style/hippie/elements/_grouping.scss
+++ b/source/style/hippie/elements/_grouping.scss
@@ -39,10 +39,10 @@ address {
// Line
hr {
- margin: $space_3 auto;
+ margin: $space_small auto;
border-width: $basic_border_width 0 0;
border-style: solid;
- border-color: $darkest_color;
+ border-color: $basic_border_color;
}
.hr_hidden {
@@ -62,12 +62,12 @@ pre {
.pre_code {
overflow-x: auto;
- border-color: rgba($brightest_color,.1);
+ border-color: darken($basic_back_color, $tiny_color_diff);
border-style: dotted;
border-width: 0 0 0 $border_width_4;
border-radius: $basic_corner;
padding: $basic_space;
- background-color: rgba($brightest_color,.1);
+ background-color: lighten($basic_back_color, $tiny_color_diff);
code {
background-color: transparent;
}
@@ -212,11 +212,11 @@ div {
}
.column_2 {
column-count: 2;
- column-gap: $space_3;
+ column-gap: $space_small;
}
.column_3 {
column-count: 3;
- column-gap: $space_4;
+ column-gap: $space_medium;
}
// Space and placeholders
@@ -228,7 +228,7 @@ div {
.box_cube {
float: left;
display: table;
- width: $space_4;
+ width: $space_medium;
text-align: center;
vertical-align: middle;
span {
@@ -238,21 +238,21 @@ div {
.box_placeholder {
width: 100%;
- height: $space_4;
- border: $border_width_4 solid rgba($alpha_color,.1);
+ height: $space_medium;
+ border: $border_width_4 solid transparentize($alpha_color, 0.1);
border-radius: $basic_corner;
- background-color: rgba($alpha_color,.2);
+ background-color: transparentize($alpha_color, 0.2);
}
.box_placeholder_bkg {
width: 100%;
- height: $space_4 * 2;
- border: $border_width_4 solid rgba($brightest_color,.1);
+ height: $space_medium * 2;
+ border: $border_width_4 solid transparentize($basic_front_color, 0.1);
border-radius: $basic_corner;
padding: $basic_space;
/*data:[
][;charset=][;base64],*/
background: url("data:image/svg+xml;utf8,