Cheatsheetindex

Work smarter, not harder

Emmet Cheat Sheet

In CSS, Emmet

Emmet is a powerful tool that makes writing HTML and CSS faster and more efficient. It allows you to write code using shorthand syntax, which is then expanded into full HTML and CSS code. This saves time and reduces the chance of errors when writing repetitive code.

Emmet is supported by most modern text editors and integrated development environments (IDEs), including Visual Studio Code, Sublime Text, and Atom. To use Emmet, you simply need to type the shorthand code and then hit the Tab key. The code will then be expanded into full HTML or CSS code.

The Emmet cheat sheet is a handy reference tool that lists all the shorthand syntax you can use with Emmet. The cheat sheet is organized into different categories based on the type of code you want to write. For example, there are sections for HTML, CSS, jQuery, and Angular, among others. Each section lists the different commands you can use with Emmet and the output they will produce.

Using the Emmet cheat sheet can help you save time and write more efficient code. It allows you to quickly create complex HTML and CSS code without having to type out every tag and attribute. With Emmet, you can write code faster and more accurately, making it an essential tool for any developer or designer.

Overall, Emmet is a powerful tool that can help you streamline your workflow and write code faster and more efficiently. Whether you’re just getting started with web development or you’re an experienced developer, the Emmet cheat sheet is an essential reference tool that can help you take your skills to the next level.

Cheat Sheet

HTML

CommandOutput
!HTML boilerplate
html:5HTML5 boilerplate
head>title<head><title></title></head>
meta:vp<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
link:css<link rel=”stylesheet” href=””>
script:src<script src=””></script>
img<img src=”” alt=””>
a<a href=””></a>
nav>ul>li<nav><ul><li></li></ul></nav>
form[method=post]<form method=”post”></form>
input:t<input type=”text”>
input:em<input type=”email”>
input:pw<input type=”password”>
input:s<input type=”submit”>
input:ch<input type=”checkbox”>
input:r<input type=”radio”>
input:n<input type=”number”>
select>option<select><option></option></select>
textarea<textarea></textarea>
table>thead>tr>th*3<table><thead><tr><th></th><th></th><th></th></tr></thead></table>
table>tbody>tr>td*3<table><tbody><tr><td></td><td></td><td></td></tr></tbody></table>

CSS

CommandOutput
m10margin: 10px;
p20padding: 20px;
dibdisplay: inline-block;
w50width: 50px;
h100height: 100px;
fz16font-size: 16px;
fw600font-weight: 600;
tactext-align: center;
taltext-align: left;
tartext-align: right;
brsborder-style: solid;
brc#f00border-color: #f00;
b10border: 10px;
bdrsborder-radius: 4px;
bgc#fffbackground-color: #fff;
bgc#000background-color: #000;
lh1.5line-height: 1.5;

Sass/SCSS

CommandOutput
m$b20margin-bottom: 20px;
p$l10padding-left: 10px;
bgc$brand-colorbackground-color: $brand-color;
fs1.2emfont-size: 1.2em;
fw$boldfont-weight: $bold;
t$centertext-align: $center;
t$#{$dir}text-align: #{$dir};
br$radiusborder-radius: $radius;
c$#{$color}color: #{$color};
w$calc(50%-10px)width: calc(50% – 10px);
transition$all 0.3s ease-in-outtransition: all 0.3s ease-in-out;

React

CommandOutput
div>Header<div><Header/></div>
div>h1{Hello, World!}<div><h1>Hello, World!</h1></div>
ul>li*3<ul><li></li><li></li><li></li></ul>
nav>ul>li*3>a[href=”#”]{Link $}<nav><ul><li><a href=”#”>Link 1</a></li><li><a href=”#”>Link 2</a></li><li><a href=”#”>Link 3</a></li></ul></nav>
input[type=text][name=email]<input type=”text” name=”email”/>
button[type=button]<button type=”button”></button>
img[src=require(“./image.png”)]<img src={require(“./image.png”)}/>
div[class=container]<div className=”container”></div>

Bootstrap

CommandOutput
container<div class=”container”></div>
row>col-md-6*2<div class=”row”><div class=”col-md-6″></div><div class=”col-md-6″></div></div>
nav>ul.navbar-nav>li.nav-item>a.nav-link<nav><ul class=”navbar-nav”><li class=”nav-item”><a class=”nav-link”></a></li></ul></nav>
btn.btn-primary<button class=”btn btn-primary”></button>
alert.alert-danger[role=alert]<div class=”alert alert-danger” role=”alert”></div>
form>input.form-control[type=text][placeholder=Enter your name]<form><input type=”text” class=”form-control” placeholder=”Enter your name”/></form>
table.table>thead>tr>th*3<table class=”table”><thead><tr><th></th><th></th><th></th></tr></thead></table>

Vue

CommandOutput
template>h1{Hello, {{ name }}!}<template><h1>Hello, {{ name }}!</h1></template>
div(v-for=”item in items” :key=”item.id”)<div v-for=”item in items” :key=”item.id”></div>
div(v-if=”visible”)<div v-if=”visible”></div>
button(@click=”onClick”)<button @click=”onClick”></button>
input(v-model=”inputValue”)<input v-model=”inputValue”/>
router-link(to=”/about”)<router-link to=”/about”></router-link>
component-name(prop-name=”propValue”)<component-name prop-name=”propValue”></component-name>
div(:class=”{active: isActive}”)<div :class=”{active: isActive}”></div>
:style=”{color: textColor, fontSize: fontSize + ‘px’}”<div :style=”{color: textColor, fontSize: fontSize + ‘px’}”></div>
v-bind=”$attrs”<div v-bind=”$attrs”></div>

Angular

CommandOutput
ng-container *ngFor=”let item of items; index as i”<ng-container *ngFor=”let item of items; index as i”></ng-container>
div[ngClass]=”{‘active’: isActive}”<div [ngClass]=”{‘active’: isActive}”></div>
input[(ngModel)]=”inputValue”<input [(ngModel)]=”inputValue”/>
button(click)=”onClick()”<button (click)=”onClick()”></button>
router-outlet<router-outlet></router-outlet>
ng-template[ngIf]=”visible”<ng-template [ngIf]=”visible”></ng-template>
component-name[prop-name]=”propValue”<component-name [prop-name]=”propValue”></component-name>
div[ngStyle]=”{‘color’: textColor, ‘font-size’: fontSize + ‘px’}”<div [ngStyle]=”{‘color’: textColor, ‘font-size’: fontSize + ‘px’}”></div>
*ngSwitchCase=”‘value'”<ng-container *ngSwitchCase=”‘value'”></ng-container>

Reference:

https://docs.emmet.io/

Related Posts

Tailwind CSS Cheat Sheet

SCSS Cheat Sheet

CSS Selectors Cheat Sheet

Bootstrap Cheat Sheet