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!

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": [
		"
\n\t
\n\t\t${1:L1C1}\n\t
\n\t
\n\t\t${1:L1C2}\n\t
\n
\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": [
		"
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t${1:L1C1}\n\t\t\t
\n\t\t\t
\n\t\t\t\t${2:L1C2}\n\t\t\t
\n\t\t
\n\t
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t${3:L2C1}\n\t\t\t
\n\t\t\t
\n\t\t\t\t${4:L2C2}\n\t\t\t
\n\t\t
\n\t
\n
\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": [
		"
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t${1:L1C1}\n\t\t\t
\n\t\t\t
\n\t\t\t\t${2:L1C2}\n\t\t\t
\n\t\t
\n\t
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t${3:L2C1}\n\t\t\t
\n\t\t\t
\n\t\t\t\t${4:L2C2}\n\t\t\t
\n\t\t
\n\t
\n
\n"	
	],
	"description": "arowmd 4 colonnes"
}