Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Zen Coding: How to write html and css with high quality

In this article we will see how to improve your development time with the Zen Coding plugin, the faster way to write html/css code.

Let's imagine your boss asking you everyday about when the project will be done and saying to you do in the fatest mode.

What is Zen Coding?

Zen Coding is a good plugin for html and css editors, just like notepad++, sublime text2, Aptana, Komodo Edit and more. In this article will be explained how it works.

Through simple abbreviations, we can create expressions that are similar to CSS selectors and with a command line only, we can create a structure for a menu with submenu in html, the new structure of the html5 tags within the page and many other examples. Encode different languages ​​has never been so simple and fast. An important tool for developing web applications.

Currently Zen Coding supports languages​​: CSS, HTML, XML / XSL and HAML via filters. With a list of editors that supports plugin Zen Coding: Aptana, Zend Studio, Eclipse, TextMate, Coda, Komodo Edit / IDE, Notepad + +, Sublime Text 2, Netbeans and Dreamweaver.

Note: All examples created below in Sublime Text 2. To run a line expression of Zen in plugin editor, copy editor and paste in the example div> main> ul> li * 3 and the end of each line to print a TAB.

With Zen Coding knowledge you will:

  1. Encode and edit languages easier;
  2. Optimize time of your web application;

Listing 1: abbreviation example of html, compiled with expression.

//Correct expression:
header>nav>ul>li*5>a[title=""]

//Wrong expression:
header > nav > ul > li * 5 > a[title=""]


/* Note: If exists spaces in your expression, it will not work correctly.
In this case the plugin will identify each element separately and compile. Remember to review each abbreviation before compile */

/* html compiled*/
<header>
	<nav>
		<ul>
			<li><a href="" title=""></a></li>
			<li><a href="" title=""></a></li>
			<li><a href="" title=""></a></li>
			<li><a href="" title=""></a></li>
			<li><a href="" title=""></a></li>
		</ul>
	</nav>
</header>

Abbreviation of #ninjaHTML

Listing 2: example with the ID and CLASS attributes.

article#main+aside.box

/*Will print*/
<article id="main"></article>
<aside class="box"></aside>

Listing 3: example of custom attributes.

table#table[cellpadding="0" cellspacing="0"]>tr>td[colspan="2"]

/*Irá imprimir*/
<table id="table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2"></td>
	</tr>
</table>

Listing 4: example of multiplication element.

footer>nav*2>ul>li*5

/*Will print*/
<footer>
	<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
	<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
</footer>

Listing 5.1: numbering with $ character will be replaced by the number specified in the multiplication.

li.item$*4

/*Will print*/
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>

Listing 5.2: $ multiple character in the expression are used as zeros.

li.item$$$

/*Will print*/
<li class="item001"></li>

Listing 6: example of groups of expressions unlimited in a single line.

div>(header>nav>ul>li*3>a)+article>(h1+h2)

/*Will print*/
<div>
	<header>
		<nav>
			<ul>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
		</nav>
	</header>
	<article>
		<h1></h1>
		<h2></h2>
	</article>
</div>

Listing 7: example of short-text, declare {} and put in the text.

a[title="Click here"]{click here to go forward}

/*Will print*/
<a href="" title="Click here">click here to go forward</a>

Abbreviation of #ninjaCSS

Note: CSS specification based on level 3.

For a better understanding about abbreviations for css, click here

Listing 8: Examples of special rules and some properties usually used.

@m
@i
@f
pos:r
bxsh:m
bxsh:w
m:4
maw
bdrs
bg+
bg:ie

/*Will print*/
@media print {
	
}
@import url();
@font-face {
	font-family: ;
	src: url();
}

position: relative;
-moz-box-shadow: 0 0 0 0 #000;
-webkit-box-shadow: 0 0 0 #000;
margin: 0 0 0 0;
max-width: ;
border-radius: ;
background: #FFF url() 0 0 no-repeat;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src=' x.png',sizingMethod=' crop');

Listing 9: Example of operation of HTML with Zen Coding

/*HTML*/
div.main>(header>a[title="logotipo"]+nav>ul>li*3>a[title="" rel=""])+article>(header>hgroup>h1+h2)+footer>(nav>ul>li>a[title=""])+p.copyright

/*Will print*/
<div class="main">
	<header>
		<a href="" title="logo"></a>
		<nav>
			<ul>
				<li><a href="" title="" rel=""></a></li>
				<li><a href="" title="" rel=""></a></li>
				<li><a href="" title="" rel=""></a></li>
			</ul>
		</nav>
	</header>
	<article>
		<header>
			<hgroup>
				<h1></h1>
				<h2></h2>
			</hgroup>
		</header>
		<footer>
			<nav>
				<ul>
					<li><a href="" title=""></a></li>
				</ul>
			</nav>
			<p class="copyright"></p>
		</footer>
	</article>
</div>

Watch this video: This video was created by Sergey Chikuyonok, a front-end developer. Defender of the optimization time in the process of working with web development.

Here i finish this article, I hope you liked and learned something about Zen Coding plugin.

See you next time.



Front-end developer. Knowledge of HTML 5, Responsive Design, JavaScript, jQuery, CSS3, PHP, SEO and defender of the W3C standards. Worked on projects such as: Kasinski and ThreeBond.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login