Was ist formanizr?
Ob es nun ein spezielles CSS Framework für Forms ist oder einfach 'nur' ein umfangreicher Baukasten für Webformulare muss jeder für sich selbst entscheiden. Vielleicht ist es aber auch beides, oder ist ein Framework ein Baukasten?
Egal wie man es nun bezeichnen möchte, formanizr stellt ein flexibles CSS-Grid (12 Spalten) welches speziell für Webformulare entwickelt wurde zur Verfügung. Desweiteren beinhaltet es aber auch das Styling der unterschiedlichen Formular-Elemente wie beispielsweise Eingabefelder (input), Textarea, Fieldset, Label, Button, und vieles mehr. Ein besonderes Augenmerk wurde hierbei auf eine möglichst gleiche Optik in den vielen verschiedenen Browsern gelegt - Stichwort Cross-Browser.
Als weiteren Zusatz stelle ich einige Themes bereit. Zum einen um zu zeigen wie man formanizr selbst leicht anpassen kann, zum anderen um einfach unterschiedliche Designs zu bedienen, zu sehen welche Stolperfallen beim umstylen evtl. auftreten und um formanizr dadurch noch stabiler und robuster zu machen.
Formanizr verwendet zur Gestaltung keine Grafiken (bis auf optionale Icons) und ebenfalls kein JavaScript. Es kommen lediglich valides HTML (XHTML, HTML5) und CSS zum Einsatz.
Nahezu die gleiche Optik der Webforumlare in den folgenden Browsern:
Wofür das Ganze?
Die Gestaltung von (X)HTML-Formularen mit CSS hat an verschiedenen Stellen so ihre Tücken, beispielsweise wenn es um die richtige Poisitionierung von Checkboxen oder Radio Buttons geht, oder um die Breiten einzelner Formular-Elemente (input/select) zu vereinheitlichen, und vieles vieles mehr. Wer schon einmal Formulare Browser-übergreifend entwickelt hat weiß wovon ich rede.
In nahezu jedem Web-Projekt werden HTML-Formulare benötigt. Viele umfangreiche CSS Frameworks wie beispielsweise Bootstrap, YAML oder YUI bringen neben dem eigentlichen Framework auch spezielle Features für die Verwendung von Formularen mit. Wer aber, so wie ich, lieber seinen eigenen HTML/CSS Code für das Grundgerüst schreibt um das Ganze den individuellen Anforderungen des jeweiligen Projektes anzupassen, verzichtet lieber auf ein umfangreiches CSS Framework und verwendet stattdessen CSS-Lösungen für einzelne Teilbereiche. Wie zum Beispiel Formulare. Und genau für diesen Fall habe ich formanizr entwickelt.
Ein kurzer Überblick
Flexibles Grid-System für HTML-Formulare
Hier ist das 12-spaltige Fluid Grid mit einfachen Eingabefeldern (type="text") umgesetzt.
Das Formanizr-Grid passt sich an die Breite des Elternelements an und ist somit unabhängig von anderen Grid-Systemen die ggf. schon auf der Seite im Einsatz sind. Formularelemente wie beispielsweise Text- und Passwortfelder, Textareas oder Select's nehmen dabei 100% der zur Verfügung stehenden Breite ein.