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

最新推荐文章于 2023-02-11 11:21:25 发布

劳善奇

最新推荐文章于 2023-02-11 11:21:25 发布

阅读量2.1k

点赞数 2

分类专栏：网页设计

网页设计专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

一、快速指南

skeljs是一个轻量级的建筑响应的网站和应用程序的前端框架。只有一个单一的JS文件（重量只有20KB的版本），它给设计师和开发人员访问四强大的组件：

    CSS网格系统
    一个复杂的CSS 12列网格系统具有简洁，简洁的语法，可调式天沟，无限嵌套的支持和许多更酷的功能。
    响应式布局
    对于CSS媒体查询的设计来处理所有的你需要一个精简的置换反应。简单的配置，建立处理任何数量的断点，并可以做更多比简单地将样式表。
    CSS快速编译
    方便快捷迅速处理各种常见的CSS的任务，如浏览器的CSS规范（通过规范。CSS）和改变世界的盒模型。
    丰富的插件
    一种skeljs延伸而不损害其轻量级足迹平台（见例面板插件）。

二、浏览器兼容

skeljs能够完美的兼容一下浏览器：

    Chrome
    Firefox
    Safari
    Opera
    Internet Explorer 8+
    Android Browser (2.x and up)
    Safari/iOS (4.x and up)

三、一个简单的例子

学习如何skeljs作品是在行动中看到它的最好的方式，所以这里是一个很常见的情况：建设一个响应的主页。

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

预览效果：

劳善奇

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Skel.js用于创建响应式站点的前端框架

Skel.js是一个用于创建响应式站点的前端框架。文件只有20kb，包含四个组件：一、快速指南skeljs是一个轻量级的建筑响应的网站和应用程序的前端框架。只有一个单一的JS文件（重量只有20KB的版本），它给设计师和开发人员访问四强大的组件： CSS网格系统一个复杂的CSS 12列网格系统具有简洁，简洁的语法，可调式天沟，无限嵌套的支持和许多更酷的功
复制链接

扫一扫