Tufte-css: Partagez vos utilisations de Tufte CSS!

J'ai utilisé TufteCSS ici: gwydion.uk .

J'ai fait quelques changements CSS (tous dans index.html), y compris le resserrement de la note de bas de page et le remplissage du haut pour réaligner les lignes de base (voir # 29). D'autres changements consistaient à intégrer Lightbox, et donc à éviter les bordures inférieures sur les images liées. J'ai également évoqué un style de légende alternatif, car (à mes yeux) la légende inclinée dans la barre latérale semblait étrange avec des photos plutôt que des chiffres.

Ce dont je suis moins sûr, c'est de savoir si c'est le type de page pour lequel TufteCSS est vraiment approprié. Cela plie certainement le cas d'utilisation prévu. Cependant, il y a un élément de blague à mon utilisation ici, donc cela fonctionne pour le public visé ... c'est juste que le public visé est modeste!

Félicitations @jjsanderson! J'avoue que je n'avais pas pensé à une annonce de naissance comme cas d'utilisation, mais c'est plutôt sympa.

Merci! Oui, c'est un cas d'utilisation étrange. Vous pouvez bien sûr l'ajouter aux documents à titre d'exemple, bien que ce soit plutôt loin du type de document prévu.

Je l'utilise sur un petit truc de blog que j'ai commencé il y a quelques semaines. Les gens qui lisent ce que j'écris là-bas l'ont aimé! Cela dit, c'est à peu près un projet personnel.

Hors sujet, mais j'ai créé ce site il y a environ trois semaines (22 octobre ~ ish). Y a-t-il eu des mises à jour importantes de Tufte CSS depuis lors que je devrais connaître?

Mise à jour: n'utilisez plus ce projet, j'ai donc supprimé le lien.

@sotojuan sympa! Moi aussi, je préfère Palatino à Bembo. : +1:

@jjsanderson J'adore que vous ayez ajouté le truc du graphique ouvert!

@mandaris Hah! Vous savez, j'avais oublié que j'avais fait ça. Je suis peut-être contre les photos de bébés bombardant des tapis sur Facebook, mais dans ce cas, Facebook était à peu près le public visé. Alors… ouais, opengraph. :-)

J'utilise Tufte CSS - et Tufte-LaTeX - sur mon site _Secretary of Foreign Relations_ ( Github repo ). Chaque page de ce site existe à la fois en tant que page Web et en tant que fichier PDF dans la classe Tufte Handout, tous deux générés à partir du même balisage avec Pollen .

Pour voir le balisage utilisé par Pollen pour générer chaque page (à l'exception de la page principale), vous pouvez cliquer sur le lien «◊Pollen source» en haut ( exemple ). Pollen est vraiment sympa en ce sens qu'il vous permet de concevoir votre propre balisage et de cibler n'importe quel format textuel. Ainsi, même si le balisage HTML dans Tufte CSS est un peu compliqué, il devient assez facile à utiliser en pratique: par exemple, ◊numbered-note{Sidenote text} générera tout le balisage pour une note d'accompagnement.

En outre, Pollen est utilisé pour assembler des pages individuelles dans un PDF complet prêt à imprimer du livre 'Flatland', également dans le style Tufte.

J'utilise la dernière version de Tufte CSS sans réel changement; J'ai conservé mon propre CSS dans une feuille de style distincte.

@otherjoel Des trucs très sympas. Merci d'avoir partagé!

J'ai une combinaison intéressante avec bootstrap que j'utilise dans une page de projet: http://frostbitten.github.io/ByeBox/

J'ai également créé un fork qui compartimente le format tufte-css afin que je puisse créer des blocs de contenu modulaires comme ceci:

Je viens de préfixer tous les sélecteurs css avec un identifiant personnalisé .tufte-body

Une autre itération:
Celui-ci intègre des éléments de formulaire personnalisés:

Bureau: Mobile:

Je l'ai utilisé pour la fureur situationnelle classée , qui consiste principalement en des listes de mots, leurs définitions et les sources de leurs définitions.

J'ai commencé à écrire un nouveau blog avec Tufte CSS. J'aime vraiment son apparence. J'avais déjà fait mon propre CSS pour un autre site qui se rapprochait assez de Tufte CSS donc j'ai pensé que je pourrais simplement utiliser Tufte au lieu de porter l'ancien code vers le nouveau générateur de site statique.

J'utilise Lekor maintenant que l'OMI a résolu certains des problèmes de tous les générateurs de sites statiques précédents (comme hexo, etc.).

Une chose que j'ai remarquée est qu'il n'y a pas de CSS pour les médias imprimés. Serait-ce quelque chose que vous pourriez ajouter?

@steckerhalter Il y avait en fait des CSS de base sur les médias imprimés au début. Je ne sais pas si elle a été supprimée lors de la grande mise à jour en juin / juillet dernier ou si elle était antérieure à cela, mais la raison en était un manque de volonté de QA dans un cas d'utilisation totalement différent. Je suggère de vérifier l'historique des validations depuis le début. À votre santé!

J'ai créé un thème Jekyll qui implémente Tufte CSS! Il est également compatible AMP, donc c'est super rapide. Vérifiez-le: Immaculée .

J'ai adopté TufteCSS pour mon site et je l'adore. Jusqu'à présent, des ajustements n'étaient ni nécessaires ni effectués (vers la page principale et quelques autres) et j'ai utilisé le cadre tel quel. Bon travail!

Je l' utilise pour mon blog sur

J'utilise TufteCSS pour mon site personnel via un projet que j'ai créé appelé ox-tufte qui exporte les documents en mode Org d'Emacs en HTML compatible avec TufteCSS.

@siawyoung (et @ clayh53 ) m'ont partiellement battu, mais j'ai aussi compilé un petit thème Jekyll. Il essaie de rester aussi proche que possible de tufte-css. https://github.com/sdruskat/tufte-css-jekyll.

J'ai créé un projet nommé tufte-markdown afin que vous puissiez simplement écrire vos articles avec Markdown, puis vous pouvez les convertir en beaux articles HTML et PDF en utilisant le style de Tufte.

Vous pouvez découvrir comment c'est sur tufte-markdown .

J'utilise Tufte CSS dans mplewis.com ( code source ).

C'est un travail en cours, mais j'utilise ma propre adaptation de Tufte CSS sur mercury.photo . Je publierai un article sur l'utilisation des codes courts Wordpress de note de marge et de note latérale que j'ai créés pour accélérer mon flux de travail plus tard; Je vais y faire un lien quand il sera prêt.

Je viens de terminer la reconstruction de mon site Web personnel pour utiliser tufte-css:

https://jasonpeacock.com

J'ai écrit mes apprentissages et mes outils utilisés pour générer mon site Web à partir de markdown en utilisant Pandoc, Pandocomatic, pandoc-sidenote et tufte-pandoc-css:

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

Tout est disponible dans mon repo:

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

J'essaie de créer une mise en page CSS Tufte à l'aide de Bootstrap 4.
https://github.com/dylan-k/tufte-bootstrap
Bienvenue aux contributeurs.

J'essaie de créer une mise en page CSS Tufte à l'aide de Bootstrap 4.
https://github.com/dylan-k/tufte-bootstrap
Bienvenue aux contributeurs.

J'ai jeté un coup d'œil à votre bug dans les outils de l'inspecteur et je n'ai pas pu comprendre ce qui poussait le paragraphe vers le bas. Le CSS original de Tufte utilise un flotteur droit pour accomplir les notes latérales et marginales. Votre solution est plus élégante - j'espère que vous pourrez la résoudre!

J'ai récemment reconstruit mon site avec Tufte CSS en le chaussant dans Jekyll, en l'utilisant tel quel. Les principaux points sont:

• Se marie bien avec MathJax.
• Navigation horizontale simple ajoutée en haut de chaque page.
• La page d'accueil répertorie les 5 articles les plus récents.
• La page Archives comprend des permaliens vers tous les articles dans l'ordre chronologique inverse.
• Chaque publication est écrite dans un balisage html, avec Jekyll enveloppant chaque message dans une balise <article> .
• La faisabilité d'utiliser Markdown pour les articles avec le thème est incertaine.

https://juliuso.com

Hé les gens, après avoir longtemps collecté des utilisations de Tufte CSS ici, j'ai décidé de déplacer les choses vers le wiki , où cela correspond un peu mieux. Je pense que j'ai tout copié; si j'ai manqué quelque chose, n'hésitez pas à modifier le wiki vous-même.

Merci d'avoir partagé :)

J'ai une utilisation quelque peu non conventionnelle de Tufte CSS sur mon petit site pour les palindromes que j'ai écrit en finnois: palindromi.fi

Un autre site dans lequel je viens d'utiliser Tufte CSS est