LoginSignup
16

More than 5 years have passed since last update.

Marx - 最小限のコードで小奇麗にできるCSSライブラリ

Last updated at Posted at 2017-05-07
1 / 6

Bootstrapはすてき

私はBootstrapを使って管理画面を何個か実装してきました。Bootstrapは小奇麗な画面を作れますし、広く使われていて安心感があります。


一方でBootstrapには疑問も

Bootstrapにはパネル・フォーム・ボタングループ等の便利なコンポーネントが含まれていますが、所詮は管理画面ですから、便利にしても売上につながるわけではありません。

また、<a class="btn btn-primary"> のようにデザインのためのクラスを細かく指定するのも無駄だと感じていました。


Marx

そこで紹介したいのが、Marxです。


image.png


以下が、公式ページに載っているテンプレです。
なんとクラス指定は1個もありません
<main><nav><ul> などのHTML5標準のタグを使うだけで、そこそこ格好いい画面を作れます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Marx Template</title>

  <!-- Marx CSS -->
  <link rel="stylesheet" href="css/marx.min.css">
</head>

<body>
  <!-- main is the container -->
  <main>
    <!-- Navigation -->
    <nav>
      <ul>
        <li><a href="#"><b>First</b></a></li>
        <li><a href="#">Second</a></li>
        <li><a href="#">Third</a></li>
        <li><a href="#">Fourth</a></li>
      </ul>
    </nav>

    <!-- article -->
    <article>
      <h1>Article</h1>
    </article>

    <!-- aside -->
    <aside>
      <h1>Aside</h1>
    </aside>

    <!-- section -->
    <section>
      <h1>Section</h1>
    </section>

    <!-- footer -->
    <footer>
      <p>&copy; Matthew Blode 2016</p>
    </footer>
  </main>

</body>
</html>

もちろん、実際の開発ではいくつかクラスを追加していく必要があるでしょう。

そのうちやっぱりBootstrapのコンポーネントが欲しいと思うかもしれません。

しかし、最初はMarxでスモールスタートも良いのではないでしょうか?
後からクラスを追加するのは簡単ですから。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16