Kategorien
Themes WordPress

Minimalismus Rulz: 20 neue, kostenlose WordPress-Themes aus dem Januar 2014

In Fortschreibung unserer monatlichen Serie bringen wir Ihnen heute eine neue Ausgabe der neuesten, schönsten Themes des vergangenen Monats. Unseren Neuvorstellungen ist diesmal das immer populärer werdende minimalistische Design gemein. Immer mehr Seitenbetreiber entscheiden sich für schlanke Layouts. So erreicht man nicht nur eine sprübare Performancesteigerung, sondern fokussiert zudem die Inhalte stärker. Nicht zuletzt stellen minimalistische Themes, wie die, die wir gleich zeigen wollen, dass Ihre Site auch auf mobilen Clients ordentlich aussieht. Für uns war das diesen Monat insgesamt Grund genug, minimalistische Themes in den Fokus zu nehmen.

Im Grunde müsste bei unseren Neuvorstellungen für jedermann etwas dabei sein. Alle Themes sind kostenlos. Für einige gibt es kostenpflichtige Varianten zusätzlich. Wir haben das jeweils dazu geschrieben…

Music: Für Musikseiten mit hohem Widget-Bedarf

Music WP theme

Besonders geeignet für: Blog
Responsiv: Nein
Features: Sidebar wild zu widgetisieren
Lizenz: Kostenlos verwendbar

Greensun: Naturnahe Optik sauber gestaltet

Greensun WP theme

Besonders geeignet für: Gewerbliche Seiten
Responsiv: Ja
Features: Social Media Integration, dynamisches Laden von Content
Lizenz: Kostenlos verwendbar, Kaufversion mit zusätzlichen Features erhältlich

Wallpress: Minimalistisch auf voller Breite

WallPress Wp theme

Besonders geeignet für: Magazine
Responsiv: Ja
Features: Menü in der Sidebar, externe Medien unterstützt
Lizenz: Kostenlos verwendbar

Homeblog: Tine Wittler Gedächtnis-Theme

Homeblog WP theme

Besonders geeignet für: Blog
Responsiv: Ja
Features: SEO, Google Maps Shortcode
Lizenz: Kostenlos verwendbar, Kaufversion mit zusätzlichen Features erhältlich

Pieces: Minimalistisches Grid für Portfolios

Pieces WP theme

Besonders geeignet für: Portfolio
Responsiv: Ja
Features: Kommentarthreads, Grid-basierendes Layout
Lizenz: Kostenlos verwendbar

Parallax Effect: Funktionsgeladenes Theme für Portfolios

Parallax effect WP theme

Besonders geeignet für: Portfolio
Responsiv: Nein
Features: benutzerdefiniertes Menü, Effek-Slider für den Hintergrund
Lizenz: Kostenlos verwendbar

Bootpress: Minimalistisches Theme mit Bootstrap 3

BootPress WP theme

Besonders geeignet für: Gewerbliche Seiten
Responsiv: Ja
Features:  Post-Formate Support, 12 Layouts von Bootswatch
Lizenz: Kostenlos verwendbar

Sassy-Starter: WordPress Starter-Theme auf Basis von Sass

Sassy starter WP theme

Besonders geeignet für: Blog
Responsiv: Ja
Features: komplett anpassbar, mit Sass Stylesheet
Lizenz: Kostenlos verwendbar

Kwikload: Rasant schnell ladendes Theme

kwikload WP theme

Besonders geeignet für: Magazine
Responsiv: Ja
Features: volle Breite, durch Weglassen extrem beschleunigt
Lizenz: Kostenlos verwendbar

Opus: Einfache Eleganz für den persönlichen Blog

Opus WP theme

Besonders geeignet für: Blog
Responsiv: Ja
Features: benutzerdefinierter Header, Post-Formate-Unterstützung
Lizenz: Kostenlos verwendbar

Flato: Einfaches Blog-Theme im Flat Design

Flato WP theme

