Архив метки: инструменты

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

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

Pure CSS

pure-css

Pure – это набор CSS-модулей, разработанных компанией Yahoo, которые вы можете использовать как основу в любом веб-проекте. Фреймворк значительно облегчает CSS-разработку и если вы о нем еще не слышали, самое время попробовать.

Больше информации: http://purecss.io/

CSS only responsive navigation

navigation

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

Больше информации: http://valdelama.com/css-responsive-navigation

CSS Trashman

css-trashman

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

Больше информации: http://www.csstrashman.com/

Glue

glue

Вместо того чтобы грузить множество маленьких картинок, гораздо лучше использовать одну большую картинку и технику CSS-спрайтов. Glue – это простой, запускающийся из командной строки, инструмент, который соединяет набор картинок в один файл. Так что вы легко можете использовать CSS-спрайты на своем сайте. Очень удобно.

Больше информации: https://github.com/jorgebastida/glue

Helium CSS

helium

Очень часто в больших CSS-файлах остаются неиспользуемые стили, которые, к сожалению, не так уж просто обнаружить. Helium  — это, запускаемый в браузере, JavaScript-инструмент, определяющий неиспользуемые стили из вашего CSS-файла.

Больше информации: https://github.com/geuis/helium-css

Topcoat

topcoat

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

Больше информации: http://topcoat.io/

.Fitgrd

fitgrd

.Fitgrd – это прочный фундамент для создания собственного адаптивного сайта. Все в ваших руках, кроме сетки, о ней позаботиться.Fitgrd, сэкономив вам кучу времени на написание несущественного кода.

Больше информации: http://www.fitgrd.com/

Normalize.css

normalize

Normalize.css  это HTML5-альтернатива CSS-сбросам.  Он заставляет браузер отрисовывать все элементы более согласованно и в соответствии с современными стандартами. Normalize.css используется множеством популярных сайтов, таких как Twitter Bootstrap, Soundcloud, TweetDeck и многих других.

Больше информации: http://necolas.github.io/normalize.css/

Bear CSS

bear

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

Больше информации:  http://bearcss.com/

Перевод статьи “Super useful tools for CSS coding”, автор Jean-Baptiste Jung.

Инструменты для тестирования и отладки в IE

Очень часто, при разработке проекта, его тестирование в Internet Explorer откладывают до последнего. И это вполне нормально, если ваши проблемы в основном связаны с версткой страницы.

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

Меркуриал. Разрешение конфликтов

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

Создание прототипа с помощью CSS-фреймворка Grid 960

Grid 960 — это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты.

Звучит отлично, но как это делается? В интернете есть большое количество статей, агитирующих за и против использования CSS-фреймворков, но нет ничего в помощь неопытным читателям. Поэтому в сегодняшней статье мы рассмотрим процесс создания прототипа. Как обычно, можете сразу взглянуть на результат. Читать далее Создание прототипа с помощью CSS-фреймворка Grid 960

10 лучших CSS-редакторов

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

Основы Меркуриала: объединение работы

zmey «Одна голова — хорошо, а две лучше». Эта пословица как нельзя лучше походит к теме сегодняшней статьи о Меркуриале. После изучения в предыдущей статье базовых приемов и команд, необходимых для начала работы с Меркуриалом, мы перейдем к более углубленному изучению, и рассмотрим сегодня некоторые детали совместной работы, с использованием системы контроля версий.

Во второй главе, мы научились клонировать репозитории, делать изменения, а также заливать произведенные изменения из одного репозитория в другой. Теперь настало время для следующего шага – слияния изменений из различных репозиториев. Читать далее Основы Меркуриала: объединение работы

WordPress. Обзор фреймворков

theme_frameWordPress-фреймворк это обычная WordPress-тема, разработанная в качестве гибкой основы, служащая родительской темой, для создания дочерней темы. Хотя еще не все оценили фреймворки по достоинству, они все равно приносят большую пользу WordPress-сообществу, посредством качественного кода и большим количеством дочерних тем.

Существует ряд причин, по которым вам стоит использовать WordPress-фреймворк Читать далее WordPress. Обзор фреймворков

Введение в Mercurial. Основы

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

Ну а если вы уже знаете что такое Меркуриал, и немного умеете с ним работать, пришло время познакомиться с ним поближе, и начнем мы сегодня с освоения командной строки и базовых команд Меркуриала. Эта статья является неполным переводом 2 главы книги Bryan O’Sullivan «Mercurial: The Definitive Guide» Читать далее Введение в Mercurial. Основы

10 полезных расширений для улучшения Firebug

Firebug – революционное расширение для Firefox, помогающее веб-разработчикам и дизайнерам тестировать и инспектировать код.  Он содержит множество полезных функций, таких как консоль для отображения информации, DOM-инспектор, детальную информацию об элементах на странице и многое другое.

И хотя firebug и так включает в себя всю нужную функциональность, несколько сторонних расширений для него, могут улучшить и без того полезный инструмент. В этой статье вы найдете 10 лучших расширений Firefox для Firebug, которые помогут облегчить жизнь, как дизайнера, так и разработчика. Читать далее 10 полезных расширений для улучшения Firebug

Инструменты верстальщика

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