• 333383
  • 1321
  • 79
Нравится блог?
Подписывайтесь!

Список полезных инструментов для CSS разработчика

Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.

Чтобы инструмент был по-настоящему полезен, у него должна быть хорошая документация и дружелюбный интерфейс. К сожалению, некоторые инструменты в списке не полностью попадают под данные критерии. Если кто-то знает лучшие альтернативы с более дружелюбным интерфейсом и большей функциональностью, пишите в комментариях.

Макеты

CSS Layout Generator

Этот генератор может создать трехколоночный (одно-, двух-) макет с плавающей или фиксированной разметкой, содержащий header и footer. Размеры можно задавать в px, em или %.

Grid Designer

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

Layout Generators

Позволяет создавать резиновую многоколоночную или сеточную разметку. Позволяет задавать ширину и цвет. CSS код генерируется автоматически.

Генератор HTML+CSS шаблонов

Сервис позволяет в несколько кликов мыши получить готовый дивовый каркас с нужными параметрами. После выбора параметров будет предложено скачать архив, в котором находится 2 файла с HTML и CSS.

PSD2CSS

Cервис, для конвертирования PSD макетов в cверстанную страницу. Быстро, бесплатно и относительно качественно.

 

CSS Фреймворки

Boks

Boks это визуальный редактор для CSS фреймворка Blueprint, сделанный в виде приложения Adobe AIR. С помощь этого редактора можно визуально создавать и заполнять разметочную сетку, задавать вертикальный ритм, и экспортировать результат в HTML и CSS.

Полезные инструменты и ссылки для CSS фреймворка Blueprint.

YAML Builder

YAML Builder это онлайновый сервис для визуального создания шаблонов основанных на HTML/CSS фреймворке YAML.

YUI CSS Grid Builder

Простой веб интерфейс, используемый для быстрого создания кроссбраузерных шаблонов на основе YUI grid.

960 Grid System – Variable Grid System

Variable Grid System – это быстрый способ создать CSS сетку, на основе CSS фреймоврка 960 Grid System.

Grid System Generator

Grid System Generator позволяет создавать шаблоны с фиксированной разметкой и валидным CSS / XHTML. Шаблоны могут быть основаны на одном из четырех CSS фреймворков: 960 Grid System, Golden grid, 1kb grid, Simple grid system. В дополнение к каждому шаблону также создается png файл для дизайна в Fireworks, Illustrator, OmniGraffle, Photoshop или Visio.

Шрифты

Typetester

Typetester – это весьма удачное веб-приложение, предназначенное для сравнения шрифтов между собой. По словам разработчиков, основная задача — облегчить жизнь веб-дизайнера. Одновременно можно сравнивать три шрифта.

CSS Type Set

Это сервис позволяющий применить к тексту CSS свойства и посмотреть, как это будет выглядеть.

Все изменения моментально отражаются на примере, а сгенерированный CSS код можно скопировать и использовать в дальнейшем.

TypeChart

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

Texster

Texster — сервис для подбора «безопасных» шрифтов для вашего сайта. Не смотря на то, что существует множество аналогичных и в основном зарубежных ресурсов, texster отличается тем, что результаты отображаются сразу для всех шрифтов, что позволяет сравнить их и выбрать нужный.

CSS-Typoset Matrix and Code Generator

CSStxt

Несложный веб-инструмент создания CSS стилей шрифта.

EM Calculator AIR Application

Калькулятор вертикального ритма в XHTML & CSS; легко конвертирует px в em; padding и margins вычисляются автоматически.

Em Calculator

Em Calculator это небольшой Javascript инструмент который преобразовывает определенное значение px в соответствующее значение в em.

PXtoEM

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

Цвет

CSS Color Editor

CSS Color Editor позволяет заменить цветовую схему вебсайта. На сервис локальный CSS файл, выбираются новые цвета, а затем сервис генерирует CSS файл с уже замененными цветами.

Color Palette Generator

По заданному рисунку генерируют цветовую палитру состоящую из ключевых цветов.

Color Contrast Check

Действительно интуитивный онлайн инструмент для проверки цвета, который позволяет внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает, как выглядит эта комбинация и обладает ли она достаточной контрастностью при просмотре людьми, у которых нарушено цветовосприятие, или при просмотре на черно-белом экране (тест WCAG 2).

