ModularGrid

ModularGrid — небольшая программа на Javascript (около 45 Кб), которая призвана облегчить работу HTML-верстальщику.

Что умеет ModularGrid

1. показ/сокрытие модульной сетки
2. показ/сокрытие направляющих (аналог guides в Photoshop)
3. показ/сокрытие изображения-макета поверх вёрстки
4. изменение степени прозрачности модульной сетки и изображения-макета
5. изменение размеров окна браузера под указанные вами
6. графическая панель включения-выключения элементов сетки
7. сохранение в cookie состояния сетки

Чем отличается от аналогов

1. сочетает в себе несколько основных инструментов для HTML-вёрстки
2. работает во всех браузерах
3. не требует использования дополнительных изображений, javascript-библиотек, CSS-кода

Как начать пользоваться

1. Скачайте ModularGrid и сохраните файл modulargrid/build/modulargrid.js в директорию с вашим HTML-файлом
2. В конец HTML-файла, перед </body> вставьте <script type="text/javascript" src="modulargrid.js"></script>
3. Откройте ваш HTML-файл в браузере
4. Используйте контролы на панели в правом верхнем углу страницы для управления сеткой
5. Если нужно изменить настройки сетки, откройте modulargrid.js и измените нужные опции

Сочетания клавиш для быстрого управления сеткой

В панели с контролами для управления сеткой у контролов подписаны сочетания клавиш для быстрого управления сеткой.

для управления сеткой Ctrl + ' - показать/скрыть сетку Shift + f - показать/скрыть шрифтовую сетку Shift + v - показать/скрыть вертикальную сетку Shift + h - показать/скрыть горизонтальную сетку для управления направляющими Ctrl + ; - показать/скрыть направляющие для изменения размера браузера Shift + r - изменить размер браузера для управления изображенем-макетом Ctrl + \ - показать/скрыть изображение-макет для управления прозрачностью сетки и изображения макета Shift + ] - сделать менее прозрачными Shift + [ - сделать более прозрачными

Настройка ModularGrid

Настройка модульной сетки

Шрифтовая сетка

Все настройки направляющих задаются как свойства объекта grid в объекте настройки: ModularGrid.init({ grid: {...} }); Расстояние между линиями шрифтовой сетки задаётся в пикселах свойством grid.lineHeight. Линия шрифтовой сетки рисуется на grid.lineHeight + 1 пикселе. Стиль линий шрифтовой сетки задаётся свойством grid.lineStyle. Значения этого свойства аналогичны значениям CSS-свойства border-style. Толщина линий шрифтовой сетки задаётся свойством grid.lineWidth. Значения этого свойства аналогичны значениям CSS-свойства border-width. Цвет линий шрифтовой сетки задаётся свойством grid.lineColor. Значения этого свойства аналогичны значениям CSS-свойства border-color. z-index линий шрифтовой сетки задаётся одним значением с модульной сеткой - grid.z-index. Прозрачность линий шрифтовой сетки задаётся общими настройками прозрачности сетки и изображения макета. ModularGrid.init({ grid: { lineHeight: 32 } }); создаст шрифтовую сетку высотой 32 пиксела: на каждем 33-ем пикселе по вертикали будет нарисована горизонтальная линия.

Вертикальная модульная сетка

Все настройки вертикальной модульной сетки задаются как свойства объекта grid в объекте настройки: ModularGrid.init({ grid: {...} });

Алгоритм настройки:

