Thursday, September 18, 2014

Emmet Cheat sheet for faster Coding

Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow:


 


Syntax




Child: >


nav>ul>li

<nav> <ul> <li></li> </ul> </nav>

Sibling: +


div+p+bq

<div></div> <p></p> <blockquote></blockquote>

Climb-up: ^


div+div>p>span+em^bq

<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>

div+div>p>span+em^^bq

<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>

Grouping: ()


div>(header>ul>li*2>a)+footer>p

<div> <header> <ul> <li><a href=””></a></li> <li><a href=””></a></li> </ul> </header> <footer> <p></p> </footer> </div>

(div>dl>(dt+dd)*3)+footer>p

<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>

Multiplication: *


ul>li*5

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

Item numbering: $



ul>li.item$*5
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>


h$[title=item$]Header $*3

<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>


ul>li.item$$$*5
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>


ul>li.item$@-*5
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>


ul>li.item$@3*5
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>

 



ID and CLASS attributes


#header

<div id=”header”></div>

.title

<div class=”title”></div>

form#search.wide

<form id=”search” class=”wide”></form>

p.class1.class2.class3

<p class=”class1 class2 class3″></p>

Custom attributes


p[title="Hello world"]

<p title=”Hello world”></p>

td[rowspan=2 colspan=3 title]

<td rowspan=”2″ colspan=”3″ title=””></td>

[a='value1' b="value2"]

<div a=”value1″ b=”value2″></div>

Text:


aClick me

<a href=””>Click me</a>

p>Click +ahere+ to continue

<p>Click <a href=””>here</a> to continue</p>

Implicit tag names


.class

<div class=”class”></div>

em>.class

<em><span class=”class”></span></em>

ul>.class

<ul> <li class=”class”></li> </ul>

table>.row>.col

<table> <tr class=”row”> <td class=”col”></td> </tr> </table>


HTML



All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>.




!


Alias of html:5


<!doctype html> <html lang=”en”> <head> <meta charset=”UTF-8″ /> <title>Document</title> </head> <body> </body> </html>


a

<a href=””></a>

a:link

<a href=”http://”></a>

a:mail

<a href=”mailto:”></a>

abbr

<abbr title=””></abbr>

acronym

<acronym title=””></acronym>

base

<base href=”” />

basefont

<basefont />

br

<br />

frame

<frame />

hr

<hr />

bdo

<bdo dir=””></bdo>

bdo:r

<bdo dir=”rtl”></bdo>

bdo:l

<bdo dir=”ltr”></bdo>

col

<col />

link

<link rel=”stylesheet” href=”” />

link:css

<link rel=”stylesheet” href=”style.css” />

link:print

<link rel=”stylesheet” href=”print.css” media=”print” />

link:favicon

<link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico” />

link:touch

<link rel=”apple-touch-icon” href=”favicon.png” />

link:rss

<link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”rss.xml” />

link:atom

<link rel=”alternate” type=”application/atom+xml” title=”Atom” href=”atom.xml” />

meta

<meta />

meta:utf

<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ />

meta:win

<meta http-equiv=”Content-Type” content=”text/html;charset=windows-1251″ />

meta:vp

<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0” />

meta:compat

<meta http-equiv=”X-UA-Compatible” content=”IE=7” />

style

<style></style>

script

<script></script>

script:src

<script src=””></script>

img

<img src=”” alt=”” />

iframe

<iframe src=”” frameborder=”0″></iframe>

embed

<embed src=”” type=”” />

object

<object data=”” type=””></object>

param

<param name=”” value=”” />

map

<map name=””></map>

area

<area shape=”” coords=”” href=”” alt=”” />

area:d

<area shape=”default” href=”” alt=”” />

area:c

<area shape=”circle” coords=”” href=”” alt=”” />

area:r

<area shape=”rect” coords=”” href=”” alt=”” />

area:p

<area shape=”poly” coords=”” href=”” alt=”” />

form

<form action=””></form>

form:get

<form action=”” method=”get”></form>

form:post

<form action=”” method=”post”></form>

label

<label for=””></label>

input

<input type=”text” />

inp

<input type=”text” name=”” id=”” />

input:hidden


Alias of input[type=hidden name]


<input type=”hidden” name=”” />


input:h


Alias of input:hidden


<input type=”hidden” name=”” />


input:text, input:t


Alias of inp


<input type=”text” name=”” id=”” />


input:search


Alias of inp[type=search]


<input type=”search” name=”” id=”” />


input:email


Alias of inp[type=email]


<input type=”email” name=”” id=”” />


input:url


Alias of inp[type=url]


<input type=”url” name=”” id=”” />


input:password


Alias of inp[type=password]


<input type=”password” name=”” id=”” />


input:p


Alias of input:password


<input type=”password” name=”” id=”” />


input:datetime


Alias of inp[type=datetime]


<input type=”datetime” name=”” id=”” />


input:date


Alias of inp[type=date]


<input type=”date” name=”” id=”” />


input:datetime-local


Alias of inp[type=datetime-local]


<input type=”datetime-local” name=”” id=”” />


input:month


Alias of inp[type=month]


<input type=”month” name=”” id=”” />


input:week


Alias of inp[type=week]


<input type=”week” name=”” id=”” />


input:time


Alias of inp[type=time]


<input type=”time” name=”” id=”” />


input:number


Alias of inp[type=number]


<input type=”number” name=”” id=”” />


input:color


Alias of inp[type=color]


<input type=”color” name=”” id=”” />


input:checkbox


Alias of inp[type=checkbox]


<input type=”checkbox” name=”” id=”” />


input:c


Alias of input:checkbox


<input type=”checkbox” name=”” id=”” />


input:radio


Alias of inp[type=radio]


<input type=”radio” name=”” id=”” />


input:r


Alias of input:radio


<input type=”radio” name=”” id=”” />


input:range


Alias of inp[type=range]


<input type=”range” name=”” id=”” />


input:file


Alias of inp[type=file]


<input type=”file” name=”” id=”” />


input:f


Alias of input:file


<input type=”file” name=”” id=”” />


input:submit

<input type=”submit” value=”” />

input:s


Alias of input:submit


<input type=”submit” value=”” />


input:image

<input type=”image” src=”” alt=”” />

input:i


Alias of input:image


<input type=”image” src=”” alt=”” />


input:button

<input type=”button” value=”” />

input:b


Alias of input:button


<input type=”button” value=”” />


isindex

<isindex />

input:reset


Alias of input:button[type=reset]


<input type=”reset” value=”” />


select

<select name=”” id=””></select>

option

<option value=””></option>

textarea

<textarea name=”” id=”” cols=”30” rows=”10“></textarea>

menu:context


Alias of menu[type=context]>


<menu type=”context”></menu>


menu:c


Alias of menu:context


<menu type=”context”></menu>


menu:toolbar


Alias of menu[type=toolbar]>


<menu type=”toolbar”></menu>


menu:t


Alias of menu:toolbar


<menu type=”toolbar”></menu>


video

<video src=””></video>

audio

<audio src=””></audio>

html:xml

<html xmlns=”http://www.w3.org/1999/xhtml”></html>

keygen

<keygen />

command

<command />

bq


Alias of blockquote


<blockquote></blockquote>


acr


Alias of acronym


<acronym title=””></acronym>


fig


Alias of figure


<figure></figure>


figc


Alias of figcaption


<figcaption></figcaption>


ifr


Alias of iframe


<iframe src=”” frameborder=”0″></iframe>


emb


Alias of embed


<embed src=”” type=”” />


obj


Alias of object


<object data=”” type=””></object>


src


Alias of source


<source></source>


cap


Alias of caption


<caption></caption>


colg


Alias of colgroup


<colgroup></colgroup>


fst, fset


Alias of fieldset


<fieldset></fieldset>


btn


Alias of button


<button></button>


btn:b


Alias of button[type=button]


<button type=”button”></button>


btn:r


Alias of button[type=reset]


<button type=”reset”></button>


btn:s


Alias of button[type=submit]


<button type=”submit”></button>


optg


Alias of optgroup


<optgroup></optgroup>


opt


Alias of option


<option value=””></option>


tarea


Alias of textarea


<textarea name=”” id=”” cols=”30” rows=”10“></textarea>


leg


Alias of legend


<legend></legend>


sect


Alias of section


<section></section>


art


Alias of article


<article></article>


hdr


Alias of header


<header></header>


ftr


Alias of footer


<footer></footer>


adr


Alias of address


<address></address>


dlg


Alias of dialog


<dialog></dialog>


str


Alias of strong


<strong></strong>


prog


Alias of progress


<progress></progress>


datag


Alias of datagrid


<datagrid></datagrid>


datal


Alias of datalist


<datalist></datalist>


kg


Alias of keygen


<keygen />


out


Alias of output


<output></output>


det


Alias of details


<details></details>


cmd


Alias of command


<command />


doc


Alias of html>(head>meta[charset=UTF-8]+title$1:Document)+body


<html> <head> <meta charset=”UTF-8″ /> <title>Document</title> </head> <body> </body> </html>


doc4


Alias of html>(head>meta[http-equiv="Content-Type" content="text/html;charset=$charset"]+title$1:Document)+body


<html> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>


html:4t


Alias of !!!4t+doc4[lang=$lang]


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>


html:4s


Alias of !!!4s+doc4[lang=$lang]


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>


html:xt


Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=$lang]


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>


html:xs


Alias of !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=$lang]


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>


html:xxs


Alias of !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=$lang]


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>


html:5


Alias of !!!+doc[lang=$lang]


<!doctype html> <html lang=”en”> <head> <meta charset=”UTF-8″ /> <title>Document</title> </head> <body> </body> </html>


ol+


Alias of ol>li


<ol> <li></li> </ol>


ul+


Alias of ul>li


<ul> <li></li> </ul>


dl+


Alias of dl>dt+dd


<dl> <dt></dt> <dd></dd> </dl>


map+


Alias of map>area


<map name=””> <area shape=”” coords=”” href=”” alt=”” /> </map>


table+


Alias of table>tr>td


<table> <tr> <td></td> </tr> </table>


colgroup+, colg+


Alias of colgroup>col


<colgroup> <col /> </colgroup>


tr+


Alias of tr>td


<tr> <td></td> </tr>


select+


Alias of select>option


<select name=”” id=””> <option value=””></option> </select>


optgroup+, optg+


Alias of optgroup>option


<optgroup> <option value=””></option> </optgroup>


!!!

<!doctype html>

!!!4t

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

!!!4s

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

!!!xt

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

!!!xs

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

!!!xxs

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

c

<!– $child –>

cc:ie6

<!–[if lte IE 6]> $child <![endif]–>

cc:ie

<!–[if IE]> $child <![endif]–>

cc:noie

<!–[if !IE]><!–> $child <!–<![endif]–>


CSS



CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh.


If abbreviation wasn’t found, it is transformed into property name: foo-bar → foo-bar: |;


You can prefix abbreviations with hyphen to produce vendor-prefixed properties: -foo




Visual Formatting


pos

position:relative;

pos:s

position:static;

pos:a

position:absolute;

pos:r

position:relative;

pos:f

position:fixed;

t

top:;

t:a

top:auto;

r

right:;

r:a

right:auto;

b

bottom:;

b:a

bottom:auto;

l

left:;

l:a

left:auto;

z

z-index:;

z:a

z-index:auto;

fl

float:left;

fl:n

float:none;

fl:l

float:left;

fl:r

float:right;

cl

clear:both;

cl:n

clear:none;

cl:l

clear:left;

cl:r

clear:right;

cl:b

clear:both;

d

display:block;

d:n

display:none;

d:b

display:block;

d:i

display:inline;

d:ib

display:inline-block;

d:li

display:list-item;

d:ri

display:run-in;

d:cp

display:compact;

d:tb

display:table;

d:itb

display:inline-table;

d:tbcp

display:table-caption;

d:tbcl

display:table-column;

d:tbclg

display:table-column-group;

d:tbhg

display:table-header-group;

d:tbfg

display:table-footer-group;

d:tbr

display:table-row;

d:tbrg

display:table-row-group;

d:tbc

display:table-cell;

d:rb

display:ruby;

d:rbb

display:ruby-base;

d:rbbg

display:ruby-base-group;

d:rbt

display:ruby-text;

d:rbtg

display:ruby-text-group;

v

visibility:hidden;

v:v

visibility:visible;

v:h

visibility:hidden;

v:c

visibility:collapse;

ov

overflow:hidden;

ov:v

overflow:visible;

ov:h

overflow:hidden;

ov:s

overflow:scroll;

ov:a

overflow:auto;

ovx

overflow-x:hidden;

ovx:v

overflow-x:visible;

ovx:h

overflow-x:hidden;

ovx:s

overflow-x:scroll;

ovx:a

overflow-x:auto;

ovy

overflow-y:hidden;

ovy:v

overflow-y:visible;

ovy:h

overflow-y:hidden;

ovy:s

overflow-y:scroll;

ovy:a

overflow-y:auto;

ovs

overflow-style:scrollbar;

ovs:a

overflow-style:auto;

ovs:s

overflow-style:scrollbar;

ovs:p

overflow-style:panner;

ovs:m

overflow-style:move;

