Home > スポンサー広告 > 軽量でシンプルなレスポンシブフレームワーク「Skeleton」

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/168-d311f09a
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > 軽量でシンプルなレスポンシブフレームワーク「Skeleton」

Home > デザイン > 軽量でシンプルなレスポンシブフレームワーク「Skeleton」

軽量でシンプルなレスポンシブフレームワーク「Skeleton」

skeleton.jpg

Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。
モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。

グリッドシステム

960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじれば可能です。シンプルなコンポーネントのみだからオーバーライドしなくてもできるのが素敵。

<!-- .container is main centered wrapper -->
<div class="container">

<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>

<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>

<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>

</div>

columが、すぐに1カラムに落ちて、columsがぎりぎりまでカラムとして生きるclassになります。

メディアクエリは5分岐。

Desktop HD: 1200px
Desktop: 1000px
Tablet: 750px
Phablet: 550px
Mobile: 400px

となってます。

/* Mobile first queries */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


順番が重要で、モバイルファーストなので、ほぼ !important が必要ないです。
CSS表示的には優しいのですが、PCビューから切り崩すときは、頭の使い方が逆になるので注意です。

ユーティリティもきちんと。
/* Utility Classes */

/* Make element full width */
.u-full-width {
width: 100%;
box-sizing: border-box; }

/* Make sure elements don't run outside containers (great for images in columns) */
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }

/* Float either direction */
.u-pull-right {
float: right; }
.u-pull-left {
float: left; }

/* Clear a float */
.u-cf {
content: "";
display: table;
clear: both; }


画像の扱いに関する .u-max-full-width など、便利でシンプルなユーティリティがレスポンシブなサイトを構築するのに役立ちそうですね。


bootstrapのがっつりコンポーネントがいっぱいあるフレームワークも便利で好きですが、フルオーダーなデザインの場合は基本的な設定だけが揃った軽いもの欲しくなるもの。
融通がきいて、レスポンシブという条件のなかでも自由にやりたい人におすすめなフレームワークです。

ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/168-d311f09a
Listed below are links to weblogs that reference
軽量でシンプルなレスポンシブフレームワーク「Skeleton」 from バニデザノート

Home > デザイン > 軽量でシンプルなレスポンシブフレームワーク「Skeleton」

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。