LiveStyle for Vim - Quick start

LiveStyle for VimQuick start

2013/08/24 - kanazawa.rb meetup 12

Emmet LiveStyle

http://livestyle.emmet.io/

"Instant updates: see changes as-you-type.No file saving, no page reloading."



Demo Moviehttp://www.youtube.com/watch?v=iQLhGbkupS4

http://www.youtube.com/watch?v=iQLhGbkupS4

http://www.youtube.com/watch?v=iQLhGbkupS4

Quick start

http://livestyle.emmet.io/usage/

"1. Install “LiveStyle” plugin from Package Control in Sublime Text."



LiveStyle for Vim

https://github.com/mattn/livestyle-vim



LiveStyle for Vim


http://mattn.kaoriya.net/mattn_jp



http://mattn.kaoriya.net/



LiveStyle for Vim

http://mattn.kaoriya.net/mattn_jp


also Emmet.vimhttp://mattn.github.io/emmet-vim/






http://mattn.github.io/emmet-vim/

http://mattn.github.io/emmet-vim/

Quick start for Vim

Quick start for Vim

Vim

livestyle-vim

livestyled (included in livestyle-vim)

Google Chrome

LiveStyle Extension

livestyle-vim

Vundle.vim

Bundle 'mattn/livestyle-vim'

NeoBundle.vim

NeoBundle 'mattn/livestyle-vim'

Quick start for Vim

Vim

livestyle-vim


Google Chrome

LiveStyle Extension

livestyled

LiveStyle connection handling server

Compile required

${bundle_dir}/livestyle-vim/livestyled/livestyled.go

Setup Go lang (osx)

$ brew install go

Setup depend libs (osx)

$ brew install mercurial

$ mkdir ~/.go

$ export GOPATH=~/.go

$ go get code.google.com/p/go.net/websocket

Compile livestyled

$ cd ${bundle_dir}/livestyle-vim/livestyled

$ go build livestyled.go

Quick start for Vim

Vim

livestyle-vim


Google Chrome

LiveStyle Extension

LiveStyle Extension

https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg





LiveStyle Extension

https://chrome.google.com/webstore/

Search 'Emmet LiveStyle'



How to Use

Flow

Access site w/ Chrome

Open Developer tool (LiveStyle panel)

Launch Vim & livestyled

Bind css via LiveStyle panel

Edit Edit Edit

Flow





Edit Edit Edit

Open Developer tool(LiveStyle Panel)

Flow





Edit Edit Edit

Edit Edit Edit

Caution

Restriction

Happy coding !!

"kanazawa.rb ?"

scss/sass supported

scss/sass supported

scss/sass command required

set ft=scss/sass

Heavy ...

Thank you

Tomokazu Kiyoharahttp://github.com/kiyohara

http://facebook.com/tomokazu.kiyohara

http://github.com/kiyohara

http://github.com/kiyohara



LiveStyle for Vim - Quick start

Technology

Transcript of LiveStyle for Vim - Quick start