在线客服

    建站前端必备:让代码活起来的CSS工具

    分享到:
    点击次数:7034 更新时间:2016年09月02日14:41:27 打印此页 关闭
    CSS作为网页设计制作的一门基础语言,在网页设计中,它表现出了其独特的优势。例如更简洁的语言,模块化的结构。

    对于页面开发而言是设计排版的改进、对于访客用户而言则是有助浏览速度的提高。而在开发维护以及在做被搜索时的SEO,使用CSS都是目前最好的选择。为了更好的对CSS进行开发,我们可以选择一些有帮助的工具。
    下面来看看有哪些实用CSS工具:
     
    Base
      Base是一款轻量级CSS预处理工具,能够将代码编译为SASS(即Syntactically Awesome CSS)或者LESS(Leaner CSS)。尽管已经有很多框架放弃了IE浏览器的支持,Base仍然坚定扮演着IE拥护者的角色,Matthew Hartman表示——他设计Base的初衷在于帮助设计师们编写出更为简洁且结构清晰的CSS代码。

      尽管目前的版本仍专注于面向桌面系统,但Hartman已经开始着手创建下一个版本、旨在利用经过修改的代码库将移动平台作为首选环境。他指出,Base“在最初进行开发时只具备非常基本的功能,但随着其迅速发展、我开始将其应用在更多不同类型的网站当中。虽然遇到过许多前所未有的情况以及令人沮丧的错误,但这段学习经历既可怕又充满乐趣。”

    Compass
      Compass CSS验证框架能够为设计师们带来更为简洁的标记、可重复使用模式同时大大简化了Sprite图像——像这样的优势还有很多。“它并不是一套难于上手且需要预先定义的类名称集合。Compass当中所包含的工具数量超过了其它任何CSS框架,”开发人员Lorin Tackett表示,他利用这套框架创建出了一款网格计算器。“Compass充分考虑到了那些在未来可能出现的浏览器支持冲突状况,因此其中一部分功能可以有选择地加以关闭。”

      Tackett指出,Compass是维护复杂Web应用程序中样式表格的最佳选择。


    Foundation
      Foundation框架的专长在于响应式设计,这是一套专门用于创建网站与Web应用的策略方案,能够自动与用户设备上的浏览器环境进行适配。

      “Foundation是第一款专门帮助用户创建能够运行在任何设备上的响应式站点的CSS框架,”Web设计机构Zurb合作伙伴兼Foundation设计主管Jonathan Smiley指出。“我们自发布首个公共版本开始就一直致力于打造响应式站点,而且在经历了五个版本的实践研发过程后、我们已经亲眼见证了众多开发者在创建多设备应用及站点方案时所遭遇的难题,因此有能力帮助他们顺利度过难关。”

      Foundation使用SCSS(即Sassy CSS),提供内置组件以简化布局与原型设计,同时允许用户以覆盖方式使用自己的定制化前端。

    Gumby
      上世纪七十年代出生的朋友们可能还对Gumby这位活跃在儿童电视节目上的绿色黏土动画人物留有印象,而如今同样的名字则代表着一款CSS框架。

      “Bumby这个名字来自定格动画片中的人物,代表着能够为用户带来快速的原型设计体验,”Gumby框架出品方Digital Surgeons公司执行创意总监Peter Sena指出。

      Gumby提供了多种网格与列式变化,其UI包中还包含按钮、字体以及表单等等。Gumby旨在帮助业余开发人员编写并维护成百上千行代码,Sena表示。目前其版本号为2.6,预计Gumby 3将新增更多目前尚不支持的屏幕尺寸与设备型号,例如某些高分辨率平板设备与触控式笔记本等。

    Kube
      Kube标榜自身是一款“专业级”CSS框架。尽管其它框架同样能够提供预定义样式以构建起视觉效果相似的站点外观,但Kube的使用感受更加简单,Kube项目首席开发者之一Artem Rosnovskiy解释称。

      “Kube并不会强制限定任何样式规则或者形式,”Rosnovskiy表示,而这一特性使其在专业设计师与开发人员群体当中获得了广泛欢迎。“很多初学者希望能够在预定义创建流程之前获取更多指导性意见——包括色彩、网格、按钮以及样式等等——但Kube则为设计师与开发人员们带来了彻底的自由空间……它要求使用者拥有老练的技能、经验并透彻理解自己想要达成的效果。”

    Responsive Grid System
      Responsive Grid System既不属于框架也不属于样板,而是一种能够“快速而简单”的响应式网站创建方式,项目开发者Graham Miller解释道。Responsive Grid System能够直接与现有HTML与CSS相对接。

      “我发现一旦自己开始着手创建响应式网站,最最需要的就是能够快速切入到自己的现有代码中并以高度灵活的方式构建任何项目,”Miller表示。“我曾经使用过很多不同类型的框架与样板,但它们都倾向于让我以其为基础设置网格体系、然后向其中填充内容。我是那种‘内容至上’派的开发人员,因此我建立了自己的响应式网格系统。”


    上一条:新建网站快速提升网站PR值教程 下一条:建站前端技术:HTML5绘图工具