Media query snippets

0-media-query-snippets.md

Media query snippets

Type b4+ then press TAB. It expands to

@media (min-width: $screen-xs-min) { // > 480px

Snippets

Bootstrap:

• b4- b4+ (480px)
• b7- b7+ (768px)
• b9- b9+ (992px)
• b12- b12+ (1200px)

Non-bootstrap:

• 4- 4+ (480px)
• 7- 7+ (768px)
• 9- 9+ (992px)
• 12- 12+ (1200px)

css.snippets

#
# Bootstrap version
#

snippet b12- "< 1200px"
@media (max-width: $screen-lg-max) { // < 1200px
	
endsnippet

snippet b12+ "> 1200px"
@media (min-width: $screen-lg-min) { // > 1200px
	
endsnippet

snippet b9- "< 992px"
@media (max-width: $screen-md-max) { // < 992px
	
endsnippet

snippet b9+ "> 992px"
@media (min-width: $screen-md-min) { // > 992px
	
endsnippet

snippet b7- "> 768px"
@media (max-width: $screen-sm-max) { // < 768px
	
endsnippet

snippet b7+ "< 768px"
@media (min-width: $screen-sm-min) { // > 768px
	
endsnippet

snippet b4- "> 480px"
@media (max-width: $screen-xs-max) { // < 480px
	
endsnippet

snippet b4+ "<= 480px"
@media (min-width: $screen-xs-min) { // > 480px
	
endsnippet

#
# Non bootstrap version
#

snippet 12+ "> 1200px"
@media (min-width: 1201px) {
	
endsnippet

snippet 12- "< 1200px"
@media (max-width: 1200px) {
	
endsnippet

snippet 9+ "> 992px"
@media (min-width: 993px) {
	
endsnippet

snippet 9- "< 992px"
@media (max-width: 992px) {
	
endsnippet

snippet 7+ "> 768px"
@media (min-width: 769px) {
	
endsnippet

snippet 7- "< 768px"
@media (max-width: 768px) {
	
endsnippet

snippet 4+ "> 480px"
@media (min-width: 481px) {
	
endsnippet

snippet 4- "< 480px"
@media (max-width: 480px) {
	
endsnippet