Skip to content

Instantly share code, notes, and snippets.

@gidhon
Created October 20, 2018 16:28
Show Gist options
  • Save gidhon/e258fd407efa9aa3bd31199101bdd93b to your computer and use it in GitHub Desktop.
Save gidhon/e258fd407efa9aa3bd31199101bdd93b to your computer and use it in GitHub Desktop.
Stylus snippets for Platframe | editor: VS Code
{
"Set size: 2D (equilateral | [width, height])":{
"prefix":[
"Platframe | size (both [w, h])",
"size"
],
"body":[
"size($0px)"
],
"description":"Set the width and height of an element"
},
"Unit conversion: px ⟶ rem":{
"prefix":[
"Platframe | px ⟶ rem",
"rem"
],
"body":[
"rem($0px)"
],
"description":"For fixed-width pixels to root relative em conversion"
},
"@media: min-width":{
"prefix":[
"Platframe | @media: min-width",
"min"
],
"body":[
"+min($1)",
"$0"
],
"description":"Define a min-width @media selector"
},
"@media: max-width":{
"prefix":[
"Platframe | @media: max-width",
"max"
],
"body":[
"+max($1)",
"$0"
],
"description":"Define a max-width @media selector"
},
"@media: range":{
"prefix":[
"Platframe | @media: between",
"between"
],
"body":[
"+between($1)",
"$0"
],
"description":"Define a composite width-based @media selector with a minimum and maxium range"
},
"@media: min-resolution":{
"prefix":[
"Platframe | @media: min-resolution",
"min-res"
],
"body":[
"+min-res($1dppx)",
"$0"
],
"description":"Define a min-resolution @media selector"
},
"@media: max-resolution":{
"prefix":[
"Platframe | @media: max-resolution",
"max-res"
],
"body":[
"+max-res($1dppx)",
"$0"
],
"description":"Define a max-resolution @media selector"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment