Skip to main content

Zen Coding: Using Sublime Text (emmet plug-in)


Assuming that all of us installed zen code plugin if not please install it.
Here we're going to show you some frequently used useful tips & tricks of zen-coding with respect to HTML

type html:5 in your editor & hit tab  (@HIT-TAB@)
Let's see the different basic rules to create well formatted html one by one...

-- 1. To create the element
Write the element name and hit "TAB"
e.g. (div & hit TAB) and emmet will create this for you
   div@HIT-TAB@ => <div></div>
   p@HIT-TAB@ => <p></p>
-- 2. To create element with identifier
  Let's say we want to create "div having id as myId"
  We can use "#" sign like this

 div#myId@HIT-TAB@  => <div id="myId"></div>
  
-- 3. To create element with class name
  If we want to create "div with class name myClass"
  we can use "." sign like this

  div.myClass@HIT-TAB@   => <div class="myClass"></div>

  div.myClass1.myClass2.myClass3@HIT-TAB@  => <div class="myClass1 myClass2 myClass3"></div>

  we can combine identifier with class name like this

  div#myId.myClass1.myClass2@HIT-TAB@  => <div id="myId" class="myClass1 myClass2"></div>

-- 4. To create child element
   We can use ">" between the elements
   Let's say we want to create "li" inside "ul" tag
 --------------------------------------------------------------
Desired html structure
   <ul>
                <li></li>
    </ul>

ZenCode: ul>li@HIT-TAB@
  --------------------------------------------------------------
   if we want 5 "li" tag inside "ul" just use "*" sign

Desired html structure
   <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
    </ul>
ZenCode: ul>li*5@HIT-TAB@

  Some more examples:
    div>p@HIT-TAB@
    div#footer>p>span@HIT-TAB@
-- 5 For sibling element
  We can use "+" sign for sibling elements

Desired html structure:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div> 

ZenCode: div#header+div#content+div#footer@HIT-TAB@

-- 6. If you want to dynamically number the item
 take the help of "$" sign

 "element$*count"

Desired html structure
 <ul id="nav">
                <li class="item-1"></li>
                <li class="item-2"></li>
                <li class="item-3"></li>
                <li class="item-4"></li>
                <li class="item-5"></li>
 </ul>

 Zencode: ul#nav>li.item-$*5@HIT-TAB@;


-- 7 To move one element up   (^) use caret sign

  Desired html structure

  <div><span id="spanId" class="spanClass"></span></div>
  <div><span></span></div>

  ZenCode: div>span#spanId.spanClass^div>span@HIT-TAB@


-- 8. If we're not writing any "html element" then emmet will treat it as "div"

 .myClass>header>li   <=> div.myClass>header>li

 if we're creating "li" tag inside "ul"
 and in this case we can ignore writing "li" tag, emmet will create it for you
  ---------------------------------------------------------------------
Desired html code
 <ul>
                <li class="myLiClass-1"></li>
                <li class="myLiClass-2"></li>
 </ul>

 ZenCode:  ul>.myLiClass-$*2@HIT-TAB@
 ---------------------------------------------------------------------
Desired html structure
<div class="myClass">
                <header>
                                <h1></h1>
                </header>
                <div class="main"></div>
                <footer></footer>
</div>

ZenCode: .myClass>header>h1^.main+footer
 ---------------------------------------------------------------------
   
-- 9. To set attributes [attr="attrValue"]
     To write some text inside tab {some text}

Desired html
     <ul>
                <li class="foo"><a href="#">some text</a></li>
                <li class="foo"><a href="#">some text</a></li>
                <li class="foo"><a href="#">some text</a></li>
     </ul>
ZenCode: ul>.foo*3>a[href="#"]{some text}
  
-- 10. To get text on demand

Type "lorem" and put the number just after it, it will create 5 words for you

lorem5  => Lorem ipsum dolor sit amet.

if we're using "*N" sign then it’ll create N number of <div>s with some dummy records

Below line will create 5 div with some dummy text

ZenCode
lorem*3  

Html structure
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, animi illo aliquam debitis culpa aspernatur ratione similique repellendus velit facilis dolor molestiae quasi quaerat quam at sed sit minima porro.</div>
                                <div>Ab, ipsum, nostrum, sapiente illum commodi sit nesciunt blanditiis maiores harum doloremque maxime deleniti dicta nihil. Omnis, corporis, nostrum commodi eaque doloribus itaque dolorum ipsam dignissimos laboriosam quisquam iusto amet.</div>
                                <div>Distinctio, quidem, architecto, rerum, illum debitis provident fugiat numquam voluptate laboriosam assumenda explicabo delectus veniam adipisci repellat labore cupiditate sed. Distinctio, quos, rerum sunt unde officiis et repudiandae voluptatem nihil!</div>

  
11. Use of ZenCode as on time calculator

We can use ZenCode to do dome simple mathematical calculation

12/3*4  “now press “Ctrl + Shift + Y” and it will get converted into 16



Now we've good understanding of zen coding let’s try this zen code and see the result

html>head>title^body>div.header>ul#nav>li.item-$*4>a[href="#"]{Item $}^^^div.main>div(lorem*3)^div#footer>p>span


NOTE: All of the above code tested in "Sublime Text 3"
             Similar tips & tricks are available for writing "CSS" using zen-coding.

References:
1.       http://docs.emmet.io/cheat-sheet/

Labels:

Comments

Post a Comment

Popular posts from this blog

EFCore - Collate function

Search in SQL server query is generally case insensitive (by default or based on database level collation). Suppose we have an employees table with a row having first-name column value as "My-First-Name", so if we want to do the case-sensitive search we have to explicitly use the related collate: In EF 5 (currently in Release Candidate version [RC.2.20475.6]) Collate function got introduced which helps us to use our specific collation based search.  C# with EF5 code sample: var employeeCaseSensitiveSearch = _dbContext.Employees .Where(x => EF.Functions.Collate(x.FirstName, "Latin1_General_CS_AS") == "my-first-name") .FirstOrDefault(); A related database query will be something like this: T-SQL: Case sensitive search (use specific collation e.g.: Latin1_General_CS_AS) SELECT * FROM dbo.Employees AS e WHERE e.FirstName Collate Latin1_General_CS_AS = 'my-first-name' Some of the useful CSharp function which g...
Post a Comment
Read more

Azure SQL - AAD Authentication from you client application in user context

When we try to migrate our IaaS SQL to Azure SQL along with other code changes & refactoring, one of the most prominent things that come into the picture is Authentication through a client application (web app or windows form, excel-add-ins...). With IaaS/OnPrem SQL we could use Windows Authentication to let your client application interact with the SQL server with the user's context. But to Azure SQL we can't do the Windows Authentication and also we should avoid SQL-based login (user/password).  To login to Azure SQL, it's always preferable to use Azure Active Directory-based authentication (integrated flow, MFA, or AAD based password). Now the problem comes how to achieve this with your client application.  The solution to this problem statement is, u se AAD app with delegated permission to access the users' claim [email, sid] in access token & configure it based on your client (e.g. windows form, web application) Here are ...
Post a Comment
Read more

EFCore - Scaffold-DbContext how to use

EFCore versions, we don't have GUI to manage the DB-entities & dbContext like we used to have with EF6 (or EF5/4 version). With EFCore we've the Scaffold-DbContext command which helps us to create entities & DB context from our DB-objects.  Let's see how to use Scaffold-DbContext: Assume we're connecting with SQL Server so after creating a sample project you'll have to install EFCore related libraries as mentioned below.  Install entity-framework-core for SQL Server, at this time 3.1.9 is the latest stable version   Microsoft.EntityFrameworkcore   Microsoft.EntityFrameworkCore.SqlServer  To use Scaffold-DbContext, following two NuGet packages are required Microsoft.EntityFrameworkCore.Tools  Microsoft.EntityFrameworkCore.Design Let's say we've two DB tables (e.g. dbo.Employees & dbo.Users )  Now let's see how to use Scaffold-DbContext to create c-...
Post a Comment
Read more