Kaizen Platform における UI ライブラリのワークフロー

Kaizen Platform における UI ライブラリのワークフロー

関西フロントエンドUG 主催の「フロントエンドで考えるWebデザイン/UI勉強会 (http://kfug.connpass.com/event/15244/ )」で発表した内容です。

790f55ccde7a62df8f25747586657090?s=128

Yoshihide Jimbo

June 20, 2015
Tweet

Transcript

  1. 1.

    Kaizen Platform ʹ͓͚Δ UI ϥΠϒϥϦͷϫʔΫϑϩʔ Yoshihide Jimbo @ Kaizen Platform,

    Inc. ϑϩϯτΤϯυͰߟ͑ΔWebσβΠϯ/UIษڧձ 2015/06/20
  2. 3.
  3. 6.

    Kaizen UI ϥΠϒϥϦͱ͸ • ࣗࣾϓϩμΫτͷڞ௨ UI Λ·ͱΊͨ UI ϑϨʔϜϫʔΫ •

    Bootstrap ͷΑ͏ʹ CSS ΛಡΈࠐΉ͚ͩͰར༻Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ
  4. 12.

    .c-btn { position: relative; display: inline-block; ... } /*doc ---

    title: Standard buttons name: 01-standard-buttons category: 06.Buttons-01.Buttons --- To create a standard button, add the `.c-btn` class to any `<a>`, `<button>` or `<input>` element. ```slim_example p a.c-btn href="#" Link button button.c-btn Button input.c-btn type="button" value="Input" input.c-btn type="submit" value="Submit" ``` */ _buttons.scss
  5. 13.

    .c-btn { position: relative; display: inline-block; ... } /*doc ---

    title: Standard buttons name: 01-standard-buttons category: 06.Buttons-01.Buttons --- To create a standard button, add the `.c-btn` class to any `<a>`, `<button>` or `<input>` element. ```slim_example p a.c-btn href="#" Link button button.c-btn Button input.c-btn type="button" value="Input" input.c-btn type="submit" value="Submit" ``` */ _buttons.scss
  6. 14.
  7. 15.

    .c-btn { position: relative; display: inline-block; ... } /*doc ---

    title: Standard buttons name: 01-standard-buttons category: 06.Buttons-01.Buttons --- To create a standard button, add the `.c-btn` class to any `<a>`, `<button>` or `<input>` element. ```slim_example p a.c-btn href="#" Link button button.c-btn Button input.c-btn type="button" value="Input" input.c-btn type="submit" value="Submit" ``` */ _buttons.scss YAML
  8. 16.
  9. 17.

    .c-btn { position: relative; display: inline-block; ... } /*doc ---

    title: Standard buttons name: 01-standard-buttons category: 06.Buttons-01.Buttons --- To create a standard button, add the `.c-btn` class to any `<a>`, `<button>` or `<input>` element. ```slim_example p a.c-btn href="#" Link button button.c-btn Button input.c-btn type="button" value="Input" input.c-btn type="submit" value="Submit" ``` */ _buttons.scss Markdown
  10. 18.
  11. 19.

    .c-btn { position: relative; display: inline-block; ... } /*doc ---

    title: Standard buttons name: 01-standard-buttons category: 06.Buttons-01.Buttons --- To create a standard button, add the `.c-btn` class to any `<a>`, `<button>` or `<input>` element. ```slim_example p a.c-btn href="#" Link button button.c-btn Button input.c-btn type="button" value="Input" input.c-btn type="submit" value="Submit" ``` */ _buttons.scss Preview & 
 Markup Example
  12. 24.

    ΞΠίϯϑΝΠϧͷࣗಈੜ੒ Font files & SVG & WOFF SVG & Sass

    Sass Template & Sass Sass + + & TTF & EOT gulp-iconfont + gulp-consolidate Ͱ SVG ϑΝΠϧ͔Βࣗಈੜ੒
  13. 28.

    ϓϦϓϩηε ͱ ϙετϓϩηε CSS & SCSS & CSS & CSS

    SCSS-lint libsass Autoprefixer CSScomb clean-css Better CSS SCSS PREPROCESS POSTPROCESS
  14. 29.

    ϓϦϓϩηε ͱ ϙετϓϩηε CSS & SCSS & CSS & CSS

    - SCSS-lint libsass Autoprefixer CSScomb clean-css StyleStats Better CSS Report SCSS PREPROCESS POSTPROCESS ANALYZE
  15. 34.

    Deployment Workflow Slack Local GitHub CircleCI Amazon S3 1. GitHub

    ʹ git push ʢख࡞ۀ͸͚ͩ͜͜ʣ 2. ϓογϡ͞Εͨ͜ͱΛ CircleCI ͕ݕ஌ͯ͠ϏϧυΛ࣮ߦ 3. Ϗϧυ͕੒ޭͨ͠ΒɺS3 ʹσϓϩΠ 4. Slack ʹϏϧυ݁ՌΛ௨஌
  16. 43.
  17. 44.

    Kaizen Platform Ͱ͸৽͍͠஥ؒΛืू͍ͯ͠·͢ ৄ͘͠͸ https:/ /kaizenplatform.com/ja/aboutus.html ·ͨ͸ Wantedly ·Ͱ •

    ϑϩϯτΤϯυΤϯδχΞ • ΞϓϦέʔγϣϯΤϯδχΞ • σʔλ΢ΣΞϋ΢εΤϯδχΞ • σʔλΞφϦετ • Webίϯαϧλϯτ • ϓϩμΫτϚωʔδϟʔ • ηʔϧε • etc.
  18. 46.