PHILIPPE GOUILLOU

APG-FLEX
SNIPPETS FOR VISUAL STUDIO CODE (VS CODE)

APG-FLEX : Code APG-FLEX : Demo APG-FLEX : Snippets APG-FLEX sur Github

Snippets VS Code (MS Visual Studio Code) for APG-FLEX, an extremely simple CSS responsive Flex Layout Framework of only 662 Bytes to accelerate web developpment.

3 SNIPPETS: 2 columns, and 4 columns in two versions

Check the Demo or play with it on !

Copy the CSS code of APG-FLEX or pull it from GITHUB

2 COLUMNS

A
B

Code


	<div class="arow">
		<div class="acolfinal">
			A
		</div>
		<div class="acolfinal">
			B
		</div>
	</div>

VSCode Snippet

Paste in ~/Library/Application Support/Code/User/snippets/html.json


"Div Arow 2 Cols": {
	"prefix": "arow2",
	"body": [
		"<div class=\"arow\">\n\t<div class=\"acolfinal\">\n\t\tA\n\t</div>\n\t<div class=\"acolfinal\">\n\t\tB\n\t</div>\n</div>\n"
	],
	"description": "arow 2 colonnes"
},

4 COLUMNS TO 2 COLUMNS

First Option : break at the middle

A
B
C
D

Code


	<<div class="arowmd">
		<div>
			<div class="arow">
				<div class="acolfinal">A</div>
				<div class="acolfinal">B</div>
			</div>
		</div>
		<div>
			<div class="arow">
				<div class="acolfinal">C</div>
				<div class="acolfinal">D</div>
			</div>
		</div>
	</div>

VSCode Snippet

Paste in ~/Library/Application Support/Code/User/snippets/html.json


"Div Arow 4 Cols": {
	"prefix": "arow4",
	"body": [
		"<div class=\"arowmd\">\n\t<div class=\"\">\n\t\t<div class=\"arow\">\n\t\t\t<div class=\"acolfinal\">\n\t\t\t\tA\n\t\t\t</div>\n\t\t\t<div class=\"acolfinal\">\n\t\t\t\tB\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"\">\n\t\t<div class=\"arow\">\n\t\t\t<div class=\"acolfinal\">\n\t\t\t\tC\n\t\t\t</div>\n\t\t\t<div class=\"acolfinal\">\n\t\t\t\tD\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n"	
	],
	"description": "arow 4 colonnes"
},

Second Option : break in each half

A
B
C
D

Code


	<<div class="arow">
		<div>
			<div class="arowmd">
				<div class="acolfinal">A</div>
				<div class="acolfinal">B</div>
			</div>
		</div>
		<div>
			<div class="arowmd">
				<div class="acolfinal">C</div>
				<div class="acolfinal">D</div>
			</div>
		</div>
	</div>

VSCode Snippet

Paste in ~/Library/Application Support/Code/User/snippets/html.json


"Div ArowMD 4 Cols": {
	"prefix": "arowmd4",
	"body": [
		"<div class=\"arow\">\n\t<div class=\"\">\n\t\t<div class=\"arowmd\">\n\t\t\t<div class=\"acolfinal\">\n\t\t\t\tA\n\t\t\t</div>\n\t\t\t<div class=\"acolfinal\">\n\t\t\t\tB\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"\">\n\t\t<div class=\"arowmd\">\n\t\t\t<div class=\"acolfinal\">\n\t\t\t\tC\n\t\t\t</div>\n\t\t\t<div class=\"acolfinal\">\n\t\t\t\tD\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n"	
	],
	"description": "arowmd 4 colonnes"
},