Tufte-css: soporte de elemento de botón

Me intriga la idea. Me interesaría saber más sobre casos de uso, específicamente, cómo las anclas no son suficientes, así como ideas y contribuciones.

El botón rojo "Descargar edredón" de ImageQuilt (http://imagequilts.com, cerca de la parte inferior) podría ser un buen punto de partida.

Los enlaces representan una conexión y un punto de salto a otro contenido (ya sea en la página, a través de un ancla o fuera de ella, a través de las propiedades href). Los botones son activadores de acciones que afectan al contenido actual . En mi opinión, adherirse a tales convenciones mantiene las cosas claras. IOW Creo que se necesita un botón.

Digamos que quiero presentar un gráfico junto con la opción de filtrar sus datos de cierta manera. Al hacer clic en el botón, se alternaría el filtro y el contenido disponible, el gráfico interactivo, se actualizaría de acuerdo con los datos recién modificados (y enlazados).

Creo que es cuestión de tiempo antes de que se resuelva esta cuestión. No es necesario dejarlo abierto. He estado usando tufte-css para mi sitio por un tiempo y estoy muy satisfecho con los resultados. Pronto abordaré el estilo de los botones para un proyecto en el que estoy trabajando y me decidiré por usar enlaces o propondré (solicitud de extracción) otra cosa.

👍
Interesado en escuchar qué tipo de botones se te ocurren. Creo que parte del problema con el desarrollo de una solución general es que cada visualización/tabla/gráfico tendrá su propio estilo personalizado que es difícil de asignar _a priori_.

Se me ocurrieron los siguientes estilos para los botones de radio y regulares para una aplicación que estoy escribiendo, esforzándome tanto por la claridad de la intención como por la armonización con el estilo del marco existente.

Refiriéndose a la captura de pantalla a continuación:

• Los botones regulares, por ejemplo, el botón PLAY, tienen un borde oscuro sólido (#111).
• Los botones de radio (opción) se destacan con un guión cuando no están seleccionados (el botón 9x9) y se invierten (fondo #111 y texto de color #FFFFF8) cuando están seleccionados (el botón 5x5).

@gamecubate Hice lo mismo con los botones en mi implementación. Funciona para mí, pero como implementación general, los estilos pueden entrar en conflicto con los gráficos que designan a los participantes por variaciones en la línea (discontinua, punteada, continua, etc.). Si uno tiene un botón que interactúa con un participante específico, podría valer la pena diseñarlo para que coincida.

@frostbitten Cierto. También se podría comenzar a usar color para los participantes. Entiendo la vacilación de @daveliepmann de codificar un estilo estándar para los botones. Hay tantos casos de uso.

Lo siento por resucitar este problema, pero también tenía curiosidad sobre esto.

Tengo un proyecto que usa este y los botones no tenían ningún estilo al principio con la mayoría del CSS estándar. Los estilos aplicados aparentemente eran de la "hoja de estilo del agente de usuario". (Esto podría ser una peculiaridad de la versión de Google Chrome que estoy ejecutando).

Descubrí que agregar este CSS funciona muy bien:

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

Ejemplo:

El botón parece un botón, pero tiene una fuente más agradable (que Arial) y ahora encaja muy bien con el resto del contenido con estilo.

No pude encontrar el botón "Descargar edredón" en la página de ImageQuilts mencionada . Parece que es parte de una extensión de Google Chrome. Pero me gusta el aspecto en general. No pude obtener una fuente cursiva negrita para trabajar con la fuente CSS estándar de este proyecto.

También me gusta el ejemplo de @gamecubate . @gamecubate : ¿te importaría compartir el CSS?

@ kenny-evitt Claro. Aquí está, en todo su esplendor. :)

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