Build Bootstrap in Minutes Using Emmet

Search In Pics: Google Bus, Glass Welcome Here & Google Stair Case With Keywords
August 16, 2013
Google Does Love Windows Phone, When It Comes To Search — Angering YouTube Users
August 16, 2013

Build Bootstrap in Minutes Using Emmet

Bootstrap (currently at version 3) is all about rapidly building websites, whether they be prototypes or finished products. In today’s videos we’re going to build ourselves a Bootstrap layout, in record time, using Emmet‘s powerful time-saving markup syntax.

Using Emmet

Before we dive into Bootstrap, it’s worth taking a minute to become familiar with what Emmet is and how you can use it.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Building Bootstrap With Emmet

Having covered the basics of Emmet syntax, let’s now see how we can apply it to generate Bootstrap markup.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Useful Bootstrap Emmet Snippets

Download Bootstrap, grab Emmet for your preferred code editor, and see what time-saving snippets you can come up with! Here are a few snippets as demonstrated in the screencast, just to get you going.

For example, you might use a snippet like this for a page header:

header>h1>a[href=index.html]{This is a landing page}^p.lead{This is a description of this page}

The following will give you a good start for building a Bootstrap navbar with four items:

.navbar>ul>li*4>a[href=#]{link $}

This large chunk (you might want to pick it apart to see what’s going on) will generate a carousel, including navigation links and prev/next arrows:

.carousel.slide#carousel-example>(ol.carousel-indicators>li[data-target=#carousel-example data-slide-to=$]*3)(.carousel-inner>.item*3>img[src= alt=Image]+.carousel-caption{This is a caption $})(a[href=carousel-example data-slide=prev].left.carousel-control>span.icon-prev^a[href=carousel-example data-slide=next].right.carousel-control>span.icon-next)

Then, this other sizeable chunk will generate the “Product Features” section we went over. It includes a lorempixel placeholder image and some lorem ipsum dummy text pulled in by Emmet:

section#features>h3{Product Features}+p{Here's why you should really buy this product.}+hr+(.row>.col-lg-4>.media>a[href=#].pull-left>img[src= alt=Image]^.media-body>{Feature name}+p>lorem10)*4

Our testimonials section can be built with this string (note the heavily nested small and cite elements within the blockquote:

section#testimonials>.panel>.panel-heading{A few words from our customers.}+.row>(.col-lg-6>blockquote>lorem10+small{John from}>cite{Source})*2

And lastly, the well we placed at the bottom of the page:

section#order>.well.well-lg>h3.text-center{Order now!}+p.text-center{Receive a great bonus}+p.text-center>a[href=#].btn.btn-primary{Place order →}
Uzzeyel KhuELenne - Internet Marketing | SEO Web Design
Uzzeyel KhuELenne - Internet Marketing | SEO Web Design
Elect Media provides Web Design & SEO Chattanooga, SEO Albuquerque. We specialize in Internet Marketing, search engine optimization, & Web Design. ( Google + | Twitter | Facebook) | Our Website | 423-668-6804 - TN | 505-717-4189 - NM - | Article Sources/Copyrights are those of each respective owner.