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

What is Fire.app

What is Fire.app

Dafd47e89ea66e9ca5c001afebd17576?s=128

Liang Bin Hsueh

June 03, 2013
Tweet

Transcript

  1. •Web

  2. Fire .app Dead Easy HTML Prototyping

  3. wireframe mockup prototype product

  4. wireframe mockup prototype product

  5. HTML Prototype

  6. ↜ⅳῲਔ •隨著專案演進,設計師會交付不⼀一致的 header/footer 以及 css/js includes •⼀一個好設計師,為什麼把⼈人⽣生浪費在做 image sprites •⼀一個好設計師,為什麼把⼈人⽣生浪費在寫

    plain CSS
  7. Sass, Compass ݺݺႨ

  8. Sass, Compass ݺݺႨ 1 .btn { 2 @include border-radius(4px); 3

    @include box-shadow($shadow); 4 color: $grayDark; 5 font-size: $baseFontSize; 6 line-height: $baseLineHeight; 7 } 8 .btn-large { 9 @include border-radius(5px); 10 font-size: $baseFontSize + 2px; 11 }
  9. Sass, Compass ݺݺႨ 1 .nav { 2 ... 3 li

    { 4 &.first { ... } 5 ... 6 a { 7 &.current { } 8 .ie7 & {} // hack 9 } 10 } 11 } nav li.first nav li a.current .ie7 nav li a
  10. Sass, Compass ݺݺႨ .icon-sprite,.icon-chat,.icon-gear,.icon-group,.icon-lock,.icon-pencil,.icon- tag,.icon-user{background:url('../images/icon-saed2a53191.png') no-repeat}.icon- chat{background-position:0 -129px;height:22px;width:24px}.icon-gear{background- position:0 0;height:26px;width:26px}.icon-group{background-position:0

    -46px;height: 21px;width:32px}.icon-lock{background-position:0 -212px;height:24px;width: 20px}.icon-pencil{background-position:0 -256px;height:23px;width:23px}.icon- tag{background-position:0 -87px;height:22px;width:22px}.icon-user{background- position:0 -171px;height:21px;width:24px}.icon-retina-sprite{background:url('../ images/icon-retina-s7eb4b555e1.png') no-repeat}@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){.icon-all-retina- sprites,.icon-chat,.icon-gear,.icon-group,.icon-lock,.icon-pencil,.icon-tag,.icon- user{background-image:url('../images/icon-retina-s7eb4b555e1.png');-webkit- background-size:32px auto;-moz-background-size:32px auto;-o-background-size:32px auto;background-size:32px auto}.icon-chat{background-position:0 -197px}.icon- gear{background-position:0 -31px}.icon-group{background-position:0 0}.icon- lock{background-position:0 -98px}.icon-pencil{background-position:0 -132px}.icon- tag{background-position:0 -165px}.icon-user{background-position:0 -67px}}.icon{display:inline-block}.container{width:960px;margin:20px auto}
  11. Sass, Compass ݺݺႨ $ gem install compass # Done! $

    sass --compass --watch foo.scss:foo.css # start coding!
  12. When we introduce Sass/Compass to designers...

  13. COMMAND LINE INTERFACE FFFFFUUUUU!!

  14. our designer uses Windows :( Press any key to continue

    Bad News
  15. write an app

  16. Fire.app + Editor = ⽴立刻可以⼯工作

  17. Features •Built-in web server •Watch and compile Sass/Compass/ CoffeeScript •ERB/Haml/Markdown

    + Layout/Partial/Helpers like Rails •Automatic browser reloading
  18. Features (cont.) •Project template •Build project into deliverables •Growl notification

    •Cross-platform
  19. Lorem Helpers <p><%= lorem_sentence %></p> <p><%= lorem_words 5 %></p> <p><%=

    lorem_word %></p> <p><%= lorem_paragraphs 10 %></p> <p><%= lorem_paragraph %></p> <p><%= lorem_date %></p> <p><%= lorem_name %></p> <p><%= lorem_first_name %></p> <p><%= lorem_last_name %></p> <p><%= lorem_email %></p>
  20. Lorem Helpers <p><%= zh_lorem_sentence %></p> <p><%= zh_lorem_words 5 %></p> <p><%=

    zh_lorem_word %></p> <p><%= zh_lorem_paragraphs 10 %></p> <p><%= zh_lorem_paragraph %></p> <p><%= zh_lorem_name %></p> <p><%= zh_lorem_first_name %></p> <p><%= zh_lorem_last_name %></p> <p><%= zh_lorem_email %></p>
  21. Lorem Helpers <img src="<%= lorem_image('300x400') %>"> <img src="<%= lorem_image('300x400', :background_color

    => '333', :color => 'fff') %>"> <img src="<%= lorem_image('300x400', :random_color => true) %>"> <img src="<%= lorem_image('300x400', :text => lorem_word) %>">
  22. 1 <% 10.times do |i| %> 2 <div class="media"> 3

    <a href="http://twitter.com/<%= lorem_last_name %>" class="img"> 4 <img src="/images/fake/avatar/<%= i %>.png”> 5 </a> 6 <div class="bd"> 7 <p><%= lorem_last_name %> <%= lorem_paragraph %></p> 8 <p><%= lorem_date %></p> 9 </div> 10 </div> 11 <% end %>
  23. GPLv2 Source Code is available on GitHub https://github.com/handlino/FireApp

  24. if you want to buy us some beers $14 ~1000

    copies sold https://github.com/handlino/FireApp
  25.  Contributions documents, pull requests, issues https://github.com/handlino/FireApp