Skel.js 用于创建响应式站点的前端框架

发布于 2018-08-04 字数6410 浏览 775 评论 0

Skel.js 是一个用于创建响应式站点的前端框架。文件只有 20kb,包含四个组件:

skeljs-four-plugs快速指南

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;
}

预览效果:

Skel.js 用于创建响应式站点的前端框架

更多 Demo 请参见:http://getskel.com/

详细的使用说明

请参见:http://skeljs.org/docs

下载获取

官方网站  |  下载地址 在线demo  |  GitHub 地址

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!