Существует огромное множество инструментов упрощающих разработку и верстку веб приложений. Создать полный каталог таких инструментов пожалуй не возможно. Вот только некоторые которые помогают мне в повседневной работе.
ВНИМАНИЕ.
Содержимое данной статьи морально устарело но сохранено для академических целей.
Все они разобраны по соответствующим категориям. К сожалению не все инструменты из данного списка обладают хорошей документацией и удобным интерфейсом. Что же, где наша не пропадала? Но если вы знаете альтернативы которые более удобны — прошу не молчите 😉
Макеты
CSS Layout Generator — Генератор макетов. Позволяет создавать одно-/двух-/трех-/четырех-/пяти-колоночный макет с плавающей или фиксированной разметкой. Размеры в px, em, %.
Grid Designer — Создает модульную сетку макета. Учитываются количество колонок, расстояния между ними, размер полей, размер шрифта, заголовков, отступы и многое другое. С пред просмотром.
Layout Generators — Создает резиновую сеточную или многоколоночную разметку. В параметрах ширина и цвет, автоматическая генерация css.
Css Templater — Создает готовый каркас на основе DIV’ов в несколько кликов мыши. После создания можно скачать полученный результат в архиве ( html + css файлы ), в результат по желанию будет включен css-reset (сброс стилей браузеров для кроссбраузерности).
PSD2CSS — На этот сервис я уже давал ранее ссылку. Он позволяет конвертировать ваш PSD файл с макетом в готовую верстку ( пусть и очень кривую ), сам нарезает все слои и пишет свой CSS. CSS и верстка меня не интересует — а вот то что он слои все нарезал — очень. Не забудьте потом пережать png.
Шрифты
Typetester — Приложение предназначено для сравнения шрифтов между собой. Весьма удачное кстати. Одновременно можно сравнивать не более трех шрифтов.
CSS Type Set — Позволяет в режиме on-line применять к тексту css свойства и увидеть как они будут выглядеть на деле. Сгенерированный код можно скопировать и использовать.
TypeChart — Позволяет оценить оформление различных шрифтов. После выбора конкретного шрифта можно скопировать css код и использовать.
Texster — Выбор «безопасных» шрифтов. Сервис русский, не смотря на то что существует множество зарубежных аналогов, этот сервис отличается тем, что результаты отображаются сразу для всех шрифтов что позволяет быстрее сделать выбор.
CSS-Typoset Matrix and Code Generator — Сервис позволяет выставить размеры размеры шрифта, заголовков (h1-h6), параграфов и сгенерировать таблицу «нормальных» отступов для текста. Полученный css можно скопировать и использовать далее.
CSStxt — Не сложный инструмент для создания css стилей шрифта.
Em Calculator — Маленький инструмент для преобразования px в em.
PXtoEM — Таблица размеров шрифтов в различных единицах измерения, которая помогает переводить одно значение в другое (px в em и т.д.).
Цвет
CSS Color Editor — Позволяет изменить цветовую схему сайта. На сервис загружается css файл, выбираются цвета и сервис генерирует новый css файл который можно скачать.
Color Palette Generator — Очень интересный сервис. Позволяет по выбранному изображению сгенерировать цветовую схему сайта.
Color Contrast Check — Полезный сервис для on-line проверки цвета. Позволяет при помощи ползунков выбрать фон и цвет шрифта. Цвета в шестнадцатеричном формате. Сервис показывает обладает ли выбранная схема достаточной контрастностью при просмотре людьми у которых нарушено цветовосприятие, или при просмотре на чб экране (WCAG 2).
Спрайты
CSS Sprite Generator — Позволяет автоматизировать процесс создания css спрайтов. Загружаем zip архив в котором два или более изображений (gif, png, jpg). А сервис будет генерировать спрайт-изображение и CSS соответственно для отображения и ориентации каждого элемента изображения.
YASC (Yet Another Sprite Creator) — Еще один сервис генератор. Загружаем изображение, выбираются необходимые области изображения и им назначаются id. Когда все выбрано происходит генерация css для спрайтов.
Добавить комментарий