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 - User management with Active Directory Group

To manage the user's roles we use Service Account on OnPrem/IaaS servers. We can use this service account on our SQL Server and accordingly manage users' permissions for the users who are part of this service account. Suppose we have an Azure SQL and we want to manage set-of-users permission shall we create each-and-every users' user profile in Azure SQL and set the permissions accordingly. Obviously, we will not .  If we've anything like Service Account (or Group) on Azure we could create the user of this GROUP on Azure SQL and set its permission/role. Here comes the Azure Active Directory Group to help us.  In case if our organization has some scheduled tasks to sync Active Directory (service account) to Azure Active Directory (AAD group), already in place, there will be some delay when we add a user to the Service account and get reflected in the AAD Group. If we have a requirement that as soon as we add a user to our group we wan...
Post a Comment
Read more

Azure VM - Failed to update virtual machine disks (Solved)

Sometimes while trying to add/remove a disk from Azure VM through the Azure portal we are getting error like " Failed to update virtual machine disks " as below Here though we are only trying to add/remove the disk, we're not doing anything with Azure Disk Encryption (ADE), still, we're getting the error message related to ADE.  Not while adding or updating the disk, if we try to add extensions or performing any activity required to do save operation to update the VM template, it show a similar failure message which is related to ADE.  Now to resolve this if we disable the disk encryption through the Azure portal through it will disable the disk encryption and on portal, we can see there is no disk encryption and also the related Key vault field is coming up empty but still, when we try to add/remove the disk & do the save operation we are getting the similar message. This is because in the VM JSON template we can se...
1 comment
Read more