ovs:mq

overflow-style:marquee;

zoo, zm

zoom:1;

cp

clip:;

cp:a

clip:auto;

cp:r

clip:rect(top right bottom left);

rsz

resize:;

rsz:n

resize:none;

rsz:b

resize:both;

rsz:h

resize:horizontal;

rsz:v

resize:vertical;

cur

cursor:$pointer;

cur:a

cursor:auto;

cur:d

cursor:default;

cur:c

cursor:crosshair;

cur:ha

cursor:hand;

cur:he

cursor:help;

cur:m

cursor:move;

cur:p

cursor:pointer;

cur:t

cursor:text;

Margin & Padding


m

margin:;

m:a

margin:auto;

mt

margin-top:;

mt:a

margin-top:auto;

mr

margin-right:;

mr:a

margin-right:auto;

mb

margin-bottom:;

mb:a

margin-bottom:auto;

ml

margin-left:;

ml:a

margin-left:auto;

p

padding:;

pt

padding-top:;

pr

padding-right:;

pb

padding-bottom:;

pl

padding-left:;

Box Sizing


bxz

box-sizing:border-box;

bxz:cb

box-sizing:content-box;

bxz:bb

box-sizing:border-box;

bxsh

box-shadow:inset hoff voff blur color;

bxsh:r

box-shadow:inset hoff voff blur spread rgb(0, 0, 0);

bxsh:ra

box-shadow:inset h v blur spread rgba(0, 0, 0, .5);

bxsh:n

box-shadow:none;

w

width:;

w:a

width:auto;

h

height:;

h:a

height:auto;

maw

max-width:;

maw:n

max-width:none;

mah

max-height:;

mah:n

max-height:none;

miw

min-width:;

mih

min-height:;

Font


f

font:;

f+

font:1em Arial,sans-serif;

fw

font-weight:;

fw:n

font-weight:normal;

fw:b

font-weight:bold;

fw:br

font-weight:bolder;

fw:lr

font-weight:lighter;

fs

font-style:$italic;

fs:n

font-style:normal;

fs:i

font-style:italic;

fs:o

font-style:oblique;

fv

font-variant:;

fv:n

font-variant:normal;

fv:sc

font-variant:small-caps;

fz

font-size:;

fza

font-size-adjust:;

fza:n

font-size-adjust:none;

ff

font-family:;

ff:s

font-family:serif;

ff:ss

font-family:sans-serif;

ff:c

font-family:cursive;

ff:f

font-family:fantasy;

ff:m

font-family:monospace;

ff:a

font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;

fef

font-effect:;

fef:n

font-effect:none;

fef:eg

font-effect:engrave;

fef:eb

font-effect:emboss;

fef:o

font-effect:outline;

fem

font-emphasize:;

femp

font-emphasize-position:;

femp:b

font-emphasize-position:before;

femp:a

font-emphasize-position:after;

fems

font-emphasize-style:;

fems:n

font-emphasize-style:none;

fems:ac

font-emphasize-style:accent;

fems:dt

font-emphasize-style:dot;

fems:c

font-emphasize-style:circle;

fems:ds

font-emphasize-style:disc;

fsm

font-smooth:;

fsm:a

font-smooth:auto;

fsm:n

font-smooth:never;

fsm:aw

font-smooth:always;

fst

font-stretch:;

fst:n

font-stretch:normal;

fst:uc

font-stretch:ultra-condensed;

fst:ec

font-stretch:extra-condensed;

fst:c

font-stretch:condensed;

fst:sc

font-stretch:semi-condensed;

fst:se

font-stretch:semi-expanded;

fst:e

font-stretch:expanded;

fst:ee

font-stretch:extra-expanded;

fst:ue

font-stretch:ultra-expanded;

Text


va

vertical-align:top;

va:sup

vertical-align:super;

va:t

vertical-align:top;

va:tt

vertical-align:text-top;

va:m

vertical-align:middle;

va:bl

vertical-align:baseline;

va:b

vertical-align:bottom;

va:tb

vertical-align:text-bottom;

va:sub

vertical-align:sub;

ta

text-align:left;

ta:l

text-align:left;

ta:c

text-align:center;

ta:r

text-align:right;

ta:j

text-align:justify;

ta-lst

text-align-last:;

tal:a

text-align-last:auto;

tal:l

text-align-last:left;

tal:c

text-align-last:center;

tal:r

text-align-last:right;

td

text-decoration:none;

td:n

text-decoration:none;

td:u

text-decoration:underline;

