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

最近、CSSフレームワークが多く出てきましたよね。Bootstrapもいいですが、目的やデバイスに応じて選択しても良いのかも知れません。また、あまり多機能なフレームワークは逆に束縛になる可能性もあるので注意が必要です。

スマートフォンやタブレット向けにサイトを作るならばHeart.cssをベースにしても良さそうです。必要最低限の機能に止めつつ自由度を維持してくれているCSSフレームワークです。

Heart.cssの使い方

デモのアドレス帳。これはタブレット向けと言えるデザイン構成の場合です。
デモのアドレス帳。これはタブレット向けと言えるデザイン構成の場合です。

こんな感じのモーダルもサポートされています。
こんな感じのモーダルもサポートされています。

編集時の画面。ちょっと表示が違います。
編集時の画面。ちょっと表示が違います。

こちらはスマートフォンの場合。
こちらはスマートフォンの場合。

デザインはレスポンシブです。
デザインはレスポンシブです。

こちらはAndroid風。タブレットサイズです。
こちらはAndroid風。タブレットサイズです。

こちらは同じデザインのスマートフォン版。
こちらは同じデザインのスマートフォン版。

メニュー表示もサポートされています。
メニュー表示もサポートされています。

Heart.cssは実用性の高そうなリスト系表示をサポートしています。ツールバー、タブバーなどの表示も行えます。レイヤーをアニメーションしながら切り替えもできるので、アプリ風表示も問題ないでしょう。

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

Heart.css

heartcss.org/html/app-like-ios.html

heartcss.org/html/app-like-android.html

Freddy03h/heart.css

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2