Besonders geeignet für: Blog
Responsiv: Ja
Features: 4 Footer Widgets
Lizenz: Kostenlos verwendbar

Gimliii: Theme mit viel Weißraum für Magazine

Gimliii WP theme

Besonders geeignet für: Blog
Responsiv: Ja
Features: benutzerdefiniertes Menü
Lizenz: Kostenlos verwendbar

Reviewgine: Theme für Review-orientierte Seiten

Reviewgine WP theme

Besonders geeignet für: Magazine
Responsive: Kostenlos verwendbar
Features: SEO, Bewertungssystem
Lizenz: Kostenlos verwendbar

Times-Teel: Klassisches Theme für News-Seiten

Times-teel WP theme

Besonders geeignet für: Magazine
Responsiv: Ja
Features: auf Basis von Bootstrap, etlche Slider mitgeliefert
Lizenz: Kostenlos verwendbar, Kaufversion mit zusätzlichen Features erhältlich

Preus: Magazin-Theme mit Bootstrap 3.0

Preus WP theme

Besonders geeignet für: Portfolio
Responsiv: Ja
Features: Bootstrap 3.0, Retina-fähig
Lizenz: Kostenlos verwendbar

Actipo: Einspalter für Blogger

Actipo WP theme

Besonders geeignet für: Blog
Responsiv: Ja
Features: Microblog-inspiriert
Lizenz: Kostenlos verwendbar

Boldly Go Green: Grüner Zwilling von Boldly Go Blue

Boldly Go green

Besonders geeignet für: Gewerbliche Seiten
Responsiv: Ja
Features: Social Media Integration, CSS Transitions
Lizenz: Kostenlos verwendbar

Euclid: Mehrzweck-Zweispalter

Euclid Wp theme

Besonders geeignet für: Magazine und andere Seiten
Responsiv: Nein
Features: Post-Formate-Support, Shortcodes en masse
Lizenz: Kostenlos verwendbar

Kepler: Child Theme für Stargazer

kepler Wp theme

Besonders geeignet für: Blog
Responsiv: Ja
Features: Theme-Optionen via Backend konfigurierbar, Post-Formate-Support
Lizenz: Kostenlos verwendbar

BizSphere: Flat Theme für Gewerbetreibende

Bizsphere WP theme

Besonders geeignet für: Gewerbliche Seiten
Responsiv: Ja
Features: HTML5 / CSS3, verschiedene Skins vorbereitet
Lizenz: Kostenlos verwendbar

Wollen Sie nochmal unsere Übersichten der letzten Monate besuchen, hier sind sie:

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XTML-Themes.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Summernote: Starker WYSIWYG-Editor für Bootstrap 3

Heute will ich Sie auf ein recht frisches JavaScript aufmerksam machen, mit dessen Hilfe Sie in unschlagbar simpler Art und Weise einen funktionsreichen WYSIWYG-Editor in Ihr Bootstrap-Projekt einbauen können. Das kleine Tool mit dem sympathischen Namen Summernote gibt es kostenlos. Es erfreut sich reger Entwicklungstätigkeit und wird wohl in den nächsten paar Wochen die Versionsnummer 1 erreichen. Aber schon zum jetzigen Zeitpunkt ist Summernote für den Produktiveinsatz bestens geeignet.

summernote-wysiwyg

Summernote: Bootstrap, jQuery und FontAwesome

Summernote setzt eine Version von Bootstrap ab 2.x voraus. Zudem erfordert es jQuery und FontAwesome. Da letztere beiden Komponenten ohnehin ebenfalls Bestandteil von Bootstrap sind, haben Sie mit einer vollständigen Bootstrap-Version bereits alle Voraussetzungen erfüllt. Stellen Sie überdies sicher, dass Sie den HTML5 Doctype verwenden.

Nachdem Sie Summernotes CSS und JS eingebunden haben, erstellen Sie ein DIV, dem Sie die ID summernote verpassen. Anhand der ID weiß das Script, worum es sich zu kümmern haben wird:

