2013-01-05

bootstrapテーマ「bootstrap narrow」を作りました

いつも非常にお世話になっているbootstrapですが、(業務系システムなど)画面の項目が多い場合、どうしても余白が多すぎると感じることが多くあります。
その都度、リセットするCSSを作っていたのですが、同じ悩みを抱える人が結構いるのではと思い公開してみました。

(2014/11/15 追記)
メンテしてないので使わないほうがいいです。3系も対応してませんし…

このエントリでお伝えしたいこと。

  1. 良かったら使ってください。
  2. Cloud9とgrunt.jsでどこでも快適ビルド生活。

bootstrap narrowとは

項目数が多い画面向けに、余白を必要最低限にとどめたbootstrapテーマです。

素の部分はbootstrapをそのまま使用しています。
(つまりbootstrapに依存しています。)

ソースコード一式はGithubにあります。
https://github.com/mitsuruog/bootstrap-narrow

ダウンロード

CSSOにてminifyしたものも準備していますので、用途に応じて利用してください。

Development Version Full code

Production Version CSSOminify

使い方

HTML上に次のようにマークアップしてください。

<head>

  <!-- 省略 -->

  <!-- styles (./cssがcssのrootフォルダの場合) -->
  <link href="./css/bootstrap.css" rel="stylesheet">
  <link href="./css/bootstrap-responsive.css" rel="stylesheet">
  <link href="./css/bootstrap-narrow.css" rel="stylesheet">

  <!-- 省略 -->

</head>

不具合・問い合わせ・要望など

Githubにて運営してますので、Issueにてお願いします。

その他

開発環境はCloud9上で構築しています。

lessを使っているのでBuildはgrunt.jsで自動化しています。非常に快適です。

また、CSSについては本業ではないので、色々勉強しながら作っています。
コードスタイルに関しては、こちらのエントリに準拠できるよう努力しています。

一貫性のあるCSSらしいCSSを書くための原則

https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP

他に良いネタありましたら教えて下さい。