Пользователь
0,0
рейтинг
26 октября 2012 в 15:51

Разработка → Подборка инструментов для эффективной frontend разработки

CSS*
В эту прекрасную пятницу осмелюсь предложить хабрасообществую небольшую подборку приложений, предназначенных для увеличения продуктивности во время работы с фронтэндом. Если ваш любимый апп здесь не представлен — добро пожаловать в комментарии!

Form Builder

image

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



Bootstrap Generator

image

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



Генератор переключателей On/Off

image

Переключатели и тумблеры на чистом CSS. Очень качественно и просто.



Colllor

image

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



Minify and GZip

image

Компрессия для ваших CSS и JavaScript файлов без забот и проблем.



cssUpdater

image

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



CSSComb

image

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



CSS load.net

image

Генератор индикаторов загрузки для AJAX и jQuery. Легок в использовании и кастомизации.



Ribbon Builder

image

Этот тул поможет вам сгенерировать симпатичную ленточку. Ну вы понимаете, что я имею ввиду — они нынче повсюду.



Typecast

image

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



Fontello

image

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



Stitches

image

Удобнейший апп для создания спрайтов. Просто перетаскиваете необходимые изображения, кликаете Generate и получаете sprite sheet. Пока работает только в Chrome Firefox.



Responsive.Is

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



Stylie

image

Хотите легко и непринужденно создавать анимации с CSS? Тогда вам по ссылке. Задаете направление, координаты, смотрите анимацию и скачиваете исходный код.



SpritePad

Еще один инструмент для работы с CSS спрайтами. Тоже drag'n'drop интерфейс, но мне он кажется по-симпатичнее.



Css2Less

image

Если вы любитель препроцессора LESS, то возможно вам будет интересен этот инструмент, конвертирующий из CSS в LESS одним кликом.



ZenBG

image

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



SnipSave

image

Этот сайт предлагает вам хранить все свои CSS сниппеты в одном месте. У себя в библиотеке, то есть. Приятный интерфейс, работается с удовольствием.



Prefixr

Приложение от Jeffrey Way помогает быстро решать проблемы кроссбраузерности. Вы можете писать CSS код только под один браузер, затем пропускать его через Prefixr, и он будет генерировать недостающий код для верного отображения в других браузерах.



HTML5 PLease

image

Можно назвать этот проект онлайн-помощником по HTML5. Сомневаетесь в использовании конкретного нового тега? Сайт подскажет, стоит ли его использовать. И если стоит, то как именно.

Ссылки выбирались по материалам smashinghub, tutsplus, codeschool и собственным предпочтениям
Denis Grammakov @modernstyle
карма
106,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (46)

  • 0
    Спасибо.
  • +11
    Вы compass пробовали? Вещь ведь хорошая, а в Вашем списке нету.
    • 0
      Поддерживаю. А для начала SASS.
  • +1
    Спасибо, много классных фич.
  • +3
    Также может пригодиться Bootstrap Form Builder.
  • +5
    А можно попросить автора сделать ссылки открывающимися в новом окне?
    • 0
      Если хабрапользователи поддержат ваш комментарий, то сделаю конечно
    • +24
      А средняя кнопка мыши у вас сломалась?
      • 0
        У меня на «мыше» посередине колесико: неудобно им щелкать.

        P.S. У меня еще и клавиша Ctrl тоже есть ;) Но по мне удобнее, чтобы ссылки на другие ресурсы открывались с новом окне
        • +4
          Просто это лешит возможности тех, кто хочет открывать в этом окне, это сделать.
        • +1
          неудобно штаны через голову одевать )
          • +4
            • 0
              Точно, блин.
              Стыд мне
            • +1
              «Одеть Надежду, надеть одежду» — я так запомнил :)
        • +1
          Если было бы по вашему, то вы могли бы узреть много недовольных комментариев о том, что автор пытается самостоятельно решить, где у пользователя должна открываться ссылка. Было уже такое на хабре, и не раз.
      • +1
        А у меня трекпад, и для открытия вкладки надо нажимать CMD, а это не так удобно.
        • 0
          У меня тоже, но средняя кнопка есть. Очень удобно.

          // счастливый пользователь thinkpad x220.
        • 0
          А у меня есть ноут. Обычный трекпад. Удар двумя пальцами — открывается в новой вкладке.
    • –8
      А за саму статью однозначный +

      Жаль только, что кармы не хватает для него
      • +16
        БЕГN
  • +1
    Как-бы не хватает еще в списке ссылок на сервисы с иконками, для полноты картины. Но все-равно спасибо, утащил в избранное. =)
  • +3
    Также:
    www.noisetexturegenerator.com/ — генератор «зашумленных» текстур
    subtlepatterns.com/ — подборка фонов.
    github.com/thoughtbot/bourbon — на мой взгляд, более продуманная библиотека с миксинами, чем Compass, да и работает из коробки под Rails.
    cssrefresh.frebsite.nl/ — автообновление css без необходимости релода страницы

    cssUpdater прикольная штука, нет ли чего подобного для Chrome?
  • +3
    css3please.com/ забыли.
  • +2
    Эхх, генераторы, генераторы… Скоро уже и не найдешь теплый ламповый CSS, написанный руками, с нежностью и заботой :)
    • 0
      Лучше всё же less или sass/scss. Он чуть менее «теплый и ламповый», но куда более удобный.
      • 0
        Есть еще GSS
  • +1
    Для хранения сниппетов может подойти Gist.
  • +1
    я здесь ищу иконки:
    www.iconfinder.com/
  • 0
    Что www.zbugs.com/ использует для минимизации можете подсказать?
  • 0
    Ещё вот app.divshot.com недавно вышел в открытую бету.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +3
      Здесь не указано количество, чуть изменён порядок и отсутствует несколько из упомянутых там инструментов %(

      Хотя картинки вставлены ровно те же, что и в той статье. Прямо с того сайта, даже без переноса другому хостеру! :D

      Зато здесь есть подпись «Ссылки выбирались по материалам smashinghub, tutsplus, codeschool и собственным предпочтениям». А, и ещё здесь описания по-русски! Как топик-перевод сошло бы, но точно не с такой подписью…
  • 0
    Добавлю в копилку ссылок: http://jetstrap.com/. Сервис для быстрого прототипирования интерфейсов на Twitter Bootstrap.
  • 0
    Есть еще Sencha Architect (бывший Ext Builder) www.sencha.com/products/architect/
    Это приложение для проектирования форм и интерфейсов на основе ExtJs.
  • +6
    Было плохое настроение.
    Зашел сюда теперь улыбаюсь глупо и куча вкладок)
    • +3
      Разрешите я Вам еще немного вкладок накастую :) www.thetoolbox.cc/
      • +2
        отлично!
      • +4
        Господи да я теперь не просто разработчик! Я теперь все умею.
  • +1
    Yeoman – очень удобный набор инструментов для создания быстрых и надежных приложений.
    Рекомендую!

    (хотя, это не онлайн сервис)

    Из онлайн сервисов – старый добрый JSLint, конечно же :)
  • 0
    Про caniuse.com не забывайте. Аналог html5 please.
  • 0
    Спасибо, хорошая подборка.
  • 0
    Комментарии как обычно, чуть ли не полезнее самой статьи =)
    Спасибо, всем. Мой тулбокс теперь переполнен, даже и не знаешь чем пользоваться.
  • 0
    Glue — удобный инструмент генерации спрайтов (CSS и PNG) для командной строки. Есть куча настроек, поддерживает LESS, написан на питончике, регулярно обновляется.

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