$(document).ready(function() {
  $('#summernote').summernote();
});

Summernote: So geht’s

Zusätzlich lässt sich der Funktionsaufruf mit Parametern anreichern, die etwa die Optik des Editors betreffen oder den Fokus direkt in das Feld setzen:

$('.summernote').summernote({
  height: 300,   //setzt die Höhe des Editorfeldes in Pixeln
  focus: true    //sorgt dafür, dass der Cursor sich nach dem Initialisieren im Editor befindet
});

Geben Sie keine Höhe an, vergrößert sich das Editorfeld dynamisch mit dem eingegebenen Content. Eine wesentliche Konfigurationsmöglichkeit betrifft die Funktionalität der Summernote-Toolbar. Hier können Sie genau festlegen, welche Features der Editor dem Anwender zur Verfügung stellen soll:

$(‚.summernote').summernote({
  toolbar: [
    //['style', ['style']], // no style button
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    //['insert', ['picture', 'link']], // no insert buttons
    //['table', ['table']], // no table button
    //['help', ['help']] //no help button
  ]
});

Eine Reihe von Callbacks erlaubt weitergehende Interaktionen. Zudem arbeitet Summernote über entsprechende Sprachdateien auch vielsprachig. Die jeweilige Sprache ist nach dem Einbinden über einen Parameter im Funktionsaufruf zu konfigurieren. Das ist alles sehr eingängig und verständlich. Umfangreiche Dokumentationen sind nicht erforderlich, um Summernote an den Start zu bekommen.

Sauber dokumentiert, schnell implementiert, auch Server-tauglich

Umso erfreulicher ist es, dass eine umfangreiche Dokumentation zu allen Einzelheiten des Editors dennoch bereit gestellt wird. Das ist ja gerade im Open Source-Bereich leider nicht selbstverständlich, senkt aber die Einstiegshürde nochmal gewaltig. Die Dokumentation enthält auch eine Menge Demos und Beispiele, die erklären, wie man Summernote serverseitig, etwa mit PHP oder Node.js implementiert.

Prinzipbedingt arbeitet Summernote auf der Basis von Inline-Styles, um etwaige Formatierungen umzusetzen:

summernote-codeview

Summernote integriert einen File-Uploader und baut Videos aus den gängigen Onlinediensten ein. Wie es sich für einen Bootstrap-Zusatz gehört, verhält sich das Tool voll responsiv. Nicht ganz uninteressant dürften die meisten auch das Gewicht finden. Mit lediglich 58kb für CSS und JS darf sich der Editor noch als Leichtgewicht bezeichnen.

Der schlanke Editor Summernote ist vor wenigen Tagen in der Version 0.5 verfügbar geworden und steht auf Github zum kostenlosen Download und zum ebenso kostenlosen Einsatz unter der sehr liberalen MIT-Lizenz, sowohl für private, wie auch kommerzielle Zwecke bereit. Summernote läuft mit allen modernen Browsern und dem IE ab Version 9. Support für die Version 8 des Redmond-Browsers ist angekündigt.

Summernote wird entwickelt von Alan Hong aus dem südkoreanischen Seoul. Seinem Twitter-Account zu folgen, wird den meisten Menschen eher weniger nutzen. Aber, das kann ja jeder für sich selbst entscheiden ;-)

Links zum Beitrag:

  • Summernote | Homepage
  • Summernote | Dokumentation
  • Summernote auf Github
Kategorien
Design HTML/CSS

Schneller Helfer: Mit LayoutIt! das Grundgerüst des nächsten Bootstrap 3-Projekts erstellen

LayoutIt! ist ein cleveres, kleines Web-Tool aus dem Hause Entropeer, einer ebenfalls kleinen Design-Agentur aus Buenos Aires. LayoutIt! sieht zunächst aus wie ein Website-Builder und funktioniert ähnlich. Letztlich ist die kostenlose Web-App jedoch „nur“ eine Art Kickstarter für Ihr nächstes Projekt auf Bootstrap-Basis. Vor kurzem erweiterte Entropeer das Featureset, so dass jetzt neben der Erstellung von Websites mit Bootstrap 3 auch das verhältnismäßig neue Bootstrap 3 unterstützt wird.

