Tufte-css: ¡Comparta sus usos de Tufte CSS!

Usé TufteCSS aquí: gwydion.uk .

Hice muy pocos cambios de CSS (todos en index.html), incluido el ajuste de la nota al margen y el relleno de la parte superior para realinear las líneas de base (consulte el n. ° 29). Otros cambios fueron integrar Lightbox y, por lo tanto, evitar los bordes inferiores en las imágenes vinculadas. También utilicé un estilo de subtítulo alternativo, ya que (para mí) el subtítulo inclinado en la barra lateral se veía extraño con fotos en lugar de figuras.

De lo que estoy menos seguro es si este es el tipo de página para la que TufteCSS es realmente apropiado. Ciertamente está doblando el caso de uso previsto. Sin embargo, hay un elemento de broma en mi uso aquí, por lo que funciona para la audiencia prevista ... ¡es solo que la audiencia prevista es modesta!

¡Felicitaciones @jjsanderson! Admito que no había pensado en un anuncio de nacimiento como un caso de uso, pero es bastante bueno.

¡Gracias! Sí, es un caso de uso extraño. Puede agregarlo a los documentos como ejemplo, por supuesto, aunque está bastante lejos del tipo de documento previsto.

Lo uso en una pequeña cosa similar a un blog que comencé hace unas semanas. ¡A las personas que leen lo que escribo les ha gustado! Dicho esto, es prácticamente un proyecto personal.

Fuera de tema, pero hice ese sitio hace unas tres semanas (22 de octubre aproximadamente). ¿Ha habido actualizaciones importantes de Tufte CSS desde entonces que deba conocer?

Actualización: ya no uses ese proyecto, así que eliminé el enlace.

@sotojuan lindo! Yo también prefiero Palatino a Bembo. : +1:

@jjsanderson ¡ Me encanta que hayas agregado el material gráfico abierto!

@mandaris ¡

Estoy usando Tufte CSS - y Tufte-LaTeX - en mi sitio _Secretario de Relaciones Exteriores_ ( repositorio de Github ). Cada página de ese sitio existe tanto como una página web como como un archivo PDF en la clase Tufte Handout, ambos generados a partir del mismo marcado con Pollen .

Para ver el marcado utilizado por Pollen para generar cada página (excepto la página principal), puede hacer clic en el enlace "◊Pollen source" en la parte superior ( ejemplo ). El polen es realmente bueno porque te permite diseñar tu propio marcado y apuntar a cualquier formato de fuente de texto. Entonces, aunque el marcado HTML en Tufte CSS es un poco complicado, se vuelve bastante fácil de usar en la práctica: por ejemplo, ◊numbered-note{Sidenote text} generará todo el marcado para una nota al margen.

Además, Polen se utiliza para unir páginas individuales en un PDF completo listo para imprimir del libro 'Flatland', también en estilo Tufte.

Estoy usando la última versión de Tufte CSS sin cambios reales; He guardado cualquier CSS propio en una hoja de estilo separada.

@otherjoel Cosas muy bonitas. ¡Gracias por compartir!

Tengo una combinación interesante con bootstrap que estoy usando en una página de proyecto: http://frostbitten.github.io/ByeBox/

También hice una bifurcación que compartimenta el formato tufte-css para poder crear bloques de contenido modular así:

Acabo de prefijar todos los selectores css con un identificador personalizado .tufte-body

Otra iteración:
Éste incorpora elementos de formulario personalizados:

Escritorio: Móvil:

Lo usé para Ranked Situational Fury , que en su mayoría son listas de palabras, sus definiciones y las fuentes de sus definiciones.

Empecé a escribir un nuevo blog con Tufte CSS. Me gusta mucho como se ve. Anteriormente había hecho mi propio CSS para otro sitio que se acercaba bastante al CSS de Tufte, así que pensé que podría usar Tufte en lugar de migrar el código antiguo al nuevo generador de sitios estáticos.

Estoy usando Lekor ahora, que IMO ha solucionado algunos de los problemas de todos los generadores de sitios estáticos anteriores (como hexo, etc.).

Una cosa que noté es que no hay ningún CSS de medios impresos. ¿Sería eso algo que podrías agregar?

@steckerhalter Al principio, solía haber algunos CSS básicos de medios impresos. No estoy seguro de si se eliminó en la gran actualización el pasado ~ junio / julio o si fue antes de eso, pero la razón fue la falta de deseo de QA un caso de uso completamente diferente. Sugiero verificar el historial de confirmaciones desde hace mucho tiempo. ¡Salud!

¡Creé un tema Jekyll que implementa Tufte CSS! También es compatible con AMP, por lo que es súper rápido. Compruébelo usted mismo: Inmaculado .

He adoptado TufteCSS para mi sitio y me encanta. Hasta ahora, no se necesitaron ni se hicieron ajustes (en la página principal y algunos otros) y he usado el marco tal como está. ¡Buen trabajo!

Usándolo para mi blog en markbucciarelli.com . Muy contento con el trabajo, gracias! (Lo estoy usando con una solicitud de extracción de envoltura de código).

Estoy usando TufteCSS para mi sitio personal a través de un proyecto que creé llamado ox-tufte que exporta documentos en modo Org de Emacs en HTML compatible con TufteCSS.

@siawyoung (y @ clayh53 ) me han ganado parcialmente, pero también he compilado un tema de Jekyll. Intenta quedarse lo más cerca posible de tufte-css. https://github.com/sdruskat/tufte-css-jekyll.

Creé un proyecto llamado

Puedes averiguar cómo es en tufte-markdown .

Utilizo Tufte CSS en mplewis.com ( código fuente ).

Es un trabajo en progreso, pero estoy usando mi propia adaptación de Tufte CSS en mercury.photo . Publicaré un artículo sobre cómo usar los códigos cortos de Wordpress de nota al margen y nota al margen que creé para acelerar mi flujo de trabajo más adelante; Lo vincularé cuando esté listo.

Acabo de terminar de reconstruir mi sitio web personal para usar tufte-css:

https://jasonpeacock.com

Escribí mis aprendizajes y herramientas utilizadas para generar mi sitio web a partir de markdown usando Pandoc, Pandocomatic, pandoc-sidenote y tufte-pandoc-css:

https://jasonpeacock.com/projects/markdown-websites/

Todo está disponible en mi repositorio:

https://github.com/jasonpeacock/websites/tree/master/jasonpeacock.markdown

Estoy intentando crear un diseño de Tufte CSS usando Bootstrap 4.
https://github.com/dylan-k/tufte-bootstrap
Colaboradores bienvenidos.

Estoy intentando crear un diseño de Tufte CSS usando Bootstrap 4.
https://github.com/dylan-k/tufte-bootstrap
Colaboradores bienvenidos.

Eché un vistazo a su error en las herramientas del inspector y no pude averiguar qué estaba empujando el párrafo hacia abajo. El CSS original de Tufte utiliza un flotador derecho para realizar las notas al margen y las notas al margen. Su solución es más elegante, ¡espero que pueda solucionarlo!

Recientemente reconstruí mi sitio con Tufte CSS colocándolo en Jekyll, usándolo como está. Los puntos principales son:

• Combina bien con MathJax.
• Navegación horizontal simple agregada en la parte superior de cada página.
• La página de inicio enumera las 5 publicaciones más recientes.
• La página de Archivos incluye enlaces permanentes a todas las publicaciones en orden cronológico inverso.
• Cada publicación está escrita en formato html, con Jekyll envolviendo cada publicación en una etiqueta <article> .
• La viabilidad de usar Markdown para publicaciones con el tema es incierta.

https://juliuso.com

Hola amigos, después de mucho tiempo recopilando usos de Tufte CSS aquí, decidí mover las cosas a la wiki , donde encaja un poco mejor. Creo que copié todo; Si me perdí algo, no dudes en editar la wiki tú mismo.

Gracias por compartir :)

Tengo un uso poco convencional para Tufte CSS en mi pequeño sitio para palíndromos que he escrito en finlandés: palindromi.fi

Otro sitio en el que acabo de utilizar Tufte CSS es etätunnit.taiteilijat.fi (hasta ahora solo en finlandés) que contiene guías para usar la aplicación de videoconferencia Zoom para lecciones remotas de instrumentos musicales, y configurar su capacidad única para obtener una buena calidad de sonido para música en lugar de optimizar para el habla.