Zen-coding – efektivní psaní HTML kódu

20.9.2014

Zen-coding? Plugin pro líné a pohodlné

Jedná se sice o již straší věc ale občas mam pocit, že ji moc kodérů nezná. Zen-coding je plugin/rozšíření pro některé editory k ulehčení psaní HTML kódu.

6

Například pro tyto oblíbené editory:

V čem nám plugin pomůže?

Nikoho nebaví datlit do editoru seznam s osmi položkami a odkazem uvnitř. Nebo dvacetiřádkovou tabulku.  Proč si to tedy nezjednodušit a nevygenerovat si ho? A přesně o tomto je celý Zen-coding. První příklad za všechny:


ul>li*8>a

A z toho:


<ul>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

</ul>

Znatelně pohodlnější a hlavně rychlejší!

Základní syntaxe

Element s ID

div#jmeno

<div id="jmeno"></div>

Element s třídou

div.prvni

<div class="prvni"></div>

Potomci

table>tr>td


<table>

<tr>

  <td></td>

</tr>

</table>

Rodič s ID a potomek s třídou

div#mojeID>p.trida


<div id="mojeID">

<p class="trida"></p>

</div>

Rodič s více potomky

ul>li*8


<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

Element s atributem

a[title=titulek]


<a href="" title="titulek"></a>

Další příklady naleznete zde

Sublime Text 2 a Zen-coding

logo-large

Sublime nabízí balíček Emmet. Instalace je jednoduchá:

  1. pokud nemáte nainstalovaný Package Control návod najdete na jeho stránkách poté restartujte Sublime
  2. nyní v příkazovém řádku Sublime (ctrl + shift + p) zadejte  „install package“.  Pak enter. Řádka se vám přehodí a nabídne vám všechny dostupné balíčky pro váš systém a verzi sublime.
  3. najdeme náš požadovaný („Emmet“).  Enter.
  4. založíme HTML  soubor a napíšeme ul>li*9 a poté zmáčkneme  zkratku “CTRL + E”. A hotovo.

Lukáš Pavel

HTML/CSS kodér na volné noze

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

Líbí se Vám článek? Sdílejte ho.
1 Comment

Warning: call_user_func() expects parameter 1 to be a valid callback, function 'simplestyle_comment' not found or invalid function name in /data/web/virtuals/72083/virtual/www/blog/wp-includes/comment-template.php on line 1694

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*


8 + six =


Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>