ITエンジニア/デザイナ向けにオープンソースを毎日紹介

これはWebデザイナーの方にも簡単に使いこなせそうです。

最近流行のスタイルガイド。幾つかやり方はありますが、スタイルシートにHTMLを書くのはちょっと…と言う方も多いでしょう。どうしてもファイルが大きくなってしまうので一覧性が悪くなったり、更新の手間が大きくなりがちです。

そこでファイルを小さく分けてスニペットとして管理できるスタイルガイド、Pattern Primerを紹介します。

Pattern PrimerをWebサーバ内に設置したら、Webブラウザからアクセスします。

するとこんな感じに左側にHTMLを適用した結果、右側にスニペットになるHTMLコードが表示されます。
するとこんな感じに左側にHTMLを適用した結果、右側にスニペットになるHTMLコードが表示されます。

スニペットを配置するpatternsフォルダの内容は以下のようになっています。

$ tree patterns/
.
├── blockquote.html
├── feedback-error.html
├── feedback.html
├── form-buttons.html
├── form-checkbox.html
├── form-email.html
├── form-number.html
├── form-select.html
├── form-text.html
├── form-textarea.html
├── form-url.html
├── heading-1.html
├── heading-2.html
├── heading-3.html
├── heading-4.html
  :

個別にHTMLファイルとして分かれている形で、実際のHTMLファイルの内容は以下のようにHTMLタグが書かれている形です。

blockquote.html

<blockquote>
<p>This text is quoted. A block of quoted text like this is particularly useful when presented as a pull-quote within an article of text.</p>
</blockquote>

スニペットの内容にそのままスタイルシートを当てはめているだけなので、クラスやスタイル設定はそのまま反映されます。管理が個別ファイルに分かれるのでフォルダ内に細かくファイルを分けて入れておけば更新の手間が楽になるはずです。命名規則だけはそれと分かる形でつけておくのが注意点でしょうか。

実ファイルを置くだけなので管理はシンプル、データベースも不要で設置は簡単です。Webデザイナーの方でも容易に使いこなせるでしょう。

Pattern PrimerはPHP製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

adactio/Pattern-Primer

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2