Tufte-css: Schaltflächenelement-Unterstützung

Ich bin fasziniert von der Idee. Ich wäre daran interessiert, mehr über Anwendungsfälle zu hören – insbesondere, warum Anker nicht ausreichen – sowie Ideen und Beiträge.

Der rote „Quilt herunterladen“-Button von ImageQuilt (http://imagequilts.com, ganz unten) könnte ein anständiger Ausgangspunkt sein.

Links stellen eine Verbindung und einen Sprungpunkt zu anderen Inhalten dar (ob In-Page, über Anchor oder Off, über href-Eigenschaften). Schaltflächen sind Auslöser für Aktionen, die den aktuellen Inhalt betreffen. Meiner Meinung nach hält das Festhalten an solchen Konventionen die Dinge klar. IOW Ich denke, ein Knopf wird benötigt.

Angenommen, ich möchte ein Diagramm zusammen mit der Option präsentieren, seine Daten auf eine bestimmte Weise zu filtern. Durch Klicken auf die Schaltfläche wird der Filter umgeschaltet, und der vorhandene Inhalt, das interaktive Diagramm, wird gemäß den neu geänderten (und gebundenen) Daten aktualisiert.

Ich denke, es ist eine Frage der Zeit, bis diese Frage geklärt ist. Sie müssen es nicht geöffnet lassen. Ich benutze tufte-css schon seit einiger Zeit für meine Seite und bin mit den Ergebnissen sehr zufrieden. Ich werde mich bald mit dem Styling von Schaltflächen für ein Projekt befassen, an dem ich arbeite, und mich entweder für die Verwendung von Links entscheiden oder etwas anderes vorschlagen (Pull-Request).

👍
Interessiert zu hören, welche Arten von Schaltflächen Sie sich einfallen lassen. Ich denke, ein Teil des Problems bei der Entwicklung einer allgemeinen Lösung besteht darin, dass jede Visualisierung/Tabelle/Diagramm ihren eigenen benutzerdefinierten Stil hat, der _a priori_ schwer zuzuordnen ist.

Ich habe die folgenden Stile für Radio- und normale Schaltflächen für eine App entwickelt, die ich schreibe, wobei ich sowohl nach Klarheit der Absicht als auch nach Harmonisierung mit dem bestehenden Framework-Stil strebe.

Bezugnehmend auf den Screenshot unten:

• Normale Schaltflächen, z. B. die PLAY-Schaltfläche, haben einen durchgezogenen dunklen Rand (#111).
• Optionsschaltflächen sind mit einem Bindestrich umrandet, wenn sie nicht ausgewählt sind (die 9x9-Schaltfläche), und umgekehrt (#111-Hintergrund und #FFFFF8-Farbtext), wenn sie ausgewählt sind (die 5x5-Schaltfläche).

@gamecubate Ich habe in meiner Implementierung zufällig dasselbe mit Schaltflächen gemacht. Es funktioniert für mich, aber als allgemeine Implementierung können die Stile mit Diagrammen in Konflikt geraten, die Teilnehmer durch Variationen in der Linie bezeichnen (gestrichelt, gepunktet, durchgezogen usw.). Wenn man einen Button hätte, der mit einem bestimmten Teilnehmer interagiert, könnte es sich lohnen, ihn entsprechend zu gestalten.

@frostbitten Stimmt. Man könnte auch anfangen, Farbe für die Teilnehmer zu verwenden. Ich verstehe das Zögern von @daveliepmann , einen Standardstil für Schaltflächen fest zu codieren. Es gibt so viele Anwendungsfälle.

Entschuldigung für die Wiederbelebung dieses Problems, aber ich war auch neugierig.

Ich habe ein Projekt, das dieses verwendet, und die Schaltflächen waren zunächst völlig ungestylt , hauptsächlich mit dem Standard-CSS. Die angewendeten Stile stammten offenbar aus dem "User Agent Stylesheet". (Dies könnte eine Eigenart der Version von Google Chrome sein, die ich verwende.)

Ich fand, dass das Hinzufügen dieses CSS gut funktioniert:

button {
  font-family: inherit;
  font-size:   inherit;
  padding:     0.5em;
}

Beispiel:

Die Schaltfläche sieht aus wie eine Schaltfläche, hat aber eine angenehmere Schriftart (als Arial) und passt nun gut zum Rest des gestalteten Inhalts.

Ich konnte die Schaltfläche "Quilt herunterladen" auf der erwähnten ImageQuilts-Seite nicht finden. Es sieht so aus, als wäre es Teil einer Google Chrome-Erweiterung. Aber generell gefällt mir der Look. Ich konnte keine fette kursive Schriftart mit dem Standard-CSS für Schriftarten aus diesem Projekt erhalten.

Ich mag auch das Beispiel von @gamecubate . @gamecubate – hättest du etwas dagegen, das CSS zu teilen?

@kenny-evitt Sichere Sache. Hier ist es in seiner ganzen Pracht. :)

.btn {
  border: 2.5px solid #111;
  color: #111;
  display: inline-block;
  font-size: 1.1rem;
  text-transform: uppercase;
  padding: 15px 10px;
  margin: 5px;
  min-width: 60px;
  text-align: center;
  cursor: pointer;
}

.btn.large {
  border: 3px solid #111;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 10px 5px;
  padding: 15px;
}

.btn.mini {
  border: 1px solid #111;
  color: #111;
  min-width: 40px;
  line-height: 40px;
  padding: 0 10px;
}

.btn.radio {
  border-style: dashed;
}

.btn.selected {
  background: #111;
  color: #FFFFF8;
}

.btn.white {
  background: #FFFFF8;
  color: #111;
}

.btn.flash {
  background: #EEE!important;
}

.btns {
  margin: 3px 0;
}

.btns .btn:first-child {
  margin-left: 0;
}

.btns .btn:last-child {
  margin-right: 0;
}

.btns.stack {
  margin: 15px 0 20px 0;
}

.btns.stack > .btn {
  display: block;
  margin: 5px 0;
}

a {
  font-size: 1.5rem;
  color: #111;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 2px solid #111;
}