Drupal Zen テーマ 7.x-6.x について

Drupal 7 の定番ベーステーマのひとつ Zen のバージョン 7.x-6.x についてポイントをかいつまんでご説明します。

Transcript

1. Drupal Zen ςʔϚ 7.x-6.x ʹ͍ͭͯ
2. ࣗݾ঺հ
3. ޙ౻Ͱ͢ • Drupal ΤϯδχΞ • ࣎լ
4. Zen 7.x-6.x
5. Zen
6. Zen Drupal ͷίϯτϦϏϡʔτςʔϚ • ΋ͬͱ΋ਓؾͷߴ͍ςʔϚͷͻͱͭͰ͢ • ϕʔεςʔϚઐ༻ͷςʔϚͰ͢ • ֤छศརػೳ͕͍͍ͭͯ·͢
7. Zen 7.x-6.x
8. Zen 7.x-6.x 2016 ೥य़ࠒʹϦϦʔε͞Ε·ͨ͠ • 7.x-5.x ͔Βେ෯ʹػೳ௥Ճ • 7.x-5.x ͷػೳ͸ͦͷ·· • SASS • Zen Grids • Drush ʹΑΔαϒςʔϚͻͳ͕ͨੜ੒
9. Zen 7.x-5.x
10. Zen 7.x-5.x • SASS: ͓ͳ͡ΈͷΞϨͰ͢ʢ Ruby ϕʔεʣ • Zen Grids: ʢޙड़͠·͢ʣ • Drush ʹΑΔαϒςʔϚͻͳ͕ͨੜ੒: $ drush en zen # Zen ͷμ΢ϯϩʔυ & ༗ޮԽ $ drush cc all # ΩϟογϡΫϦΞ $ drush zen my_subtheme # => Zen ͷαϒςʔϚͷੜ੒
11. Zen 7.x-6.x
12. Zen 7.x-6.x ͜Μͳมߋ఺͕͋Γ·͢ • ϑΝΠϧ෼ׂ - SMACSS • ελΠϧΨΠυ - KSS • λεΫϥϯφʔ - Gulp • ϥΠϒϥϦ - SASS • Ϋϥε໋໊ϧʔϧ - MindBEMding
13. Zen 7.x-6.x gulpfile.js ͷத਎
14. Zen 7.x-6.x gulpfile.js ͷத਎ • autoprefixer • styleGuide • eslint • BrowserSync • kss
15. Zen 7.x-6.x SASS ϑΝΠϧߏ੒
16. $ drush dl zen-7.x
17. Zen 7.x-6.x શϑΝΠϧ
18. Zen 7.x-6.x SASS ϑΝΠϧߏ੒ sass: - styles.scss - _init.scss - init/ - _colors.scss - _variables.scss - base/ - layouts/ - components/ - navigation/ - forms/
19. Zen 7.x-6.x SASS ϑΝΠϧߏ੒ sass: - styles.scss (1) - _init.scss (2) - init/ (2) - _colors.scss (2) - _variables.scss (2) - base/ (3) - layouts/ (4) - components/ (5) - navigation/ (6) - forms/ (7)
20. Zen 7.x-6.x SASS ϑΝΠϧߏ੒ styles.scss (1): • ͦͷଞͷϑΝΠϧΛಡΈࠐΜͰશମΛ·ͱΊΔ
21. Zen 7.x-6.x SASS ϑΝΠϧߏ੒ _init.scss (2): init/ (2): • ॳظԽॲཧΛߦ͏ • ֤छϥΠϒϥϦΛಡΈࠐΉ • Breakpoint / chroma / support-for / typey / zen-grids
22. Zen 7.x-6.x SASS ϑΝΠϧߏ੒ • Breakpoint: ϒϨʔΫϙΠϯτʢϝσΟΞΫΤϦʣ • chroma: ৭ • support-for: ର৅ϒϥ΢β • typey: ϑΥϯτ • zen-grids: ϨΠΞ΢τ
23. ϥΠϒϥϦ
24. ϥΠϒϥϦ: Breakpoint ϝσΟΞΫΤϦʢϒϨʔΫϙΠϯτʣ؅ཧ༻ͷϥΠϒϥϦ https://github.com/at-import/breakpoint • ਓ͕ؒಡΈ΍͍͢ϝσΟΞΫΤϦ
25. ϥΠϒϥϦ: Breakpoint $pc: 960px; $tablet: 456px 794px; #foo { content: 'No Media Queries'; // ஋Λ 1 ͭ౉͢ͱ min-width ʹͳΔ @include breakpoint($pc) { content: 'Basic Media Query'; } // ஋Λ 2 ͭ౉͢ͱ min-width ͱ max-width ʹͳΔ @include breakpoint($tablet) { content: 'Paired Media Query'; } }
26. ϥΠϒϥϦ: Chroma ৭৘ใ؅ཧͷͨΊͷϥΠϒϥϦ http://johnalbin.github.io/chroma • ΧϥʔηοτʢʮεΩʔϜʯʣͷఆٛ • εΩʔϜͷܧঝ
27. ϥΠϒϥϦ: Chroma ఆٛ: ϕʔεεΩʔϜ @import "chroma"; // σϑΥϧτͷΧϥʔεΩʔϜΛఆٛ $chroma: define-default-color-scheme('ϒϥϯυΧϥʔΛఆٛɻ'); // σϑΥϧτΧϥʔεΩʔϜʹ৭Λ௥Ճ $chroma: add-colors(( black: #000, red: #c00, // "blue" ͷ஋Λ࣋ͭϋΠϥΠτΧϥʔΛఆٛ // ϝϞ: Ҿ༻ූͳ͠Ͱ blue ͕ࢦఆ͞Εͨ৔߹͸ม਺ͷࢀরͰ͸ͳ͘௨ৗͷ৭ͱղऍ͞ΕΔ primary: 'blue', ));
28. ϥΠϒϥϦ: Chroma ఆٛ: ࢠεΩʔϜ // ʮϑΝϯΫγϣφϧʯͳΧϥʔεΩʔϜΛ࡞੒ // σϑΥϧτΧϥʔεΩʔϜΛܧঝ͢Δ $chroma: define-color-scheme('functional', '࣮ࡍʹར༻͢ΔΧϥʔεΩʔϜΛఆٛɻ'); // ϑΝϯΫγϣφϧΧϥʔεΩʔϜʹ৭Λ௥Ճ $chroma: add-colors('functional', ( // text ͷΧϥʔΛσϑΥϧτΧϥʔεΩʔϜͰఆٛ͞Εͨ black ͷ৭ʹ͢Δ text: 'black', // ଞͷ৭ͷ໊લ͸Ҿ༻ූ͋ΓͰ΋ͳ͠Ͱ΋ͲͪΒͰ΋ OK // ϝϞ: Ҿ༻ූΛ͚ͭͳ͚Ε͹৭ͷΩʔϫʔυจࣈྻͱͯ͠͸ೝࣝ͞Εͳ͍ heading: text, // ϦϯΫ৭ΛϓϥΠϚϦʔΧϥʔʹ͢Δ link: primary, // ϦϯΫϑΥʔΧεΧϥʔΛ lighten(link, 20%) Ͱઃఆ͢Δ link-focus: (link lighten 20%), ));
29. ϥΠϒϥϦ: Chroma ఆٛ: ଙεΩʔϜ // "alternate" ΧϥʔεΩʔϜΛ࡞੒ // functional ͔Βܧঝ $chroma: define-color-scheme('alternate', '୅ସΧϥʔεΩʔϜΛఆٛɻ', $parent: 'functional'); // alternate ΧϥʔεΩʔϜʹ৭Λ௥Ճ $chroma: add-colors('alternate', ( primary: 'red', ));
30. ϥΠϒϥϦ: Chroma ར༻: // color() ؔ਺͕ݺ͹Εͨͱ͖ʹͲͷΧϥʔΛσϑΥϧτͰ࢖༻͢Δ͔Ληοτ͢Δ $chroma-active-scheme: 'functional'; .example-ruleset { h1 { // #000 color: color(heading); } a { // #0e71b8 color: color(link); .alternate-color-section & { // #c00 ʢ਌ͷ৭ʹϑΥʔϧόοΫʣ color: color(alternate, link); } } }
31. ϥΠϒϥϦ: support-for ϒϥ΢βαϙʔτ؅ཧͷͨΊͷϥΠϒϥϦ https://github.com/JohnAlbin/support-for
32. ϥΠϒϥϦ: support-for ઃఆ: $support-for: ( // ϚΠφε͸࠷৽ͷόʔδϣϯ͔Βͷόʔδϣϯ਺ chrome: -4, edge: 25, firefox: 45, ie: 9, opera: -4, safari: -4, '*': -4, ) !default; $support-for: ( safari: 8, // null ͸αϙʔτͳ͠Λҙຯ͢Δ // ࢦఆ͞Ε͍ͯͳ͍ϒϥ΢βͷσϑΥϧτ஋ '*': null, );
33. ϥΠϒϥϦ: support-for ར༻: @mixin my-sweet-sweet-mixin($cocoa: lots) { border-radius: 100%; // ͜͜͸ IE 10 αϙʔτͷͨΊʹಡΈࠐ·ΕΔ @if support-for(ie, 10) { // IE 8/9/10 Ͱ a ಺ͷ a ཁૉͷϘʔμʔΛ࡟আ͢Δ border: 0; } }
34. ϥΠϒϥϦ: typey ϑΥϯτؔ࿈ͷ৘ใΛ؅ཧ͢ΔͨΊͷϥΠϒϥϦ https://github.com/jptaranto/typey • ϑΥϯτઃܭͷར༻
35. ϥΠϒϥϦ: typey ઃఆ: ϑΥϯταΠζ $base-font-size: 15px; $font-size: ( xxl: 32px, xl: 24px, l: 18px, m: $base-font-size, s: 12px, xs: 10px );
36. ϥΠϒϥϦ: typey ར༻: ϑΥϯταΠζ abbr { @include font-size(s); }
37. ϥΠϒϥϦ: typey ઃఆ: ϑΥϯτϑΝϛϦʔ $typefaces: ( sans-serif: ( font-family: $helvetica, letter-spacing: -.5px, ), serif: $garamond, monospace: ( font-family: $monaco, letter-spacing: .5px, weight: bold, case: uppercase, ) );
38. ϥΠϒϥϦ: typey ར༻: ϑΥϯτϑΝϛϦʔ h1, h2, h3 { @include typeface(body); }
39. ϥΠϒϥϦ: typey ઃఆ: ϑΥϯτपΓશൠ $typestyles: ( heading-1: ( font-size: xl, line-height: 1.25, weight: bold, case: uppercase ), heading-2: ( font-size: l, line-height: 1.25, weight: normal ) )
40. ϥΠϒϥϦ: typey ར༻: ϑΥϯτपΓશൠ h1 { @include typeset(heading-1); }
41. ϥΠϒϥϦ: typey ઃఆ: Φϓγϣϯ $base-unit: 'rem';
42. ϥΠϒϥϦ: Zen Grids άϦουϨΠΞ΢τͷͨΊͷϥΠϒϥϦ http://zengrids.com • άϦουϨΠΞ΢τΛ͓खܰʹ࣮ݱ
43. ϥΠϒϥϦ: Zen Grids ઃఆ: import "zen-grids"; // ΧϥϜ਺ $zen-columns: 7; // ΨλʔαΠζ: ֤ΧϥϜͷ྆αΠυʹΨλʔͷ൒෼ͷۭന͕ೖΔ $zen-gutters: 10px;
44. ϥΠϒϥϦ: Zen Grids ར༻: HTML <div class="container"> <article class="content"> Tha main content. We like semantic HTML ordering. </article> <aside class="aside1"> An aside. </aside> <aside class="aside2"> Another aside. </aside> <footer class="footer1"> A footer. </footer> <footer class="footer2"> Another footer. </footer> </div>
45. ϥΠϒϥϦ: Zen Grids ར༻: SCSS .container { // άϦουίϯςφ @include zen-grid-container(); } .aside1 { // ෯͕ 2 ΧϥϜɺελʔτ͕ 1 ΧϥϜ໨ @include zen-grid-item(2, 1); } .content { // ෯͕ 4 ΧϥϜɺελʔτ͕ 3 ΧϥϜ໨ @include zen-grid-item(4, 3); } .aside2 { // ෯͕ 1 ΧϥϜɺελʔτ͕ 7 ΧϥϜ໨ @include zen-grid-item(1, 7); }
46. ϥΠϒϥϦ: Zen Grids ར༻: SCSS .footer1 { // ৽͍͠ߦΛ࢝ΊΔ @include zen-new-row(); // ෯͕ 3 ΧϥϜɺελʔτ͕ 5 ΧϥϜ໨ // ඞͣ͠΋ࠨ͔Βॱʹ٧Ίͳͯ͘΋ OK @include zen-grid-item(3, 5); } .footer2 { // ෯͕ 4 ΧϥϜɺελʔτ͕ 1 ΧϥϜ໨ @include zen-grid-item(4, 1); }
47. Zen 7.x-6.x SASS ϑΝΠϧߏ੒
48. Zen 7.x-6.x SASS ϑΝΠϧߏ੒ _colors.scss (2): • ৭ؔ࿈ͷม਺ʢ chroma ʣΛఆٛ͢Δ _variables.scss (2): • ৭Ҏ֎ͷม਺Λఆٛ͢Δ
49. Zen 7.x-6.x SASS ϑΝΠϧߏ੒ base/ (3) : layouts/ (4) : components/ (5) : • SMACSS ෩ͷϨΠϠϦϯά navigation/ (6) : forms/ (7) : • ͜͜͸ SMACSS ෩͡Όͳ͍ • ϝχϡʔ΍ϑΥʔϜपΓ
50. ͋Γ͕ͱ͏͍͟͝·ͨ͠