Матвей Земсков

Заметки веб-мастера

Четверг, 18 июня 2015 14:39

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

Оцените материал
(2 голосов)

Уже в течении нескольких лет техника верстки сайтов при помощи сетки пользуется популярностью у разработчиков. В сети существует большое количество CSS-библиотек (Grid Systems) для работы с сеткой. Стоит заметить, что эта методика включена в Bootstrap, который на мой взгляд является одним из самых популярных CSS-фреймворков (если не сказать, что самым популярным).

Использование сетки в процессе верстки сайтов дает разработчику ряд преимуществ: увеличивается скорость разработки, верстать становится легче за счет четкого позиционирования элементов. Размещая элементы макета по сетке, вы сразу замечаете, что страница становится более аккуратной, блоки выглядят пропорционально, имеют одинаковые отступы. Конечно же, при использовании этой методики существуют и свои маленькие недостатки: например, в код добавляются дополнительные элементы разметки. Эти недостатки незначительны, поэтому их можно считать особенностями этого подхода.

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

Для проверки верстки в процессе разработки, в некоторых 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 верстальщик сможет контролировать процесс верстки макета, быстро исправляя свои возможные ошибки. Таким образом разработчик сможет улучшить качество своей работы, оптимизировать ее по времени и затраченным усилиям, что очень важно в современном мире.

Прочитано 1363 раз
Добавить комментарий

Комментарии   

 
0 # Нина 08.07.2015 23:59
Я начинающий верстальщик. Для меня в новинку. Спасибо автору, что делиться своими секретами
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 09.07.2015 09:09
Пожалуйста :)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Дмитрий 09.07.2015 20:42
Что-то не получается запустить сетку :cry:
А куда нужно вставлять скрипт?

$("body").reGrid();
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Дмитрий 09.07.2015 20:49
Ага, я понял в чем косяк.
jQuery надо подключать именно локально, а я через Гугл подключал и не работало.
Автору спасибо за статью.
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: