Tufte-css: поддержка элемента кнопки

Я заинтригован идеей. Мне было бы интересно услышать больше о вариантах использования — в частности, о том, что якорей недостаточно, — а также об идеях и предложениях.

Красная кнопка ImageQuilt «Скачать Quilt» (http://imagequilts.com, внизу) может быть хорошей отправной точкой.

Ссылки представляют собой соединение и точку перехода к другому контенту (будь то на странице, через привязку или вне, через свойства href). Кнопки — это триггеры для действий, влияющих на текущий контент. ИМО, придерживаясь таких соглашений, сохраняет ясность. IOW Я думаю, что кнопка необходима.

Скажем, я хочу представить диаграмму вместе с возможностью фильтрации ее данных определенным образом. Нажатие на кнопку переключает фильтр, а доступное содержимое, интерактивная диаграмма, обновляется в соответствии с недавно измененными (и связанными) данными.

Я думаю, что это вопрос времени, когда этот вопрос будет решен. Нет необходимости оставлять его открытым. Я уже давно использую tufte-css для своего сайта и очень доволен результатами. Вскоре я займусь стилем кнопок для проекта, над которым я работаю, и либо остановлюсь на использовании ссылок, либо предложу (pull request) что-то еще.

👍
Интересно, какие у вас кнопки. Я думаю, что часть проблемы с разработкой общего решения заключается в том, что каждая визуализация/таблица/диаграмма будет иметь свой собственный стиль, который трудно назначить _a priori_.

Я придумал следующие стили для переключателей и обычных кнопок для приложения, которое я пишу, стремясь как к ясности намерений, так и к гармонизации с существующим стилем фреймворка.

Ссылаясь на скриншот ниже:

• Обычные кнопки, например кнопка PLAY, имеют сплошную темную (#111) рамку.
• Радиокнопки (дополнительные) обведены тире, когда они не выбраны (кнопка 9x9), и инвертированы (фон № 111 и цветной текст # FFFFF8), когда они выбраны (кнопка 5x5).

@gamecubate Я сделал то же самое с кнопками в своей реализации. Это работает для меня, но в качестве общей реализации стили могут конфликтовать с графиками, на которых участники обозначаются вариациями линии (штриховая, пунктирная, сплошная и т. д.). Если бы у кого-то была кнопка, которая взаимодействует с конкретным участником, возможно, было бы целесообразно оформить ее так, чтобы она соответствовала.

@frostbitten Верно. Можно также начать использовать цвет для участников. Я понимаю нерешительность @daveliepmann жестко закодировать стандартный стиль для кнопок. Вариантов использования очень много.

Извините, что поднимаю эту тему, но мне тоже было любопытно.

У меня есть проект, использующий этот, и сначала кнопки были полностью без стилей , в основном со стандартным CSS. Примененные стили, по-видимому, были взяты из «таблицы стилей пользовательского агента». (Это может быть причудой версии Google Chrome, которую я использую.)

Я обнаружил, что добавление этого CSS работает хорошо:

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

Пример:

Кнопка выглядит как кнопка, но имеет более приятный шрифт (чем Arial) и теперь хорошо сочетается с остальным стилизованным содержимым.

Я не смог найти кнопку «Загрузить лоскутное одеяло» на упомянутой странице ImageQuilts . Похоже, это часть расширения Google Chrome. Но внешний вид мне в целом нравится. Мне не удалось заставить полужирный курсивный шрифт работать со стандартным шрифтом CSS из этого проекта.

Мне также нравится пример @gamecubate . @gamecubate — не могли бы вы поделиться CSS?

@kenny-evitt Конечно. Вот он, во всей красе. :)

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