Tufte-css: prise en charge des éléments de bouton

Je suis intrigué par l'idée. J'aimerais en savoir plus sur les cas d'utilisation, en particulier sur la façon dont les ancres ne suffisent pas, ainsi que sur les idées et les contributions.

Le bouton rouge "Télécharger Quilt" d'ImageQuilt (http://imagequilts.com, vers le bas) pourrait être un bon point de départ.

Les liens représentent une connexion et un point de saut vers un autre contenu (que ce soit dans la page, via une ancre ou hors, via les propriétés href). Les boutons sont des déclencheurs d'actions affectant le contenu actuel . L'OMI qui s'en tient à de telles conventions garde les choses claires. IOW je pense qu'un bouton est nécessaire.

Supposons que je souhaite présenter un graphique avec la possibilité de filtrer ses données d'une certaine manière. Cliquer sur le bouton basculerait le filtre et le contenu à portée de main, le graphique interactif, serait mis à jour en fonction de ses données nouvellement modifiées (et liées).

Je pense que c'est une question de temps avant que cette question ne soit réglée. Pas besoin de le laisser ouvert. J'utilise tufte-css pour mon site depuis un moment maintenant et je suis très satisfait des résultats. J'aborderai bientôt le style des boutons pour un projet sur lequel je travaille et je me contenterai soit d'utiliser des liens, soit de proposer (pull request) autre chose.

👍
Intéressé de savoir quels types de boutons vous proposez. Je pense qu'une partie du problème avec le développement d'une solution générale est que chaque visualisation/tableau/graphique aura son propre style personnalisé qui est difficile à attribuer _a priori_.

J'ai proposé les styles suivants pour la radio et les boutons réguliers pour une application que j'écris, en m'efforçant à la fois de clarifier l'intention et d'harmoniser avec le style de cadre existant.

Se référant à la capture d'écran ci-dessous :

• Les boutons normaux, par exemple le bouton PLAY, ont une bordure noire unie (#111).
• Les boutons radio (option) sont entourés d'un tiret lorsqu'ils ne sont pas sélectionnés (le bouton 9x9) et inversés (arrière-plan #111 et texte de couleur #FFFFF8) lorsqu'ils sont sélectionnés (le bouton 5x5).

@gamecubate Il m'est arrivé de faire la même chose avec des boutons dans mon implémentation. Cela fonctionne pour moi, mais en tant que mise en œuvre générale, les styles peuvent entrer en conflit avec les graphiques qui désignent les participants par des variations de la ligne (pointillés, pointillés, solides, etc.). Si l'on avait un bouton qui s'engage avec un participant spécifique, il pourrait être utile de le styliser en conséquence.

@frostbitten Vrai. On pourrait aussi commencer à utiliser la couleur pour les participants. Je comprends l'hésitation de @daveliepmann à coder en dur un style standard pour les boutons. Il y a tellement de cas d'utilisation.

Désolé d'avoir ressuscité ce problème mais j'étais aussi curieux à ce sujet.

J'ai un projet utilisant celui-ci et les boutons étaient entièrement sans style au début avec principalement le CSS standard. Les styles appliqués provenaient apparemment de la "feuille de style de l'agent utilisateur". (Cela pourrait être une bizarrerie de la version de Google Chrome que j'utilise.)

J'ai trouvé que l'ajout de ce CSS fonctionnait bien:

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

Exemple:

Le bouton ressemble à un bouton, mais a une police plus agréable (qu'Arial) et s'intègre désormais parfaitement avec le reste du contenu stylé.

Je n'ai pas trouvé le bouton "Télécharger Quilt" sur la page ImageQuilts mentionnée . Il semble que cela fasse partie d'une extension Google Chrome. Mais j'aime le look en général. Je n'ai pas pu obtenir une police italique en gras pour travailler avec la police CSS standard de ce projet.

J'aime aussi l' exemple de @gamecubate . @gamecubate – cela vous dérangerait-il de partager le CSS ?

@kenny-evitt Bien sûr. Le voici, dans toute sa splendeur. :)

.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;
}