Skeletonで横に並んだコンテンツを縦にするには？

Question

http://getskeleton.com/examples/landing/

リンク先のページのように、横に並んでいたコンテンツ（コラム row）を、ウィンドウサイズの可変に合わせて縦にしたいです。
Bootstrapの場合、 xs mdなどをhtmlに書くことによって、レスポンシブ時にもコラムの大きさを変えていると思います。

Skeletonの場合はどうしたらいいでしょう。
media queryにブレイクポイントごとにレイアウト情報を書かないといけないのでしょうか。

具体的には

横に２個並んでいたのを １個 １個 （one-half one-half)

ーーーーーーーー
縦に２個並べたい

１個 (twelve？)

１個 (twelve?）

Answer 1

GRIDを使います。

<div class="container">
  <div class="row">
    <div class="six columns">左または上</div>
    <div class="six columns">右または下</div>
  </div>
</div>

横が縦に切り替わるデフォルトでのブレークポイントは550pxのようです。Bootstrapのように細かくブレークポイント毎に少しずつ調整と言うことはできませんが、550pxという値はCSSの中身を直接変更すれば調整できます。

Comments

[masaakitsuyoshi]

下記の部分ですね！
直接変更っていうのは下記を好みの数字に帰るってことですよね。
こういうフレームワークを直接書き換えるのって、フレームワーク使用時には推奨されてるやり方なんでしょうか？

フレームワーク初めて使うので分からないのですが、フレームワークを使うのであれば、基本的にはすでにフレームワークで定義されているスタイルをそのまま使うべきなんじゃないのかと。
書き換えるなら最初から独自に書いてしまうほうが良い？のでしょうか。
そんなこともないんですかね？

/* For devices larger than 550px */
@media (min-width: 550px) {
.container {
width: 80%; }
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }

.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }

[raccy]

元々のskeletonの場合はCSSを直接変更するしかありません。ただ、skeletonをsass化したものが二つほどありますので、そちらを使ってカスタマイズすると言う手もあります(sassが使えることが前提ですが)。

bootstrapですとカスタマイズを前提にlessやsassが用意されていますが、skeletonはなるべく小さい最低限のCSS単体だけであり、どちらかというと、とっかかり的な雛形的なものになります。小さなCSSですので、skeletonをどんどんカスタマイズして、自分好みに書き換えてしまうのはありだと思います。そちらの方が、最初から全部独自で書くよりは全然楽でしょう。

[masaakitsuyoshi]

>>skeletonをどんどんカスタマイズして、自分好みに書き換えてしまうのはありだと思います。
大変納得しました！
sassはまだ触ったことがないので、今後触れたいと思います。

ひとまず、skeleton.cssをカスタマイズして縦並びにすることに成功しました！
ご教授ありがとうございました。