chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2015/04/06

[CSS]スタイルガイドライン付きのGitHub製レスポンシブCSSフレームワーク「Primer」

GitHubの中で使われているスタイル等を入れた、スライスガイドライン付きのGitHub製のレスポンシブCSSフレームワーク「Primer」をご紹介いたします。
対応ブラウザはChrome,Firefox,Safari,IE 9以上となっており、ライセンスはMITライセンスです。

Primer

GitHubの中で使われているスタイル等を入れた、

GitHub製のレスポンシブCSSフレームワーク「Primer」をご紹介いたします。

特徴としては、

  • GitHubで使われているスタイルが入っている
  • レスポンシブ対応
  • GitHub内のスタイルガイドが入っている
  • SCSS製

css-primer-1

 

 

 

それぞれのスタイルの使用例はスタイルガイドラインに書いております。

css-primer-2

SCSSで構成されており、それぞれのコンポーネント毎にSCSSファイルを作成しています。

ファイル構成も非常に綺麗で参考になります。

 

レイアウトは5カラム構成となっております。

クラス名の意味が最初わかりませんでしたが、どうやら分数的な分け方をしているようです。

.one-fifth / .four-fifth は 1/5と4/5のような分け方みたいですね。

css-primer-3

スタイルされているのは、以下の要素です。

  • レイアウト
  • 見出し
  • ボタン
  • フォーム
  • ナビゲーション
  • アラート
  • Blankslates(通知)
  • アバター
  • 状態
  • ツールチップ
  • その他ユーティリティ

また同梱されているスタイルガイドラインとは別で、コーディングガイドラインのページがあります。

英語で書かれておりますが、コードを見ればなんとなく理解できると思います。

こちらはHTMLのコーディングガイドライン。

文章はpタグで括る、brタグは複数(連続)で使用してはいけないなどが書かれていますね。

css-primer-4

続いてこちらはCSSのコーディングガイドライン。

コロンの後にスペースを一つ入れることや、marginの0にはpxを省略するなどがありますね。

css-primer-5

こういったガイドラインがあると、チームでのコーディングに一貫性を持たせれるので便利です。

GitHubで使われているスタイルも入っており、シンプルなデザインとなっております。

 

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加