sass + foundation 5でレスポンシブペライチ制作
TRANSCRIPT
メディアクエリ
.item {
display: block;
margin-‐bottom: 20px;
@media #{$medium-‐up} {
display: inline-‐block;
margin: 0 15px 0 0;
}
}
グリッド
.block {
@include grid-‐row();
&__main {
@include grid-‐column(8);
box-‐sizing: border-‐box;
}
&__sub {
@include grid-‐column(4);
box-‐sizing: border-‐box;
}
}
グリッド
.column {
@include grid-‐column(12);
box-‐sizing: border-‐box;
@media #{$medium-‐up} {
@include grid-‐column($columns: 10; $center: true);
}
@media #{$large-‐up} {
@include grid-‐column($columns: 8; $center: true);
}
}
rem-calc
.title {
font-‐size: rem-‐calc(20);
@media #{$large-‐up} {
font-‐size: rem-‐calc(36);
font-‐weight: bold;
}
}
https://github.com/funteractive/foundation-start-kit
Please clone from here.