Node24

前端工具收集

  1. 1. CSS 类
  2. 2. 工具类

这里整理一些我自己用过且觉得好用的工具、类库的玩意~

欢迎推荐更多好玩的给我：）

CSS 类

  • fontAwesome 海量可伸缩的字体图标

示例：

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 显示不同尺寸的照相机(camera)图标 -->
    <i class="fa fa-camera-retro fa-lg"></i> fa-lg
    <i class="fa fa-camera-retro fa-2x"></i> fa-2x
    <i class="fa fa-camera-retro fa-3x"></i> fa-3x
    <i class="fa fa-camera-retro fa-4x"></i> fa-4x
    <i class="fa fa-camera-retro fa-5x"></i> fa-5x

链接：

  1. http://fontawesome.io/
  2. Github

工具类

  • component 快速安装第三方类库

示例：

1. 安装 component

    $ npm install -g component

2. 创建配置文件 component.json

    {
      "name": "getting-started-with-component",
      "dependencies": {
        "necolas/normalize.css": "^3.0.0"  // 依赖normalize.css类库
      },
      "scripts": ["index.js"],    // 引入自定义的js
      "styles": ["index.css"]    // 引入自定义的css
    }

2. 创建 index.html

    // index.html 注意这里只有 build/build.css 和 build/build.js 文件
    <!DOCTYPE html>
    <html>
      <head>
        <title>Getting Started with Component</title>
        <link rel="stylesheet" href="build/build.css">
      </head>
      <body>
        <h1>Getting Started with Component</h1>
        <p class="blink">Woo!</p>
        <script src="build/build.js"></script>
      </body>
    </html>    

3. 创建 index.css
    * {
          box-sizing: border-box;
    }

4. 创建 index.js

    console.log('Hello component！')

5. 使用 build 命令进行构建

    $ component build

6. 打开 index.html 看看吧：）

链接：

  1. http://component.io/
  2. Guide