Tufte-css: Bagikan penggunaan Tufte CSS Anda!

Saya menggunakan TufteCSS di sini: gwydion.uk .

Saya membuat sedikit perubahan CSS (semua di index.html), termasuk mengencangkan sidenote di depan dan mengisi bagian atas untuk menyelaraskan kembali baseline (lihat # 29). Perubahan lainnya adalah mengintegrasikan Lightbox, dan karenanya untuk menghindari batas bawah pada gambar yang ditautkan. Saya juga memberi corak pada gaya teks alternatif, karena (menurut pandangan saya) caption miring sidebar tampak aneh dengan foto daripada gambar.

Apa yang saya kurang yakin adalah apakah ini adalah jenis halaman yang TufteCSS benar-benar sesuai. Ini tentu saja menekuk kasus penggunaan yang dimaksudkan. Namun, ada elemen in-joke yang saya gunakan di sini, jadi ini berfungsi untuk audiens yang dituju… hanya saja audiens yang dituju itu sederhana!

Selamat @jjsanderson! Saya akui, saya tidak menganggap pengumuman kelahiran sebagai kasus penggunaan, tapi cukup bagus.

Terima kasih! Ya, ini kasus penggunaan yang aneh. Anda boleh menambahkannya ke dokumen sebagai contoh, tentu saja, meskipun agak jauh dari jenis dokumen yang dimaksudkan.

Saya menggunakannya di blog-ish hal kecil yang saya mulai beberapa minggu lalu. Orang-orang yang membaca apa yang saya tulis di sana menyukainya! Meskipun demikian, ini adalah proyek pribadi.

Di luar topik, tapi saya membuat situs itu sekitar tiga minggu lalu (22 Oktober ~ ish). Apakah ada pembaruan signifikan pada Tufte CSS sejak saat itu yang harus saya ketahui?

Pembaruan: Jangan gunakan proyek itu lagi, jadi saya menghapus tautannya.

@sotojuan bagus! Saya juga lebih suka Palatino daripada Bembo. : +1:

@jjsanderson Saya senang Anda menambahkan hal-hal grafik terbuka!

@mandaris hah ! Anda tahu, saya lupa saya telah melakukan itu. Saya mungkin menentang pemboman karpet foto bayi di seluruh Facebook, tetapi dalam hal ini Facebook adalah audiens yang dituju. Jadi… ya, tulisan terbuka. :-)

Saya menggunakan Tufte CSS - dan Tufte-LaTeX - di situs saya _Secretary of Foreign Relations_ ( Github repo ). Setiap halaman di situs itu ada sebagai halaman web dan sebagai file PDF di kelas Handout Tufte, keduanya dihasilkan dari markup yang sama dengan Pollen .

Untuk melihat markup yang digunakan oleh Pollen untuk menghasilkan setiap halaman (kecuali untuk halaman utama), Anda dapat mengklik link "◊Pollen source" di bagian atas ( contoh ). Serbuk sari sangat bagus karena memungkinkan Anda merancang markup Anda sendiri dan menargetkan format bersumber teks apa pun. Jadi meskipun markup HTML di Tufte CSS agak rumit, ini menjadi cukup mudah digunakan dalam praktiknya: misalnya, ◊numbered-note{Sidenote text} akan menghasilkan semua markup untuk catatan samping.

Selain itu, Pollen digunakan untuk menjahit setiap halaman menjadi PDF lengkap siap cetak dari buku 'Flatland', juga dalam gaya Tufte.

Saya menggunakan versi terbaru Tufte CSS tanpa perubahan nyata; Saya telah menyimpan CSS saya sendiri di lembar gaya terpisah.

@otherjoel Sangat bagus. Terima kasih telah berbagi!

Saya punya kombinasi menarik dengan bootstrap yang saya gunakan di halaman proyek: http://frostbitten.github.io/ByeBox/

Saya juga telah membuat garpu yang mengelompokkan format tufte-css sehingga saya dapat membuat blok konten modular seperti:

Saya baru saja mengawali semua pemilih css dengan pengenal khusus .tufte-body

Iterasi lain:
Yang ini menggabungkan elemen formulir yang disesuaikan:

Desktop: Seluler:

Saya menggunakannya untuk Ranked Situational Fury , yang sebagian besar berisi daftar kata, definisi, dan sumber definisi mereka.

Saya sudah mulai menulis blog baru dengan Tufte CSS. Saya sangat suka tampilannya. Saya sebelumnya telah membuat CSS saya sendiri untuk situs lain yang cukup dekat dengan Tufte CSS jadi saya pikir saya bisa menggunakan Tufte daripada mem-porting kode lama ke generator situs statis baru.

Saya menggunakan Lekor sekarang yang IMO telah memperbaiki beberapa masalah dari semua generator situs statis sebelumnya (seperti hexo dll.).

Satu hal yang saya perhatikan adalah tidak ada CSS media cetak. Apakah itu sesuatu yang bisa Anda tambahkan?

@steckerhalter Sebenarnya dulu ada beberapa CSS media cetak dasar di awal. Saya tidak yakin apakah itu dihapus dalam peningkatan besar yang lalu ~ Juni / Juli atau jika itu lebih awal dari itu, tetapi alasannya adalah kurangnya keinginan untuk QA kasus penggunaan yang sama sekali berbeda. Saya sarankan untuk memeriksa riwayat komit dari belakang. Bersulang!

Saya membuat tema Jekyll yang mengimplementasikan Tufte CSS! Ini juga sesuai dengan AMP, jadi sangat cepat. Lihat ini: Tak Bernoda .

Saya telah mengadopsi TufteCSS untuk situs saya dan menyukainya. Sejauh ini, tweak tidak diperlukan atau dilakukan (ke halaman utama dan beberapa lainnya) dan saya telah menggunakan kerangka kerja sebagaimana adanya. Kerja bagus!

Menggunakannya untuk blog saya di markbucciarelli.com . Sangat senang dengan pekerjaannya, terima kasih! (Saya menggunakannya dengan permintaan tarik pembungkus kode.)

Saya menggunakan TufteCSS untuk situs pribadi saya melalui proyek yang saya buat bernama ox-tufte yang mengekspor dokumen mode Org Emacs dalam HTML yang kompatibel dengan TufteCSS.

@siawyoung (dan @ clayh53 ) telah mengalahkan saya sebagian, tetapi saya juga telah menyusun tema wee Jekyll. Ini mencoba untuk tetap sedekat mungkin dengan tufte-css. https://github.com/sdruskat/tufte-css-jekyll.

Saya membuat sebuah proyek bernama tufte-markdown sehingga Anda dapat dengan mudah menulis artikel Anda dengan Markdown, kemudian Anda dapat mengonversinya menjadi artikel HTML dan PDF yang indah menggunakan gaya Tufte.

Anda dapat mengetahui bagaimana itu di tufte-markdown .

Saya menggunakan Tufte CSS di mplewis.com ( kode sumber ).

Ini sedang dalam proses, tapi saya menggunakan adaptasi saya sendiri dari Tufte CSS di mercury.photo . Saya akan memposting artikel tentang cara menggunakan shortcode Wordpress margin-note dan side-note yang saya buat untuk mempercepat alur kerja saya nanti; Saya akan menautkannya jika sudah siap.

Saya baru saja selesai membangun kembali situs pribadi saya untuk menggunakan tufte-css:

https://jasonpeacock.com

Saya menulis pembelajaran dan alat saya yang digunakan untuk menghasilkan situs web saya dari penurunan harga menggunakan Pandoc, Pandocomatic, pandoc-sidenote, dan tufte-pandoc-css:

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

Semuanya tersedia di repo saya:

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

Saya mencoba membuat layout Tufte CSS menggunakan Bootstrap 4.
https://github.com/dylan-k/tufte-bootstrap
Kontributor menyambut.

Saya mencoba membuat layout Tufte CSS menggunakan Bootstrap 4.
https://github.com/dylan-k/tufte-bootstrap
Kontributor menyambut.

Saya melihat bug Anda di alat inspektur & tidak tahu apa yang mendorong paragraf ke bawah. Tufte CSS asli menggunakan float kanan untuk mencapai sidenotes & marginnotes. Solusi Anda lebih elegan - Saya harap Anda dapat memperbaikinya!

Saya baru-baru ini membangun kembali situs saya dengan Tufte CSS dengan memasukkannya ke dalam Jekyll, menggunakannya sebagaimana adanya. Poin utamanya adalah:

• Menyatu dengan baik dengan MathJax.
• Navigasi horizontal sederhana ditambahkan ke bagian atas setiap halaman.
• Beranda mencantumkan 5 posting terbaru.
• Halaman Arsip menyertakan tautan permanen ke semua posting dalam urutan kronologis terbalik.
• Setiap posting ditulis dalam markup html, dengan Jekyll membungkus setiap posting dalam tag <article> .
• Kelayakan menggunakan penurunan harga untuk posting dengan tema tidak pasti.

https://juliuso.com

Hai teman-teman, setelah sekian lama mengumpulkan penggunaan Tufte CSS di sini, saya memutuskan untuk memindahkan beberapa hal ke wiki , yang lebih cocok. Saya pikir saya menyalin semuanya; jika saya melewatkan sesuatu, silakan edit wiki-nya sendiri.

Terima kasih telah berbagi :)

Saya memiliki penggunaan yang agak tidak konvensional untuk Tufte CSS di situs kecil saya untuk palindrom yang saya tulis dalam bahasa Finlandia: palindromi.fi

Situs lain yang baru saja saya gunakan Tufte CSS adalah etätunnit.taiteilijat.fi (sejauh ini hanya dalam bahasa Finlandia) yang berisi panduan untuk menggunakan aplikasi konferensi video Zoom untuk pelajaran instrumen musik jarak jauh, dan mengonfigurasi kemampuan uniknya untuk mendapatkan kualitas suara yang bagus untuk musik alih-alih mengoptimalkan ucapan.