войти зарегистрироваться

Каскадные Таблицы Стилей whois

индекс
230,41

Инструменты css, экономящие ваше время

Вольно-сокращенный перевод статьи 15 Time Saving CSS Tools You Should Be Aware Of
Под катом текст, графика, ссылки

CSS Typeset
image
CSS Typeset является удобным инструментом, позволяющим тестировать различные стили шрифта. В итоге вы получите код CSS для выбранного стиля шрифта, который можно использовать в стилевом файле.
csstypeset.com/

TypeTester
image
TypeTester похож на CSS Typeset, но при этом, вы можете одновременно сравнить три разных стиля шрифта и выбрать тот, который вы сочтете подходящим для использования в вашем проекте. Она также позволяет определить базовый размер шрифта, чтобы настроить em.
www.typetester.org/

CSS Frame Generator
image
CSS Frame Generator создает пустой шаблон CSS для HTML элементов. Просто скопируйте вставьте содержимое XHTML и создаданный CSS, в дальнейшем вы можете сколько угодно раз кастомизировать данный участок стиля (используя уже созданный, но пустой шаблон).
lab.xms.pl/css-generator/

CSS Grid Builder
image
С помощью CSS Grid Builder, вы можете быстро создать CSS шаблон, совместимый со стандартами. Он использует YUI Grids CSS framework, который поддерживает более 1000 видов макетов.
developer.yahoo.com/yui/grids/builder/

YAML Builder
image
YAML Builder это еще один инструмент создания макета, который использует YAML framework.
builder.yaml.de/

Spiffy Corners
image
Spiffy Corners позволяет создавать закругленные углы без каких-либо изображений. С помощью всего нескольких кликов вы можете добавить приятные глазу округлости ( :) прим.) на веб-страницу.
www.spiffycorners.com/

Kotatsu
image
Котацу позволяет легко и быстро создать HTML-таблицы и добавить CSS классы строк, столбцов и ячеек.
www.askthecssguy.com/kotatsu

Format CSS
image
С FormatCSS, вы можете загрузить свой CSS код и выбрать один из вариантов форматирования кода. Например, вы можете преобразовать компактный код CSS в читаемую форму с соответствующими переводами срок и отступов или наоборот — сделать его малочитаемым.
www.lonniebest.com/FormatCSS/

Dust-Me Selectors
image
Dust-Me Selectors (Firefox аддонн) анализирует содержание открытой веб-страницы и ее CSS код, выявляя неиспользуемые стили.
https://addons.mozilla.org/en-US/firefox/addon/5392

CSS Optimizer
image
CSS Optimizer — инструмент для оптимизации размера файла CSS файлов. Она извлекает лишние символы из CSS файла значительно уменьшить размер файла.
www.cssoptimiser.com/

CSS Redundancy Checker
image
CSS Redundancy Checker ищет стили CSS, которые уже не используются на ваших веб-страницах, так что вы можете удалить их из таблицы стилей CSS, тем самым уменьшить размер файла.
services.immike.net/css-checker/
+65
23 декабря 2009, 21:34
doctorgrif

комментарии (58)

  • полезно
    • аха, полезно… прямо почти как ваш комментарий (:
      • Не понимаю в чём проблемма с этим коментом. Это фидбек автору статьи.
        Гораздо менее полезные хохмы в комментариях набирают на Хабре горы плюсов, но это никого не беспокоит.
  • добавил пару закладочек, спасибо
  • Можете перенести в блог CSS, только у меня сейчас не работает картинка у Dust-Me Selectors
    • спасибо, перенесу (только с дежурства приехал)
      а картинка не отображается потому, что я сглупил:)
      сейчас исправлю
  • Спасибо, с закругленными краями понравилось. А вот в Kokatsu ничего интересного не увидел
    • des
    • des
    • 23 декабря 2009, 23:53
    • #
      • +6
    возможно банально, но мне часто весьма помогает firebug в firefox, когда тестируешь какие то небольшие изменения в css. изменения видно сразу.
    • согласен с данным утверждением, но иногда хочется разнообразия (как в сексе)
  • CSS Frame Generator. Это оно.
    Давно были мечтал о реализации именно такой штуки.
    Теперь буду мечтать о таком плагине к notepad++
  • Автору огромное спасибо, особенно за Grid Bilder! Добавил в закладки!
  • В избранное. Сам пользуюсь YAML-builder, очень доволен
  • Спасибо
  • полезность последнего сервиса несколько сомнительна: нам нужна полная структура стилей для сайта, а не проверка для «пары страниц»
    • для сайтов, созданных на %cms% зачастую этого будет довольно — структура вывода для превью-категория-раздел-блог-таблица-etc более-менее идентична по всему сайту
      • для сайтов, созданных на %cms%, такое обычно не нужно: владельцы не могут ничего толком поменять. Шаблоны ведь пишут сторонние разработчики, которым такая тулза не поможет.
        • поможет тем, кого владельцы наймут/попросят/заставят «приглядывать» за сайтом и, вдруг, узнав про то, что можно оптимизировать (и где они такие слова-то вычитывают) — напрягут:)
  • Новогодняя минусятинка?
    • Вытаскивайте их всех обратно.
      • я пытался, силы неравны
        • Посмотрите, ведь уже лучше.
          • топик добра, плюсую все!
  • www.spry-soft.com/grids/ ничего лишнего
  • Мне одному кажется, что обзор «Инструменты css, экономящие время» должен начинаться
    1. Firebug аддон к Firefox.
    Ну и остальные 15 инструментов, которые могут помочь :-)
    • я всегда считал, что Firebug/FireQuery должны стоять по-умолчанию в Firefox :) и, дабы не плодить их описания и скриншоты, не стал включать в этот скромный и не достойный внимания «зубров» обзорчик, ориентированный на нас, недостойных дышать одним воздухом с Великими. :)
      • Ну а новички почитают и не будут знать главного :-)
        • воспользуются прекрасной возможностью освоить поиск на Хабре, заодно еще много нового узнают
    • А причем здесь firebug?
      • надо спросить у автора комментария:)
      • Топик называется «Инструменты css, экономящие ваше время»
        • Я вижу :) Причем здесь firebug?
        • Firebug может сгенерить css-сетку? или может выполнить задачи YAML Builder'а? Это мощный отладчик и dom-инспектор, но никак не инструмент созидания.
          • Firebug — инстрмент номер 1, который при работе с CSS и экономит время.
            Не намерен с вами спорить. Чтобы не возникало вопросов в названии топика надо бы уточнить «для начинающих», «для ленивых», «для чайников» или т.п.
            • Firebug — инстрмент номер 1, который при работе с CSS и экономит время.

              Скорее так:
              Firebug — инструмент номер 1, который при отладке CSS экономит время.
              • вы зануда :)
                • эх… знаю, знаю… )
  • Так и не смог «оседлать» YAML Builder, ИМХО оставляет много лишнего кода и сам билдер как динозавр.
    Частенько пользуюсь TypeTester, великолепная тулза ) и простая как две копейки. В сочетании с кулером от адоба, в два счёта готовы стили с прекрасными цветовыми палитрами :)
  • Пользуюсь css-фреймворком Blueprint и классной тулзой для создания сетки и элементов — Boks.
    Также для blueprint'а есть просто незаменимые темплейты для фотошопа и иллюстратора — здесь и здесь (с горизонтальными гайдами).
    • большое спасибо за темплейты!
      • Всегда пожалуйста. Но истинный создатель здесь — twitter.com/konigi
        • второй спасибо — подписался! :)
    • Вопрос: А почему именно Blueprint? Почему не 960.gs, YUI Grids или какой другой CSS framework?
      На чем основан Ваш выбор?
      Потому как сейчас немного озадачен с выбором фреймворка на будущий проект, в котором, кроме огромного кол-ва форм с галочками/кнопочками, ничего не будет.
      • Blueprint вроде как попроще, да и документация пожирней. В blueprint'е можно легко переконфигурировать сетку без лишних телодвижений. 960.gs вроде как один парень разрабатывает, а blueprint'ом занимается огромное комьюнити. YUI Grids не юзал, не знаю.
        • Спасибо, хороший ответ :)
  • Мне это очень напоминает сборник студенческих курсовиков.
    Действительно лучшее это FireBug для FF и инструменты разработчика из Google Crome(в Dev версии).

    Действительно стоящими GUI/Code редакторами я бы назвал: Dreamviewer, Namo Web Editor(в пакет входит очень хороший векторный графический редактор с возможностью генерации SVG) — с ними я работал лет 5 назад, а из последних MS Expression Web(в прошлом году подарили) очень приятная программка.
    • А как мне быть, если мне Dreamviewer, к примеру, не нравится? Субъективно и без логической подоплеки.
      Скорее всего у каждого из нас есть свои предпочтения GUI/Code редакторах, который готовы отстаивать с пеной у рта. Я и не ставил перед собой цель перетянуть народ с Notepade на Notepade++ (я условно) — просто предложил выбор (который гарантирован нам Конституцией РФ :) ).
      Кто-то, попробовав, оставит в закладках, кто-то забудет как страшный сон, но будет выбор:)
      • Я сторонник полноценных IDE, когда достаточно одного средства разработки, а не использования кучи разноименного ПО. Если вам не нравится Dreamviewer(Мне он так же не нравится «Субъективно и без логической подоплеки»), я привел в пример еще 2 редактора. Сам я сейчас использую Notepad/gedit, Eclipse и Chrome/Chromium.
        • каждому свое:)
          мне удобнее в PotoShop или Painter рисовать, а код писать в geany (ну мне удобнее, что поделать)
    • Коренное отличие представленных сервисов в том, что они генерируют код, а FB этого не делает. Т.е. FB-гу суждено вступать в дело уже после них.
      • Я думаю вы просто не все знаете о FB. При том автоматизация генерации кода это не большой плюс. При хорошем знании CSS, быстрее и качественнее сделать все вручную, прибегнув к помощи автокомплита для исключения ошибок. Позже свой код будет легче редактировать, нежели генерированный.
    • причем тут фаербаг вообще? в статье совершенно другой класс сервисов описан
  • Отличная подборка, спасибо.
  • Я не пользуюсь и не собираюсь пользоваться всякими гридами, темплэйтами и т.п. Т.к. считаю, что свой код получается лучше, чище и меньше. И меня не доставляют подобные классы class='w50 rt5 c7 h1 s12'. Но мне все-таки хотят подсунуть какой-нибудь css фреймворк, чтоб я верстал на нем. У меня есть несколько своих заготовок. И да, я еще не пользуюсь обнулением стилей, т.к. считаю глупым делом сначала всё обнулять, а потом опять заново всем задавать отступы. Я один такой?
    • Не один, но у тебя есть серьезный просчет. Не использование классов подобных class='w50 rt5 c7 h1 s12' значит не использование всех возможностей каскадных стилей. Такие классы очень полезны при JS обработке и увеличивают скорость работы при динамическом изменении стилей.
  • За Spiffy спасибо
  • Format CSS — супер, наконец можно будеть не ломать глаза в чужом коде)
  • только хотел добавить первую ссылочку в избранное, а она уже есть :) Вообще клевые сайты. Теперь каждый лентяй может сверстать в css :)
  • Есть такая тулза, как CSS Selector Shell — показывает, как «парсятся» стили для конкретного браузера.
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.