Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sublime Text 3 Snippets with Bootstrap 3 media queries
<snippet>
<content><![CDATA[
/* Large Desktop */
@media only screen and (min-width: ${1:@screen-lg-min})
{
${3:}
}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>bs3-media-lg-desktop,bs3-media-lg</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
<snippet>
<content><![CDATA[
/* Medium Desktops */
@media only screen and (min-width: ${1:@screen-md-min}) and (max-width: ${2:@screen-md-max})
{
${3:}
}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>bs3-media-desktop,bs3-media-md</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
<snippet>
<content><![CDATA[
/* Phones */
@media only screen and (min-width: ${1:@screen-xs-min}) and (max-width: ${2:@screen-xs-max})
{
${3:}
}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>bs3-media-phone,bs3-media-xs</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
<snippet>
<content><![CDATA[
/* Tablets */
@media only screen and (min-width: ${1:@screen-sm-min}) and (max-width: ${2:@screen-sm-max})
{
${3:}
}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>bs3-media-tablet,bs3-media-sm</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment