Полезные инструменты для CSS-кодинга

Оригинал: Super useful tools for CSS coding
Автор: Jean-Baptiste Jung
Дата публикации: июль 2013 г.
Перевод: Семененко В.
Дата перевода: август 2013 г.

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

Pure CSS

Pure CSS

Предложенный небезызвестным Yahoo, Pure является набором CSS-модулей, которые можно использовать в качестве основы при создании нового web-проекта. Такой подход делает CSS-разработку более быстрой и легкой, а сам фреймворк в целом выглядит достаточно профессиональным и чистым. Если вы еще ни разу не сталкивались с этим проектом, то мой вам совет - попробуйте!

Более подробная информация находится здесь: http://purecss.io/

CSS only responsive navigation

CSS only responsive navigation

Адаптивные (responsive) HTML-шаблоны на сегодняшний день очень популярны в Интернете. На мой взгляд, это действительно очень хорошая технология. Данный ресурс предоставляет возможность скачивания и дальнейшего использования в качестве шаблона навигационного меню, созданного на чистом CSS.

Более подробная информация находится здесь: http://valdelama.com/css-responsive-navigation

CSS Trashman

CSS Trashman

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

Более подробная информация находится здесь: http://www.csstrashman.com/

Glue

Glue

Вместо того чтобы заставлять браузер поочередно загружать дюжины мелких изображений, можно создать одно большое изображение, которое будет загружено только один раз. И которое будет использоваться в дальнейшем для отрисовки (рендеринга) графики на сайте. Такой метод называется CSS-спрайтами (CSS sprites) и применяется для увеличения скорости загрузки и работы сайта в целом. Инструмент Glue представляет из себя простую утилиту командной строки, которая преобразовывает набор файлов в один целый файл, который можно легко использовать в качестве CSS-спрайта для создаваемого или редактируемого сайта. Крайне полезный инструмент.

Более подробная информация находится здесь: https://github.com/jorgebastida/glue

Helium CSS

Helium CSS

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

Более подробная информация находится здесь: https://github.com/geuis/helium-css

Topcoat

Topcoat

Topcoat представляет из себя очень аккуратную и чистую библиотеку CSS-классов, специализированных для элементов форм: кнопок, слайдеров, чекбоксов и т. п. С помощью этой библиотеки можно за несколько минут создать симпатичный сайт или web-приложение.

Более подробная информация находится здесь: http://topcoat.io/

.Fitgrd

.Fitgrd

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

Более подробная информация находится здесь: http://www.fitgrd.com/

Normalize.css

Normalize.css

Библиотека Normalize.css является HTML5-альтернативой известному "ластику" CSS-reset от Эрика Мейера. С помощью Normalize все браузеры отрисовывают (рендерят) элементы web-страниц более или менее однотипно и максимально приближено к современным стандартам HTML и CSS. Другими словами, стили для HTML-элементов не обнуляются, а делается попытка привести отображение элементов страницы к единообразному типу. Данная библиотека использовалась при создании многих популярных Интернет-ресурсов. Например, таких как Twitter Bootstrap, Soundcloud, TweetDeck.

Более подробная информация находится здесь: http://necolas.github.io/normalize.css/

Bear CSS

Bear CSS

Bear CSS - это не только красивый сайт, но также еще и очень полезный инструмент. Просто создайте HTML-документ и загрузите его на данный ресурс. Bear CSS автоматически сгенерирует файл CSS-стилей на основе используемых в документе HTML-элементов. Прекрасный ресурс для экономии времени!

Более подробная информация находится здесь: http://bearcss.com/

Загляните на досуге

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100