Jetstrap на основе Twitter Bootstrap: конструктор сайтов, адаптированных для любых экранов

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

Оцените:

Одним из таких инструментов является фреймворк Twitter Bootstrap. Это свободный набор HTML- и CSS-шаблонов оформления для различных компонентов веб-интерфейса. Twitter Bootstrap совместим со всеми современными браузерами, в том числе с устаревшими версиями Internet Explorer 7.


Подробную информацию о Twitter Bootstrap можно найти на официальном сайте фреймворка (а также на неофициальном — на русском языке). Кроме того, для Twitter Bootstrap существуют различные сторонние инструменты: например, генератор кнопок, генератор форм, коллекция готовых сверстанных фрагментов, генератор тем, бесплатная коллекция тем и многое другое.


Сегодняшний объект нашего обзора — сервис Jetstrap — представляет собой инструмент онлайн-макетирования сайтов на основе Twitter Bootstrap. После регистрации на сайте каждый пользователь получает возможность создавать несколько проектов средствами Jetstrap. Задав имя нового проекта, пользователь попадает в область разработки.



В каждый проект можно добавлять несколько экранов (screen) — на каждом из них можно создавать и хранить разные варианты макета отдельных страниц сайта.



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



Над макетом, в верхней части окна браузера расположено меню с символами разных элементов интерфейса. Эти кнопки представлены в общей группе All («Все») и распределены по группам в соответствии с их предназначением. Здесь можно найти кнопки, заголовки, изображения, иконки, индикаторы прогресса (прогресс-бары), формы, текстовыя поля и другие элементы интерфейса. Поместить их на макет страницы можно просто перетащив их в нужное поле методом drag-and-drop.


Нажатие на добавленном элементе позволит отобразить окно его свойств. Например, если вы добавили изображение, вы можете указать путь к нему, размеры (ширину и высоту).



При добавлении заглавия можно указать размер и тип стиля заголовка, текстовое поле в окне свойств позволит указать комментарий, отображаемый выше. Любой из добавленных элементов можно продублировать, что особенно полезно при размещении одинаковых элементов веб-страницы. Система Jetstrap сразу же позволит увидеть, как страница будет отображена на устройствах с разными экранами — компьютерах, смартфонах и планшетах.



В любой момент автору макета доступен просмотр кода выделенного элемента — как HTML, так и CSS.


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


Завершив работу над макетом, пользователь может просмотреть результат в окне браузера. При этом для созданного макета будет сформирована уникальная ссылка на его превью, с помощью этой ссылки макет можно передать другим людям — например, заказчикам либо другим участникам команды, работающей над созданием проекта.


Примечательно, что после завершения работы над макетом средствами Jetstrap пользователь сможет скачать полученный код созданных макетов в виде ZIP-архива.


Если вам нужно создать макет сайта или даже полноценный несложный сайт, сервис Jetstrap поможет решить эту задачу максимально просто и удобно.


Jetstrap

Оцените:

Комментарии Facebook

Комментарии ВКонтакте