Опубликовано автор в категориях Полезности.

Я не буду приводить вступление к статье, его можно прочитать на сайте авторов — вот здесь, а перейду сразу к делу.

Ниже представлен список из почти 50 (изначально их было 50, но некоторые я отсеял) невероятно полезных CSS инструментов, генераторов, шаблонов и ресурсов. Здесь вы не найдете, ставшими уже традиционными, инструменты типа Firebug или Web Developer extension, но найдете и очень полезные инструменты, которые, возможно, не были вам знакомы ранее.

CSS и типографика

Hyphenator

то java-скрипт, который всем клиентским агентам позволяет использовать правильную расстановку переносов в HTML документе. К сожалению, скрипт работает только с английским, французским и немецким языками.

CSS Type Set

typeset

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

Typechart

tc

Это инструмент, который в принципе похож на первый. Он позволит вам просмотреть как будет выглядеть ваш текст после примененного к нему СSS оформления.

CSS-Typoset Matrix and code generator

Это матрица, которая позволит вам автоматически генерировать стили для основных селекторов форматирования текста: размер шрифта в em, высоту строки, отступы. Все что вам нужно — ввести желаемые размеры для селекторов в пикселях и вы получите необходимый вам css код в исполнении для симметрической и ассиметрической разметки.

Em Calculator

emc

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

Facelift Image Replacement (FLIR)

Это скрипт который позволяет вам использовать любые шрифты на странице, посредством их замены в автоматическом режиме на соответствующие изображения. Автор Cory Mawhorter. Есть мануал для использования — How To Use Any Font With FLIR: Tutorial.

Vertical rhythm calculator

csst

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

typeface.js

Вместо того, чтобы просто создавать изображения с использованием Flash или показать желаемый текст на web-странице с пмощью картинки, вы можете использовать typeface.js и вывести текст простым HTML и CSS, как если бы посетители вашего сайта имели у себя нужный шрифт.

CSS онлайн-инструменты

PSD2CSS Online

Вообще, по описанию и заявлению разработчиков — это бесплатная онлайн служба, которая позволяет конвертировать онлайн ваши .psd файлы в файлы разметки XHTML + CSS. Но на деле все не так просто и безоблачно. Однако, можете попробовать сами.

Conditional-CSS

cond

Этот инструмент позволит вам сформировать специальные условные комментарии для различных групп браузеров (в зависимости от движку) или даже для конкретного навигатора. Все что вам нужно это указать какой язык использует ваш сервер и сгенерировать нужный исполняемый файл.

MoreCSS

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

CSS Frame Generator

 

framegen

 

Интересный онлайн-инструмент, который позволяет вам получить исходное древо css-правил извлекая соответствующие атрибуты из загруженной XHTML разметки. И кстати, на странице есть ссылка на обратный генератор.

CSS Redundancy Checker

Инструмент, который позволяет вам найти неиспользуемые на странице css-селекторы в вашем файле стилей.

CleverCSS

Специальное решение для очистки css от «лишних» символов-разделителей. Создателей данной техники во многом вдохновил Python. В итоге вы получаете более чистый и более мощный код, чем CSS2. Вы также можете работать с переменными. Ну и для обработки такого кода, естественно нужен Python.

WordOff

word

WordOff инструмент я очистки кода, который вставляется через WYSIWYG редактор из Word. Например, например удаляются все атрибуты для всех элементов, за исключением <a>, <span> и <div>, пустые элементы удаляются. Есть доступ к API.

Postable

postable

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

Kotatsu

kot

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

htmldevelopertools

devtools

Приятно что в списке заморских сервисов появился и инструмент от нашего разработчика. Я уже писал о нем ранее — это приложение которое позволяет вам изменять css файлы сразу работая с ними в браузере. К сожалению, пока работает только в связке IIS + .NET 3.5

Deploy

deploy

Специальный он-лайн сервис, который вам позволит в два клика собрать дазовый набор файлов для веб-сайта: index-файл с выбранным DOCTYPE, css-файлы, библиотеку jQuery и плагины к ней. После того как вы выберите нужный состав компанентов, все это можно загрузить в архиве.

CSS Evolve

Этот инструмент позволяет вам «играть» с различными стилями и оформлением вашего сайта. Вы просто вводите свой url в поле генератора,а далее ваш сайт загружается в эмулятор и вы можете применять к нему различные эффекты оформления через несколько вариантов работы с потомками главных элементов. В целом для развлечения не плохо, но для работы не очень.

Lorem 2

Еще один инструмент для создания «рыбы». Настроек нет, но есть варианты выбора: длинный текст — короткий текст, длинный список — короткий список. Как по мне, так http://www.lipsum.com/ куда круче…

SelectORacle

Небольшой толковый словарик для пользователей CSS. Правда толкует только на английской, испанском, не совсем полно толкует на немецком и болгарском.

JS Bin


Онлайн приложение для тестирования и отладки, а также совместной работы с JavaScript.

CSS Text Wrapper

tw

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

Writing Tests Against CSS

Трудно проверить CSS автоматически. Размер шрифта не отвечает ожиданиям? Разметка отличается от начального макета? Данный инструмент поможет вам протестировать макет на ранних стадиях проекта и обсудить его. Написан на Python.

CSS Sprite Generator

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

Sky CSS Tool

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

CSS Tidy Online

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

Web-Based Tools for Optimizing, Formatting and Checking CSS

Подборка из нескольких полезный онлайн-инструментов для работы с CSS.

Grid Designer 2.4

mind

Этот онлайн-инструмент позволит вам сгенерировать сетку для вашего макета с произвольным количеством колонок, расстоянием между ними, а также вы можете посмотреть как будут выглядеть основные элементы форматирования текста в данной сетке. И, конечно же, все созданное можно загрузить себе.

Yahoo’s Secret Text-Sprite Generator

Вводите текст в поле, а далее, по нажатию на submit, получаете сгенерированный CSS-спрайт с введенным текстом. Но только латинские символы:(

Replace CSS Colors — Editor

Этот инструмент позволит вам редактировать ваши цветовые схемы не внося правки непосредственно в css-код. Вы просто загружаете свой локальный css-файл, меняете цвета, а сервис выдает вам уже спаленный файл стилей.

The Box Office

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

MinifyMe

min

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

cssdoc

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

CSS Menu Generator

Это онлайн-генератор вертикальных, горизонтальный и выпадающих меню. Доступна различные цветовые вариации, а также кастомизация меню онлайн.

sheetUp — DOM Stylesheet Library

Это специальная библиотека которая призвана упростить работу с большим DOM-tree элементов на странице, посредством манипулирования стилями в document.styleSheets.

CSS SuperScrub

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

DrawAble Markup Language

dra

Drawter Beta 2 дает вам возможность буквально нарисовать код вашего веб-сайта. Она работает в любом браузере, что делает его очень полезным.

Подручные средства для CSS-разработки.

Regex Patterns for Single Line CSS

regex

Не удалось «пощупать» инструмент. Сервер выдал ошибку. Но судя по описанию и картинке — это макрос, который будет очень полезен если вам нужно удалить лишние пустые строки в CSS

21 Excellent Dreamweaver Extensions for CSS Productivity and Standards

Обширный обзор полезный расширений для Dreamweaver. Из описанного 21 расширения 15 бесплатных и 6 платных, но весьма достойных.

Graph Paper

Специальные заготовки линированной бумаги для дизайнеров. Очень полезно, посокльку позволяет делать эскизы проектов на бумаге, но при этом сетка дает возможность учесть точное позиционирование и отступы.

Starter Kit For Developers

Это .psd файл, который включает в себя базовый шаблон с элементами интерфейса, формами, «рыбой» и сектой.

CSSHttpRequest

Встраиваемые в браузер инструменты для работы с CSS

Collection of Web Developer Tools, by Browser

kla

Очень трудно выбрать действительно полезные инструменты для работы CSS. В этой статье перечислены самые лучшие инструменты с описанием и подробностями установки.

Расширения для Firefox

Dust-Me Selectors

Расширение которое позволяет выявить не используемые на странице CSS-селекторы. Все неиспользуемые на данной страницы селекторы собираются в временный список, который потом сверяется с неиспользуемыми селекторами на других страницах сайта, после чего, можноудалять ненужные селекторы.

Aardvark Firefox Extension

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

CSSViewer

Инспектор свойств CSS, который выводит всю информацию об элементе страницы.

Dummy Lipsum

Расширение которое помогает вставить «рыбу» в страницу. Есть возможность генерации простых параграфов или списков, а также вставка в виде текста или html.

Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin

Статья с большим количеством обзоров плагинов для CSS-разработчика.

GridFox

gridfox

Это расширение которое поможет наложить сетку на вашу страницу. Сетка может быть леко адаптирована под нужды именно вашего проекта.

20 Firefox Add-Ons To Enhance Your Web-Development

Еще один обзор расширений для Firefox в помощь разработчику. Среди них представлены: Codetch, Pixel Perfect, Link Checker и ColorZilla.

Коддинг и программирование с CSS

CSS Extra Coda Plug-in

Специальный плагин для редактора CODA (только для Mac), который расширяет возможности работы с CSS.

Edit in Place with JavaScript and CSS

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

Simple CSS

scss

Это бесплатный редактор CSS, который работает под Mac, Windows.

Cssutils

Написанный на Python пак для парсинга и создания CSS.

RESTful CSS

rb

Steve Heffernan предложил новый метод организации работы с CSS. Метод основан на Ruby on Rails. Но вцелом может быть адаптирован и применен в большенстве MVC моделей.

Новые CSS-фреймворки

CSS Drop-Down Menu Framework

Это кроссбраузерный фреймворк который содержит 14 шаблонов выпадающих меню, коорые подвержены дальнейшей кастомизации.

BlueTripCSS Framework

Это новый фрейворк, который соединил в себе лучшее, по заявлениям разработчика, от Blueprint и Tripoli. Фреймворк включает в себя 24-колоночную сетку, типографику, чистые стили форм, стили печати, прикольные иконки, стили для системных сообщений. Лично я скачал и буду смотреть, возможно использую что-то для себя.

Hartija — CSS Print Framework

Это фреймворк, который является очень удачным решением для определения печатных стилей.

AM framework

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

Introducing SenCSS

Чистый, минималистский CSS-шаблон для нового проекта.

Typogridphy

Фреймворк с приятной типографикой.

formy-css-framework

CSS-фреймворк для работы с формами.

emastic

Собственно еще один легкий, но в тоже время функциональный фреймворк.

CSS Bookmarklets

Design Bookmarklet

Мощный и полезный Java Script букмарклет, который содержит утилиты для создания сетки разметки, линейки и пересекающихся линий.

ReCSS: Reload your CSS

Этот небольшой букмарклет позволяет вам легко обновлять CSS. Это весьма полезно, когда вы работаете с динамическими приложениями. Проверено на IE и Firefox.

XRAY

Букмарклет для Internet Explorer 6+ и Webkit-, а также основанных на Mozilla браузерах. Вы можете использовать его чтобы увить боксовую модель (box model) любого элемента на странице.

MRI

укмарклет для Internet Explorer 6+ и Webkit-, а также основанных на Mozilla браузерах. Вы можете использовать его для дебаггинга CSS-селекторов.

CSSFly

Инструмент для редактирования веб-сайта в реальном времени.

15 Must-Have Bookmarklets For Web Designers And Developers

Список из пятнадцати букмарклетов для разработчика. В него в ходят как перечисленные выше, так и другие полезные букмарклеты.

Инструменты для генерации css-разметки

Construct Your CSS

Визуальный редактор для создания базовой разметки на основе Blueprint и jQuery. Вы можете использовать клавиши клавиатуры для создания базовой разметки.

XHTML/CSS Markup Generator

mg

Инструмен который поможет автоматизировать процесс создания базовой XHTML разметки и набора основных CSS-селекторов.

Dynamic Layout Generator

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

iStylr — Online CSS Template Generator

ist

Продвинутый WYSIWIG онлайн CSS-редактор с подсветкой синтаксиса, drag’n’drop-функционалом, импортом / экспортом шаблонов, менеджером изображений, с возможностью использования CSS и визуальным DOM деревом. Для использования нужно зарегистрироваться.

Заготовки CSS-разметок

The Only CSS Layout You Need

Коллекция основных кроссбраузерных разметок.

Faux-Column CSS Layouts

42 шаблона «резиновых» разметок для загрузки. Все разметки валидны по отношению к strict Doctype.

Fixed-Width CSS Layouts

53 шаблона фиксированной разметки. Все разметки валидны по отношению к strict Doctype.

___layouts

Это набор (собственно фреймворк) включающий в себя пять видов разметок, которые могут быть фиксированными или резиновыми. Во многом проект обязан YUI grids.

CSS разметки

100 Free High-Quality XHTML/CSS Templates

Собственно статья где и приведены примеры 100 бесплатных готовых css-шаблонов.

45 Excellent Free Web Templates

Теперь их 45 :)

Вот и все. Все картинки взяты с оригнала статьи на Smashing Magazine.

Для все, кто дочитал до конца — постовой:

Если вам нужен дизайн проект для квартиры, офиса или другого типа помещения, то вам помогут на сайте группы компаний «Жилищный капитал«Мойки для кухни, кухонные раковины, каменные мойки. Каменные мойки, раковины для кухни.

6 комментариев к записи “Невероятная по содержательности и полезности подборка инструментов для верстальщика”

  1. simpreal

    Онлайн генератор CSS спрайтов:
    http://simpreal.org.ua/csssprites

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

    Ответить

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

  • (не будет показан)