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

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

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

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

Yoshihide Jimbo

June 20, 2015
Tweet

More Decks by Yoshihide Jimbo

Other Decks in Programming

Transcript

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

    Inc. ϑϩϯτΤϯυͰߟ͑ΔWebσβΠϯ/UIษڧձ 2015/06/20
  2. Kaizen UI ϥΠϒϥϦͱ͸ • ࣗࣾϓϩμΫτͷڞ௨ UI Λ·ͱΊͨ UI ϑϨʔϜϫʔΫ •

    Bootstrap ͷΑ͏ʹ CSS ΛಡΈࠐΉ͚ͩͰར༻Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ
  3. .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
  4. .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. .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
  6. .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
  7. .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
  8. ΞΠίϯϑΝΠϧͷࣗಈੜ੒ Font files & SVG & WOFF SVG & Sass

    Sass Template & Sass Sass + + & TTF & EOT gulp-iconfont + gulp-consolidate Ͱ SVG ϑΝΠϧ͔Βࣗಈੜ੒
  9. ϓϦϓϩηε ͱ ϙετϓϩηε CSS & SCSS & CSS & CSS

    SCSS-lint libsass Autoprefixer CSScomb clean-css Better CSS SCSS PREPROCESS POSTPROCESS
  10. ϓϦϓϩηε ͱ ϙετϓϩηε CSS & SCSS & CSS & CSS

    - SCSS-lint libsass Autoprefixer CSScomb clean-css StyleStats Better CSS Report SCSS PREPROCESS POSTPROCESS ANALYZE
  11. Deployment Workflow Slack Local GitHub CircleCI Amazon S3 1. GitHub

    ʹ git push ʢख࡞ۀ͸͚ͩ͜͜ʣ 2. ϓογϡ͞Εͨ͜ͱΛ CircleCI ͕ݕ஌ͯ͠ϏϧυΛ࣮ߦ 3. Ϗϧυ͕੒ޭͨ͠ΒɺS3 ʹσϓϩΠ 4. Slack ʹϏϧυ݁ՌΛ௨஌
  12. Kaizen Platform Ͱ͸৽͍͠஥ؒΛืू͍ͯ͠·͢ ৄ͘͠͸ https:/ /kaizenplatform.com/ja/aboutus.html ·ͨ͸ Wantedly ·Ͱ •

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