作者:老王
以
Blueprint为代表的CSS框架一直为人诟病的缺点之一就是其生成的标签都是一些诸如span-24之类的名字,缺乏实际的语义,不过现在这种情况已经改变了,只需要简单的配置,Blueprint就可以帮你自动生成语义化标签。
使用本功能前需要先安装好ruby的运行环境,最好再熟悉一下yml的文件格式。把blueprint\lib目录下的配置文件settings.example.yml改名为settings.yml,并修改project2,把path改成已存在的某个目录,里面的semantic_classes部分就是我们需要的语义化标签的配置:
"#footer, #header": ".span-24, div.span-24"
"#content": ".span-17, div.span-17, div.colborder"
"#extra-content": ".span-6, div.span-6"
"div#navigation": "div.span_24, .span-24"
"div.section, div.entry, .feeds": ".span-6 div.span-6"
然后在命令行下运行:
ruby compress.rb -p project2
如此一来,就会在我们预先设置的path路径下生成自定义的css文件,查看screen.css文件的最下面:
/* semantic class names */
#content {float:left;margin-right:10px;width:670px;padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
#footer, #header {float:left;margin-right:10px;width:950px;margin-right:0;}
#extra-content {float:left;margin-right:10px;width:230px;}
div.section, div.entry, .feeds {float:left;margin-right:10px;width:230px;}
div#navigation {width:950px;margin-right:0;}
名字看上去好了很多,可以安心使用CSS框架了。如果不清楚yml配置文件中各项的含义,可以参考compress.rb文件中的注释部分,里面做了详细的介绍,还可以参考此文:
Blueprint’s compress.rb: A Walkthrough,或者
CSS Frameworks and Semantic Class Names。
顺手记录一个网址:
csscaffold。