1. Задайте высоту модуля в расстояниях между линиями шрифтовой сетки (параметр grid.lineHeight) значением параметра grid.hDivisions
2. Если нужен отступ относительно левого края рабочей области браузера установите значение grid.marginLeft (возможные значения аналогичны значениям CSS-свойства margin-left
3. Если нужен отступ относительно правого края рабочей области браузера установите значение grid.marginRight (возможные значения аналогичны значениям CSS-свойства margin-right
4. Если нужен отступ относительно верхнего края рабочей области браузера установите значение grid.marginTop в пикселах

ModularGrid.init({ grid: { lineHeight: 32, hDivisions: 3 } }); создаст горизонтальные модули высотой в три строки (96 пикселов).

Горизонтальная модульная сетка фиксированной ширины

Все настройки горизонтальной модульной сетки фиксированной ширины задаются как свойства объекта grid в объекте настройки: ModularGrid.init({ grid: {...} });

Алгоритм настройки:

1. Задайте ширину области, в которой будет располагаться горизонтальная модульная сетка, в пикселах значением параметра grid.width
2. Если нужен отступ относительно левого края рабочей области браузера установите значение grid.marginLeft (возможные значения аналогичны значениям CSS-свойства margin-left
3. Если нужен отступ относительно правого края рабочей области браузера установите значение grid.marginRight (возможные значения аналогичны значениям CSS-свойства margin-right
4. Задайте расстояние между модулями в пикселах значением параметра grid.gutter
5. Задайте задайте количество вертикальных модулей значением параметра grid.vDivisions
6. Если нужен отступ относительно левого края области, в которой будет располагаться горизонтальная модульная сетка, установите значение grid.prependGutter в true
7. Если нужен отступ относительно правого края области, в которой будет располагаться горизонтальная модульная сетка, установите значение grid.appendGutter в true
8. Если нужно центрировать горизонтальную модульную сетку, установите значение grid.centered в true

ModularGrid.init(
	{
		grid: {
			width: 640,
			vDivisions: 3,
			gutter: 32,
			prependGutter: true,
			appendGutter: true
		}
	}
);

Создаст три вертикальных модуля в области шириной 640 пикселей с "канавками" 32 пиксела между ними и "канавкой" перед модулями и "канавкой" после модуля.

Горизонтальная тянущаяся модульная сетка

Все настройки горизонтальной модульной сетки фиксированной ширины задаются как свойства объекта grid в объекте настройки: ModularGrid.init({ grid: {...} });

Алгоритм настройки:

1. Задайте ширину области, в которой будет располагаться горизонтальная модульная сетка, в процентах значением параметра grid.width, например grid.width: '100%'

2. Задайте минимальную ширину области, в которой будет располагаться горизонтальная модульная сетка, в пикселах значением параметра grid.minWidth, например grid.minWidth: 640

3. Если нужен отступ относительно левого края рабочей области браузера установите значение grid.marginLeft (возможные значения аналогичны значениям CSS-свойства margin-left

4. Если нужен отступ относительно правого края рабочей области браузера установите значение grid.marginRight (возможные значения аналогичны значениям CSS-свойства margin-right

5. Задайте расстояние между модулями в пикселах значением параметра grid.gutter

6. Задайте задайте количество вертикальных модулей значением параметра grid.vDivisions

7. Если нужно ограничить максимальную ширину модульной сетки, установите максимальную ширину в пикселах значением grid.maxWidth

8. Если нужен отступ относительно левого края области, в которой будет располагаться горизонтальная модульная сетка, установите значение grid.prependGutter в true

9. Если нужен отступ относительно правого края области, в которой будет располагаться горизонтальная модульная сетка, установите значение grid.appendGutter в true

   ModularGrid.init( { grid: { minWidth: 640, width: '100%', vDivisions: 3, gutter: 32, prependGutter: true, appendGutter: true } } );

Создаст три вертикальных модуля в области шириной 640 пикселей с "канавками" 32 пиксела между ними и "канавкой" перед модулями и "канавкой" после модуля. При изменении размера окна браузера модули будут тянуться по ширине.

Настройка направляющих

Все настройки направляющих задаются как свойства объекта guides в объекте настройки: ModularGrid.init({ guides: {...} });

Настройки линий задаются в виде объектов в массиве guides.items. Можно задать три типа линий: две центрированные, вертикальная, горизонтальная.

Две центрированные: { type: 'center', width: '30%' } Ширина задается параметром width (значения аналогичны значениям CSS-свойства width), две направляющие рисуются слева и справа от центрированной области заданной ширины.

Вертикальная: { type: 'vertical', left: '20px' } Можно задать либо отступ от левого края рабочей области браузера параметром left, либо отступ от правого края рабочей области браузера параметром right. Значения параметров аналогичны значениям CSS-свойства left.

Горизонтальная: { type: 'horizontal', top: '20px' } Можно задать либо отступ от верхнего края рабочей области браузера параметром top, либо отступ от нижнего края рабочей области браузера параметром bottom. Значения параметров аналогичны значениям CSS-свойства top.

Пример:

ModularGrid.init(
	{
		guides: {
			items: [
				{
					type: 'center',
					width: '300px'
				},
				{
					type: 'vertical',
					right: '20%'
				},
				{
					type: 'horizontal',
					bottom: '10%'
				}
			]
		}
	}
);

Создаст два гайда (слева и справа) относительно центрированной по горизонтали области шириной 960 пикселей; вертикальный гайд, который отстоит на 20% (от ширины рабочей области браузера) от правого края рабочей области браузера; горизонтальный гайд, который отстоит на 10% (от высоты рабочей области браузера) от нижнего края рабочей области браузера.

Настройка изображения-макета

Все настройки изображения-макета задаются как свойства объекта image в объекте настройки: ModularGrid.init({ image: {...} }); Адрес изображения задаётся строкой image.src, ширина в пикселах - числом image.width, высота в пикселах - числом image.height. Чтобы центрировать изображение, установите свойства image.centered в true.

ModularGrid.init(
	{
		image: {
			src: 'http://example.com/design.png',
			width: 960,
			height: 1200
		}
	}
);

Создаст изображение-макет (размером 960 на 1200 пикселей) в левом верхнем углу рабочей области браузера.

Настройка размеров

Все настройки направляющих задаются как свойства объекта resizer в объекте настройки: ModularGrid.init({ resizer: {...} }); Настройки размеров задаются в виде объектов в массиве resizer.sizes. Каждый объект задаётся в виде { width: 800, height: 600 } Одно из свойств можно не указывать (либо width, либоheight), тогда вместо него будет использовано значение текущего размера.

ModularGrid.init(
	{
		resizer: {
			sizes: [
				{
					width: 640
				},
				{
					height: 480
				},
				{
					width: 1024,
					width: 768
				}
			]
		}
	}
);

Пусть окно браузера при открытии получило размер 550 на 700 пикселей, тогда код выше создаст следующие размеры: 640 на 700, 550 на 480 и 1024 на 768 пикселей.

Настройка изменения прозрачности изображения-макета и сетки

Все настройки изменения прозрачности задаются как свойства объекта opacity в объекте настройки: ModularGrid.init({ opacity: {...} }); Начальное значение степени прозрачности задаётся числом opacity.opacity. Возможные значения параметра - от 0 (абсолютно прозрачное) до 1 (абсолютно непрозрачное). Шаг изменения степени прозрачности задаётся числом opacity.opacityStep. Возможные значения параметра - от 0 до 1.

Структура каталогов

demo demo.html - демка build modulargrid.js - скрипт с настройками modulargrid_debug.js - если с modulargrid.js что-то не так, используйте эту версию (сообщите автору номер строки с проблемой) src - каталог с исходниками проекта ant - файлы, с помощью которых собирается продакшн-версия ModularGrid

Лицензия

Copyright (c) 2009-2010 Alexandr Borisov, [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Дополнительная информация

Цикл статей Алексея Черенкевича по модульным сеткам

1. 38 попугаев (Введение)
2. Алгоритм построения модульной сетки. Оптика и геометрия 2.1 Алгоритм 2.2 Микромодуль и оптические компенсации 2.3 Особенности работы с модульной сеткой при разработке «резиновых» сайтов
3. PaperGrid — сетка на бумаге
4. BrowserGrid — сетка в Фотошопе

Другие инструменты для HTML-верстки

Extend Grid Публикация-обзор на Хабре об инструменте Extend Grid от We Love CSS. У Extend Grid'а есть интерфейс для редактирования настроек и возможность хранить их в cookie.

hashgrid.com Модульная сетка в браузере, использует JQuery, CSS, немного изображений, по нажатию комбинации горячих клавиш ставит сетку на передний/задний план.

960.gs Фреймворк для работы с модульной сеткой, основанной на ширине в 960 пикселей.

gridder Плагин к JQuery для отображения модульной сетки, основанной на ширине в 960 пикселей

Allan Jardine Grid Удобный скрипт для создания модульной сетки в браузере. Поддерживаются фиксированные по ширине и тянущиеся сетки. Есть графический интерфейс для задания параметров сетки.