Können Sie ein CSS Framework (oder UI Framework) für Unternehmenswebanwendungen empfehlen? [geschlossen]

7

Gibt es ein CSS-Framework, das speziell für Geschäftsanwendungen versucht?

Ich habe mir die Mocha-Benutzeroberfläche angesehen, die auf MooTools basiert. Ehrlich gesagt möchte ich jedoch vermeiden, mich mit Javascript und Moo (oder jQuery / jQuery UI) zu befassen. Ich neige dazu zu glauben, dass das meiste, was Sie für eine einfache Web-App benötigen, in CSS ohne die dazugehörigen Javascript-Mods verarbeitet werden kann.

Viele der ausgefeilten CSS-Funktionen richten sich an Blogging- oder Web-Publishing-Anforderungen, die sich von den UI-Anforderungen einer Business-App unterscheiden. Es scheint, dass dies ein Problem sein muss, das jemand gelöst hat, aber ich kann anscheinend keine Lösung finden.

Ich hoffe, dass die vorgeschlagenen Lösungen sprachunabhängig sind (Arbeit mit PHP, ASP, CF usw.). Wenn es jedoch ein Framework gibt, das in einer Sprache verwurzelt ist, die die Benutzeroberfläche in einem sehr "fertigen" Sinne handhabt, dann wäre ich daran interessiert, dies zu betrachten, selbst wenn es die Einführung eines Frameworks bedeutete, das die Verwendung eines bestimmten Servers erzwang. Seitensprache.

Mein Ziel ist es nicht, MVC zu verwenden, sondern nur ein gut aussehendes CSS zu haben, das zu einer Anwendung passt.

BOUNTY: Ich habe beschlossen, eine Prämie für diese Frage zu erheben, weil ich denke, dass es einige nützliche "Ausgangspunkte" (minimal angegeben) für CSS geben muss, die auf Web-Apps ausgerichtet sind, wobei ich es vorziehen würde, dass sie hoffentlich:

  1. plattformunabhängig oder für verschiedene Entwicklungsplattformen geeignet, und
  2. kostenlos oder fast kostenlos (wie in, nicht 1000 $ für eine Sammlung von Kontrollen)

"Inspirierend" Beispiel: (Wortspiel absichtlich, sorry) Ich habe eine Entwicklungsfirma für Kirchenwebsites gefunden, die eine Design Patterns Library und Code Standards veröffentlicht hat, was sehr verlockend ist, aber es scheint, dass es nur für diejenigen verwendbar ist, die Kirchenstandorte mit ihren entwickeln Software als Dienstleistung (?). Unabhängig davon sind das CSS und die ergänzenden Grafiken nicht für den öffentlichen Gebrauch verfügbar.

Chris Adragna
quelle
Könnten Sie ein Beispiel für die ausgefeilten CSS-Frameworks geben, die auf Blogging / Web Publishing abzielen?
Lèse Majesté
1
Touche! :-) Ich hätte sagen sollen, polierte CSS- Vorlagen für das Bloggen und Veröffentlichen. Wenn ich Ihren Kommentar betrachte, stelle ich fest, dass die CSS-Frameworks nicht genau "poliertes" CSS sind, sondern eher ein Werkzeug, auf dem man aufbauen kann.
Chris Adragna
Ja, ich glaube nicht, dass Sie aus mehreren Gründen gebrauchsfertige CSS-Frameworks oder -Bibliotheken finden werden. Ich denke jedoch, dass es sich lohnt, in eine benutzerdefinierte UI-Bibliothek zu investieren, die alle Produkte Ihres Unternehmens verwenden. Dies kann Ihnen viel Zeit sparen und als "Styleguide" für alle Ihre Anwendungen dienen.
Lèse Majesté
Eigentlich ist Bootstrap von Twitter genau das, wonach er fragt. Vollständig ausgearbeitetes UI / UX mit einer Vielzahl von Funktionen. Schnell, schnell, einfach.
Chris Kluis

Antworten:

3

Ich stimme früheren Antworten (Chris Lively und Lèse majestè) zu. Und auch ich fand den Link, den Sie zur Verfügung stellen, sehr cool.

Aber gehen wir zu meiner Antwort. Ich denke, du solltest es auf deine eigene Weise schaffen. Es gibt viele Ressourcen, die Sie verwenden können. Ich werde meine zitieren.

Während ich mein eigenes Framework und meine eigenen Generatoren entwickelte, wurde die Notwendigkeit eines UI-Frameworks offensichtlich, sodass alle Klassen und IDs in HTML-Vorlagen automatisch generiert wurden.

Nachdem ich die von mir verwendeten Kommunikationsmuster studiert habe, habe ich mein eigenes CSS-UI-Dienstprogramm (sowie einige JS-Dienstprogramme) erstellt. Der entscheidende Punkt in meinem Ansatz ist die Verwendung vieler verschiedener Klassen.

.erforderlich, .relaxed, .warning, .error, .success, .roundedBox, .gradient, .white70 [rgba (255,255,255,0.7)], .black30, .padded, sind einige Beispiele.

auf der HTML-Seite:

Außerdem ist es über 960 Grid implementiert und verfügt über viele andere Dienstprogramme, wie z. B. @ font-face-Kits. Tatsächlich führt mich dies mit nur wenigen Arbeiten. Hinzufügen korrekter Klassen und möglicherweise geringfügige Anpassungen für jedes Projekt.

Neben mehreren Klassen besteht der andere Kern darin, sicherzustellen, dass alles an ein Schwarz-Weiß-Grau-Schema gebunden bleibt und mit Trübungen arbeitet. Dies dient dazu, die für jedes Projekt erforderlichen Codeänderungen zu reduzieren. Daher verfügt jedes Projekt normalerweise über ein eigenes Farbschema.

Dave
quelle
+1, ich mag, wohin du damit gegangen bist. Ich hatte in der Vergangenheit ähnliche Absichten, die ich nie verfolgt habe. Also hast du deinen eigenen Generator gerollt. Halten Sie sich ziemlich fest an Ihre Namenskonventionen. Um eine Änderung zu veröffentlichen, geben Sie einfach neue Attribute ein und spucken ein neues CSS aus? Oh, und ja, dieser Link, den ich gegeben habe, war irgendwie cool, oder? Ich muss stundenlang versucht haben, eine übergeordnete CSS-Datei von verschiedenen verwandten Websites zu finden und abzurufen !! ...umsonst.
Chris Adragna
1
Ja, ich halte mich an meine Konventionen. Um es klarer zu machen, habe ich oben @ font-face-Regeln (wenn dies der Fall ist, aber der Prototyp immer vorhanden ist, muss nur der Dateiname und der Name der Schriftfamilie eingegeben werden), dann habe ich einen Reset (Layout und typografisch), viele Generische Klassen, Links, ein Dutzend IDs zu einem Grundlayout innerhalb des 960-Rasters (200px-Header, 720px-Hauptteil, 240px neben Anzeigen / Kontext, Fußzeile unten). Ah, ich behalte auch ein Snippet für soziale Netzwerke und das Wichtigste dazu Ich habe in den letzten Monaten (meine größte Änderung) die Klassen und IDs für Mikroformate, damit ich sie konfliktfrei verwenden kann.
Dave
Eine andere Praxis, die ich hinzugefügt habe, besteht darin, fast alle Regeln in diesem CSS beizubehalten. Zum Beispiel behalte ich für RGBA-Klassen, Deckkraft, Verläufe und Schatten eine Reihe von Regeln in einer IE.css-Datei, die bedingt enthalten sind. Dies ermöglicht es mir, gültigen Code beizubehalten, die Wartung zu vereinfachen und den IE-Unterricht genau zu betrachten. Es hat viel Recherche und harte Arbeit gekostet, aber jetzt brauche ich wirklich ein wenig, um ein schönes Layout für jeden Browser zu erreichen.
Dave
+50, ich markiere Ihre Frage als "die Antwort" und vergebe Ihnen das Kopfgeld. Ich wünschte, es gäbe eine Silberkugel-Antwort - das würde mir Zeit sparen. Trotzdem haben Sie sehr detailliert dargelegt, was zumindest ich glaube, und einen guten Einblick in die Erstellung der Engine gegeben, die das richtige CSS pro Projekt (und pro Bearbeitung oder Änderung) herausbringt. Vielen Dank auch für Ihr Follow-up. Es war sehr hilfreich.
Chris Adragna
Vielen Dank, dass Sie Chris Adragna. Ich verstehe deine Meinung. Es gibt einige Themen voller guter Antworten, und es kann schwierig sein, einen auszuwählen. Aber ich denke, jeder gewinnt, wenn wir zu einem solchen Thema kommen, weil das Wissen weitgehend geteilt wird und dies der wichtigste Punkt ist. Wichtiger als Ranglisten, Abzeichen und Punkte. Hey, danke für die gute Frage. Wir sehen uns.
Dave
3

Das Problem ist, dass "fertig" für verschiedene Menschen verschiedene Dinge bedeutet.

Vielleicht möchten Sie, dass ein hübscher kleiner Rand um Ihre Eingabeelemente eingeblendet wird, nachdem sie den Fokus erhalten haben. Vielleicht möchten Sie, dass alle Ihre Absatzelemente einen Rand von 4 Pixeln haben. Oder vielleicht möchten Sie sicherstellen, dass alle Schaltflächen blauen Text mit einem Glanzgefühl haben.

Sie sehen, es gibt keine einzige Lösung. Es ist alles eine Frage des Designs und des Geschmacks, die keineswegs für alle gleich ist UND sich weiterentwickelt. Web 2.0 brachte uns größere Schriftarten, größere Felder zum Eingeben und einen Mangel an verschachtelten Dropdown-Menüs (zum Glück). Wer weiß, was die UI-Geeks für "3.0" herausfinden werden ... Was auch immer es ist, es wird hoffentlich so radikal anders sein als das 2.0-Zeug von den Sites aus den 90ern.

Bestimmte Technologien wie WPF, Flash und Silverlight sind teilweise vorhanden, um einer Site ein völlig anderes Gefühl zu verleihen. Aber auch dies sind nur Ausgangspunkte, damit Ihre eigene Kreativität gedeihen kann. jQuery UI und Mocha UI fallen in die gleichen Kategorien.

Abhängig von der von Ihnen verwendeten Backend-Technologie gibt es nun Steuerungsanbieter (wie Telerik und DevExpress ), die sofort Skins für ihre Steuerungsbibliotheken bereitstellen, und sie sind eine großartige Möglichkeit, etwas zusammenzufügen, das tatsächlich ziemlich gut aussieht.

Nicht ich
quelle
Ich mag die Beispiele von terlerik und DevExpress, aber sie sind solide ASP.NET- oder Windows-Binärentwicklungstools. Gibt es solche Komponenten mit ähnlicher Passform und Verarbeitung (nicht MS)?
Chris Adragna
3

Ich bin überrascht, bis jetzt hat niemand eine Blaupause vorgeschlagen . Gut! Dies ist nur ein CSS-Framework, das Ihren Entwurfsaufwand verringern kann.


[Okt 2013]

Heute sind Foundation- und Bootstarp- Frameworks für die Webentwicklung inaktiv . Mit ihnen können Sie reaktionsschnelle Webseiten entwerfen.

Amit Kumar Gupta
quelle
2

Mocha UI und jQuery UI sind JavaScript-UI-Bibliotheken, die einen ganz anderen Zweck haben als ein CSS-Framework. Ich glaube nicht, dass Sie ein CSS-Framework finden werden, das genau das kann, was diese Bibliotheken leisten.

Erstens ist die Benutzeroberfläche mehr als nur Ästhetik oder visuelles Design. Es enthält eine definierte Reihe von Verhaltensweisen und Interaktionen. Aus diesem Grund ist JavaScript erforderlich, um eine UI-Bibliothek wie Mocha UI oder YUI zu erstellen. CSS ist einfach nicht in der Lage, eigenständig umfangreiche UI-Widgets zu generieren. Aus diesem Grund haben Nicht-AJAX-Apps keine sehr umfangreichen Benutzeroberflächen.

Die andere Sache ist, selbst wenn Sie nur an einem vorgefertigten Satz von UI-Grafiken interessiert sind, muss die Ästhetik einer UI mit dem Webdesign übereinstimmen, in dem sie platziert ist. Abgesehen von Rapid Prototyping würde es also nicht viel Sinn machen für ein vorgefertigtes UI "Thema". Aus diesem Grund können Sie in den meisten JavaScript-UI-Bibliotheken das Erscheinungsbild der mitgelieferten UI-Komponenten anpassen. Dazu müssen zusätzlich zu den CSS-Stilen auch Bilder bearbeitet werden.

Aus diesen Gründen sind die meisten CSS-Frameworks Frameworks zum Schreiben von CSS und keine UI-Frameworks, die Sie einfach in eine Anwendung einfügen können, damit sie gut aussieht. Solche Frameworks können das Schreiben von CSS für große Anwendungen sicherlich einfacher machen, aber am Ende benötigen Sie noch einen UI-Designer und einen Front-End-Programmierer, um die UI zu entwerfen und zu implementieren.

Nun, wenn Sie ein beliebtes CMS verwenden Sie könnte ein Thema für sie herunterladen oder kaufen. Ich kenne jedoch kein CSS-Theming / Skinning-Framework, das in einer benutzerdefinierten Anwendung verwendet werden kann. Außerdem haben die meisten Unternehmenswebanwendungen benutzerdefinierte Benutzeroberflächen, die keine vorgefertigten Themen sind.

Sie können jedoch das tun, was viele UX-Designer und Interaktionsdesigner tun. Erstellen Sie also eine unternehmensweite benutzerdefinierte UI-Bibliothek (oder lassen Sie eine für Sie erstellen), die alle Ihre Anwendungen verwenden. Dadurch wird sichergestellt, dass alle Ihre Anwendungen ein einheitliches "Signatur" -Look haben, das auf Ihre Marke abgestimmt ist. Dies erspart Ihren Front-End-Entwicklern die Zeit, die UI-Stile für jede App neu schreiben zu müssen.

Lèse Majestät
quelle
2

Als freies und sprachunabhängiges Framework wird immer das Compass- Framework verwendet, das in Verbindung mit der Sass- Sprache sehr gut funktioniert , wodurch Ihr CSS viel thematischer und wiederverwendbarer wird.

Wenn Sie Linux verwenden, kann es einfach über Rubygems installiert werden (beachten Sie, dass Sie nichts über Ruby wissen müssen, ich schreibe PHP und verwende Sass - jetzt bekannt als Scss für Sass3), obwohl es möglicherweise einfach ist, auf eines zuzugreifen andere Plattform auch, aber ich habe nicht überprüft.

Steven Rosato
quelle
1

Ich benutze Bootstrap , es ist erstaunlich.

Chris Kluis
quelle
Nach einem kurzen Blick scheint es, dass Sie Recht haben. Vielen Dank!
Chris Adragna