sass + foundation 5でレスポンシブペライチ制作
TRANSCRIPT
Sass + Foundation 5で!レスポンシブペライチ制作
自己紹介
井村 圭介K E I S U K E I M U R A
ファンタラクティブ株式会社CEOWordPressが大好きです。 Node.js勉強中。@imura_design
Foundationを使う前提
• レスポンシブ案件に使う！
• IE8以下は切る！
• デザインとコーディングを分けない！自社でやるか少なくとも話し合いながらやる。
必ずこれだけは…
Foundationのここが便利
• グリッド
• メディアクエリ
• rem-calc
超便利！！！
• Forms
• Buttons
• Interchange Responsive Content
そこそこ便利
Foundation with Sass
メディアクエリ
.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;
}
}
buttons
.btn {
@include button();
}
Our original starter kit
https://github.com/funteractive/foundation-start-kit
Please clone from here.
style.scss
_foundation.scss
ご清聴ありがとうございました m(_ _)m