Собственная сетка на SASS вместо Bootstrap

Дизайнеры все чаще и чаще используют для удобства работы сетку Bootstrap, так как она весьма популярна. Принцип сетки во всех фреймворках аналогичный, как и мой пример кода.
Написал свой вариант, так как имею дело с проектами, где кроме сетки больше ничего общего нет с фреймворками и для чистоты кода комфортнее работать со своим кодом.

Принцип использовал из bootstrap. Открывается класс row в котором вставляется необходимые классы. Важно, что в сумме они всегда должны иметь 12.
Отступ $grid-spacing необходимо поменять для своих требований.
Дополнительно не хватает здесь поведения для адаптивной верстки, но общую логику код показывает. При необходимости могу дописать целиком код.

.container
	max-width: 970px
	margin: 0 auto

%clearfix:after
	display: block
	clear: both
	content: ''
$grid-spacing: 15px

.row
	@extend %clearfix
	margin-left: -$grid-spacing
	margin-right: -$grid-spacing

[class^="col-"]
	float: left
	padding: 0 $grid-spacing
	-webkit-box-sizing: border-box
	-moz-box-sizing: border-box
	box-sizing: border-box
	margin: 20px 0
	&:nth-child(even)
		div
			background-color: rgba(0,0,0,.2)
	&:nth-child(odd)
		div
			background-color: rgba(100,100,100,.2)

.col-1
	width: 8.33333333%
.col-2
	width: 16.66666667%
.col-3
	width: 25%
.col-4
	width: 33.33333333%
.col-5
	width: 41.66666667%
.col-6
	width: 50%
.col-7
	width: 58.33333333%
.col-8
	width: 66.66666667%
.col-9
	width: 75%
.col-10
	width: 83.33333333%
.col-11
	width: 91.66666667%
.col-12
	width: 100%
2 комментария
Олег

Николай, большое спасибо за ваш труд, но можете ли вы дописать целиком код?

Николай Клёнов

Здесь и есть целиком код для SASS, со всеми классами, которые позволят реализовать сетку.
Адаптивность и прочее это уже индивидуально у всех макетов и единого решения нет.

Олег

«Дополнительно не хватает здесь поведения для адаптивной верстки», за малых знаний вот это и не получается. Можете помочь?

Популярное