ColorZilla

ColorZilla расширение для Firefox. В ColorZilla можно получить цвет, кликнув в любом месте сайта и после перенести этот цвет в любую другую программу (имеется 5 вариантов описания цвета). Можно изменять масштаб изображения страницы(20% – 1000%). Так же есть встроенный просмотрщик палитры, избранное, DOM инспектор и поддержка firebug.

Конвертор HSL в RGB

 

Спрайты

CSS Sprite Generator

Этот инструмент позволяет автоматизировать процесс создания CSS спрайтов. Просто дайте ему ZIP файл, содержащий 2 и более изображений (GIF, PNG или JPG), и он будет генерировать спрайт-изображение и соответствующие правила CSS для ориентации и отображения каждого элемента изображения.

YASC (Yet Another Sprite Creator)

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

SmartSprites

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

 

Формы

Quick Form Builder

Генерирует XHTML /HTML -совместимые и доступные формы с CSS разметкой. Вводим имена полей, затем выбираем типа каждого поля, формат( HTML или XHTML ) и получаем готовый HTML и CSS код формы.

Wufoo

Wufoo – это бесплатный онлайновый сервис, позволяющий с легкостью создавать хорошо выглядящие, валидные CSS/XHTML формы.

Компоненты UI

List-o-Matic

Генерирует навигационные меню ( до 2 уровней), позволяя выбрать одно из нескольких доступных оформлений.

CSS Menu Generator

Генерирует горизонтальные, вертикальные, выпадающие CSS меню.

ThemeRoller

Позволяет создавать собственные темы для jQuery UI.

Обертка текста

CSS Text Wrapper

Сервис CSS Text Wrapper позволяет легко придать тексту любую форму и вставить к себе на страницу. Линиями задаем форму. Узловые точки добавляются по нажатию на линию в том месте где необходимо добавить. Можно настроить размеры блока, выравнивание, шрифт и т.д.

The Box Office

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

Анализ и Отладка

W3C CSS Validation Service

Проверка CSS на валидность.

CSS Analyzer

CSS Analyser сочетает W3C CSS Validation Service и дополнительную проверку цветов на контрастность (полезен для улучшения юзабилити) и единиц измерения, используемых в исходном коде. Результатом является очень подробное описание ошибок и предупреждений, точно так же как в W3C CSS Validation Service.

Firebug

Firebug — расширение для браузера Firefox, являющееся консолью, отладчиком, и DOM-инспектором Javascript, DHTML, CSS, XMLHttpRequest. Firebug показывает в консоли вызвавшую ошибку функцию, стек вызовов функций, вызвавших эту ошибку. Он предупреждает, что CSS-правило или Javascript-метод/свойство, которое вы пытаетесь использовать, не существует.

Сопровождение

Dust-Me Selectors

Позволяет проанализировать страницу и показать, сколько и какие стили не используются на странице сайта, а также укажет в каком файле стилей, в какой строке они прописаны.

CssCleaner

Приложение Windows для удаления неиспользуемых CSS классов.

CSS Redundancy Checker

Проверяет, все ли правила из CSS используются в HTML. После проверки выводит список не использованных на данной странице или группе страниц.

Оптимизация

CSS Drive CSS Compressor

CSS компрессор с опциями компрессии «Слабая», «Нормальная» и «Сверхкомпактная».

Robson CSS Compressor

Еще один хороший инструмент для компрессии CSS файлов — Robson CSS Compressor. Пока он в стадии разработки, и возможны неточности в его работе.

MinifyMe – AIR Application

Небольшое AIR-приложение, которое позволит собрать несколько css-файлов в один.

Фоматирование

CleanCSS – CSS Formatter and Optimizer

Clean CSS является популярным онлайн-инструментом для форматирования и оптимизации CSS. Содержит группы настроек для баланса между оптимизацией и читабельностью. Одна из важных возможностей – это автоматическое соединение одинаковых селекторов и свойств.

Styleneat

Styleneat преобразовывает код CSS в стандартизированный, удобный для чтения формат, структурирует таким образом, что становится легко понять где какие области и как они связаны друг с другом.

CSS Toolbox

Бесплатный CSS Toolbox включает множество инструментальных средств для быстрой и эффективной разработки CSS –валидатор, форматтер, оптимизатор.

Браузерозависимость

Conditional-CSS

Парсер CSS файлов на строне сервера с проверкой на тип и версию браузера. Позволяет сформировать специальные условные комментарии для различных групп браузеров. Доступны версии на PHP, C# и С.

7 простых способов протестировать кроссбраузерную совместимость

Web Browser CSS Support

Подробная таблица поддержки CSS-стандарта популярными браузерами.

When Can I Use?

Даёт возможность сравнить поддержку браузерами различных новейших технологий, а именно — HTML 5, CSS 3, SVG и т.д. Можно выбрать как определённые браузеры, временные периоды, статусы, так и определённые технологии.

IE7.js

IE7-js это Javascript библиотека, которая исправляет множество багов в HTML и CSS для версий Internet Explorer седьмой и ниже. К примеру, она исправляет поддержку прозрачности в PNG, фиксированное позиционирование элементов и фоновых изображений (position: fixed), поддержку псевдо класса: hover для всех тэгов и др.

Modernizr

Modernizr это небольшая простая Javascript-библиотека, которая поможет использовать такие технологии, как CSS3, HTML5 в браузерах которые еще не поддерживают это технологии.

Селекторы

Sizzle Javascript Selector Library

Быстрый Javascript движок выбора CSS селекторов. Sizzle поддерживает практически все CSS3 селекторы – даже такие редко используемые, как экранированные селекторы (”.foo\+bar”), юникодные селекторы и т.д.

YASS: Yet Another cSS selector

Самая быстрая Javascript-библиотека для выбора элементов по CSS-селектору.

SelectORacle

Сервис дает описание на человеческом языке сложных селекторов CSS и может быть очень полезен при изучении оных.

YUI Selector Utility

YUI Selector Utility позволяет использовать синтаксис CSS3 селекторов на Javascript, упрощая сбор, фильтрацию и тестирование HTML элементов.

YUI StyleSheet Utility

С помощью StyleSheet Utility на лету создавать и модифицировать CSS стили.

Разное

XRAY

XRAY это букмарклет, который может демонстрировать разную полезную информацию о всех «внутренностях» страницы. В частности, размеры всех элементов, координаты их расположения, CSS-свойства, названия HTML тегов, соответствующих отображаемым блокам, и некоторые другие детали.

Cheat Sheets

CSS Cheat Sheet

Одностраничный CSS cheat sheet перечисляющий все селекторы (CSS 2.1) и свойства. Включает картинку box-модели, единицы измерения CSS.

CSS Shorthand Cheat Sheet

YUI Library: CSS Reset, Base, Fonts, и Grids

Blueprint CSS Cheat Sheet

 

За пределами CSS

MoreCSS

MoreCSS это ориентированная на дизайнеров Javascript библиотека, которая позволяет писать код в CSS стиле для создания всплывающих окон, тултипов, меню на табах, таблиц «зебра», расширинных стилей списков и применения кросс-браузерной прозрачности.

LESS – Leaner CSS

Less это Ruby gem, который расширяет CSS добавляя следующими возможностями: переменные, миксины, операции и вложенные правила. Достаточно переименовать .css файлы .less для получения всех этих возможностей.

DtCSS

DtCSS – это PHP скрипт, который обрабатывает CSS файлы, позволяя использовать в них вложенные селекторы, цветовое смешение и т.д. DtCSS читает CSS файл со специальными инструкциями написанными для DtCSS, и выдает наружу обычный CSS. Имеется умная кэширующая система.

Sass + Compass

SASS — компилятор в стайлшиты. Очень удобно — форматирование отступами, как в питоне, миксины с параметрами (почти функции), переменные и операции над ними.
источник: http://habrahabr.ru/blogs/webdev/69023/

5 ноября 2009, 20:46
2104

Загрузка...
Loading...

Комментарии

Оставьте свой комментарий

Спасибо за открытие блога в Yvision.kz! Чтобы убедиться в отсутствии спама, все комментарии новых пользователей проходят премодерацию. Соблюдение правил нашей блог-платформы ускорит ваш переход в категорию надежных пользователей, не нуждающихся в премодерации. Обязательно прочтите наши правила по указанной ссылке: Правила

Также можно нажать Ctrl+Enter

Популярные посты

До каких пор чиновники будут игнорировать защиту детей?

До каких пор чиновники будут игнорировать защиту детей?

До каких пор Уполномоченный по правам ребенка, как институт во всем мире стоящий на страже жизни и прав детей, в нашей стране будет выполнять представительские функции?
AliyaSadyrbaeva
25 июля 2017 / 18:27
  • 11193
  • 10
Зачем эмигрировать в Россию? Лично я никогда не понимал этой странной мечты

Зачем эмигрировать в Россию? Лично я никогда не понимал этой странной мечты

Некоторые мои знакомые, мечтают уехать в Россию и побыстрее получить гражданство. Кому мы там сдались? Есть замечательная поговорка: "Где родился - там и пригодился".
Washington
25 июля 2017 / 12:15
Что происходит в казахстанской правоохранительной системе под видом борьбы с коррупцией

Что происходит в казахстанской правоохранительной системе под видом борьбы с коррупцией

За день до своей гибели прямо около памятника жертвам политических репрессий 1937-го Жампозов сказал жене, что он – жертва точно таких же репрессий.
openqazaqstan
24 июля 2017 / 10:18
  • 3534
  • 12
Ненавязчивый сервис Родины. Почему казахстанцы не очень-то спешат на Алаколь и в Баянаул

Ненавязчивый сервис Родины. Почему казахстанцы не очень-то спешат на Алаколь и в Баянаул

Как Кыргызстан смог превратить в «игрушку» побережье Иссык-Куля? Сервис там – на любой статус и кошелёк, и цены выгоднее Алаколя или Балхаша раза в два-три, и дороги шикарные, народ гостеприимный.....
openqazaqstan
сегодня / 11:54
  • 3318
  • 15
Если вам отвечают на казахском языке – ситуация с точки зрения законодательства

Если вам отвечают на казахском языке – ситуация с точки зрения законодательства

Я своим постом не собираюсь критиковать кого-либо, что люди знают или не знают казахский или русский язык. Я выражаю своё мнение с точки зрения законодательства о языках.
Advokot
25 июля 2017 / 13:50
  • 3585
  • 31
Мужчины Люксембурга и Казахстана: «У нас они уже в 35 добиваются статуса»

Мужчины Люксембурга и Казахстана: «У нас они уже в 35 добиваются статуса»

Что касается парней, так это вообще отдельная тема. Они для меня загадка. Уже год пытаюсь понять ход их мыслей. Для нас, казахов, немного сложно понять, почему человек в 35-36 лет, до сих пор не нашел смысла жизни.
AASh
24 июля 2017 / 15:19
  • 2496
  • 25
СказQAZ о королеве ночного города. Казалось, ничто не могло прошибить её оборону

СказQAZ о королеве ночного города. Казалось, ничто не могло прошибить её оборону

- Ты задолбала быть такой прекрасной!.. Пьяный в доску романтик еле держался на ногах. Девушка, сидящая за столом, даже не удостоила его взглядом. Охранники нежно вытолкали его из заведения.
Aks_Ras
26 июля 2017 / 12:09
  • 1718
  • 3
Хан Ордасы – ставка Жангир-хана. Здесь была открыта первая в Казахстане типография

Хан Ордасы – ставка Жангир-хана. Здесь была открыта первая в Казахстане типография

Ханская ставка Жангир-хана в селе Хан Ордасы Бокейординского района Западно-Казахстанской области - это одно из самых интересных исторических мест Казахстана.
theYakov
26 июля 2017 / 5:34
  • 1698
  • 6
Жангалинский район. Здесь были выведены эдильбаевские овцы и кушумские лошади

Жангалинский район. Здесь были выведены эдильбаевские овцы и кушумские лошади

В Жангалинском районе повезло посетить бывший легендарный совхоз "Бирлик", где были выведены известные на весь СССР рекордсмены - баран весом 167 кг и овцематка весом 128 кг.
theYakov
25 июля 2017 / 13:14
  • 1652
  • 5