html-start.code-snippets

{

	"Random image.": {
		"prefix": "html:img-flickr",
		"body": [
		  "<img src=\"https://loremflickr.com/${1:width}/${2:height}/${3:theme}?random=1\">"
		],
		"description": "Random image."
	},

	"CSS styles for disk bullets.": {
		"prefix": "css:list-bullet",
		"body": [
			"&:before {",
			"    content: \" \";",
			"    position: absolute;",
			"    left: 0;",
			"    top: 0.6em;",
			"    transform: translateY(-50%);",
			"    width: 1rem;",
			"    height: 1rem;",
			"    border: 2px solid #0047ba;",
			"    border-radius: 50%;",
			"}"
		],
		"description": "CSS styles for disk bullets."
	},



	"Svg Icon Template": {
		"prefix": "html:svg-icon",
		"body": [
			"<svg class=\"icon\">",
			"    <use",
			"        xlink:href=\"img/icons/${1:collection}/sprite.svg#${2:name}\"",
			"    ></use>",
			"</svg>"
		],
		"description": "Svg Icon Template"
	},

	"grit-template-columns autofit": {
		"prefix": "css:grid-autofit",
		"body": [
		  "grid-template-columns: repeat(auto-fit, minmax(${1:min}, 1fr));",
		  ""
		],
		"description": "grit-template-columns autofit"
	  },

	"Include partial.": {
		"prefix": "include-partial",
		"body": [
			"<!-- @@include = ./partials/${1:name}.html -->",
			""
		],
		"description": "Include partial."
	}

	
}