• かちびと.net

    Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99limeのご紹介です。class名1つを与えるだけで汎用的なUIを実装したりデザインされたボタンを設置する事が出来ます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime

スポンサーリンク

結構参考になったので備忘録がてら
ご紹介。Webサイトの制作スピードを
より向上させるために、汎用的なUI
を集めて、マークアップも綺麗な状態
で済むように設計されたスターター
キット、というかフレームワークです。

制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。

そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。

99lime


タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。


いろいろとい揃っている上に実装しやすいように設計されています。

どんなソースで実装出来るか、という例をいくつかご紹介。

e.g.) リスト


リストサンプルです。右側のチェックのなら

<ul class="checks">
    <li>tation ullamcorper suscipit lobortis</li>
    <li>suscipit lobortis nisl ut aliquip ex</li>
</ul>

ボーダー付なら

 <ul class="alt">
    <li>tation ullamcorper suscipit lobortis</li>
    <li>suscipit lobortis nisl ut aliquip ex</li>
 </ul>

という具合でclassを変更するだけです。

e.g.) メニュー

ドロップダウンなメニュー。classを変えるだけで縦や横に簡単に変更出来ます。

    <ul class="sf-menu">
    <li class="current"><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a>
        <ul>
        <li><a href="">Sub Item</a></li>
        <li><a href="">Sub Item</a>
            <ul>
            <li><a href="">Sub Item</a></li>
            <li><a href="">Sub Item</a></li>
            <li><a href="">Sub Item</a></li>
            <li><a href="">Sub Item</a></li>
            </ul>
        </li>
        <li><a href="">Sub Item</a></li>
        </ul>
    </li>
    <li><a href="">Item 4</a></li>
    </ul>

e.g.) ボタン


ボタンデザインを変更できるようにしてあります。

 <button>Button</button>
 <a class="button" href="">A.button</a>
 <button class="small">Small</button>
 <button class="small" disabled="disabled">Small (disabled)</button>

e.g.) 画像


画像に関わるやついろいろ。ギャラリーとか角丸とかの処理をclassを与えるだけで出来るようになってます。

<!--デフォルト--><img src="01.png&text=180x150" width="180" height="150" />
<!--枠付き--><img class="style1" src="01.png&text=180x150" width="180" height="150" />
<!--角丸--><img class="style2" src="01.png&text=180x150" width="180" height="150" />

e.g.) イメージスライダ-


スライダーもclassを与えたリストをマークアップするだけで実装できます。

  <ul class="slideshow" width="550" height="350">
    <li><img src="01.png&text=550x350" width="550" height="350" /></li>
    <li><img src="02.png&text=550x350" width="550" height="350" /></li>
    <li><img src="03.png&text=550x350" width="550" height="350" /></li>
    <li><h3>Slide</h3><p>Lorem ipsum </p></li>
    </ul>

他にもパンくず、グリッドレイアウト、フォームなども対応しています。とにかくソースがシンプルになるのは凄く素敵ですねー!

これ自体を使うというより、このフレームワークの形が個人的にはかなり理想系だったので久しぶりにかなり参考になったリソースでした。作り直そうかな。

ライセンスはMITです。

99lime

URL :
TRB :

Comments & Trackbacks (7)

  1. 高橋 のり

    なるほどです!
    私も WordPress の自作のフレームワーク使ってるんですけど、フレームワーク作りにとっても参考になりました!
    … たしか作ってあるはずだけど … クラス名なんだっけ?っていうのが多いんですけど w
    えへえへ w

    • シロ

      こんにちは。これ、頭いいですねー!jQueryもレイアウトもclass1つで済むようにしてるんですね・・いい例でしたw

      class名、たしかに「あれ?」ってなっちゃうことありますねwえへえへw

  2. pan

    すごく便利そうですね。作業効率が上がりそうです♪
    ところで質問なのですがこの手の物やテンプレートなど使うときにメールフォームを何にしたら良いか悩むんですが、何かおすすめはありますでしょうか?

    • シロ

      こんにちは、コメント有難う御座います!

      僕は基本的にWordPressを利用する事が大半なので、こういったフレームワークはまずWPにあわせて作る事が多いです。

      ただ、属性値がライブラリの動作に必要な事が多いのでCMSかライブラリのいずれかにあわせて変更を加える必要も出てきます。

      少しでも参考になれば幸いです!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services