Upgrade to Pro — share decks privately, control downloads, hide ads and more …

KSSで作るパターンライブラリ

machida
September 21, 2013

 KSSで作るパターンライブラリ

2013年9月21日大阪 #PmD01 で発表させていただいた資料です。

合わせて読みたい

【アイコンを200こ描いた振り返り!】アイコンから知るデザインのヒントby awayuki
http://www.slideshare.net/awayukin/awayuki-pmd01-share

ズルいデザインテクニック2013 + セミフラット version
https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku2013-plus-semihuratuto-version

machida

September 21, 2013
Tweet

More Decks by machida

Other Decks in Design

Transcript

  1. ࠷ۙͷ։ൃελΠϧ ϓϩτλΠϓ ϑΟʔυόοΫ ࣍ͷετʔϦʔ΁ ܁Γฦ͢ ϦϦʔε ໰୊͸ղܾ͞Εͨʁ ϦϦʔε0,ʁ ໰୊Λݟ͚ͭΔ ܁Γฦ͢

    σβΠφʔ͕νʔϜʹೖΔϝϦοτ w )5.-΍$44΍ը૾ϑΝΠϧΛ[JQͰϑΝΠϧΛ౉͞ΕͯɺͦΕΛγ εςϜʹ૊ΈࠐΉख͕ؒͳ͘ͳͬͨʢมߋͷࠩ෼͕Θ͔Βͳͯ͘ࢮ ͵͜ͱ͕ͳ͘ͳΔʣ w σβΠϯͰղܾ͢΂͖໰୊ΛσβΠφʔ͕ݟ͚ͭΔ w σβΠφʔ΋࢓༷ɺߏ଄Λཧղ͍ͯ͠ΔͷͰ࿩͕ૣ͍ʢ.5(΍࿈བྷ ͕ݮΔʣ
  2. ࠷ۙͷ։ൃελΠϧ ϓϩτλΠϓ ϑΟʔυόοΫ ࣍ͷετʔϦʔ΁ ܁Γฦ͢ ϦϦʔε ໰୊͸ղܾ͞Εͨʁ ϦϦʔε0,ʁ ໰୊Λݟ͚ͭΔ ܁Γฦ͢

    σβΠφʔʹ΋ϝϦοτ w ࣮ࡍʹಈ͘΋ͷΛ৮ͬͯ։ൃΛ͍ͯ͠ΔͷͰɺҙਤͱҧ͍ͬͯͨಈ ͖ʹ͙͢ؾ͚ͮΔ w ࣮σʔλʢ·ͨ͸ͦΕʹ͍ۙ΋ͷʣ͕ೖͬͨঢ়ଶͷ΋ͷΛݟͳ͕Β ։ൃͰ͖ΔͷͰɺ࣮ࡍʹՔಇͨ͠ͱ͖ͱΠϝʔδ͕ҧͬͯͨɺͱ͍ ͏͜ͱ͸ى͖ʹ͍͘ w ࢓༷ɺߏ଄Λཧղ͍ͯ͠ΔͷͰ֬ೝ͢Δ͜ͱ͕গͳ͍ʢ.5(΍࣭໰ ͕ݮΔʣ
  3. #PPUTUSBQతͳ΋ͷͱ͸ʁ w ݟຊʹ͋Δ௨ΓʹϚʔΫΞοϓΛͯ͠DMBTTΛ෇͚Δͱɺͦͷݟͨ໨ ͕࠶ݱ͞ΕΔ΋ͷ w ͲͷϖʔδͰ࢖ͬͯ΋ɺݟຊ௨Γʹ΍Ε͹ͦͷݟͨ໨͕࠶ݱ͞ΕΔ ΋ͷ w ଞͷϖʔδͰग़͖ͯͨύʔπ΍ɺΑ͋͘Δύʔπ͕͋Β͔͡Ίݟຊ ʹ༻ҙ͞Ε͍ͯΔ΋ͷ

    w ࢖͍ํ͕ͪΐͬͱ೉͍͠ͱ͖͸આ໌͕ͪΌΜͱݟຊʹॻ͔Ε͍ͯΔ ΋ͷ ݟຊˠύλʔϯϥΠϒϥϦ ελΠϧΨΠυͱύλʔϯϥΠϒϥϦ w ελΠϧΨΠυͱ͍͏ͱɺϚʔΫΞοϓͷن໿ͱɺσβΠϯͷύλ ʔϯͷϥΠϒϥϦΛҰͭʹͨ͠΋ͷʢ(JUIVCͳͲʣͱɺΞʔΫΞο ϓͷن໿͚ͩͷ΋ͷʢ(PPHMFͳͲʣͷೋछྨ͕͋ͬͯɺͲͬͪΛࢦ ͯ͠Δ͔࿩͕΍΍͘͜͠ͳΔͷͰɺ͜ͷεϥΠυͰ͸ɺΞʔΫΞο ϓͷن໿ΛʮελΠϧΨΠυʯɺσβΠϯͷύλʔϯͷϥΠϒϥϦ ΛʮύλʔϯϥΠϒϥϦʯͱݺΜͰ͍·͢ w ࠓճ͸ʮ5XJUUFS#PPUTUSBQΈ͍ͨʹ$44Λॻ͔ͣʹσβΠϯΛೖΕ ͍ͨʂʯͱ͍͏ΤϯδχΞ͔Βͷཁ๬ʹ౴͑Δͷ͕ςʔϚͳͷͰɺ ύλʔϯϥΠϒϥϦʹ࿩Λߜͬͯ·͢
  4. http://kaleistyleguide.com/ ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ ,BMFJ4UZMFHVJEF w #BDLCPOFKT w 5XJUUFS#PPUTUSBQͬΆ͍ݟͨ໨ w 3BJMTͷ(FN͋Γ w

    $44ɺ-&44͸ࡁΈɺ4BTT͸ະର Ԡ 4BTTରԠʹ৆ۚ͋Γ ͜͜ʹ͍ΔΤϯδχΞͷ͔ͨɺ ͜ͷλεΫ୭͔΍ͬͯʂ
  5. http://warpspire.com/kss/ ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ ,44 w $44ɺ4$44ɺ-&44Ͱ࢖͑Δ w 4UZMF%PDDPͷର߅ w (JUIVCͷਓ͕࡞ͬͨ w

    ݟͨ໨͸(JUIVCͷ4UZMF(VJEFͱ ಉ͡ w 3BJMT༻ͷ(FN͋Γ w FYBNQMF͸4JOBUSBͰಈ͘ 3VCZʹ༏ͦ͠͏ͳͷͰ,44͕Α͛͞ ˞ொాʹͱͬͯ͸
  6. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ ,44 w $44ɺ4$44ɺ-&44Ͱ࢖͑Δ w 4UZMF%PDDPͷର߅ w (JUIVCͷਓ͕࡞ͬͨ w

    ݟͨ໨͸(JUIVCͷ4UZMF(VJEFͱ ಉ͡ w 3BJMT༻ͷ(FN͋Γ w FYBNQMF͸4JOBUSBͰಈ͘ ,44ͷ೿ੜ͕ͨ͘͞Μ͋ͬͨ w IUUQTHJUIVCDPNEFXTLJLTTSBJMT w IUUQTHJUIVCDPNULHSVOULTT w IUUQTHJUIVCDPNTPFOLFTDIOPPSHSVOULTT w IUUQTHJUIVCDPNTDBOJODLTTQIQ w IUUQTHJUIVCDPNNBESLTTNBLF w IUUQTHJUIVCDPN%BSFQNJEEMFNBOLTT w IUUQTHJUIVCDPNTNUNJEEMFNBOLTT
  7. /,44/BEBSFJ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w αϯϓϧ͕4BTT4ZOUBY w

    ݟͨ໨͕͓͠ΌΕ /,44ɺ܅ʹܾΊͨʂ ,44ͷ೿ੜͷҰͭ http://nadarei.co/nkss-rails/
  8. ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44/BEBSFJ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w αϯϓϧ͕4BTT4ZOUBY

    w ݟͨ໨͕͓͠ΌΕ ொా͸͜ΕʹܾΊ·ͨ͠ʂ ௐࢠʹ৐ͬͯ ίϯτϦϏϡοͨ http://nadarei.co/nkss-rails/
  9. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44/BEBSFJ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w

    αϯϓϧ͕4BTT4ZOUBY w ݟͨ໨͕͓͠ΌΕ ொా͸͜ΕʹܾΊ·ͨ͠ʂ ίϯτϦϏϡοͨ ͜ͷબ୒͕ࢥΘ͵མͱ݀ͩ͠ͱ஌Βͣʹʜ
  10. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44/BEBSFJ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w

    αϯϓϧ͕4BTT4ZOUBY w ݟͨ໨͕͓͠ΌΕ ொా͸͜ΕʹܾΊ·ͨ͠ʂ ίϯτϦϏϡοͨ ͜ͷબ୒͕ࢥΘ͵མͱ݀ͩ͠ͱ஌Βͣʹʜ w ෆ۩߹΍,44ʹ͸࣮૷͞ΕͯΔͷʹɺ/,44ʹ͸ͳ͍ػೳ͕͋ͬͨΓ ͳͲɺࠓ೔ͷൃද͕ة͏͍ঢ়گʹʢࡢ೔ͷ࿩ʣ w ٸᬎϑΟϤϧυͷΤϯδχΞͷۨܗ͞Μʹख఻ͬͯ΋Βͬͯ௚ͨ͠ Γɺػೳ௥Ճͨ͠Γ w ΋͸΍ผ෺ʹͳ͖ͬͯͨͷͰɺGKPSEOLTTSBJMTͱͯ͠ެ։͠Α͏͔ ͳ
  11. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44/BEBSFJ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w

    αϯϓϧ͕4BTT4ZOUBY w ݟͨ໨͕͓͠ΌΕ ொా͸͜ΕʹܾΊ·ͨ͠ʂ ίϯτϦϏϡοͨ ͜ͷબ୒͕ࢥΘ͵མͱ݀ͩ͠ͱ஌Βͣʹʜ w ෆ۩߹΍,44ʹ͸࣮૷͞ΕͯΔͷʹɺ/,44ʹ͸ͳ͍ػೳ͕͋ͬͨΓ ͳͲɺࠓ೔ͷൃද͕ة͏͍ঢ়گʹʢࡢ೔ͷ࿩ʣ w ٸᬎϑΟϤϧυͷΤϯδχΞͷۨܗ͞Μʹख఻ͬͯ΋Βͬͯ௚ͨ͠ Γɺػೳ௥Ճͨ͠Γ w ΋͸΍ผ෺ʹͳ͖ͬͯͨͷͰɺGKPSEOLTTSBJMTͱͯ͠ެ։͠Α͏͔ ͳ ۙ͘ʹΤϯδχΞ͕͍Δͬͯૉ੖Β͍͠
  12. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44/BEBSFJ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w

    αϯϓϧ͕4BTT4ZOUBY w ݟͨ໨͕͓͠ΌΕ ொా͸͜ΕʹܾΊ·ͨ͠ʂ ίϯτϦϏϡοͨ gem 'nkss-rails', :git => '[email protected]:machida/nkss-rails.git', :branch => "fjord-nkss-rails" मਖ਼ͨ͠ͷ͸ͪ͜Β
  13. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ // ## デフォルトボタン // Sass // - -

    - // .button // +button-base(文字サイズ, 高さ, 横幅, マージン, 文字の太さ) // +button-default(ボタンの色, 文字の色, 角丸, ノーマル時のシャドウ… // - - - // - こんな感じで +button-base と +button-default を組み合わせでできてます。 // - buttonタグ、aタグ、submit type="button"、どれにスタイルをあてても同じ… // // .primary - (白)メインとなる普通のボタン // .primary:hover - (白)メインとなる普通のボタン マウスオン // .primary:active - (白)メインとなる普通のボタン クリック // .primary:disabled - (白)メインとなる普通のボタン 無効 // .danger - (赤)削除なんかに使う危険なボタン // .danger:hover - (赤)削除なんかに使う危険なボタン マウスオン // .danger:active - (赤)削除なんかに使う危険なボタン クリック // .danger:disabled - (赤)削除なんかに使う危険なボタン 無効 // .blue - (青)目立たせたいときに使うボタン // .blue:hover - (青)目立たせたいときに使うボタン マウスオン // .blue:active - (青)目立たせたいときに使うボタン クリック // .blue:disabled - (青)目立たせたいときに使うボタン 無効 // // Styleguide 2.1. ίϝϯτΞ΢τ
  14. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ // ## デフォルトボタン // Sass // - -

    - // .button // +button-base(文字サイズ, 高さ, 横幅, マージン, 文字の太さ) // +button-default(ボタンの色, 文字の色, 角丸, ノーマル時のシャドウ… // - - - // - こんな感じで +button-base と +button-default を組み合わせでできてます。 // - buttonタグ、aタグ、submit type="button"、どれにスタイルをあてても同じ… // // .primary - (白)メインとなる普通のボタン // .primary:hover - (白)メインとなる普通のボタン マウスオン // .primary:active - (白)メインとなる普通のボタン クリック // .primary:disabled - (白)メインとなる普通のボタン 無効 // .danger - (赤)削除なんかに使う危険なボタン // .danger:hover - (赤)削除なんかに使う危険なボタン マウスオン // .danger:active - (赤)削除なんかに使う危険なボタン クリック // .danger:disabled - (赤)削除なんかに使う危険なボタン 無効 // .blue - (青)目立たせたいときに使うボタン // .blue:hover - (青)目立たせたいときに使うボタン マウスオン // .blue:active - (青)目立たせたいときに使うボタン クリック // .blue:disabled - (青)目立たせたいときに使うボタン 無効 // // Styleguide 2.1. ϚʔΫμ΢ϯͰઆ໌
  15. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ // ## デフォルトボタン // Sass // - -

    - // .button // +button-base(文字サイズ, 高さ, 横幅, マージン, 文字の太さ) // +button-default(ボタンの色, 文字の色, 角丸, ノーマル時のシャドウ… // - - - // - こんな感じで +button-base と +button-default を組み合わせでできてます。 // - buttonタグ、aタグ、submit type="button"、どれにスタイルをあてても同じ… // // .primary - (白)メインとなる普通のボタン // .primary:hover - (白)メインとなる普通のボタン マウスオン // .primary:active - (白)メインとなる普通のボタン クリック // .primary:disabled - (白)メインとなる普通のボタン 無効 // .danger - (赤)削除なんかに使う危険なボタン // .danger:hover - (赤)削除なんかに使う危険なボタン マウスオン // .danger:active - (赤)削除なんかに使う危険なボタン クリック // .danger:disabled - (赤)削除なんかに使う危険なボタン 無効 // .blue - (青)目立たせたいときに使うボタン // .blue:hover - (青)目立たせたいときに使うボタン マウスオン // .blue:active - (青)目立たせたいときに使うボタン クリック // .blue:disabled - (青)目立たせたいときに使うボタン 無効 // // Styleguide 2.1. ൪߸
  16. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ // ## デフォルトボタン // Sass // - -

    - // .button // +button-base(文字サイズ, 高さ, 横幅, マージン, 文字の太さ) // +button-default(ボタンの色, 文字の色, 角丸, ノーマル時のシャドウ… // - - - // - こんな感じで +button-base と +button-default を組み合わせでできてます。 // - buttonタグ、aタグ、submit type="button"、どれにスタイルをあてても同じ… // // .primary - (白)メインとなる普通のボタン // .primary:hover - (白)メインとなる普通のボタン マウスオン // .primary:active - (白)メインとなる普通のボタン クリック // .primary:disabled - (白)メインとなる普通のボタン 無効 // .danger - (赤)削除なんかに使う危険なボタン // .danger:hover - (赤)削除なんかに使う危険なボタン マウスオン // .danger:active - (赤)削除なんかに使う危険なボタン クリック // .danger:disabled - (赤)削除なんかに使う危険なボタン 無効 // .blue - (青)目立たせたいときに使うボタン // .blue:hover - (青)目立たせたいときに使うボタン マウスオン // .blue:active - (青)目立たせたいときに使うボタン クリック // .blue:disabled - (青)目立たせたいときに使うボタン 無効 // // Styleguide 2.1. όϦΤʔγϣϯ
  17. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ = kss_block '2.1' do %p.buttons %a{:href => "#",

    :class => "button $modifier_class"} aタグのボタン %input{:type => "button", :value => "inputタグのボタン", :class => "button $modifier_class"} %button{:type => "button", :class => "button $modifier_class"} buttonタグ のボタン NPEJpFS@DMBTTͱ͸ʁ
  18. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ <p class="buttons"> <a href="#" class="button $modifier_class">aタグのボタン</a> <input type=

    "button" value="inputタグのボタン" class="button $modifier_class"> <button type= "button" value="buttonタグのボタン" class="button $modifier_class"> </p> )5.- NPEJpFS@DMBTTͱ͸ʁ
  19. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ // ## デフォルトボタン // Sass // - -

    - // .button // +button-base(文字サイズ, 高さ, 横幅, マージン, 文字の太さ) // +button-default(ボタンの色, 文字の色, 角丸, ノーマル時のシャドウ… // - - - // - こんな感じで +button-base と +button-default を組み合わせでできてます。 // - buttonタグ、aタグ、submit type="button"、どれにスタイルをあてても同じ… // // .primary - (白)メインとなる普通のボタン // .primary:hover - (白)メインとなる普通のボタン マウスオン // .primary:active - (白)メインとなる普通のボタン クリック // .primary:disabled - (白)メインとなる普通のボタン 無効 // .danger - (赤)削除なんかに使う危険なボタン // .danger:hover - (赤)削除なんかに使う危険なボタン マウスオン // .danger:active - (赤)削除なんかに使う危険なボタン クリック // .danger:disabled - (赤)削除なんかに使う危険なボタン 無効 // .blue - (青)目立たせたいときに使うボタン // .blue:hover - (青)目立たせたいときに使うボタン マウスオン // .blue:active - (青)目立たせたいときに使うボタン クリック // .blue:disabled - (青)目立たせたいときに使うボタン 無効 // // Styleguide 2.1. όϦΤʔγϣϯ
  20. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ <p class="buttons"> <a class="button danger" href="#">aタグのボタン</a> <input class="button

    danger" type="button" value="inputタグのボタン"> <button class="button danger" type="button">buttonタグのボタン</button> </p> <p class="buttons"> <a class="button danger pseudo-class-hover" href="#">aタグのボタン</a> <input class="button danger pseudo-class-hover" type="button" value="inputタグのボタン"> <button class="button danger pseudo-class-hover" type="button">buttonタグのボタン</button> </p> <p class="buttons"> <a class="button danger pseudo-class-active" href="#">aタグのボタン</a> <input class="button danger pseudo-class-active" type="button" value="inputタグのボタン"> <button class="button danger pseudo-class-active" type="button">buttonタグのボタン</button> </p> ͜͏ॻ͖ͩ͞ΕΔ