Вольно-сокращенный перевод статьи 15 Time Saving CSS Tools You Should Be Aware Of
Под катом текст, графика, ссылки
CSS Typeset
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/829/298/afd/829298afd7381207a410ccfd6eb583b6.png)
CSS Typeset является удобным инструментом, позволяющим тестировать различные стили шрифта. В итоге вы получите код CSS для выбранного стиля шрифта, который можно использовать в стилевом файле.
csstypeset.com
TypeTester
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/762/5b2/9d3/7625b29d391a879f5594fd8371159d1d.jpg)
TypeTester похож на CSS Typeset, но при этом, вы можете одновременно сравнить три разных стиля шрифта и выбрать тот, который вы сочтете подходящим для использования в вашем проекте. Она также позволяет определить базовый размер шрифта, чтобы настроить em.
www.typetester.org
CSS Frame Generator
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/661/4ad/44f/6614ad44f3911708f8c12700512479a3.jpg)
CSS Frame Generator создает пустой шаблон CSS для HTML элементов. Просто скопируйте вставьте содержимое XHTML и создаданный CSS, в дальнейшем вы можете сколько угодно раз кастомизировать данный участок стиля (используя уже созданный, но пустой шаблон).
lab.xms.pl/css-generator
CSS Grid Builder
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/8ed/5c5/fc2/8ed5c5fc2185f7f05bd2715b833fe0a2.png)
С помощью CSS Grid Builder, вы можете быстро создать CSS шаблон, совместимый со стандартами. Он использует YUI Grids CSS framework, который поддерживает более 1000 видов макетов.
developer.yahoo.com/yui/grids/builder
YAML Builder
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/da5/a02/c05/da5a02c05398a37f97923929aa473f3e.jpg)
YAML Builder это еще один инструмент создания макета, который использует YAML framework.
builder.yaml.de
Spiffy Corners
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/565/b7d/c37/565b7dc37b0e3f03e40fd59cea7ef2ea.jpg)
Spiffy Corners позволяет создавать закругленные углы без каких-либо изображений. С помощью всего нескольких кликов вы можете добавить приятные глазу округлости ( :) прим.) на веб-страницу.
www.spiffycorners.com
Kotatsu
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/8ec/c52/1bf/8ecc521bf5aa14008012894c0f086b56.png)
Котацу позволяет легко и быстро создать HTML-таблицы и добавить CSS классы строк, столбцов и ячеек.
www.askthecssguy.com/kotatsu
Format CSS
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/b00/a1a/a09/b00a1aa097884a7c328f66a1e3fb186c.png)
С FormatCSS, вы можете загрузить свой CSS код и выбрать один из вариантов форматирования кода. Например, вы можете преобразовать компактный код CSS в читаемую форму с соответствующими переводами срок и отступов или наоборот — сделать его малочитаемым.
www.lonniebest.com/FormatCSS
Dust-Me Selectors
![image](https://habrastorage.org/getpro/habr/post_images/aa5/a99/a8e/aa5a99a8eafdc33963b318a528cf0784.gif)
Dust-Me Selectors (Firefox аддонн) анализирует содержание открытой веб-страницы и ее CSS код, выявляя неиспользуемые стили.
addons.mozilla.org/en-US/firefox/addon/5392
CSS Optimizer
![image](http://www.cssoptimiser.com/images/online_css_optimizer_logo.png)
CSS Optimizer — инструмент для оптимизации размера файла CSS файлов. Она извлекает лишние символы из CSS файла значительно уменьшить размер файла.
www.cssoptimiser.com
CSS Redundancy Checker
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/d65/b0d/eb3/d65b0deb3b82b22630d45ff6eab1b353.png)
CSS Redundancy Checker ищет стили CSS, которые уже не используются на ваших веб-страницах, так что вы можете удалить их из таблицы стилей CSS, тем самым уменьшить размер файла.
services.immike.net/css-checker
Под катом текст, графика, ссылки
CSS Typeset
![image](https://habrastorage.org/getpro/habr/post_images/829/298/afd/829298afd7381207a410ccfd6eb583b6.png)
CSS Typeset является удобным инструментом, позволяющим тестировать различные стили шрифта. В итоге вы получите код CSS для выбранного стиля шрифта, который можно использовать в стилевом файле.
csstypeset.com
TypeTester
![image](https://habrastorage.org/getpro/habr/post_images/762/5b2/9d3/7625b29d391a879f5594fd8371159d1d.jpg)
TypeTester похож на CSS Typeset, но при этом, вы можете одновременно сравнить три разных стиля шрифта и выбрать тот, который вы сочтете подходящим для использования в вашем проекте. Она также позволяет определить базовый размер шрифта, чтобы настроить em.
www.typetester.org
CSS Frame Generator
![image](https://habrastorage.org/getpro/habr/post_images/661/4ad/44f/6614ad44f3911708f8c12700512479a3.jpg)
CSS Frame Generator создает пустой шаблон CSS для HTML элементов. Просто скопируйте вставьте содержимое XHTML и создаданный CSS, в дальнейшем вы можете сколько угодно раз кастомизировать данный участок стиля (используя уже созданный, но пустой шаблон).
lab.xms.pl/css-generator
CSS Grid Builder
![image](https://habrastorage.org/getpro/habr/post_images/8ed/5c5/fc2/8ed5c5fc2185f7f05bd2715b833fe0a2.png)
С помощью CSS Grid Builder, вы можете быстро создать CSS шаблон, совместимый со стандартами. Он использует YUI Grids CSS framework, который поддерживает более 1000 видов макетов.
developer.yahoo.com/yui/grids/builder
YAML Builder
![image](https://habrastorage.org/getpro/habr/post_images/da5/a02/c05/da5a02c05398a37f97923929aa473f3e.jpg)
YAML Builder это еще один инструмент создания макета, который использует YAML framework.
builder.yaml.de
Spiffy Corners
![image](https://habrastorage.org/getpro/habr/post_images/565/b7d/c37/565b7dc37b0e3f03e40fd59cea7ef2ea.jpg)
Spiffy Corners позволяет создавать закругленные углы без каких-либо изображений. С помощью всего нескольких кликов вы можете добавить приятные глазу округлости ( :) прим.) на веб-страницу.
www.spiffycorners.com
Kotatsu
![image](https://habrastorage.org/getpro/habr/post_images/8ec/c52/1bf/8ecc521bf5aa14008012894c0f086b56.png)
Котацу позволяет легко и быстро создать HTML-таблицы и добавить CSS классы строк, столбцов и ячеек.
www.askthecssguy.com/kotatsu
Format CSS
![image](https://habrastorage.org/getpro/habr/post_images/b00/a1a/a09/b00a1aa097884a7c328f66a1e3fb186c.png)
С FormatCSS, вы можете загрузить свой CSS код и выбрать один из вариантов форматирования кода. Например, вы можете преобразовать компактный код CSS в читаемую форму с соответствующими переводами срок и отступов или наоборот — сделать его малочитаемым.
www.lonniebest.com/FormatCSS
Dust-Me Selectors
![image](https://habrastorage.org/getpro/habr/post_images/aa5/a99/a8e/aa5a99a8eafdc33963b318a528cf0784.gif)
Dust-Me Selectors (Firefox аддонн) анализирует содержание открытой веб-страницы и ее CSS код, выявляя неиспользуемые стили.
addons.mozilla.org/en-US/firefox/addon/5392
CSS Optimizer
![image](http://www.cssoptimiser.com/images/online_css_optimizer_logo.png)
CSS Optimizer — инструмент для оптимизации размера файла CSS файлов. Она извлекает лишние символы из CSS файла значительно уменьшить размер файла.
www.cssoptimiser.com
CSS Redundancy Checker
![image](https://habrastorage.org/getpro/habr/post_images/d65/b0d/eb3/d65b0deb3b82b22630d45ff6eab1b353.png)
CSS Redundancy Checker ищет стили CSS, которые уже не используются на ваших веб-страницах, так что вы можете удалить их из таблицы стилей CSS, тем самым уменьшить размер файла.
services.immike.net/css-checker