如果您要着手进行较小的项目，或者只是觉得自己不需要大型框架的所有实用程序，则应该使用Skeleton。 Skeleton仅设置了少量标准HTML元素的样式，并包含一个网格，但这通常足以使它入门。实际上，此站点基于Skeleton构建，具有约200行自定义CSS（其中一半是停靠导航）。
喜欢Skeleton，并想发布，分享或加注星标吗？好吧，我感谢＆lt; 3
网格是一个12列的流体网格，最大宽度为960px，随着浏览器/设备的缩小而缩小。可以用一行CSS更改最大宽度，并且所有列的大小都会相应调整。语法很简单，并且使响应式编码更加容易。继续，调整浏览器的大小。
类型都是由rems设置的，因此可以基于单个＆lt; html＆gt;来响应地调整字体大小和空间关系的大小。字体大小属性。开箱即用，Skeleton从不更改＆lt; html＆gt;字体大小，但是可以在项目中使用。尽管所有测量值仍以10为底，但＆lt; h1＆gt; 5.0remfont-size表示50px。
排版基础是Google提供的Raleway，设置在15行（15像素）和1.6行高度（24像素）上。其他类型的基础知识，如锚点，强项，重点和下划线，显然都包括在内。
在Skeleton中，按钮有两种基本样式。标准＆lt; button＆gt;元素是普通的，而.button-primary按钮则是充满活力且突出的。按钮样式应用于许多适当的表单元素，但也可以通过.button类任意附加到锚点。
形式是一个巨大的痛苦，但是希望这些样式可以使它更容易一些。所有输入，选择和按钮均针对通用的高度跨浏览器进行了标准化，因此输入可以堆叠或并排放置。
代码样式保持基本状态–只需将任何内容包装在＆lt; code＆gt;它会像这样对于代码块，请包装＆lt; code＆gt; ＆lt; pre＆gt;。
确保使用格式正确的＆lt; thead＆gt;表标记和＆lt; tbody＆gt;建立表格时。
Skeleton使用媒体查询来为其可伸缩网格提供服务，但也具有查询列表，以便于跨设备对网站进行样式设置。查询是移动优先的，这意味着它们以最小宽度为目标。移动优先查询是骷髅网格的构建方式，是组织CSS的首选方法。这意味着查询之外的所有样式均适用于所有设备，然后将更大的设备作为目标。这样可以避免小型设备解析大量未使用的CSS。查询的大小为：
/ *移动设备首个查询* // *大于移动设备* / @ media（最小宽度：400像素）{} / *比phablet大* / @ media（最小宽度：550px）{} / *比平板电脑大* / @media（最小宽度：750px）{} / *比桌面大* / @ media（最小宽度：1000px）{} / *比桌面HD大* / @ media（最小宽度：1200px）{}
Skeleton有许多小型实用程序类，它们充当易于使用的助手。有时，使用实用程序类比创建一个全新的类来浮动一个元素要好。
/ *实用工具类* // *使元素变为全角* /。u-full-width {width：100％;框大小：border-box； } / *确保元素不会在容器外部运行（对于列中的图像而言非常有用）* /。u-max-full-width {max-width：100％;框大小：border-box； } / *向任一方向浮动* /。u-pull-right {float：right; } .u-pull-left {float：left; } / *清除浮点数* /。u-cf {content：＆＃34;＆＃34 ;;显示：表；清楚的}
该模板是一个示例，说明仅使用Skeleton网格和一些自定义样式即可轻松创建登录页面。整个演示是大约150行CSS，包括注释（其中大多数将手机放在顶部）。
演示源 将添加更多示例，以帮助任何人开始或更熟悉Skeleton的工作方式。 目标是教育。 如果您对真实，真实的Skeleton网站示例更感兴趣，我将在Skeleton上创建＆Built＆＃34; 马上列出！