layoutit-homepage

LayoutIt! Cleverer Kickstarter beschleunigt die Site-Entwicklung

Um es nochmal vorweg deutlich zu sagen. LayoutIt! ist kein Homepage-Baukasten für unbedarfte Bastler. Die kostenlose App erstellt lediglich ein Grundgerüst, teilweise mit Musterinhalten versehen. Herunterladen kann man sich das Gerüst entweder als reine HTML-Struktur per Copy and Paste oder als Zip-Archiv, in welchem dann zusätzlich die entsprechende Ordnerstruktur, nebst verwendeter Embeds, etwa Bootstrap selbst oder jQuery und Less, enthalten sind. Damit erhält man ein komplettes Starterkit, auf dessen Basis sodann die weitere Entwicklung fußen kann.

layoutit-download

Die Verwendung von LayoutIt! ist simpel. Unter Verwendung eines der beiden Häuptlings gelangt man entweder in den Editor für ein Gerüst in Bootstrap 2 oder in einen ebensolchen für das Projektskelett einer Bootstrap-Seite auf Basis der Version 3. Bekanntlich haben die Bootstrap-Entwickler im Übergang von 2 zu 3 kaum einen Stein auf dem anderen gelassen, so dass die strikte Unterscheidung mehr als bloß sinnvoll ist.

Wie Bootstrap selbst, wird indes auch LayoutIt! mit Bezug auf die Version 2 nicht mehr gepflegt. Sie sollten also schon einen guten Grund haben, um noch auf der Basis des alten Frameworks zu arbeiten.

LayoutIt! Geradliniger Editor garantiert schnelle Produktivität

Einmal im Editor angekommen, findet sich der durchschnittliche Web-Designer keinen Rätseln ausgesetzt. Der visuelle Ansatz von LayoutIt! ist geradlinig. Links findet sich der verfügbare Funktionsumfang sauber gegliedert in Parameter zum Grid-System, zum Base CSS, zu den Components und zum Einsatz von JavaScript. Ein Community-Feature ist bereits in der Toolbar enthalten, aber noch nicht mit Leben gefüllt.

layoutit-editor

Das Grid-System ist mit verschiedenen, üblichen Aufteilungen versehen, kann dabei aber auch frei angepasst werden. Hierzu editiert man schlicht die vorgelegten Werte. Um kompatibel zum Standard zu bleiben, sollte man jedenfalls sicherstellen, dass die Summe der angegebenen Spalten stets 12 ergibt. Ein Grid wird per Drag and Drop in den über den Rest des Browserfensters reichenden Editor gezogen. Dabei ist es auch möglich, Grids ineinander zu verschachteln. Auf diese Weise bauen Sie leicht auch komplexere Designs visuell zusammen.

Alles, was Sie unter Verwendung von drag in den Editor ziehen, können Sie dort frei positionieren und an Ort und Stelle via remove wieder entfernen.

Ist das Grid fertig, geht es an das Einfügen von Inhalten und Funktionen. Soweit es sich um vordefinierte Elemente handelt, die später der weiteren Programmierung bedürfen, um ihre eigentliche Funktionalität zu entfalten, setzt LayoutIt! Platzhalter ein, deren Inhalte zwar voll funktionsfähig, aber natürlich nicht für den späteren Verbleib vorgesehen sind. Wie es sich für Bootstrap-Projekte gehört, sind die mit LayoutIt! vorkonfektionierten Seiten voll responsiv.

layoutit-editor-sample-content

Am oberen Rand des Browserfensters finden Sie eine weitere Werkzeugleiste. Hier können Sie verschiedene Previews aktivieren, das Projekt herunterladen oder mit anderen teilen. Auch das Speichern der Arbeiten online ist möglich, erfordert dann aber naheliegenderweise die Anlage eines Accounts auf LayoutIt! Hierzu werden die gängigen OAuth-Geber wie Twitter, Facebook und Google unterstützt. Wer das nicht möchte, legt einen dedizierten LayoutIt!-Account unter Bekanntgabe von E-Mail-Adresse und Passwort an.

