A collection of simple sublime snippets for front-end development.
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.DS_Store
README.md
css_boxshadow.sublime-snippet
css_radius.sublime-snippet
css_retinaquery.sublime-snippet
html_analytics.sublime-snippet
html_favicons.sublime-snippet
html_shell.sublime-snippet
js_consolelog.sublime-snippet
sass_css3.sublime-snippet
sass_inshadow.sublime-snippet
sass_shadow.sublime-snippet

README.md

FrontendSnips

This is my collection of simple Sublime Text snippets for front-end development. Mostly for me to sync across machines using sym-links from GitHub Repos.

It includes basic HTML, Javascript and CSS which I use often to speed up development time. I'm just getting started, its a work in progress!


Basic usage

Drop these into your "/packages/user/" folder to get started, they can live inside their own folder (ie. "snippets"). Just type the keywords and hit the tab key immediately after, I'm using the native tabTriggers so if you are using other addons that modify the tab key then these may not work as expected. Note that most of the snippets have preset fileds with placeholders, press the Tab key to cycle over them (or Shift + Tab to go backwards).

analytics

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
    var _gaq=[['_setAccount','${1:UA-XXXXX-X}'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

favicons

<!-- Favicon.ico placeholder -->
<link rel="shortcut icon" href="${1:img}/ink-favicon.ico">

<!-- Apple icon placeholder -->
<link rel="apple-touch-icon-precomposed" href="${2:img}/touch-icon.57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="${3:img}/touch-icon.72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="${4:img}/touch-icon.114.png">

<!-- Apple splash screen placeholder -->
<link rel="apple-touch-startup-image" href="${5:img}/splash.320x460.png" media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="${6:img}/splash.768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="${7:img}/splash.1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">

boxshadow

-webkit-box-shadow: {${1:0}px 1px ${1:2}px rgba(0,0,0,.2)};
   -moz-box-shadow: {${1:0}px 1px ${1:2}px rgba(0,0,0,.2)};
        box-shadow: {${1:0}px 1px ${1:2}px rgba(0,0,0,.2)};

log

console.log("${1:message}")

retinaquery

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi),
       (min-resolution: 1.5dppx) {

	${1:/* Retina rules here */}

}