Skel.js 用于创建响应式站点的前端框架
Skel.js 是一个用于创建响应式站点的前端框架。
快速指南
skel.js 是一个轻量级的建筑响应的网站和应用程序的前端框架。只有一个单一的 JS 文件（重量只有 20KB 的版本），它给设计师和开发人员访问四强大的组件：
- CSS 网格系统：一个复杂的 CSS 12 列网格系统具有简洁，简洁的语法，可调式天沟，无限嵌套的支持和许多更酷的功能。
- 响应式布局：对于 CSS 媒体查询的设计来处理所有的你需要一个精简的置换反应。简单的配置，建立处理任何数量的断点，并可以做更多比简单地将样式表。
- CSS 快速编译：方便快捷迅速处理各种常见的 CSS 的任务，如浏览器的 CSS 规范和改变世界的盒模型。
- 丰富的插件：一种 ske.ljs 延伸而不损害其轻量级足迹平台（见例面板插件）。
浏览器兼容
skel.js 能够完美的兼容一下浏览器：
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer 8+
- Android Browser (2.x and up)
- Safari/iOS (4.x and up)
简单的例子
学习如何 skel.js 作品是在行动中看到它的最好的方式，所以这里是一个很常见的情况：建设一个响应的主页。
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>skelJS Example</title>
<script src="skel.min.js">
{
prefix: "style",
resetCSS: true,
boxModel: "border",
grid: { gutters: 30 },
breakpoints: {
wide: { range: "1200-", containers: 1140, grid: { gutters: 50 } },
narrow: { range: "481-1199", containers: 960 },
mobile: { range: "-480", containers: "fluid", lockViewport: true, grid: { collapse: true } }
}
}
</script>
</head>
<body>
<div class="container">
<!-- Header -->
<div id="header" class="row">
<div class="4u">
<h1>Example</h1>
</div>
<nav id="nav" class="8u">
<a href="#">Home</a>
<a href="#">About Me</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</div>
<!-- Hero -->
<section id="hero">
<h2>Hello world.</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing.</p>
<a href="#" class="button">Get Started</a>
</section>
<!-- Features -->
<div class="row">
<section class="4u">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing elit.
adipiscing elit nec fringilla urna tempor in. Cras et sodales
consectetur viverra lorem ipsum.</p>
</section>
<section class="4u">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing elit.
adipiscing elit nec fringilla urna tempor in. Cras et sodales
consectetur viverra lorem ipsum.</p>
</section>
<section class="4u">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing elit.
adipiscing elit nec fringilla urna tempor in. Cras et sodales
consectetur viverra lorem ipsum.</p>
</section>
</div>
<!-- Main -->
<div class="row">
<!-- Content -->
<section class="8u">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing elit.
adipiscing elit nec fringilla urna tempor in. Cras et sodales
consectetur viverra lorem ipsum. Lorem ipsum dolor sit amet
sed magna etiam adipiscing elit adipiscing elit nec fringilla
urna tempor in. Cras et sodales consectetur viverra.</p>
</section>
<!-- Sidebar -->
<section class="4u">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing elit.
adipiscing elit nec fringilla urna tempor in. Cras et sodales
consectetur viverra lorem ipsum.</p>
</section>
</div>
<!-- Footer -->
<div id="footer">
? Example. All rights reserved.
</div>
</div>
</body>
</html>css样式
body {
background: #2c373b;
color: #b2b9bC;
line-height: 2em;
}
h1, h2, h3, h4, h5, h6 {
color: #fff;
font-weight: bold;
}
.button {
border-radius: 0.5em;
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
color: #369ab8;
color: #fff;
display: inline-block;
text-decoration: none;
}
#nav a {
color: #fff;
font-style: italic;
text-decoration: none;
}
#hero {
background: #369ab8;
color: #fff;
text-align: center;
}
#footer {
color: #62696c;
text-align: center;
}预览效果：
更多 Demo 请参见：http://getskel.com/
详细的使用说明
下载获取
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论