Tufte-css: Compartilhe seus usos do Tufte CSS!

Usei o TufteCSS aqui: gwydion.uk .

Fiz algumas alterações de CSS (todas em index.html), incluindo estreitar a nota lateral à esquerda e preencher a parte superior para realinhar as linhas de base (consulte o nº 29). Outras mudanças foram integrar o Lightbox e, portanto, evitar bordas inferiores nas imagens vinculadas. Também criei um estilo de legenda alternativo, já que (aos meus olhos) a legenda inclinada para a barra lateral parecia estranha com fotos em vez de figuras.

O que tenho menos certeza é se esse é o tipo de página para a qual o TufteCSS é realmente apropriado. Certamente está distorcendo o caso de uso pretendido. No entanto, há um elemento na piada para eu usá-lo aqui, então funciona para o público-alvo ... só que o público-alvo é modesto!

Parabéns @jjsanderson! Admito que não pensei em um anúncio de nascimento como um caso de uso, mas é muito bom.

Obrigado! Sim, é um caso de uso estranho. Você pode adicioná-lo aos documentos como um exemplo, é claro, embora esteja bem longe do tipo de documento pretendido.

Eu o uso em um pequeno blog que comecei há algumas semanas. Gente que leu o que eu escrevo gostou! Dito isso, é basicamente um projeto pessoal.

Fora do assunto, mas fiz esse site há cerca de três semanas (22 de outubro). Houve alguma atualização significativa no Tufte CSS desde então que eu deva saber?

Atualização: Não use mais esse projeto, então removi o link.

@sotojuan legal! Eu também prefiro Palatino a Bembo. : +1:

@jjsanderson , adorei você ter adicionado as coisas de gráfico aberto!

@mandaris Hah! Você sabe, eu tinha esquecido que tinha feito isso. Posso ser contra fotos de bebês em todo o Facebook, mas, neste caso, o Facebook era praticamente o público-alvo. Então ... sim, opengraph. :-)

Estou usando o Tufte CSS - e o Tufte-LaTeX - no meu site _Secretary of Foreign Relations_ ( Github ). Cada página desse site existe como uma página da web e como um arquivo PDF na classe Folheto do Tufte, ambos gerados a partir da mesma marcação com o Pollen .

Para ver a marcação usada pelo Pollen para gerar cada página (exceto para a página principal), você pode clicar no link “◊Fonte do Pollen” no topo ( exemplo ). O Pollen é muito bom porque permite que você crie sua própria marcação e direcione qualquer formato de texto. Portanto, embora a marcação HTML no Tufte CSS seja um pouco complicada, ela se torna muito fácil de usar na prática: por exemplo, ◊numbered-note{Sidenote text} gerará toda a marcação para uma nota lateral.

Além disso, o pólen é usado para unir páginas individuais em um PDF pronto para impressão completo do livro 'Flatland', também no estilo Tufte.

Estou usando a versão mais recente do Tufte CSS sem mudanças reais; Eu mantive qualquer CSS próprio em uma folha de estilo separada.

@otherjoel Coisas muito boas. Obrigado por compartilhar!

Eu tenho uma combinação interessante com bootstrap que estou usando em uma página de projeto: http://frostbitten.github.io/ByeBox/

Também fiz um fork que compartimentaliza o formato tufte-css para que possa criar blocos de conteúdo modulares como:

Acabei de prefixar todos os seletores css com um identificador personalizado .tufte-body

Outra iteração:
Este incorpora elementos de formulário personalizados:

Área de Trabalho: Móvel:

Usei-o para Fúria Situacional Classificada , que consiste principalmente em listas de palavras, suas definições e as fontes de suas definições.

Comecei a escrever um novo blog com Tufte CSS. Eu realmente gosto de como fica. Eu já havia feito meu próprio CSS para outro site que se aproximava muito do Tufte CSS, então percebi que poderia simplesmente usar o Tufte em vez de portar o código antigo para o novo gerador de site estático.

Estou usando o Lekor agora, que a IMO corrigiu alguns dos problemas de todos os geradores de sites estáticos anteriores (como hexo etc.).

Uma coisa que percebi é que não há CSS de mídia impressa. Isso seria algo que você poderia adicionar?

@steckerhalter Na verdade, costumava haver algum CSS básico de mídia de impressão no início. Não tenho certeza se ele foi removido na grande atualização em junho / julho passado ou se foi antes disso, mas o motivo foi a falta de desejo de fazer o controle de qualidade de um caso de uso totalmente diferente. Eu sugiro verificar o histórico de commits há muito tempo Felicidades!

Eu criei um tema Jekyll que implementa Tufte CSS! Também é compatível com AMP, então é super rápido. Confira: Imaculado .

Adotei o TufteCSS para meu site e adoro isso. Até agora, não foram necessários nem feitos ajustes (na página principal e em algumas outras) e usei a estrutura como está. Ótimo trabalho!

Usando-o para meu blog em markbucciarelli.com . Muito feliz com o trabalho, obrigado! (Estou usando com solicitação de pull de quebra de código).

Estou usando o TufteCSS para meu site pessoal por meio de um projeto que criei chamado ox-tufte, que exporta documentos do modo Org do Emacs em HTML compatível com TufteCSS.

@siawyoung (e @ clayh53 ) me https://github.com/sdruskat/tufte-css-jekyll.

Eu criei um projeto chamado tufte-markdown para que você possa simplesmente escrever seus artigos com Markdown e, em seguida, convertê-los em belos artigos HTML e PDF usando o estilo do Tufte.

Você pode descobrir como é na marcação de tufos .

Eu uso Tufte CSS em mplewis.com ( código-fonte ).

É um trabalho em andamento, mas estou usando minha própria adaptação do Tufte CSS em mercury.photo . Estarei postando um artigo sobre como usar os códigos de acesso do Wordpress de nota de margem e nota lateral que criei para acelerar meu fluxo de trabalho mais tarde; Vou criar um link para ele quando estiver pronto.

Acabei de reconstruir meu site pessoal para usar o tufte-css:

https://jasonpeacock.com

Eu escrevi meus aprendizados e ferramentas usadas para gerar meu site a partir de markdown usando Pandoc, Pandocomatic, pandoc-sidenote e tufte-pandoc-css:

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

Tudo está disponível em meu repo:

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

Estou tentando construir um layout CSS do Tufte usando o Bootstrap 4.
https://github.com/dylan-k/tufte-bootstrap
Colaboradores são bem-vindos.

Estou tentando construir um layout CSS do Tufte usando o Bootstrap 4.
https://github.com/dylan-k/tufte-bootstrap
Colaboradores são bem-vindos.

Dei uma olhada no seu bug nas ferramentas do inspetor e não consegui descobrir o que estava empurrando o parágrafo para baixo. O Tufte CSS original usa um flutuador à direita para realizar as notas laterais e as notas de margem. Sua solução é mais elegante - espero que você consiga corrigi-la!

Recentemente, reconstruí meu site com Tufte CSS, encaixando-o no Jekyll, usando-o como está. Os pontos principais são:

• Combina bem com MathJax.
• Nav horizontal simples adicionado ao topo de cada página.
• A página inicial lista as 5 postagens mais recentes.
• A página Arquivos inclui permalinks para todas as postagens em ordem cronológica reversa.
• Cada postagem é escrita em marcação html, com Jekyll envolvendo cada postagem em uma tag <article> .
• A viabilidade de usar o Markdown para postagens com o tema é incerta.

https://juliuso.com

Olá pessoal, depois de muito tempo coletando usos do Tufte CSS aqui, decidi mover as coisas para o wiki , onde se encaixa um pouco melhor. Acho que copiei tudo; se eu perdi algo, sinta-se à vontade para editar o wiki você mesmo.

Obrigado por compartilhar :)

Tenho um uso um tanto não convencional do Tufte CSS em meu pequeno site para palíndromos que escrevi em finlandês: palindromi.fi

Outro site em que acabei de usar o Tufte CSS é o etätunnit.taiteilijat.fi (até agora apenas em finlandês), que contém guias para usar o aplicativo de videoconferência Zoom para aulas remotas de instrumentos musicais e configurar sua capacidade única de obter boa qualidade de som para música em vez de otimizar para fala.