td:o

text-decoration:overline;

td:l

text-decoration:line-through;

te

text-emphasis:;

te:n

text-emphasis:none;

te:ac

text-emphasis:accent;

te:dt

text-emphasis:dot;

te:c

text-emphasis:circle;

te:ds

text-emphasis:disc;

te:b

text-emphasis:before;

te:a

text-emphasis:after;

th

text-height:;

th:a

text-height:auto;

th:f

text-height:font-size;

th:t

text-height:text-size;

th:m

text-height:max-size;

ti

text-indent:;

ti:-

text-indent:-9999px;

tj

text-justify:;

tj:a

text-justify:auto;

tj:iw

text-justify:inter-word;

tj:ii

text-justify:inter-ideograph;

tj:ic

text-justify:inter-cluster;

tj:d

text-justify:distribute;

tj:k

text-justify:kashida;

tj:t

text-justify:tibetan;

to

text-outline:;

to+

text-outline:0 0 #000;

to:n

text-outline:none;

tr

text-replace:;

tr:n

text-replace:none;

tt

text-transform:uppercase;

tt:n

text-transform:none;

tt:c

text-transform:capitalize;

tt:u

text-transform:uppercase;

tt:l

text-transform:lowercase;

tw

text-wrap:;

tw:n

text-wrap:normal;

tw:no

text-wrap:none;

tw:u

text-wrap:unrestricted;

tw:s

text-wrap:suppress;

tsh

text-shadow:hoff voff blur #000;

tsh:r

text-shadow:h v blur rgb(0, 0, 0);

tsh:ra

text-shadow:h v blur rgba(0, 0, 0, .5);

tsh+

text-shadow:0 0 0 #000;

tsh:n

text-shadow:none;

lh

line-height:;

lts

letter-spacing:;

whs

white-space:;

whs:n

white-space:normal;

whs:p

white-space:pre;

whs:nw

white-space:nowrap;

whs:pw

white-space:pre-wrap;

whs:pl

white-space:pre-line;

whsc

white-space-collapse:;

whsc:n

white-space-collapse:normal;

whsc:k

white-space-collapse:keep-all;

whsc:l

white-space-collapse:loose;

whsc:bs

white-space-collapse:break-strict;

whsc:ba

white-space-collapse:break-all;

wob

word-break:;

wob:n

word-break:normal;

wob:k

word-break:keep-all;

wob:l

word-break:loose;

wob:bs

word-break:break-strict;

wob:ba

word-break:break-all;

wos

word-spacing:;

wow

word-wrap:;

wow:nm

word-wrap:normal;

wow:n

word-wrap:none;

wow:u

word-wrap:unrestricted;

wow:s

word-wrap:suppress;

wow:b

word-wrap:break-word;

Background


bg

background:;

bg+

background:#fff url() 0 0 no-repeat;

bg:n

background:none;

bgc

background-color:#fff;

bgc:t

background-color:transparent;

bgi

background-image:url();

bgi:n

background-image:none;

bgr

background-repeat:;

bgr:n

background-repeat:no-repeat;

bgr:x

background-repeat:repeat-x;

bgr:y

background-repeat:repeat-y;

bgr:sp

background-repeat:space;

bgr:rd

background-repeat:round;

bga

background-attachment:;

bga:f

background-attachment:fixed;

bga:s

background-attachment:scroll;

bgp

background-position:0 0;

bgpx

background-position-x:;

bgpy

background-position-y:;

bgbk

background-break:;

bgbk:bb

background-break:bounding-box;

bgbk:eb

background-break:each-box;

bgbk:c

background-break:continuous;

bgcp

background-clip:padding-box;

bgcp:bb

background-clip:border-box;

bgcp:pb

background-clip:padding-box;

bgcp:cb

background-clip:content-box;

bgcp:nc

background-clip:no-clip;

bgo

background-origin:;

bgo:pb

background-origin:padding-box;

bgo:bb

background-origin:border-box;

bgo:cb

background-origin:content-box;

bgsz

background-size:;

bgsz:a

background-size:auto;

bgsz:ct

background-size:contain;

bgsz:cv

background-size:cover;

Color


c

color:#000;

c:r

color:rgb(0, 0, 0);

c:ra

color:rgba(0, 0, 0, .5);

op

opacity:;

Generated content


cnt

content:”;

cnt:n, ct:n

content:normal;

cnt:oq, ct:oq

content:open-quote;

cnt:noq, ct:noq

content:no-open-quote;

cnt:cq, ct:cq

