reGrid.js - инструмент для показа сетки на веб-странице

Для проверки верстки в процессе разработки, в некоторых CSS-библиотеках (Grid Systems) используется дополнительный HTML-блок с фоновым рисунком сетки, который «накладывается» на страницу. Таким образом верстальщик может увидеть: правильно ли позиционированы блоки макета и не выходят ли они за границы сетки. Это не очень удобно, так как при уменьшении размера окна браузера, ширина колонок сетки не уменьшается.

Как же можно контролировать корректность верстки макета, например, при создании адаптивного сайта? Здесь на помощь разработчику приходит один полезный инструмент, который называется reGrig.js. Он то как раз и создается «гибкую» сетку, которую мы сможем увидеть поверх разрабатываемой страницы. Для этого всего лишь нужно кликнуть по кнопке, которая находится в правом нижем углу страницы. Повторный клик по кнопке отключает показ сетки.

Но давайте по порядку.

► Сначала скачаем этот полезный скрипт.

► Затем подключит его к своей страничке. Не забудьте перед этим подключить jQuery, иначе ничего работать не будет.

HTML

	<script src="/path_to/jquery.reGrid.min.js"></script> 

► Теперь добавим следующий код, чтобы инструмент заработал.

HTML

	<script> 
		$("body").reGrid(); 
	</script>

► reGrig.js можно передавать настройки. Вы сможете указать цвет колонок (colour - название, его HEX-код или RGB-представление), их непрозрачность (opacity - 0.00 - 1), максимальную ширину сетки в пикселях (maxWidth - px) . Также можно указать break points (breaks [максимальная ширина, количество колонок, отступы от сетки, ширина колонок] ). При изменении окна до указанных размеров, сетка будет изменяться в соответствии с указанными параметрами.

JavaScript

	$("body").reGrid({ 
	  colour: '#2fcbed', 
	  opacity: 0.5, 
	  maxWidth: 1100,
	  breaks: [[500,1,16,0],[768,3,10,20],[5000,6,0,40]] 
	});

Используя reGrig.js верстальщик сможет контролировать процесс верстки макета, быстро исправляя свои возможные ошибки. Таким образом разработчик сможет улучшить качество своей работы, оптимизировать ее по времени и затраченным усилиям, что очень важно в современном мире.