Skeleton:一个超简单的响应式模板

getskeleton

Skeleton是个非常容易上手,又支持响应式的模板组件。

当需要搭建小的网站项目,或者不想用那些累赘的大框架时,你可以尝试用Skeleton来解决。Skeleton虽然只包含了一部分标准HTML元素以及960标准网格模板,但这足以应对一般的项目初始搭建要求。实际上,本站就是由Skeleton搭建的,包含了200多行自定义CSS (有一半代码是dock导航).

主要特性

  • 轻便,400多行即可解决问题,始终适配移动端。
  • 开始后自带样式,并非只是UI框架。
  • 0编译,0安装,快速开始

网格

the_grid

Skeleton自带的是12栏流动网格,最大支持宽度960像素,并支持改变电脑浏览器/移动设备宽度调整缩小。最大宽度可以通过修改一行CSS来进行自定义,所有栏将自动适配缩放。网格系统的控制函数非常简单,这样能更加支持响应式代码编写。来,你可以试试缩放下浏览器。

排版

typography

字体都是以rem为单位进行设置,这样字体大小和间距关系都可以通过单个<html>文件的字体大小属性来响应调整。Skeleton自身并没有调整过,不过我们还是保留了这个功能,万一你的项目需要呢。所有的度量尺度都是基于10倍关系,因此如果<h1>字体大小为5.0rem,则表示该字为50px

  • Skeleton选择的排版基础字体是Google的Raleway,字体大小15rem(即15px)、行高1.6倍(即24px)。当然,还支持anchorstrongemphasisunderline等其他常用的基础样式。
  • Heading族从H1到H6有完全不同的letter-spacingline-heightmargins

按钮

buttons

Skeleton提供2种基本的按钮样式,满足不同喜好需求。标准<button>为素白色,如果需要更显眼的样式可以使用.button-primary类名。按钮样式可以被应用到适当的表格元素中,当然也可以单独提出来设为.button类。

表单

form

form2

表单从来都是一个棘手的东西,但愿Skeleton的样式能让你觉得舒服点。不同的浏览器中所有的输入框、选择框、按钮都是同一规格,这样输入框就可以很好地按顺序堆砌和排列。

列表

list

  • 无序列表自带基本样式
  • 使用空心圆作为表头
    • 嵌套列表自动右移
    • 允许不同样式嵌套
  • 多写一行,纯粹强迫症
  1. 有序列表也有自带的基本样式
  2. 使用十进制数字作为表头
    • 有序/无序列表可以嵌套使用
    • 同样允许不同样式嵌套
  3. 列这条就是为了好玩……

代码

代码样式保持基本款——只要把代码写在<>中间,它将自动显示成这样。对于大段代码,则可用<pre>标签包裹。

表格

table

只要知道如何用<thead><tbody>标签,表格就将立马呈现。

媒体查询

Skeleton不仅能使用媒体查询功能来灵活地缩放网格,还有一系列快捷设置来方便你调整跨设备站点样式。它将优先查找是否是移动终端,由此来调整min-width。使用移动终端优先的查询方式,不仅符合Skeleton的网格搭建原理,也是CSS比较提倡的编写方式。这意味着,只需要一次查询,就可以所有的样式适配所有设备,大屏设备也将得到有针对性的增强,这样也能让小屏设备摆脱解析大量无用CSS代码的痛苦。可供查询的尺寸为:

  • Desktop HD: 1200px
  • Desktop: 1000px
  • Tablet: 750px
  • Phablet: 550px
  • Mobile: 400px

小工具

Skeleton还有一系列小部件class帮你解决各种需求,有时候用一下或许比你自己重新定义一个class要省事得多。

浏览器支持

  • 最新版Chrome
  • 最新版Firefox
  • 最新版Opera
  • 最新版Safari
  • 最新版IE

除此之外,Skeleton支持以上浏览器的所有旧版本, 当然你也知道IE9之前的IE版本很糟糕.

扩展包

以下扩展包由Skeleton社区提供,非官方制作,但经检测支持并兼容v2.0版Skeleton。

  • Skeleton on LESS: LESS框架Skeleton,替换了网格、色彩、媒体查询模块,更易使用。 (最新支持 v2.0.1)
  • Skeleton on Sass: Sass框架Skeleton, 替换了网格、色彩、媒体查询模块,更易使用。 (最新支持 v2.0.1)

你还有其他框架的扩展包吗?不要吝啬,赶紧给我们发邮件吧 hi@getskeleton.com

开发资源

License

Skeleton所有资源供您可免费使用,请遵守 MIT开源 许可协议.

官方网站:http://getskeleton.com/
开源地址:https://github.com/dhg/Skeleton/

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

1 1 收藏

资源整理者简介:凝枫

非典型性程序员,爱做一些和写程序毫不相干的事 个人主页 · 贡献了46个资源 · 1


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1440 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer