V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
yukirock
V2EX  ›  分享创造

ty.css,简单易用的排版样式集

  •  1
     
  •   yukirock · 2014-05-13 23:02:26 +08:00 · 3787 次点击
    这是一个创建于 3845 天前的主题,其中的信息可能已经有所发展或是发生改变。
    https://github.com/chadluo/ty.css
    http://ty.yukir.net/

    基于 Baseline 的排版样式。将常见字号 16px 的一半 8px 作为 Baseline 高度,以此做出来的排版样式集。

    只关注垂直间距与字号,不关注字体、颜色、Grid system 以及其它复杂样式,请搭配自己的方案测试使用。

    为正文亲元素添加 ty 的 class 即可使用。默认样式为:1.5 倍行高,第二段起缩进以区分段落。添加 ty-wide 的 class 可改为 2 倍行高。添加 ty-p-spacing 的 class 可改为以增加行间距以区分段落。

    目前只做了这些简单的功能,还望各位多多指教。

    非常感谢。
    4 条回复    2014-05-14 12:32:43 +08:00
    orzfly
        1
    orzfly  
       2014-05-14 00:27:14 +08:00
    看到最后一句话突然泪目……
    RockyLee
        2
    RockyLee  
       2014-05-14 09:23:50 +08:00
    效果真棒
    ivanlw
        3
    ivanlw  
       2014-05-14 10:05:14 +08:00
    简单扫了一遍,觉得很棒……请问是楼主自己总结的吗?

    顺便推荐Google HTML/CSS Style Guide:
    https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#ID_and_Class_Naming
    yukirock
        4
    yukirock  
    OP
       2014-05-14 12:32:43 +08:00
    @ivanlw 倒不算是總結,因爲一開始就是要實現 Baseline 的。期間試了很多寫法最後決定用現在這樣的。

    Style Guide 以前也看到過,不過自己寫的時候纔懶得看呢= =
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2669 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:24 · PVG 08:24 · LAX 16:24 · JFK 19:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.