content:close-quote;

cnt:ncq, ct:ncq

content:no-close-quote;

cnt:a, ct:a

content:attr();

cnt:c, ct:c

content:counter();

cnt:cs, ct:cs

content:counters();

ct

content:;

q

quotes:;

q:n

quotes:none;

q:ru

quotes:’\00AB’ ‘\00BB’ ‘\201E’ ‘\201C';

q:en

quotes:’\201C’ ‘\201D’ ‘\2018′ ‘\2019′;

coi

counter-increment:;

cor

counter-reset:;

Outline


ol

outline:;

ol:n

outline:none;

olo

outline-offset:;

olw

outline-width:;

ols

outline-style:;

olc

outline-color:#000;

olc:i

outline-color:invert;

Tables


tbl

table-layout:;

tbl:a

table-layout:auto;

tbl:f

table-layout:fixed;

cps

caption-side:;

cps:t

caption-side:top;

cps:b

caption-side:bottom;

ec

empty-cells:;

ec:s

empty-cells:show;

ec:h

empty-cells:hide;

Border


bd

border:;

bd+

border:1px solid #000;

bd:n

border:none;

bdbk

border-break:close;

bdbk:c

border-break:close;

bdcl

border-collapse:;

bdcl:c

border-collapse:collapse;

bdcl:s

border-collapse:separate;

bdc

border-color:#000;

bdc:t

border-color:transparent;

bdi

border-image:url();

bdi:n

border-image:none;

bdti

border-top-image:url();

bdti:n

border-top-image:none;

bdri

border-right-image:url();

bdri:n

border-right-image:none;

bdbi

border-bottom-image:url();

bdbi:n

border-bottom-image:none;

bdli

border-left-image:url();

bdli:n

border-left-image:none;

bdci

border-corner-image:url();

bdci:n

border-corner-image:none;

bdci:c

border-corner-image:continue;

bdtli

border-top-left-image:url();

bdtli:n

border-top-left-image:none;

bdtli:c

border-top-left-image:continue;

bdtri

border-top-right-image:url();

bdtri:n

border-top-right-image:none;

bdtri:c

border-top-right-image:continue;

bdbri

border-bottom-right-image:url();

bdbri:n

border-bottom-right-image:none;

bdbri:c

border-bottom-right-image:continue;

bdbli

border-bottom-left-image:url();

bdbli:n

border-bottom-left-image:none;

bdbli:c

border-bottom-left-image:continue;

bdf

border-fit:repeat;

bdf:c

border-fit:clip;

bdf:r

border-fit:repeat;

bdf:sc

border-fit:scale;

bdf:st

border-fit:stretch;

bdf:ow

border-fit:overwrite;

bdf:of

border-fit:overflow;

bdf:sp

border-fit:space;

bdlen

border-length:;

bdlen:a

border-length:auto;

bdsp

border-spacing:;

bds

border-style:;

bds:n

border-style:none;

bds:h

border-style:hidden;

bds:dt

border-style:dotted;

bds:ds

border-style:dashed;

bds:s

border-style:solid;

bds:db

border-style:double;

bds:dtds

border-style:dot-dash;

bds:dtdtds

border-style:dot-dot-dash;

bds:w

border-style:wave;

bds:g

border-style:groove;

bds:r

border-style:ridge;

bds:i

border-style:inset;

bds:o

border-style:outset;

bdw

border-width:;

bdt, bt

border-top:;

bdt+

border-top:1px solid #000;

bdt:n

border-top:none;

bdtw

border-top-width:;

bdts

border-top-style:;

bdts:n

border-top-style:none;

bdtc

border-top-color:#000;

bdtc:t

border-top-color:transparent;

bdr, br

border-right:;

bdr+

border-right:1px solid #000;

bdr:n

border-right:none;

bdrw

border-right-width:;

bdrst

border-right-style:;

bdrst:n

border-right-style:none;

bdrc

border-right-color:#000;

bdrc:t

border-right-color:transparent;

bdb, bb

border-bottom:;

bdb+

border-bottom:1px solid #000;

bdb:n

border-bottom:none;

bdbw

border-bottom-width:;

bdbs

border-bottom-style:;

bdbs:n

border-bottom-style:none;

bdbc

border-bottom-color:#000;

bdbc:t

border-bottom-color:transparent;

bdl, bl

border-left:;

bdl+

border-left:1px solid #000;

bdl:n

border-left:none;

bdlw

border-left-width:;

bdls

border-left-style:;

bdls:n

border-left-style:none;

bdlc

border-left-color:#000;

bdlc:t

border-left-color:transparent;

bdrs

border-radius:;

bdtrrs

border-top-right-radius:;

bdtlrs

border-top-left-radius:;

bdbrrs

border-bottom-right-radius:;

bdblrs

border-bottom-left-radius:;

Lists


lis

list-style:;

lis:n

list-style:none;

lisp

list-style-position:;

lisp:i

list-style-position:inside;

lisp:o

list-style-position:outside;

list

list-style-type:;

list:n

list-style-type:none;

list:d

list-style-type:disc;

list:c

list-style-type:circle;

list:s

list-style-type:square;

list:dc

list-style-type:decimal;

list:dclz

list-style-type:decimal-leading-zero;

list:lr

list-style-type:lower-roman;

list:ur

list-style-type:upper-roman;

lisi

list-style-image:;

lisi:n

list-style-image:none;

Print


pgbb

page-break-before:;

pgbb:au

page-break-before:auto;

pgbb:al

page-break-before:always;

pgbb:l

page-break-before:left;

pgbb:r

page-break-before:right;

pgbi

page-break-inside:;

pgbi:au

page-break-inside:auto;

pgbi:av

page-break-inside:avoid;

pgba

page-break-after:;

pgba:au

page-break-after:auto;

pgba:al

page-break-after:always;

pgba:l

page-break-after:left;

pgba:r

page-break-after:right;

orp

orphans:;

wid

widows:;

Others


!

!important

@f

@font-face font-family:; src:url(

@f+

@font-face font-family: ‘FontName‘; src: url(‘FileName.eot’); src: url(‘FileName.eot?#iefix’) format(‘embedded-opentype’), url(‘FileName.woff’) format(‘woff’), url(‘FileName.ttf’) format(‘truetype’), url(‘FileName.svg#FontName‘) format(‘svg’); font-style: normal; font-weight: normal;

@i, @import

@import url();

@kf

@-webkit-keyframes identifier from to @-o-keyframes identifier from to @-moz-keyframes identifier from to @keyframes identifier from to

@m, @media

@media screen

anim

animation:;

anim-

animation:name duration timing-function delay iteration-count direction fill-mode;

animdel

animation-delay:time;

animdir

animation-direction:normal;

animdir:a

animation-direction:alternate;

animdir:ar

animation-direction:alternate-reverse;

animdir:n

animation-direction:normal;

animdir:r

animation-direction:reverse;

animdur

animation-duration:0s;

animfm

animation-fill-mode:both;

animfm:b

animation-fill-mode:backwards;

animfm:bt, animfm:bh

animation-fill-mode:both;

animfm:f

animation-fill-mode:forwards;

animic

animation-iteration-count:1;

animic:i

animation-iteration-count:infinite;

animn

animation-name:none;

animps

animation-play-state:running;

animps:p

animation-play-state:paused;

animps:r

animation-play-state:running;

animtf

animation-timing-function:linear;

animtf:cb

animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);

animtf:e

animation-timing-function:ease;

animtf:ei

animation-timing-function:ease-in;

animtf:eio

animation-timing-function:ease-in-out;

animtf:eo

animation-timing-function:ease-out;

animtf:l

animation-timing-function:linear;

ap

appearance:$none;

bg:ie

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’x.png’,sizingMethod=’crop‘);

cm

/* $child */

colm

columns:;

colmc

column-count:;

colmf

column-fill:;

colmg

column-gap:;

colmr

column-rule:;

colmrc

column-rule-color:;

colmrs

column-rule-style:;

colmrw

column-rule-width:;

colms

column-span:;

colmw

column-width:;

mar

max-resolution:res;

mir

min-resolution:res;

op:ie

filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

op:ms

-ms-filter:’progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';

ori

orientation:;

ori:l

orientation:landscape;

ori:p

orientation:portrait;

tov

text-overflow:$ellipsis;

tov:c

text-overflow:clip;

tov:e

text-overflow:ellipsis;

trf

transform:;

trf:r

transform: rotate(angle);

trf:sc

transform: scale(x, y);

trf:scx

transform: scaleX(x);

trf:scy

transform: scaleY(y);

trf:skx

transform: skewX(angle);

trf:sky

transform: skewY(angle);

trf:t

transform: translate(x, y);

trf:tx

transform: translateX(x);

trf:ty

transform: translateY(y);

trfo

transform-origin:;

trfs

transform-style:preserve-3d;

trs

transition:prop time;

trsde

transition-delay:time;

trsdu

transition-duration:time;

trsp

transition-property:prop;

trstf

transition-timing-function:tfunc;

us

user-select:$none;

wfsm

-webkit-font-smoothing:$antialiased;

wfsm:a

-webkit-font-smoothing:antialiased;

wfsm:n

-webkit-font-smoothing:none;

wfsm:s, wfsm:sa

-webkit-font-smoothing:subpixel-antialiased;


XSL




tm

<xsl:template match=”” mode=””></xsl:template>

tmatch


Alias of tm


<xsl:template match=”” mode=””></xsl:template>


tn

<xsl:template name=””></xsl:template>

tname


Alias of tn


<xsl:template name=””></xsl:template>


call

<xsl:call-template name=”” />

ap

<xsl:apply-templates select=”” mode=”” />

api

<xsl:apply-imports />

imp

<xsl:import href=”” />

inc

<xsl:include href=”” />

ch

<xsl:choose></xsl:choose>

xsl:when

<xsl:when test=””></xsl:when>

wh


Alias of xsl:when


<xsl:when test=””></xsl:when>


ot

<xsl:otherwise></xsl:otherwise>

if

<xsl:if test=””></xsl:if>


 



Emmet Cheat sheet for faster Coding
Posted by at No comments:

Download emmet for Faster coding

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.


Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow:


Download your Emmet plugin for your Text Editor


 Sublime Text       Atom OSX                      Eclipse/Aptana       TextMate (OS X)


 Coda (OS X)        Espresso (OS X)           Chocolat (OS X)       Komodo Edit


Notepad++            PSPad                              textarea                    CodeMirror


 Brackets                   NetBeans                   Adobe Dreamweaver


 


 


 



Download emmet for Faster coding
Posted by at No comments:

Wednesday, September 17, 2014

The domain is already pointed to an IP address that does not appear to use DNS servers associated with this server

Some times we recive like that message when we  try to add new Addon domain on server.


Sorry, the domain is already pointed to an IP address that does not appear to use DNS servers associated with this server. Please transfer the domain to this servers nameservers or have your administrator add one of its nameservers to /etc/ips.remotedns and make the proper A entries on that remote nameserver


you can solve this 2 way

check your domain nameserver:

change your nameservers to point to the 4 server’s nameservers (all of them, not just one or two). This can result in downtime, however, and isn’t really recommended.


 

Also you can solve this problem if you have access in root whm

just login your whm and search tweak settings-> Allow Remote Domains ON


Now you can add your domain as a addon domain.

NOTE: This can be a major security problem. If you must have it enabled, be sure to not allow users to park common internet domains.

after add domain for security reason again disable this function OFF


 



The domain is already pointed to an IP address that does not appear to use DNS servers associated with this server
Posted by at 1 comment:

Saturday, September 13, 2014

how to solve Warning: ini_set() has been disabled for security reasons from whm

Sometimes we see this message in our website Warning: ini_set() has been disabled for security reasons

if you have acess root whm. u can easily solve this issue from


PHP Configuration Editor -> Advanced Mode -> disable_functions
and remove this part ini_set
And save  your PHP Configuration Editor

thats it :) now its work without this warning.


if you dont have access your root WHM you can solve this issue from your  cpanel also

just see this tutorial Warning: ini_set() has been disabled for security reasons



how to solve Warning: ini_set() has been disabled for security reasons from whm
Posted by at No comments:

Thursday, September 11, 2014

how to Get current category ID of the active page in wordpress

In this tutorial will learn how to Get current category ID of the active page


 


If it is a category page,you can get id of current category by:


 $category = get_category( get_query_var( 'cat' ) );
 $cat_id = $category->cat_ID;

if you want to get category id of any particular category on any page,try using :


 $category_id = get_cat_ID('Category Name');

 


 



how to Get current category ID of the active page in wordpress
Posted by at No comments:

Saturday, September 6, 2014

how to change localhost name In mac

Just Open Your Terminal and type


macbooks-mbp:~ User$ sudo nano /private/etc/hosts

and change 127.0.0.1 localhost to


127.0.0.1 [name] localhost


 GNU nano 2.0.6 File: /private/etc/hosts 

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 xpeed localhost
255.255.255.255 broadcasthost
::1 localhost
fe80::1%lo0 localhost


I have Use name xpeed for my localhost name.

You can now use both [name] and localhost ;)


 



how to change localhost name In mac
Posted by at No comments:
Subscribe to: Posts (Atom)