Skip to content

Instantly share code, notes, and snippets.

@drucoder

drucoder/emmet.html

Created March 7, 2020 12:21
Show Gist options
  • Save drucoder/afb4b21192941f6f615fe5cd49bd9b4f to your computer and use it in GitHub Desktop.
Save drucoder/afb4b21192941f6f615fe5cd49bd9b4f to your computer and use it in GitHub Desktop.
Download ZIP
emmet example
Raw
emmet.html
<!DOCTYPE html>
<html>
<head><title>Simple html page</title></head>
<body>
<pre>html>(head>title{simple html page})+body>h1{This is the Emmet, baby}+.block$*4>h3{subhead$}+lorem20</pre>
<h1>This is the Emmet, baby</h1>
<div class="block1">
<h3>subhead 1</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab amet consequuntur, deserunt doloribus eveniet, harum
illo natus nulla, obcaecati officiis quibusdam ratione similique sunt veniam veritatis vero voluptatibus voluptatum.
</div>
<div class="block2">
<h3>subhead 2</h3>
Accusamus aliquid atque doloribus eius explicabo ipsa ipsam iusto labore laborum laudantium libero magni maiores
nostrum obcaecati quam, rem repellat sequi tempora totam voluptas. Consequatur ex inventore laudantium molestias
omnis.
</div>
<div class="block3">
<h3>subhead 3</h3>
Excepturi harum sunt veniam voluptatibus? Culpa delectus error neque. Accusamus aperiam dicta earum explicabo hic
minima minus, molestias nihil, non nostrum omnis provident quaerat quas quidem similique sit ut voluptatibus.
</div>
<div class="block4">
<h3>subhead 4</h3>
Aperiam debitis deleniti ea explicabo impedit iste neque rem similique tempore? Adipisci dicta dignissimos
distinctio dolore ea ipsum molestias nemo praesentium rerum sequi, sint voluptate? Dicta eos ex explicabo nihil.
</div>
<h3>Wrapper</h3>
<pre>#menu>item*>a[href=/pages]</pre>
<div id="menu">
<div class="item"><a href="/pages">Lorem.</a></div>
<div class="item"><a href="/pages">Eligendi?</a></div>
<div class="item"><a href="/pages">Ipsum.</a></div>
<div class="item"><a href="/pages">Vero?</a></div>
<div class="item"><a href="/pages">Tenetur.</a></div>
<div class="item"><a href="/pages">Animi.</a></div>
<div class="item"><a href="/pages">Officia.</a></div>
</div>
<style>
body {
/* mt40 */
margin-top: 40px;
}
#menu {
/* pos:a+t0 */
position: absolute;
top: 0;
}
.item {
/* d:ib+p5px10+m0px2 */
display: inline-block;
padding: 5px 10px;
margin: 0px 2px;
border: 1px solid gray;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment