Я не буду приводить вступление к статье, его можно прочитать на сайте авторов — вот здесь, а перейду сразу к делу.
Ниже представлен список из почти 50 (изначально их было 50, но некоторые я отсеял) невероятно полезных CSS инструментов, генераторов, шаблонов и ресурсов. Здесь вы не найдете, ставшими уже традиционными, инструменты типа Firebug или Web Developer extension, но найдете и очень полезные инструменты, которые, возможно, не были вам знакомы ранее.
CSS и типографика
то java-скрипт, который всем клиентским агентам позволяет использовать правильную расстановку переносов в HTML документе. К сожалению, скрипт работает только с английским, французским и немецким языками.
Это инструмент для работы с типографикой, который позволяет вам в интерактивном режиме посмотреть, как будет выглядеть ваш текстовый контент, перед применением его непосредственно на странице.
Это инструмент, который в принципе похож на первый. Он позволит вам просмотреть как будет выглядеть ваш текст после примененного к нему СSS оформления.
CSS-Typoset Matrix and code generator
Это матрица, которая позволит вам автоматически генерировать стили для основных селекторов форматирования текста: размер шрифта в em, высоту строки, отступы. Все что вам нужно — ввести желаемые размеры для селекторов в пикселях и вы получите необходимый вам css код в исполнении для симметрической и ассиметрической разметки.
Здесь все понятно — данный инструмент позволяет вам вычислить искомый размер шрифта в em, когда известна его величина в пикселях. Примечательной особенностью инструмента можно считать то, что он позволяет вычислять не только базовый размер шрифта, но и показывать какой размер нужно задать потомкам элемента, чтобы получить нужный размер с учетом наследования.
Facelift Image Replacement (FLIR)
Это скрипт который позволяет вам использовать любые шрифты на странице, посредством их замены в автоматическом режиме на соответствующие изображения. Автор Cory Mawhorter. Есть мануал для использования — How To Use Any Font With FLIR: Tutorial.
Еще один калькулятор, который позволяет высчитывать размер шрифта для различных элементов в зависимости от базового. Примечательной особенностью этого скрипта является наличие decktop-версии реализованной с помощью AIR.
Вместо того, чтобы просто создавать изображения с использованием Flash или показать желаемый текст на web-странице с пмощью картинки, вы можете использовать typeface.js и вывести текст простым HTML и CSS, как если бы посетители вашего сайта имели у себя нужный шрифт.
CSS онлайн-инструменты
Вообще, по описанию и заявлению разработчиков — это бесплатная онлайн служба, которая позволяет конвертировать онлайн ваши .psd файлы в файлы разметки XHTML + CSS. Но на деле все не так просто и безоблачно. Однако, можете попробовать сами.
Этот инструмент позволит вам сформировать специальные условные комментарии для различных групп браузеров (в зависимости от движку) или даже для конкретного навигатора. Все что вам нужно это указать какой язык использует ваш сервер и сгенерировать нужный исполняемый файл.
MoreCSS это ориентированная на дизайнеров JavaScript библиотека, которая позволяет писать код для создания всплывающих окон, тултипов, меню на табах, таблиц «зебра», расширинных стилей списков и применения кросс-браузерной прозрачности. Самое интересное, что данная библиотека позволяет все это реализовать на уровне специальных css правил. Интересно…
Интересный онлайн-инструмент, который позволяет вам получить исходное древо css-правил извлекая соответствующие атрибуты из загруженной XHTML разметки. И кстати, на странице есть ссылка на обратный генератор.
Инструмент, который позволяет вам найти неиспользуемые на странице css-селекторы в вашем файле стилей.
Специальное решение для очистки css от «лишних» символов-разделителей. Создателей данной техники во многом вдохновил Python. В итоге вы получаете более чистый и более мощный код, чем CSS2. Вы также можете работать с переменными. Ну и для обработки такого кода, естественно нужен Python.
WordOff инструмент я очистки кода, который вставляется через WYSIWYG редактор из Word. Например, например удаляются все атрибуты для всех элементов, за исключением <a>, <span> и <div>, пустые элементы удаляются. Есть доступ к API.
Инструмент, который позволяет корректно обработать код для вставки его в блог или в другую статью, таким образом, чтобы все символы не были исковерканы собственным обработчиком движка.
Простой генератор таблиц, который вам позволит легко применить различные классы к ячейкам, рядам и колонкам.
Приятно что в списке заморских сервисов появился и инструмент от нашего разработчика. Я уже писал о нем ранее — это приложение которое позволяет вам изменять css файлы сразу работая с ними в браузере. К сожалению, пока работает только в связке IIS + .NET 3.5
Специальный он-лайн сервис, который вам позволит в два клика собрать дазовый набор файлов для веб-сайта: index-файл с выбранным DOCTYPE, css-файлы, библиотеку jQuery и плагины к ней. После того как вы выберите нужный состав компанентов, все это можно загрузить в архиве.
Этот инструмент позволяет вам «играть» с различными стилями и оформлением вашего сайта. Вы просто вводите свой url в поле генератора,а далее ваш сайт загружается в эмулятор и вы можете применять к нему различные эффекты оформления через несколько вариантов работы с потомками главных элементов. В целом для развлечения не плохо, но для работы не очень.
Еще один инструмент для создания «рыбы». Настроек нет, но есть варианты выбора: длинный текст — короткий текст, длинный список — короткий список. Как по мне, так http://www.lipsum.com/ куда круче…
Небольшой толковый словарик для пользователей CSS. Правда толкует только на английской, испанском, не совсем полно толкует на немецком и болгарском.
Онлайн приложение для тестирования и отладки, а также совместной работы с JavaScript.
Это инструмент который позволяет вам с помощью CSS формировать контейнеры для текста произвольной формы. Различные геометрические фигуры, кривые и прочие элементы.
Трудно проверить CSS автоматически. Размер шрифта не отвечает ожиданиям? Разметка отличается от начального макета? Данный инструмент поможет вам протестировать макет на ранних стадиях проекта и обсудить его. Написан на Python.
Если вы не знаете, что такой css-спрайты, то гугл вам в руки. А для тех кто знает и не любит делать это руками существует такой онлайн генератор css-спрайтов.
Все просто — онлайн редактор CSS, который позволяет создавать таблицы стилей, фактически не используя написание кода руками.
Онлайн версия CSS Tidy, инструмента, который позволяет получить вам компактный и чистый код и проверить код на ошибки CSS.
Web-Based Tools for Optimizing, Formatting and Checking CSS
Подборка из нескольких полезный онлайн-инструментов для работы с CSS.
Этот онлайн-инструмент позволит вам сгенерировать сетку для вашего макета с произвольным количеством колонок, расстоянием между ними, а также вы можете посмотреть как будут выглядеть основные элементы форматирования текста в данной сетке. И, конечно же, все созданное можно загрузить себе.
Yahoo’s Secret Text-Sprite Generator
Вводите текст в поле, а далее, по нажатию на submit, получаете сгенерированный CSS-спрайт с введенным текстом. Но только латинские символы:(
Этот инструмент позволит вам редактировать ваши цветовые схемы не внося правки непосредственно в css-код. Вы просто загружаете свой локальный css-файл, меняете цвета, а сервис выдает вам уже спаленный файл стилей.
Это инструмент который позволит вам создать обтекание текста для картинок с различной неправильной формой. Просто вводите ссылку на любую картинку произвольной формы, задаете основное выравнивание изображения, цвет фона, который нужно игнорировать, высоту строки дополнительные отступы и цвет текста, а даелее — идем за результатом.
Небольшое AIR-приложение, которое позволит вам собрать несколько css-файлов в один и запустить у себя.
Очень интересный проект. Это некий свод правил для правильного комментирования, кодирования и оформления CSS документов. Если придерживаться данного свода правил, то разработчикам будет гораздо легче понимать друг друга. Полезно почитать всем, кто взял за правило чистый CSS.
Это онлайн-генератор вертикальных, горизонтальный и выпадающих меню. Доступна различные цветовые вариации, а также кастомизация меню онлайн.
sheetUp — DOM Stylesheet Library
Это специальная библиотека которая призвана упростить работу с большим DOM-tree элементов на странице, посредством манипулирования стилями в document.styleSheets.
Это инструмент который позволит вам оптимизировать ваш CSS. Сделать его более компактным, удалив лишние и повторяющиеся стили.
Drawter Beta 2 дает вам возможность буквально нарисовать код вашего веб-сайта. Она работает в любом браузере, что делает его очень полезным.
Подручные средства для CSS-разработки.
Regex Patterns for Single Line CSS
Не удалось «пощупать» инструмент. Сервер выдал ошибку. Но судя по описанию и картинке — это макрос, который будет очень полезен если вам нужно удалить лишние пустые строки в CSS
21 Excellent Dreamweaver Extensions for CSS Productivity and Standards
Обширный обзор полезный расширений для Dreamweaver. Из описанного 21 расширения 15 бесплатных и 6 платных, но весьма достойных.
Специальные заготовки линированной бумаги для дизайнеров. Очень полезно, посокльку позволяет делать эскизы проектов на бумаге, но при этом сетка дает возможность учесть точное позиционирование и отступы.
Это .psd файл, который включает в себя базовый шаблон с элементами интерфейса, формами, «рыбой» и сектой.
Встраиваемые в браузер инструменты для работы с CSS
Collection of Web Developer Tools, by Browser
Очень трудно выбрать действительно полезные инструменты для работы CSS. В этой статье перечислены самые лучшие инструменты с описанием и подробностями установки.
Расширения для Firefox
Расширение которое позволяет выявить не используемые на странице CSS-селекторы. Все неиспользуемые на данной страницы селекторы собираются в временный список, который потом сверяется с неиспользуемыми селекторами на других страницах сайта, после чего, можноудалять ненужные селекторы.
С этим расширением вы можете рассмотреть структуру документа по элементам, а также удаить нежелательные или ненужные вам блоки в данный момент.
Инспектор свойств CSS, который выводит всю информацию об элементе страницы.
Расширение которое помогает вставить «рыбу» в страницу. Есть возможность генерации простых параграфов или списков, а также вставка в виде текста или html.
Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin
Статья с большим количеством обзоров плагинов для CSS-разработчика.
Это расширение которое поможет наложить сетку на вашу страницу. Сетка может быть леко адаптирована под нужды именно вашего проекта.
20 Firefox Add-Ons To Enhance Your Web-Development
Еще один обзор расширений для Firefox в помощь разработчику. Среди них представлены: Codetch, Pixel Perfect, Link Checker и ColorZilla.
Коддинг и программирование с CSS
Специальный плагин для редактора CODA (только для Mac), который расширяет возможности работы с CSS.
Edit in Place with JavaScript and CSS
Это инструмент для редактирования прямо в окне браузера. По идее разработчиком пользователь может отредактировать код по своему желанию в выбранной области.
Это бесплатный редактор CSS, который работает под Mac, Windows.
Написанный на Python пак для парсинга и создания CSS.
Steve Heffernan предложил новый метод организации работы с CSS. Метод основан на Ruby on Rails. Но вцелом может быть адаптирован и применен в большенстве MVC моделей.
Новые CSS-фреймворки
Это кроссбраузерный фреймворк который содержит 14 шаблонов выпадающих меню, коорые подвержены дальнейшей кастомизации.
Это новый фрейворк, который соединил в себе лучшее, по заявлениям разработчика, от Blueprint и Tripoli. Фреймворк включает в себя 24-колоночную сетку, типографику, чистые стили форм, стили печати, прикольные иконки, стили для системных сообщений. Лично я скачал и буду смотреть, возможно использую что-то для себя.
Это фреймворк, который является очень удачным решением для определения печатных стилей.
Этот фреймворк содержит шесть основных шаблонов: фиксированную, резиновую, одну-, двух- и трехколоночную разметки, и интегрированный jQuery. Приятно то, что автор наш — Андрей Мусоян.
Чистый, минималистский CSS-шаблон для нового проекта.
Фреймворк с приятной типографикой.
CSS-фреймворк для работы с формами.
Собственно еще один легкий, но в тоже время функциональный фреймворк.
CSS Bookmarklets
Мощный и полезный Java Script букмарклет, который содержит утилиты для создания сетки разметки, линейки и пересекающихся линий.
Этот небольшой букмарклет позволяет вам легко обновлять CSS. Это весьма полезно, когда вы работаете с динамическими приложениями. Проверено на IE и Firefox.
Букмарклет для Internet Explorer 6+ и Webkit-, а также основанных на Mozilla браузерах. Вы можете использовать его чтобы увить боксовую модель (box model) любого элемента на странице.
укмарклет для Internet Explorer 6+ и Webkit-, а также основанных на Mozilla браузерах. Вы можете использовать его для дебаггинга CSS-селекторов.
Инструмент для редактирования веб-сайта в реальном времени.
15 Must-Have Bookmarklets For Web Designers And Developers
Список из пятнадцати букмарклетов для разработчика. В него в ходят как перечисленные выше, так и другие полезные букмарклеты.
Инструменты для генерации css-разметки
Визуальный редактор для создания базовой разметки на основе Blueprint и jQuery. Вы можете использовать клавиши клавиатуры для создания базовой разметки.
Инструмен который поможет автоматизировать процесс создания базовой XHTML разметки и набора основных CSS-селекторов.
Этот инструмент позволяет создавать кроссбраузерyez резиновую разметку с различным набором колонок. Позволяет визуально изменить ширину и цвет. Вы можете перетаскивать ползунки, выбирая ширину. CSS код генерируется автоматически.
iStylr — Online CSS Template Generator
Продвинутый WYSIWIG онлайн CSS-редактор с подсветкой синтаксиса, drag’n’drop-функционалом, импортом / экспортом шаблонов, менеджером изображений, с возможностью использования CSS и визуальным DOM деревом. Для использования нужно зарегистрироваться.
Заготовки CSS-разметок
Коллекция основных кроссбраузерных разметок.
42 шаблона «резиновых» разметок для загрузки. Все разметки валидны по отношению к strict Doctype.
53 шаблона фиксированной разметки. Все разметки валидны по отношению к strict Doctype.
Это набор (собственно фреймворк) включающий в себя пять видов разметок, которые могут быть фиксированными или резиновыми. Во многом проект обязан YUI grids.
CSS разметки
100 Free High-Quality XHTML/CSS Templates
Собственно статья где и приведены примеры 100 бесплатных готовых css-шаблонов.
45 Excellent Free Web Templates
Теперь их 45 🙂
Вот и все. Все картинки взяты с оригнала статьи на Smashing Magazine.
Для все, кто дочитал до конца — постовой:
Если вам нужен дизайн проект для квартиры, офиса или другого типа помещения, то вам помогут на сайте группы компаний «Жилищный капитал«Мойки для кухни, кухонные раковины, каменные мойки. Каменные мойки, раковины для кухни.
6 ответов к “Невероятная по содержательности и полезности подборка инструментов для верстальщика”
Все картинки требуют реферер, поэтому их нихрена не видно.
картинок не виднаааааааааааааааааа
Поправил картинки. Смотрите:)
Онлайн генератор CSS спрайтов:
Сделано очень удобно. Можно загружать несколько картинок, выделять области, задавать правила для автоматического расположения, настраивать CSS. Так же можно сохранить проект и потом применить правила к другим картинкам.
Simple CSS — данный редактор не работает с Linux
Спасибо, исправил.