[0503] 使用Sublime Text編輯HTML/CSS: Emmet + LiveStyle

Transcript

1. Դ͜Sublime Textᇜ፨)5.-CSS: Emmet + LiveStyle ymcheung

2. About ymcheung - 中央大學企管系/元智大學資訊傳播碩士班 - 從高中開始自學網頁設計 - 從當兵開始做平面設計 - ymcheung.org/bookmark

   前端設計相關的文章翻譯

3. Share Something

4. Recent Works (Visual) Taoyuan County Government Campaigns Poster/Flyer & Invitation

   ! Double-side business card

5. Currently learning - Sass (with Fire.app) - jQuery @Codeschool.com -

   Sketch.app
 
 
 
 
 
 


6. Personal Reading List - Behance (Branding, Web Design) - Zite

   (CSS, jQuery, Web, Wordpress) - Dribbble (Popular) - Pinterest (Print Design) - Kickstarter - Flipboard (UI Design) - Feedly/RSS (Codrops, Co.Design, Beautiful Pixels…)

7. Sublime Text + Livestyle

8. Sublime Text/Setup - Package Control（搜尋：sublime package control）
 https://sublime.wbond.net/installation - 按ctrl

   + ` 或 View > Show Console - import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http:// sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

9. Emmet Installation - Sublime Text 2 > 
 Preference >


   Package Control >
 Package Control: Install Packages - Emmet
 
 
 
 


10. Emmet Documentation - http://docs.emmet.io/

11. Emmet: Basic html:5 ! > 巢狀結構(child) header>div>p + 依序排列(sibling) header+div+div+footer

    綜合 header>div+div+p 群組 div>(header>div+p)*2+p tab

12. Emmet: Basic - HTML with id, class & attributes 


    div#heading
 div.menu
 img[title=“Main Logo”] - 乘法 Multiplication & 序號 Numbering
 ul>li*5
 ul>li.menu$*5 ul>li.menu$$$*5 - More at: http://docs.emmet.io/

13. Emmet: CSS Abbreviations - m: margin:; - pl padding-left; -

    ov:h overflow: hidden; - bgc:#1 background-color:#111111; - m10ex20p! margin: 10ex 20% !important; - -bdrs
 --webkit-border-radius:;
 -moz-border-radius:;
 border-radius:;

14. Emmet: Hotkeys - command + d
 <p>Lorem ipsum dolor sit

    amet.</p> - command + b 
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(50deg);
 -ms-transform: rotate(50deg);
 -o-transform: rotate(50deg);
 transform: rotate(50deg);

15. Emmet: Hotkeys - ctrl + w
 
 
 
 


    
 
 
 
 
 <p>Hello world</p> div.article1>h1 <div class=“article1”> <h1> <p>Hello world</p> </h1> </div> Sale item1 Sale item2 Sale item3 Sale item4 Sale item5 div.navi>ul>li.a$$* <div class="navi"> <ul> <li class="a01">Sale item1</li> <li class="a02">Sale item2</li> <li class="a03">Sale item3</li> <li class="a04">Sale item4</li> <li class="a05">Sale item5</li> </ul> </div>

16. Emmet LiveStyle: Installation - http://livestyle.emmet.io （搜尋：emmet livestyle） - Package Control:

    Install Packages
 livestyle - 安裝 Chrome擴充功能
 在Chrome Web Store 搜尋：Emmet livestyle

17. Emmet LiveStyle: Demonstration https://www.youtube.com/watch?v=iQLhGbkupS4

18. Emmet LiveStyle: 
 Key Function - Live and bi-directional CSS

    style editing - Temporarily tweaking any websites - Simultaneously testing responsive web design - iOS Safari live preview - CSS Pre-processor support (SASS)

19. Discussion/Feedback