RWD 一小時就上手

ʪ ௓ ዒ ௣ ʰ ဈ RWD SUSY responsive grid
for compass. ṺЗ

࿠ወ × &WFO8Vڜ⼡ቒ × GCNFFWFOXV

͸٩ἇ ൘̨խḕ⋧⃷ ፕถ৛ኖ௣ወ SFTQPOTJWFEFTJHO

XJLJQFEJBPSH

XIJUFIPVTFHPW

ZBIPPDPN

for compass. Ṻḕ

TVTZPEECJSEOFU

TVTZወ̍㞬㡳 × TVTZዅʫ৺चትDPNQBTTḋ௻ḑSFTQPOTJWFHSJEGSBNFXPSL × ̍㞦㡬ٍዅʫ৺(SJE㡙

ӱ̜HSJEGSBNFXPSLḕ⎟㟂 × ٣ⓗมGMVJE▎GJYFEXJEUI˅⽐ᇊ × 3FTQPOTJWF%FTHJOᩜ᝖̴༦⯘ּᘍͥ × ༮⨈ḑQBEMBZPVUNFEJVNHSJE٣ዅEFTLUPQHSJE⌾௑ᚚΜᬝ × 㕘㕰ḑIUNM

TVTZHSJEGSBNFXPSL × ㋁ˮGMVJE▎GJYFEXJEUI⽜ፒNBHJD㡙 × 3FTQPOTJWF%FTHJO٨̴̨༦⯘ּᘍͥ㡙 × ࿼̨QBEMBZPVUNFEJVNHSJE٨̨㋱͸୷ჭ × ˨᠜ḑIUNM㡠਒ڑ㡤$44ፒ㞼௑㕰㡡

અᕦTIPXDBTFዒ㉜

X-large Large Medium small

Ѹ⼓ᕿḕᐵ୑ ተဈᴣTVTZ٤⬏ʪ⼢

normal open menu

mobile desktop

Ѹ⼓ᕿḕᐵ୑ ᪯⌙␽ᴣTVTZ٤⬏ʪৢ

սʱḕዒ㉜٩ႋΘ ሡㅣୗƟ⯞⊅ↄƟޔۢݨ

㌸᛭ × ፎ4BTT × ἃ$PNQBTT × ፎ⪑&YUFOTJPOT × ̨ʱ⾯ʴፎḑ⮣㡬 ╾௓ፎᴟGJSFBQQ

୹⪗TVTZ ⼝Ӧᙏ㐖

$-*୹⪗ IUUQTVTZPEECJSEOFUHVJEFTHFUUJOHTUBSUFETUBSUJOTUBMM

'JSFBQQဈֽ୹⪗TVTZ ӰவGJSFBQQӧයTVTZݬ㡤٣ዅৡ░ˮơ

× ʲ⹴⼍ל㡤⭂মፎԹ᱒ʫϪTVTZNBTUFS⳻ቛ৫ × IUUQTHJUIVCDPNFSJDBNTVTZBSDIJWFNBTUFS[JQ × SFOBNF⳻ቛ৫᨟TVTZ ˁʿՙ⼍Ϫ⳻ቛ৫ GJSFBQQဈֽ୹⪗TVTZ

!JNQPSUTVTZ

ࡷ⨲โဎ㏴⭺HSJE⭺஄ $total-‐columns : 4;
$column-‐width : 60px; $gutter-‐width : 20px; $grid-‐padding : 10px; $grid&padding $total&columns $column&width $gutter&width

× ය⃯ፌ৖㍵ḑᐩ⌀஖ࠧӎ≸ $POUBJOFS஘ࠨ .page { @include container; }

× ൎ͸ံHSJEᵍԹΘܙ × ᝥ༦DISPNFCVH͚˙ፒᙔ㡤GJSFGPYፌ₪ %FCVHNPEF .page { @include container;
@include susy-‐grid-‐background; }

.main .sidebar

× Հឧᘍͥ 4QBO$PMVNOTՁឫᘐͥ .main { @include span-‐columns(9, 12); } .sidebar
{ @include span-‐columns(3 omega, 12); } .main { @include span-‐columns(9 omega, 12); } .sidebar { @include span-‐columns(3, 12); } × ೹٬⯘ᄥᘍͥয়᝖

3FTQPOTJWFHSJE๭㞬Х㡳 @include at-‐breakpoint($media-‐layout) { .page { @include container; }
}

Ӕˮ⭈NFEJBMBZPVU

NFEJBMBZPVUஷ㋯ʰፕ⼓㞬৛₋⽖ᇍ㡠 $media-‐layout: 12;
// Use 12-‐col layout at matching min-‐width. $media-‐layout: 30em; // At min 30em, use closest fitting layout. $media-‐layout: 30em 12; // At min 30em, use 12-‐col layout. $media-‐layout: 12 60em; // Use 12 cols up to max 60em. $media-‐layout: 30em 60em; // Between min 30em & max 60em, use closest layout. $media-‐layout: 30em 12 60em;// Use 12 cols between min 30em & max 60em. $media-‐layout: 60em 12 30em;// Same. Larger length will always be max-‐width. $media-‐layout : 12 lt-‐ie9; // Output is included under `.lt-‐ie9` class, // for use with IE conditional comments // on the <html> tag. മᴣ

NFEJBMBZPVUʯৡമᴣ $media-‐layout: 12; // 使⽤用 12 欄布局 (susy ⾃自⼰己去計算 min-‐width)
$media-‐layout: 30em; // 設定 min-‐width 30em $media-‐layout: 30em 12; // 設定 min-‐width 30em, 並使⽤用 12 欄

ӻˮ⭈"U#SFBLQPJOU @include at-‐breakpoint(30em 12) { .page { @include container;
} }

