Tufte-css: タフテCSSの使用法を共有してください！

作成日 2015年08月07日 · 29コメント · ソース: edwardtufte/tufte-css

タフテCSSが使用されているページのリストがあるとよいでしょう。これは、私たちが目指したい機能のアイデアを私たちに与えるのに役立ちます。

documentation help wanted

ソース

daveliepmann

最も参考になるコメント

私は自分のサイト_Secretaryof Foreign Relations_ （ Github repo ）でTufte CSS（およびTufte-LaTeX）を使用しています。そのサイトの各ページは、Tufte HandoutクラスのWebページとPDFファイルの両方として存在し、どちらもPollenとの同じマークアップから生成されます。

花粉が各ページ（メインページを除く）を生成するために使用するマークアップを確認するには、上部にある[◊花粉ソース]リンクをクリックします（例）。花粉は、独自のマークアップをデザインし、テキストソースの形式をターゲットにできるという点で非常に優れています。したがって、Tufte CSSのHTMLマークアップは少し面倒ですが、実際には非常に使いやすくなります。たとえば、 ◊numbered-note{Sidenote text}は、サイドノートのすべてのマークアップを生成します。

さらに、花粉は、個々のページをつなぎ合わせて、同じくタフテスタイルの本「フラットランド」の完全な印刷可能なPDFにまとめるために使用されます。

私は実際の変更なしで最新バージョンのTufteCSSを使用しています。自分のCSSは別のスタイルシートに保存しました。

otherjoel 2016年01月21日

👍8 🎉1

全てのコメント29件

ここではTufteCSSを使用しました： gwydion.uk 。

サイドノートの先頭を締めたり、ベースラインを再調整するために上部をパディングしたりするなど、CSSの変更をほとんど行いませんでした（すべてindex.htmlにあります）（＃29を参照）。その他の変更は、ライトボックスを統合し、リンクされた画像の下の境界線を回避することでした。また、（私の目には）サイドバーに傾斜したキャプションが図ではなく写真で奇妙に見えたので、別のキャプションスタイルを提案しました。

私があまり確信が持てないのは、これがTufteCSSが本当に適切な種類のページであるかどうかです。それは確かに意図されたユースケースを曲げています。しかし、ここでそれを使用することには冗談の要素があるので、それは意図された聴衆のために働きます…それは意図された聴衆が控えめであるということだけです！

jjsanderson 2015年09月13日

おめでとうございます@jjsanderson！出産の発表をユースケースとは考えていなかったことは認めますが、それは非常に素晴らしいことです。

daveliepmann 2015年09月13日

ありがとう！はい、それは奇妙なユースケースです。もちろん、意図したタイプのドキュメントからはかなり遠いですが、例としてドキュメントに追加することを歓迎します。

jjsanderson 2015年09月13日

数週間前に始めたブログっぽいものに使っています。私がそこに書いたものを読んだ人々はそれが好きでした！そうは言っても、それはほとんど個人的なプロジェクトです。

話題外ですが、3週間ほど前（10月22日〜ish）にそのサイトを作りました。それ以来、Tufte CSSに重要な更新があり、知っておく必要がありますか？

更新：そのプロジェクトはもう使用しないので、リンクを削除しました。

sotojuan 2015年11月15日

@sotojuanいいね！私もベンボよりパラティーノが好きです。：+1：

ghost 2015年11月16日

@jjsandersonオープングラフのものを追加してくれて

mandaris 2015年12月01日

@マンダリスハァッ！あなたが知っている、私は私がそれをしたことを忘れていた。私はFacebook全体でじゅうたん爆撃の赤ちゃんの写真に反対しているかもしれませんが、この場合、Facebookはほとんど意図された聴衆でした。だから…ええ、opengraph。 :-)

jjsanderson 2015年12月01日

私は実際の変更なしで最新バージョンのTufteCSSを使用しています。自分のCSSは別のスタイルシートに保存しました。

otherjoel 2016年01月21日

👍8 🎉1

@otherjoelとても素敵なもの。共有してくれてありがとう！

daveliepmann 2016年01月22日

プロジェクトページで使用しているブートストラップとの興味深い組み合わせがあります： http ：

frostbitten 2016年01月28日

👍2

また、tufte-css形式を区分化するフォークを作成したので、次のようなモジュラーコンテンツブロックを作成できます。

すべてのcssセレクターの前にカスタム識別子.tufte-body

別の反復：
これには、カスタマイズされたフォーム要素が組み込まれています。

デスクトップ：

モバイル：

frostbitten 2016年01月28日

私はそれをランク付けされた状況の怒りに使用しました。これは主に単語のリスト、それらの定義、およびそれらの定義のソースです。

benlk 2016年02月23日

タフテCSSで新しいブログを書き始めました。私はそれがどのように見えるか本当に好きです。以前、Tufte CSSにかなり近い別のサイト用に独自のCSSを作成していたので、古いコードを新しい静的サイトジェネレーターに移植する代わりにTufteを使用できると考えました。

私は現在Lekorを使用して

私が気づいたことの1つは、印刷メディアのCSSがないことです。それはあなたが追加できるものでしょうか？

steckerhalter 2016年03月01日

@steckerhalter実際には、最初はいくつかの基本的な印刷メディアCSSがありました。昨年の6月/ 7月の大規模なアップグレードで削除されたのか、それより前だったのかはわかりませんが、まったく異なるユースケースでQAを行う必要がなかったことが理由です。コミット履歴をさかのぼって確認することをお勧めします。乾杯！

daveliepmann 2016年03月01日

タフテCSSを実装したJekyllテーマを作成しました！ AMPにも準拠しているため、超高速です。それをチェックしてください：無原罪。