Gumpy Framework – die ersten Schritte

Twitters Bootstrap ist mittlerweile vermutlich das am Meisten genutzte Frontend-Framework überhaupt. Ich selber habe schon eine große Anzahl Webseiten mit Bootstrap realisiert und mag es ganz gerne, sehe aber auch an einigen Ecken Verbesserungspotential.

Der Blick über den Tellerrand ist bekanntlich nie verkehrt. Neben Foundation, Zimt,  Ink, HTML5 Boilerplate und einigen mehr gibt es auch Gumby, ein Framework das bisher eher wenig Anerkennung gefunden hat. Ich bin nur zufällig vor einiger Zeit durch einen Artikel darauf gestoßen.

Vorteile? Noch kann ich dazu wenig sagen. Irgendwie hat es auf jeden Fall meine Aufmerksamkeit geweckt und werde ich es nun für eines meiner Projekte nutzen. Was schön ist: Es basiert auf SASS, ist gut strukturiert, bringt zahlreiche hilfreiche CLI-Tools mit sich und hat schon einige nette Funktionen integriert (Parallax, FitText, FormValidation) die Bootstrap bisher fehlen.

Ich werde mich nun auf jeden Fall mal in Gumby einarbeiten und eine kleine Artikel-Serie dazu nutzen es hier im Blog vorzustellen.

Zu meinen ersten Schritten:

1) Installation

Die Installation der einzelnen Tools fällt für jedes Betriebssystem anders aus. Hier helfen die Informationen auf der Webseite. Ich habe folgende Komponenten installiert:

• Ruby
• Brew
• Ruby Version Manager
• einige Gems: compass modular-scale sass
• claymate

Gumby lässt sich auch ohne diese Tools verwenden, allerdings (wie ich in einem späteren Artikel begründen werde) nur sehr begrenzt. Die Installation lohnt sich also wenn man sich ernsthaft mit dem Framework auseinandersetzen will.

2) Projekt erstellen

Mit Hilfe des mitgelieferten Command-Line Tools claymate ist es super einfach ein neues Projekt zu erstellen. Der Befehl…

$ claymate install

erstellt im ausgewählten Ordner eine frische Installation mit allen nötigen Dateien.

3) Eigenschaften

In der Datei Gumby.json kann man noch einige Einstellungen für Claymate vornehmen und zB. festlegen welche Module man zusätzlich laden will.

{
    "build": {
        "gumbyPath": bower_components/gumby",
        "modules": ["retina", "toggleswitch", "validation"],
        "buildSourceMap": true
    }
}

 4) Seite erstellen

Da wir nun alles für den Start haben können wir loslegen unsere Seite zu entwerfen. Eine Beispiel-HTML-Datei legt claymate für uns schon an und so ist der Einstieg nicht schwer. In der Gumy Documentation finden wir weitere nützliche Hinweise über die einzelnen UI-Elemente.

Gumby setzt für seine Stylesheets auf SASS & Compass. Eine Einführung dazu habe ich bereits geschrieben, daher gehe ich hier nicht weiter darauf ein.

5) Seite rendern

Hat meine seine Seite nun erstellt kann man über

$ claymate build

seine Seite nun rändern.  Claymate wird hierbei JavaScript-Dateien zusammenführen und verkleinern (minification) und ggf. Source-Maps dafür anlegen. Infos hierzu gibt es auf der Entwicklerseite.

Fazit

Die ersten Schritte mit Gumby sind ein wenig holprig. Hat man sich aber erstmal die nötigen Tools installiert, läuft es ganz flott. Claymate, SASS und Compass sind mächtige Tools, die den Umgang mit dem Framework sehr erleichtern und die Arbeit beschleunigen, sie brauchen aber ein klein wenig Einarbeitungszeit.

Bisher ist mein Eindruck vom Framework also durchaus positiv. Wie nun meine Erfahrungen mit dem Umfang des Frameworks und den Gestaltungsmöglichkeiten ausfallen werde ich in einem späteren Artikel beschreiben.