grid system

default

12 in all

.enclosed with acms-container, its width will be 940px with centering

used for arrange the blocks

.acms-grid(without responsive)

col-1
acms-col-11
acms-col-2
acms-col-10
acms-col-3
acms-col-9
acms-col-4
acms-col-8
acms-col-5
acms-col-7
acms-col-6
acms-col-6
<div class="acms-container">
	<div class="acms-grid">
		<div class="acms-col-5">
		...
		</div>

		<div class="acms-col-7">
		...
		</div>
	</div>
</div>

.acms-grid-r(with responsive)

col-1
acms-col-11
acms-col-2
acms-col-10
acms-col-3
acms-col-9
acms-col-4
acms-col-8
acms-col-5
acms-col-7
acms-col-6
acms-col-6
<div class="acms-container">
	<div class="acms-grid-r">
		<div class="acms-col-5">
		...
		</div>

		<div class="acms-col-7">
		...
		</div>
	</div>
</div>

smartphone, tablet, desktop PC width

.acms-col-10 .acms-col-md-3
.acms-col-2 .acms-col-md-9
.acms-col-2 .acms-col-md-5 .acms-col-sm-5
.acms-col-3 .acms-col-md-3 .acms-col-sm-4
.acms-col-7 .acms-col-md-4 .acms-col-sm-3
<div class="acms-container">
	<div class="acms-grid-r">
		<div class="acms-col-2 acms-col-md-5 acms-col-sm-5">
		...
		</div>

		<div class="acms-col-3 acms-col-md-3 acms-col-sm-4">
		...
		</div>

		<div class="acms-col-7 acms-col-md-4 acms-col-sm-3">
		...
		</div>
	</div>
</div>

nesting grid

acms-col-4
acms-col-8
.acms-col-5
.acms-col-7
<div class="acms-grid">
	<div class="acms-col-4">
	...
	</div>

	<div class="acms-col-8">
		<div class="acms-grid">
			<div class="acms-col-5">
			...
			</div>

			<div class="acms-col-7">
			...
			</div>
		</div>
	</div>
</div>

shift the grid. push(left→right),pull(right→left)

the grid will be on the right if you set .acms-push-5 the grid will be on the left if you set .acms-pull-7

.acms-push-5(left to right)
.acms-pull-7(right to left)
<div class="acms-grid">
	<div class="acms-col-7 acms-push-5">
	...
	</div>

	<div class="acms-col-5 acms-pull-7">
	...
	</div>
</div>

switching grid push(left→right) 、pull(right→left) tablet size

grid will be on the right, if you set the class as acms-push-md-5 width the tablet size. and if you set the class as .acms-pull-md-7, the grid will be on the left

.acms-push-md-5(from left to right)
.acms-pull-md-7(from right to left)
<div class="acms-grid-r">
	<div class="acms-col-7 acms-col-md-7 acms-push-md-5">
	...
	</div>

	<div class="acms-col-5 acms-col-md-5 acms-pull-md-7">
	...
	</div>
</div>

switching grid from left to right. push(left→right), pull(right→left) smart phone size

grid will be on the right, if you set the class as acms-push-sm-5 width the smart phone size. and if you set the class as .acms-pull-md-7, the grid will be on the left

.acms-push-sm-5(from left to right)
.acms-pull-sm-7(from right to left)
<div class="acms-grid-r">
	<div class="acms-col-7 acms-col-sm-7 acms-push-sm-5">
	...
	</div>

	<div class="acms-col-5 acms-col-sm-5 acms-pull-sm-7">
	...
	</div>
</div>

removing push, pull with smart phone size and tablet size

removing push pull with tablet size

.acms-push-md-auto(left to right→right to left)
.acms-pull-md-auto(right to left→left to right)
<div class="acms-grid-r">
	<div class="acms-col-7 acms-push-5 acms-col-md-7 acms-push-md-auto">
	...
	</div>

	<div class="acms-col-5 acms-pull-7 acms-col-md-5 acms-pull-md-auto">
	...
	</div>
</div>

removing push pull with smart phone size

.acms-push-sm-auto(left to right→right to left)
.acms-pull-sm-auto(right to left→left to right)
<div class="acms-grid-r">
	<div class="acms-col-7 acms-push-5 acms-col-md-7 acms-push-md-5 acms-col-sm-7 acms-push-sm-auto">
	...
	</div>

	<div class="acms-col-5 acms-pull-7 acms-col-md-5 acms-pull-md-7 acms-col-sm-5 acms-pull-sm-auto">
	...
	</div>
</div>