layoutit-dashboard

LayoutIt! Mehrsprachiger Helfer für Entwickler mit soliden Kenntnissen

LayoutIt! steht auf englisch, spanisch, portugiesisch und – erstaunlicherweise – chinesisch zur Verfügung. Da es kostenlos verfügbar ist, sollten Sie nicht vor einem Test zurückscheuen, wenn Sie ohnehin mit Bootstrap 3 als Front-End-Framework liebäugeln. Abschließend sei aber eine Warnung erneut ausgesprochen. LayoutIt! generiert Ihnen ein solides Fundament. Sie benötigen aber bereits bei der Erstellung des Fundaments ein gerüttelt Maß eigener Kenntnisse und erst recht dann, wenn Sie das Gerüst schlussendlich mit Leben füllen wollen.

So ist LayoutIt! eine sehr nützliche Arbeitserleichterung für Bootstrap-affine Front-End-Entwickler und hat sich als solche eine klare Empfehlung verdient…

Das folgende Video bietet einen guten ersten Überblick:

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Toolbar.js für jQuery und Bootstrap: Flexible Werkzeugleisten im iOS-Look

Ob man den Designstil des iOS mag oder nicht, spielt hier keine Rolle. Unabhängig von der aktuellen Diskussion um Skeuomorphismus wird man schnell Einigkeit darüber erzielen, dass das Toolbardesign aus Apples mobilem OS wegweisend für moderne Websites ist. Ein Tapp auf ein Icon oder einen Link bringt häufig weitere Auswahlmöglichkeiten ans Licht. Das spart Platz und ist mittlerweile etabliert. Das jQuery-Plugin Toolbar.js des Neuseeländers Paul Kinzett erlaubt die Verwendung auf beliebigen Websites und ist dabei wirklich extrem einfach im Einsatz.

Toolbar.js für jQuery

Werkzeugleisten im iOS-Look mit den Glyphicons aus Twitters Bootstrap

Toolbar.js für jQuery bietet eine sehr einfache, dabei sehr elegante Möglichkeit, Toolbars, sowohl vertikal, wie auch horizontal an beliebige Elemente zu hängen. Beliebig viele dieser Werkzeugleisten lassen sich so erzeugen. Kinzett verwendet das Iconset, sowie das dazugehörige CSS aus Twitters Bootstrap. Auf diese Weise verhalten sich die Toolbars zum einen responsiv, zum anderen sind sie mit den Bootstrap-Methoden anpassbar.

Mit hunderten von Symbolen dürften sich auch die ausgefallensten Werkzeugleisten umsetzen lassen. Die Vorgehensweise ist jQuery-Enthusiasten bekannt. Zunächst gilt es, das JavaScript zu implementieren:


Danach bringen wir die Stylesheets für die Toolbar, wie für die Bootstrap Icons unter:


Im Anschluss muss noch die Toolbar definiert werden. Das kann beispielsweise so aussehen:

Sie sehen, dass die Icons über die entsprechenden Klassen aus Bootstrap zugewiesen werden. Die Aktionen, die damit verbunden werden sollen, finden ihren Platz in entsprechenden A-Elementen. Schlussendlich wird die so definierte Toolbar an das entsprechende Element gehängt, welches für den Aufruf verantwortlich sein soll.

 $('#element').toolbar( options ); 

Options sind die Position der Leiste, als da wären über oder unter dem Element horizontal oder links oder rechts von dem Element vertikal.

Diese Definition:

$('#vertical-toolbar').toolbar({
    content: '#user-toolbar-options', 
    position: 'right'
}); 

führt zu dieser Optik:

Vertikale Toolbar

Während diese Definition:

$('#user-toolbar').toolbar({
    content: '#user-toolbar-options', 
    position: 'top'
}); 

zu dieser Optik führt:

Horizontale Toolbar

Die Anzahl der Icons ist nur begrenzt durch die eigenen Überlegungen zur diesbezüglichen Sinnhaftigkeit ;-)

Toolbar.js steht auf Github unter der liberalen MIT-Lizenz zur Nutzung in privaten und kommerziellen Projekten zur Verfügung.

Links zum Beitrag:

Kategorien
Design Essentials Freebies, Tools und Templates UI/UX

Divshot: Noch schnelleres Rapid Prototyping mit Bootstrap

Twitters Bootstrap eignet sich zum schnellen Entwerfen responsiver Website-Prototypen, was die stetig steigende Beliebtheit des Frameworks erklärt. Wie aber wäre es, wenn man das ohnehin schon hohe Tempo, mit dem man mit Bootstrap funktionsfähige Designs erstellt, noch einmal anheben würde? Genau dieser Aufgabe widmet sich die brandneue Web-App Divshot, die derzeit im Stadium einer Public Beta verfügbar ist und kostenlos verwendet werden kann.

Divshot: Drag and Drop mit Bootstrap

Divshot ist ein WYSIWYG-Editor, der auf Bootstrap aufsetzt. Wie die Gründer Michael Bleigh und Jake Johnson erklären, ist Bootstrap nur die erste Unterlage für den Start des Dienstes. In der Zukunft will Divshot weitere Frameworks, allen voran Zurbs Foundation unterstützen. Man könnte sich dann zu Beginn des Prozesses aussuchen, mit welchem Framework man arbeiten will. So weit ist es noch nicht. Aktuell kann ausschließlich Bootstrap verwendet werden.

Wie erwähnt befindet sich Divshot derzeit in offener Beta und kann kostenlos genutzt werden. Bislang gibt es keinerlei Informationen zum zu erwartenden Preismodell oder zu der Frage, wie lang die offene Betaphase dauern wird. Die Betreiber versprechen dabei immerhin, dass niemand auf die bis dahin erstellten Prototypen verzichten wird müssen. Aktuell finanziert sich das Projekt über Seed Funding einzelner Investoren.

In Divstrap wird sich jeder Designer sofort heimisch fühlen, der bereits mit Tools wie Dreamweaver gearbeitet hat. Eine Website wird per Drag and Drop zusammengestöpselt. Die Maus ist das wichtigste Werkzeug. Die Detaildefinition erfolgt objektorientiert über seitlich angezeigte Optionsdialoge.

Die ersten Schritte erfolgen intuitiv. Divshot gibt keine Rätsel auf. Nach der Anlage eines Folders, also dem künftigen kompletten Projekt, werden einzelne Seiten angelegt, die auf der Basis verschiedener Templates oder komplett from scratch gestaltet werden. Die einzelnen Komponenten, also Designelemente zieht man mit der Maus an die entsprechende Stelle im Layout. Da Bootstrap responsiv ausgelegt ist, erfolgt natürlich keine pixelgenaue Positionierung.

Ist man mit dem Layout fertig, lässt sich dieses als HTML exportieren, in einem separaten Fenster als Preview anzeigen und auch auf der Basis vordefinierter Viewports für mobile Geräte beurteilen.

Divshot und das Customizing: flexibel

Divshot ist insbesondere deshalb sehr flexibel, weil es dem Designer die Möglichkeit gibt, selbst Hand anzulegen. Man ist nicht auf die definierten Styles angewiesen, sondern kann über eigene Klassen und eigenes CSS das Layout exakt den eigenen Vorstellungen anpassen. In Sachen CSS unterstützt Divshot interessanterweise nicht nur die pure Variante, sondern arbeitet auch mit Preprocessors, etwa SASS und LESS zusammen.

Über sogenannte Themes bietet Divshot schicke Layoutvorschläge an, die auf manipuliertem Bootstrap-CSS beruhen. Das ist letztlich Geschmackssache, sowie eine Frage des persönlichen Könnens. Die Themes stammen von der Website Bootswatch, die es sich zur Aufgabe gemacht hat, freie Themes für Bootstrap zu sammeln und zum Download anzubieten. Da Divshot Bootswatch direkt integriert, würden etwaige weitere Themes auch direkt im Editor von Divshot verfügbar werden.

Insbesondere, aber nicht nur mit Blick auf die Themes muss es als Nachteil empfunden werden, dass Divshot ausschließlich HTML exportiert, dieses allerdings wie gemalt. Immerhin deuten die Betreiber an, künftig nicht mehr bloß den HTML-Quelltext bereitstellen zu wollen. Das spräche für eine offenere Handhabung und könnte sicherlich mehr Nutzer überzeugen.

Kann man Divshot nun empfehlen und wenn ja, wem? Meiner Meinung nach ist Divshot durchaus eine Empfehlung für alle Bootstrap-Verwender wert. Sicherlich richtet sich Divshot nicht an technische Newbies, dazu ist der Grad der Abstraktion zu gering. Ein Bootstrap-Experte muss man indes auch nicht sein.

Seine besten Dienste leistet Divshot im Rapid Prototyping, möglicherweise sogar in Anwesenheit des Kunden, mindestens aber, wenn ein Entwicklerteam beteiligt ist. Im Gespräch lässt sich relativ schnell das Gerüst der Anwendung zusammenstellen. Das ginge zwar mit Photoshop auch, erzeugte aber keinen weiter zu verarbeitenden Code und wäre nicht responsiv.


Eine kleine Video-Einführung erklärt das Konzept

Was meinen Sie? Wie sind Ihre Erfahrungen mit Bootstrap?

Links zum Beitrag:

Kategorien
Design UI/UX

Fuel UX: Moderne Interface-Elemente für Twitters Bootstrap

Twitters Bootstrap ist ein stetig beliebter werdendes Framework für moderne Benutzeroberflächen. Ein regelrechtes Ökosystem ist rund um das Produkt entstanden. Drittentwickler kümmern sich um die Lücken und Spielräume, die das Framework offen lässt. Fuel UX liefert einige UI-Elemente nach, von denen man gehofft hätte, sie wären von Beginn an dabei gewesen.

Fuel UX: Kleine Sammlung kleiner Scripte mit großer Wirkung

Fuel UX von ExactTarget aus Indianapolis ist eine kleine Sammlung von fünf Interface-Elementen, die in Web-Projekten im Grunde stets benötigt werden. Jedes Element ist als einzelnes JS-File angelegt und integriert sich über die Styles aus Bootstrap nahtlos in entsprechende Websites. Lösungen der gebotenen Art gibt es im Grunde mannigfaltig, die Besonderheit an Fuel UX ist eben die Integration in Bootstrap.

Datagrid.js

Mir persönlich gefällt Datagrid.js am besten. Datagrid sorgt für eine tabellarische, dabei sortierbare Darstellung des Inhalts einer Datenquelle. Die gesamte Steuerung auf Benutzerseite erfolgt über Klassen. So ist keinerlei zusätzliches Javascript mit Ausnahme des reinen Function Call erforderlich.

Combobox.js und Search.js

Combobox kombiniert die freie Eingabe eines Suchbegriffs mit der Auswahl aus einer Dropdown-Liste , während Search.js ein klassisches Eingabefeld für einen freien Suchbegriff anbietet. Auch hier erfolgt die Implementation innerhalb des HTML mit Klassen und Data-Attibuten.

Spinner.js und Pillbox.js

Pillbox ist eine einfache Möglichkeit, Text-Elemente farbzukodieren. Mit Klassen, die sprechend benannt sind, etwa status-warning erreicht man unterschiedlich umfärbte Text-Label, die besonders zur Darstellung von Tags in modernen Websites immer gängiger werden. Auch hier ist das Markup sehr simpel und nachvollziehbar. Zuguterletzt liefert ExactTarget mit Spinner.js ein kleines Element, dessen Sinn darin besteht, per Klick auf Pfeil nach oben oder unten, numerische Werte in Formularfeldern hoch oder herab zu zählen.

Fuel UX wurde mit Version 2.0 erstmals öffentlich zugänglich gemacht. Seither sind sechs Wochen vergangen. Die Entwickler haben inzwischen vier Updates vorgelegt, aktuell ist die Version 2.1.1 vom 10. November.

Fuel UX wird unter der MIT-Lizenz kostenlos sowohl für private, wie auch kommerziele Zwecke überlassen.

Links zum Beitrag:

  • Fuel UX Demo-Seite – Github
  • Fuel UX im Repository – Github
  • ExactTarget Entwicklerprofil – Github
  • Bootstrap 2: Twitters WebApp-Toolkit wird zur Plattform – Dr. Web Magazin
Kategorien
Design HTML/CSS

BootMetro: Framework für Websites im Look von Windows 8

Der italienische Frontend-Entwickler Marcello Palmitessa legt mit BootMetro ein kleines Web-Framework vor, mit dessen Hilfe es möglich ist, Websites den typischen Kachellook des kommenden Windows 8 zu verpassen. Das erreicht BootMetro auf der Basis des beliebten Frameworks Bootstrap aus dem Hause Twitter. Wer sich nun an Metro UI CSS von Sergey Pimenov erinnert fühlt, liegt richtig. Palmitessa gibt unumwunden zu, davon inspiriert worden zu sein.

BootMetro: Auf bewährten Tools basierend

Genau genommen ist es keine reine Inspiration, die Pimenov Palmitessa lieferte. Vielmehr integriert BootMetro das JavaScript und CSS aus Metro UI CSS und ergänzt es um weitere bewährte Tools, wie der HTML5 Boilerplate, Twitters Bootstrap, sowie den Fonts des IcoMoon-Projekts. BootMetro ist erst seit wenigen Tagen verfügbar und liegt derzeit in Version 0.5 vor.

Bei der Umsetzung der Metro-Optik orientierte sich Palmitessa nach eigenen Angaben an den offiziellen Guidelines aus dem Hause Microsoft, wobei er wohl an einigen Ecken noch nacharbeiten muss. Zum jetzigen Zeitpunkt liegt ein komplettes Restyling der BootStrap-Elemente auf das Design der Windows-Optik vor, wobei das gesamte Styling mit reinem CSS vorgenommen wurde. Palmitessa will künftige Versionen auf LESS umstellen, um so noch flexiblere Lösungen zu ermöglichen.

Die Roadmap sieht zudem die Erstellung weiterer Demos nebst Dokumentation vor. Bislang besteht die Doku in weiten Teilen aus leicht umgeschriebenen BootStrap-Readmes. BootMetro wird von Palmitessa zwar als „free“ deklariert, kommt jedoch nicht mit einer dedizierten Lizenz daher. Nachdem der wesentliche Bestandteil, nämlich BootStrap unter Apache-Lizenz erhältlich ist, ist davon auszugehen, dass BootMetro künftig eine mindestens ebenso liberale Lizenz erhalten wird.

Für mich persönlich kommt der Windows-Look im Webdesign nicht in Betracht, es sei denn für das gezielte Erstellen von Web-Apps für Windows-Mobilgeräte oder INformationsseiten in Microsofts Intranet;-). Das flächige Fliesendesign mit der horizontalen Navigation in die Tiefe hinein erscheint mir für Websites eher ungeeignet, zumal man sich aufgrund dessen gerade in umfangreicheren Web-Projekten schnell verlaufen kann. Die große Resonanz auf die Vorstellung des Metro UI CSS vor einigen Wochen jedoch zeigt, dass es etliche Tausend Webdeveloper zu geben scheint, die das ganz anders sehen.

Wie ist Ihre Meinung? Können Sie sich vorstellen, Websites in der Optik von Windows 8 zu gestalten?

Links zum Beitrag: