Design-Fragen

[makki]

Zwei Sachen:
1) Design pure: z.B. beim diagram_info wirkt der Wert (value) IMHO ziemlich an den linken Rand gebatzt, in den anderen Designs ist das jeweils zentriert;
Intention oder versehen? Falls ersteres vielleicht ein bisschen mehr padding?

2) Ich wollte gerade mal ein "GreyGreen" usw. Styling(*) machen;
Problem/Frage: die Farben (Werte) sind ja pro Design im basic.css festgelegt, also kann man zwar ein Styling "yellow" machen aber im CSS kann daraus ja auch dunkelblassblau werden..
Feature oder Flaw?
Irgendwie natürlich ein Feature, weil unterschiedliche Design somit unterschiedlich Grün sein können;
-> Dann müssten in den CSS der Designs aber viel mehr "Farben" hinterlegen, die man in den Stylings dann verwenden kann. Also zumindest die 18 "HTML Grundfarben"?
-> Spontaner Einfall war: so wie bisher im CSS definierbar aber im Styling mit "#xxXXxx" übersteuerbar?

Makki

* für Matthias und den Rest der Welt, der dieses Rot-Grün-Spiel eigentlich glaub ich verwirrend findet. Aber auch für die ca. 5-10% mit einer Rot-grün sehschwäche etwas sauber erkennbares..

[JNK]

Zwei Sachen:
1) Design pure: z.B. beim diagram_info wirkt der Wert (value) IMHO ziemlich an den linken Rand gebatzt, in den anderen Designs ist das jeweils zentriert;
Intention oder versehen? Falls ersteres vielleicht ein bisschen mehr padding?

Ohne das jetzt im Detail nachvollzogen zu haben: Ich meine default-Ausrichtung im "pure" ist left-align. Vermutlich wird es besser, wenn man style="center" mit übergibt.

2) Ich wollte gerade mal ein "GreyGreen" usw. Styling(*) machen;
Problem/Frage: die Farben (Werte) sind ja pro Design im basic.css festgelegt, also kann man zwar ein Styling "yellow" machen aber im CSS kann daraus ja auch dunkelblassblau werden..
Feature oder Flaw?

Ich denke sowohl als auch. Schöner wären Klassen ".on" und ".off", weil man damit gleich ganz viele Dinge auf einmal erschlagen könnte, die Textfarbe über color, evtl ein Icon über background-image etc. Das wäre etwas "übersichtlicher" als das .red und .green umzudefinieren.
Aber die Farbgestaltung gehört eigentlich zum Design denke ich, deswegen ist .red und .green umdefinieren auch eine Möglichkeit. Zentral würd eich sowas eh nicht definieren, da ja auch ein Design ".red" und ".green" benutzen könnte um z.B. den background zu ändern, nicht die Textfarbe, weil die z.B. immer weiss sein soll.

Gruss,

der Jan

[Chris M.]

Zwei Sachen:
1) Design pure: z.B. beim diagram_info wirkt der Wert (value) IMHO ziemlich an den linken Rand gebatzt, in den anderen Designs ist das jeweils zentriert;
Intention oder versehen? Falls ersteres vielleicht ein bisschen mehr padding?

Sieht bei mir genau so wie bei den anderen Buttons in Pure aus. Evtl. wirkt es dadurch komisch, dass normalerweise ein etwas längerer Text drinnen steht als nur eine kurze Zahl.
Lösung wäre ein Align für den Button-Inhalt.

2) Ich wollte gerade mal ein "GreyGreen" usw. Styling(*) machen;
Problem/Frage: die Farben (Werte) sind ja pro Design im basic.css festgelegt, also kann man zwar ein Styling "yellow" machen aber im CSS kann daraus ja auch dunkelblassblau werden..
Feature oder Flaw?

Das Thema hatte ich mal im großen Thread addressiert.

IMHO muss jedes Design selbst alle Farben definieren, damit diese zusammen passen. Dass die den Erwartungen entsprechen (z.B. nicht Rot mit Grün vertauschen) ist in der Verantwortung des Designers.
Was aber noch fehlt - dazu gab es auch damals keine Antwort - ist der Set an Farben, die ein Design zu definieren hat.

Was wir uns dabei noch überlegen könnten: wir könnten eine Design unabhängige CSS machen, die mal das wichtigste definiert - und das ein Design natürlich problemlos überladen darf...

[Chris M.]

Ich denke sowohl als auch. Schöner wären Klassen ".on" und ".off", weil man damit gleich ganz viele Dinge auf einmal erschlagen könnte, die Textfarbe über color, evtl ein Icon über background-image etc.

Sehr guter Vorschlag!

[JNK]

Was wir uns dabei noch überlegen könnten: wir könnten eine Design unabhängige CSS machen, die mal das wichtigste definiert - und das ein Design natürlich problemlos überladen darf...

Haben wir seit gestern schon: textglobal.css (text, weil im Augenblick nur die colspan-Klassen darin definiert sind und colspan in einer 2D-/3D-Darstellung wenig Sinn macht.

Gruss,

der Jan

[makki]

Sieht bei mir genau so wie bei den anderen Buttons in Pure aus. Evtl. wirkt es dadurch komisch

Wenn da als erster Buchstabe ein O statt einem A steht, siehts IMHO auch nach Presswurst aus

Lösung wäre ein Align für den Button-Inhalt.

Hmm, das definiert ja das Design und das finde ich auch garnicht so falsch.. Also ich will das garnicht pro Button festlegen müssen
Ein ticken padding oder so, ist mir nur aufgefallen aber ich bin auch nicht die Messlatte für UI-Design

Was wir uns dabei noch überlegen könnten: wir könnten eine Design unabhängige CSS machen, die mal das wichtigste definiert - und das ein Design natürlich problemlos überladen darf...

Hmm, das klingt doch verdammt gut! Die Grundfarben vordefiniert, das Design macht den Feinschliff - so vom Designer gewollt.


Bonusfrage: würde es Sinn machen die Font-grösse - default im Design - per XML konfigurierbar zu machen? Ich stell die alle nämlich immer mind. 2 Stufen runter. Also so eine Art "Offset" (wäre aber evtl. einiges an Arbeit, ist mir klar..)

Makki

[Chris M.]

Wenn da als erster Buchstabe ein O statt einem A steht, siehts IMHO auch nach Presswurst aus

Padding hat den Nachteil, dass es im Zweifel wertvollen Platz wegnimmt.
Das das Left-Algin per Default ist, ist auch mehr Zufall als Absicht => Lieber das Default auf Center ändern.

Bonusfrage: würde es Sinn machen die Font-grösse - default im Design - per XML konfigurierbar zu machen? Ich stell die alle nämlich immer mind. 2 Stufen runter. Also so eine Art "Offset" (wäre aber evtl. einiges an Arbeit, ist mir klar..)

Schwierige Frage, denn was soll alles Customisierbar sein?
Nur die Font-Größe? Oder auch die Widget-Größe? Oder...

Evtl. wäre es auch hier am besten eine custom.css zu haben, die das Design überlädt. Wäre nur die Frage, ob das auf das gerade gewählte Design Rücksicht nehmen muss (und wenn ja: wie).

[makki]

=> Lieber das Default auf Center ändern.

So sei es denn

Evtl. wäre es auch hier am besten eine custom.css zu haben, die das Design überlädt. Wäre nur die Frage, ob das auf das gerade gewählte Design Rücksicht nehmen muss (und wenn ja: wie).

Das klingt doch nach nem guten Plan, einfach eine custom.css pro Design, man wird praktisch ja selten selbst mehrere benutzen und selbst wenn macht sich der kenner dann halt einen symlink auf eine wenns in mehreren Designs greifen soll(?)


-> Würde ich dann mal so versuchen, testen und commiten, inkl. Umbenennung der textglobal.css in designglobals.css wenn keine Einwände kommen..
Vielleicht auch gleich in die Demo-config mit rein.

Makki

[JNK]

Meinetwegen mach. textglobal.css wird im Augrnblick vor basic.css in templateengine.js geladen.

Gruß,

der Jan

[makki]

Da war kein Einspruch, also hab ich mal (auch wenn mir bei sowas noch immer mulmig ist, aber ich glaube langsam habe ich das mit den CSS auch wenigstens im Kern verstanden.. es ist nur die Reihenfolge und man muss sehen welches Attribut nun am Ende gewinnt, hey, ganz einfach )
Lässt sich ja ggfs noch immer reverten..

Makki

[dombn]

[…] CSS auch wenigstens im Kern verstanden.. es ist nur die Reihenfolge und man muss sehen welches Attribut nun am Ende gewinnt, hey, ganz einfach ) […]

Nicht ganz bei CSS gilt die sogenannte Spezifität. Solange diese gleich ist, gilt die Reihenfolge, wie du erkannt/beschrieben hast. Sobald die Spezifität abweicht, setzt sich immer der Selektor mit dem höchsten Wert durch.

Zum Beispiel ist ein ID-Selektor (#irgendwas) eine höhere Spezifität als ein Klassen-Selektor (.was-anderes). Welche Werte da gelten und wie sie bei Kombinationen gebildet werden, wird ganz gut hier erklärt:
SELFHTML: Stylesheets / CSS-Formate definieren / Kaskade - Anwendung von Stylesheets auf Dokumente

Wenn man das mal im Gefühl hat, hat man meist auch die Kaskaden recht gut im Griff. Dann kommt es im Prinzip nur noch auf einen guten Aufbau an.

[Chris M.]

Und deswegen die Custom.css einfach am Schluss laden - dann kann der User etwas überschreiben, muss es aber nicht.