⯔ם⯔⾵٩̨Ɵ⾵ʪᕿ .page { @include at-‐breakpoint(30em 12) { @include container;
} } @include at-‐breakpoint(30em 12) { .page { @include container; } }

TVTZ TBTTӻ⼣ת $pad: 768px 8; $desktop: 1000px 12; .page {
@include container; } @include at-‐breakpoint($pad) { .page { @include set-‐container-‐width; } } @include at-‐breakpoint($desktop) { .page { @include set-‐container-‐width; } } Ӕ္NFEJBMBZPVU ୘࿟ፕ༩⏳ḕێٽ㡠

TVTZ TBTTӻ⼣ת $pad: 768px 8; $desktop: 1000px 12; .page {
@include container; @include at-‐breakpoint($pad) { @include set-‐container-‐width; } @include at-‐breakpoint($desktop) { @include set-‐container-‐width; } } Ӕ္NFEJBMBZPVU ୘࿟ፕ༩⏳ḕێٽ㡠

ৡ⊤ၵ $pad: 768px 8; $desktop: 1000px 12; .page {
@include container( $total-‐columns, $pad, $desktop ); } $pad: 768px 8; $desktop: 1000px 12; .page { @include container; @include at-‐breakpoint($pad) { @include set-‐container-‐width; } @include at-‐breakpoint($desktop) { @include set-‐container-‐width; } } ʱʫ㏡ḑ⯃᝖㡧 ٨⇄ש㡧

6*ӏ̲ḕ⢫ᱝቶ් .button { // ⼀一堆預設樣式 @include at-‐breakpoint($desktop) {
// 桌⾯面版本樣式 } }

⽢ፕ㐈Ѹܚ .attendee { @include isolate-‐grid(1); @include at-‐breakpoint($desktop) {
@include isolate-‐grid(2); } } ဈᖧᬡ ͬϪᘐͥḕHBMMFSZMJTU ᐸ㍻ᬡ ͬϪᘐͥḕHBMMFSZMJTU

٩̨ᴣTVTZ╽ХHSJE @for $col from 1 through $total-‐columns { .span#{$col}
{ @include span-‐columns($col); } }

࿤ХʪϪⳔ۰ᬟDTTGSBNFXPSL @for $width from 1 through 3 { @for
$height from 1 through 3 { .block-‐#{$width}-‐#{$height} { @include span-‐columns($width); padding-‐top: columns($height); } } } .block { margin-‐bottom: gutter($context); @include nth-‐omega; }

for compass. Ṻḕ

5 ) " / , 4 8
& - $ 0 . & GCDPNHSPVQTTVTZUFNQMF TVTZἤ₳௄

RWD 一小時就上手

RWD 一小時就上手

More Decks by evenwu

Other Decks in Technology

Featured

Transcript