【CSS】モバイルCSSフレームワーク「Ratchet」でデザイン効率化(前編)

こんにちは。CSSフレームワークのご紹介です。
CSSフレームワークといえば、Bootstrapなどが有名ですね。今回は「Ratchet」というものをご紹介します。

Retchetは元々Twitter iOSアプリのHTML/CSSプロトタイプ用でした。オープンソース化してからプロトタイプどころか本格的なモバイルアプリの構築にも使えると話題をよび、現在注目のフレームワークになっています。

Ratchet
Screen-Shot-2015-01-18-at-23.49.10

Build mobile apps with simple HTML,
CSS, and JS components.

こんなのが簡単に作れる

Screen-Shot-2015-01-19-at-00.58.23
公式のサンプルですが、こんな感じのものがサラッとつくれちゃうフレームワークです。
シンプルなのでプロトタイプに最適ですが、冒頭で申し上げたとおりクオリティが高いので、そのまま使えそうですね。

構成

Source code

DLしてきたままだと、こんな感じになってます。
コアなCSSを変えたい場合は、Sassが使われているので、コンパイルの必要があります。

ratchet/
├── sass/
├── js/
├── fonts/
├── dist/
│       ├── css/
│       ├── js/
│       └── fonts/
└── docs/
           └── examples/
Precompiled Ratchet

Sassをコンパイルし、必要なものだけを抜き出すと以下のとおりです。

ratchet/
├── css/
│       ├── ratchet.css
│       ├── ratchet.min.css
│       ├── ratchet-theme-android.css
│       ├── ratchet-theme-android.min.css
│       ├── ratchet-theme-ios.css
│       ├── ratchet-theme-ios.min.css
├── js/
│       ├── ratchet.js
│       └── ratchet.min.js
└── fonts/
           ├── ratchicons.eot
           ├── ratchicons.svg
           ├── ratchicons.ttf
           └── ratchicons.woff

※ Source codeのdistの中身です

Sample

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ratchet template page</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Include the compiled Ratchet CSS -->
    <link href="ratchet.css" rel="stylesheet">

    <!-- Include the compiled Ratchet JS -->
    <script src="ratchet.js"></script>
  </head>
  <body>

    <!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <h1 class="title">Ratchet</h1>
    </header>

    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">
      <p class="content-padded">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p>
      <div class="card">
        <ul class="table-view">
          <li class="table-view-cell">
            <a class="push-right" href="http://goratchet.com">
              <strong>Ratchet documentation</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://github.com/twbs/ratchet/">
              <strong>Ratchet on Github</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
              <strong>Ratchet Google group</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://twitter.com/goratchet">
              <strong>Ratchet on Twitter</strong>
            </a>
          </li>
        </ul>
      </div>
    </div>

  </body>
</html>

今回は公式ページにもあるBasic templateをそのまま持ってきました。
実際にこれを埋め込むと、
Screen-Shot-2015-01-19-at-00.54.07

こんな感じです。

まとめ

まだシンプルですね。次回部品の紹介や、サンプルのご紹介をしたいと思います!

フォローして続編をチェック

@universionsをフォロー