Pure CSSで、ちょっとした入力フォームのテンプレート的なものを作る

完全に、自分のメモ的なエントリです。

Pure CSSを使って、ちょっとしたサンプルを書いてメモしておきます。今後、使うこともあるかなぁと。

導入

まず、環境構築に実行したコマンドは、以下の通り。

$ npm install gulp bower -g
$ npm init
$ npm install gulp gulp-webserver gulp-filter del bower-main-files --save-dev
$ bower init
$ bower install pure --save

gulpfile.jsは、こんな感じにしました。
gulpfile.js

var gulp = require("gulp");
var webserver = require("gulp-webserver");
var gulpFilter = require("gulp-filter");
var mainBowerFiles = require("main-bower-files");
var del = require("del");

gulp.task("webserver", function() {
    gulp
        .src("app")
        .pipe(webserver({
            port: 8000,
            livereload: true
        }));
});

gulp.task("clear-libs", function() {
    del.sync("app/js/vendor");
    del.sync("app/css/vendor");
});

gulp.task("bower", ["clear-libs"], function() {
    var jsFilter = gulpFilter("**/*.js");
    var cssFilter = gulpFilter("**/*.css");

    return gulp
        .src(mainBowerFiles())
        .pipe(jsFilter)
        .pipe(gulp.dest("app/js/vendor"))
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(gulp.dest("app/css/vendor"))
        .pipe(cssFilter.restore());
});

gulp.task("default", ["webserver", "bower"]);

bower.jsonは、このように。
bower.json

{
  "name": "pure-getting-started",
  "version": "0.0.1",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "pure": "~0.6.0"
  },
  "overrides": {
    "pure": {
      "main": ["pure-min.css", "base-min.css"]
    }
  }
}

HTMLとCSSを作る

サンプルのLayoutを参考にして、HTMLとCSSを書いてみます。

Layouts
http://purecss.io/layouts/

書いたHTMLは、こちら。
app/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Pureサンプル</title
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/vendor/pure-min.css">
  <link rel="stylesheet" href="css/vendor/base-min.css">
  <link rel="stylesheet" href="css/site.css">
</head>
<body>
  <div class="header">
    <div class="menu pure-menu pure-menu-horizontal">
      <a href="#" class="pure-menu-heading pure-menu-link">サイトタイトル</a>
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">メニュー1</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">メニュー2</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">メニュー3</a></li>
      </ul>
    </div>
  </div>

  <div class="wrapper">
    <div class="container">
      <h2 class="contant-head">サンプルページ</h2>

      <div class="pure-g">
        <div class="pure-u-1">
          <form class="pure-form pure-form-aligned">
            <fieldset>
              <legend>入力フォーム</legend>

              <div class="pure-control-group">
                <label for="last-name">姓</label>
                <input id="last-name" type="text" placeholder="磯野">
              </div>

              <div class="pure-control-group">
                <label for="first-name">名</label>
                <input id="first-name" type="text" placeholder="カツオ">
              </div>

              <div class="pure-control-group">
                <label for="email">メールアドレス</label>
                <input id="email" type="email" placeholder="katsuo@example.com">
              </div>

              <div class="pure-controls">
                <label for="sex" class="pure-radio">性別
                  <input id="radio" type="radio" name="radio" value="radio" checked>男性</input>
                  <input id="radio" type="radio" name="radio" value="radio">女性</input>
                </label>
              </div>

              <div class="pure-controls">
                <label for="receive-mailmagazine" class="pure-checkbox">
                  <input id="receive-mailmagazine" type="checkbox">メールマガジンを受け取る</input>
                </label>
              </div>

              <div class="pure-controls">
                <button type="submit" class="pure-button pure-button-primary">送信</button>
              </div>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
    <div class="footer l-box is-center">
      Copyright &copy; Kazuhira, All Right Reserved.
    </div>
  </div>
</body>
</html>

CSSは、こちら。
app/css/site.css

* {
    box-sizing: border-box;
}

.menu {
    background-color: #2D3E50;
    text-align: left;
}

.menu:after {
    content: "";
    display: block;
    clear: both;
}

.menu ul {
    float: right;
}

.menu a {
    color: #AECFE5;
}
.menu a:hover {
    background-color: #2D3E50;
    color: #FFFFFF;
}

.wrapper {
    position: absolute;
    top: 10%;
    width: 100%;
}

.container {
    margin: auto;
    width: 50%; 
}

.footer {
    background-color: #2D3E50;
    width: 100%;
    color: #AECFE5;
}

.is-center {
    text-align: center;
}

.l-box {
    padding: 15px;
}

見た目は、こんな感じ。

なお、上部のヘッダー（メニュー）部分を固定にするには、HTMLのこの部分を

    <div class="menu pure-menu pure-menu-horizontal">

以下のように変更します。

    <div class="menu pure-menu pure-menu-horizontal pure-menu-fixed">

これで、メニューが固定になります。

今後、サンプルを書いたりする時に使っていこう…かなと…思います。

CLOVER🍀

That was when it all began.

Pure CSSで、ちょっとした入力フォームのテンプレート的なものを作る

導入

HTMLとCSSを作る