Ever heard of zen coding. This is very exciting. I had been living in the dark. I was working on visual studio 2015 and writing asp.net mvc web applications. I haven't heard of zen coding till recently and figured out it was awesome. For zen coding you need to have web essentials installed. Once you have the web essentials installed you can try few things out. Copy and paste these examples in your html file see the magic for yourself.
div#mainDiv>div#innerDiv>ul#mainList>li#items>p#$*3>lorem10
table#mainTable>tr.span4*3>td*3>p>lorem10
.messages>(.message.row>(.title.span10>lorem5)+(.date.span2{Feb 12 2015})+(.contents.span12>lorem)+(.toolbar.span12>button.btn.btn-primary.reply-button{reply})+.replies.span12)*5
(.col-md-4>.panel.panel-default.ui-ribbon-container>.ui-ribbon-wrapper>(.ui-ribbon{30% Off})+.panel-heading{Ribbon}+.panel-body>p>lorem10)*4
At the end of each line press a button and see the magic. If you play with it you will have lot of fun designing UI mocks.
div#mainDiv>div#innerDiv>ul#mainList>li#items>p#$*3>lorem10
table#mainTable>tr.span4*3>td*3>p>lorem10
.messages>(.message.row>(.title.span10>lorem5)+(.date.span2{Feb 12 2015})+(.contents.span12>lorem)+(.toolbar.span12>button.btn.btn-primary.reply-button{reply})+.replies.span12)*5
(.col-md-4>.panel.panel-default.ui-ribbon-container>.ui-ribbon-wrapper>(.ui-ribbon{30% Off})+.panel-heading{Ribbon}+.panel-body>p>lorem10)*4
At the end of each line press a button and see the magic. If you play with it you will have lot of fun designing UI mocks.
No comments:
Post a Comment