json VS Code html Snippets

Posted 2021-05-18

{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Slider": {
		"prefix": "slider",
		"body": [
			"<div id=\"\" class=\"slider\">",
			"",
			"	<div class=\"slide\">",
			"",
			"	</div>",
			"",
			"	<div class=\"slide\">",
			"",
			"	</div>",
			"",
			"</div>",
		],
		"description": "Layout común para sliders"
	},
	"WK section": {
		"prefix": "wk-section",
		"body": [
			"<section id=\"\" class=\"wk-section\">",
			"",
			"</section>",
		],
		"description": "Sección horizontal"
	},
	"WK Col": {
		"prefix": "wk-col",
		"body": [
			"<div class=\"wk-col\">",
			"",
			"</div>",
		],
		"description": "Una columna"
	},
	"WK Cols": {
		"prefix": "wk-cols",
		"body": [
			"<div class=\"wk-cols\">",
			"";
			"	<div class=\"wk-col\">",
			"";
			"	</div>",
			"";
			"	<div class=\"wk-col\">",
			"";
			"	</div>",
			"";
			"</div>"
		],
		"description": "Crea un contenedor con 2 columnas"
	},
	"WK Cols-3": {
		"prefix": "wk-cols-3",
		"body": [
			"<div class=\"wk-cols\">",
			"";
			"	<div class=\"wk-col\">",
			"";
			"	</div>",
			"";
			"	<div class=\"wk-col\">",
			"";
			"	</div>",
			"";
			"	<div class=\"wk-col\">",
			"";
			"	</div>",
			"";
			"</div>"
		],
		"description": "Crea un contenedor con 3 columnas"
	},
}