Skip to content

Instantly share code, notes, and snippets.

@jackmakesthings
Last active December 30, 2015 01:09
Show Gist options
  • Save jackmakesthings/7754042 to your computer and use it in GitHub Desktop.
Save jackmakesthings/7754042 to your computer and use it in GitHub Desktop.
Emmet snippets - in the interest of standardizing markup between projects a little more. Install Emmet via the Sublime Text package manager, then paste any of these snippets into an html document and hit tab (or tab-enter, or whatever you've set as your Emmet trigger key). Pieces added in no particular order.
*NAVIGATION*
<!-- Basic nav structure: -->
nav>(ul.nav-menu>li.nav-item>a.nav-link[href=""]{Link})
<!-- With a menu-toggle button (for responsive layouts): -->
nav>(ul.nav-menu>li.nav-item>a.nav-link[href=""]{Link})+a.menu-toggle[href="#"]{+}
<!-- With five items and ordering classes set: -->
nav>(ul.nav-menu>(li.nav-item-$*5>a.nav-link[href=""]{Link}))+a.menu-toggle[href="#"]{+}
<!-- With sub-nav: -->
nav>(ul.nav-menu>li.nav-item*3>a.nav-link[href=""]{Link}>ul.sub-menu>li.subnav-item*3>a.subnav-link[href=""]{Sublink})
<!-- Without classes or hrefs: -->
nav>ul>li*3>a{Link}>ul>li*3>a{Sublink}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment