Содержание
8Практически всем разработчикам могут понадобиться CSS фреймворки и инструменты, HTML5- ресурсы, JavaScript -интсрументы, веб-редакторы, фреймворки для создания приложений, ресурсы для работы с адаптивным дизайном и т.д. В сегодняшней статье мы немного подобьем итоги 2012 года и рассмотрим самые полезные и интересные ресурсы для веб-разработчиков за этот год.
CSS-фреймворки
Адаптивный CSS фреймворк (стека 960 (макс.) с 12 столбцами), который содержит необходимые файлы и достаточно быстро работает. Он содержит шаблон HTML5 (в том числе JQuery), таблицы стилей с основными стилями (для типографики, цитат, кода, элементов форм, таблиц …), файл по умолчанию Javascript с базой , и, наконец, LESS -файл для настройки вашей таблицы стилей.
Используя Sass 3.2, фреймворк позволяет достаточно быстро и легко создавать адаптивные шаблоны.
Минимальный, но в то же время достаточный адаптивный фреймворк. Включает в себя типографику и различные элементы: формы, кнопки, таблицы, ссылки. Для загрузки доступен готовый CSS-файл, или LESS для разработчиков. Поддерживает Chrome, Firefox, Safari, Opera, IE 8+
RWD Grid — адаптивная система сетки, основана на 960.gs.
Gumby 960 Grid Responsive CSS Framework
Gumby — 960-пиксельная «гибридная» разметка, 12 или 16 колонок, встроенные элементы: формы, кнопки, выпадающие меню и табы. Также доступны Photoshop-шаблоны
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::5
Последняя версия (3), разработана на Sass, позволяет быстро располагать элементы на странице, и предлагающая многоуровневые колонки, может быть адаптирована под любой размер. Разработчики добавили новые элементы, новые возможности, и тонны рационализации.
Gridiculous – A Fully Responsive Grid Boilerplate
Поддерживает ширину страницы от 320 до 1200px. Можно выставить фиксированную максимальную ширину в 960px, 640px, 320px. Также поддерживает вложенные колонки, адаптивные картинки и видео.
Responsive Grid System представляет собой «резиновую» сетку на любое количество колонок — от 2 до 12.
Less+ является расширенной версией Less Framework с разницей в том, что имеет поддержку для Internet Explorer. Это дает возможность дизайнерам и разработчикам создавать веб-сайты, контент которых можно адаптировать в зависимости от разрешения экрана, используя библиотеку JQuery Media Queries.
Чрезвычайно популярный Bootstrap , уже второй версии — это интерфейсный набор инструментов для быстрой разработки веб-приложений. Язык LESS, 12-ти колоночная адаптивная разметка, поддержка мобильных устройств, планшетов и мониторов, множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков, заголовков, меток, иконок, алерты, табы, прогресс-бары, всплывающие подсказки, «аккордеон», «карусель», и так далее, различные Javascript-плагины, поддержка Scaffolding, в том числе применение Bootstrap-стиля к уже созданным HTML.
Wirefy – The Responsive Wireframe Boilerplate
Wirefy — CSS/JS-платформа для быстрого создания адаптивных и кросс-браузерных шаблонов структурных схем таблиц. Платформа включает стили для всех современных элементов веб-дизайна вроде шрифтов, сеток, таблиц, изображений, форм, кнопок, слайд-шоу и многого другого.
Это сетка, разделённая на 12 независимых столбцов, которые в зависимости от размеров экрана либо сжимаются, либо удаляются.
CSS и HTML Инструменты
Adobe Edge Free Web Fonts от Typekit . На данный момент сервис насчитывает около 500 семейств шрифтов.
Css2Less – CSS to LessCSS converter
С его помощью можно конвертировать код CSS в LESS простым копированием текста со стилями. Инструмент основан на использовании библиотеки Ruby css2less.
CSSComb – Sort CSS Properties in a Specific Order
CSSComb — инструмент для сортировки CSS-свойств в рамках каждого селектора по заданному порядку.
Cedvel представляет собой приложение для быстрого проектирования и экспорта собственной системы сетки.
Fontello – Easy Iconic Fonts Composer
Сервис, который позволяет скомбинировать шрифт для любого нужного набора иконок. Выбираем нужные символы, устанавливаем размер и загружаем пакет, в котором содержатся все нужные файлы и примеры использования.
HTML5 предлагает рекомендации по использованию polyfills.
Stitches – An HTML5 Sprite Sheet Generator
Простой в использовании спрайт-лист генератор, написан на HTML5. Просто перетащите файлы с изображением и нажмите кнопку «Создать».
Bootstrap Generator – Twitter Bootstrap Generator
Twitter Bootstrap – это набор инструментов от Twitter (относится к классу инструментов: CSS-фреймворк), созданный для облегчения разработки Web приложений и сайтов. Он включает CSS и HTML для типографии, форм, кнопок, таблиц, сеток, навигации, и много другого. Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров.
С его помощью можно улучшить и оптимизировать CSS-код.
Веб-редакторы и игровые площадки
EpicEditor – An Embeddable JavaScript Markdown Editor
EpicEditor это встроенные Markdown JavaScript-редактор с разделенным полноэкранного редактирования, предварительный просмотр, автоматическое сохранение проекта, форума поддержки, и многих других.
dabblet – A Playground for Testing CSS and HTML
dabblet — интерактивная HTML&CSS3игровая площадка (online редактированиеHTML/CSS). Её основное предназначение — просмотр изменений на лету, сделанных в CSS илиHTML.
CodePen — нашумевший проект Криса Койера. Его можно сравнить с Dribble, только создан он для разработчиков. Здесь вы найдёте лучшие примеры грамотной реализации различных эффектов и можете создать свой проект.
Shiny Demos — большой набор демок, сделанных разработчиками Оперы.
Wireframe-приложения
Moqups – HTML5 App For Creating Wireframes
Moqups является веб-приложением на HTML5 для создания каркасов и макетов.
MockNow – An Online Wireframing Sharing Tool
Онлайн-инструмент для создания вайрфреймов.
Иснтурмент для удобного и быстрого прототипирования интерфейсов. Очень прост в использовании.
Инструменты для адаптивного дизайна
RWD Calculator – Turning Pixels into Percentages
Простой в использовании калькулятор, который поможет легко превратить PSD шаблон в основу для адаптивного сайта. Иными словами, он переводит пиксели в проценты.
Screenqueri.es — бесплатное веб приложение для проверки работы шаблона сайта на экранах различных мобильных устройств. Для проверки шаблона нужно ввести URL сайта , выбрать тип мобильного устройства или установить границы окна просмотра.
responsivepx – Find that Tricky Breakpoint
C помощью Responsivepx можно не только проверить свой сайт (даже локально), но и получить рекомендации, которые можно использовать в media queries для создания адаптивного дизайна.
Gridpak — Ааптивный генератор сетки
С помощью gridpak.com можно в несколько кликов сгенерировать модульную сетку и CSS-фреймворк для адаптивного дизайна вашего проекта.
Bнструмент в виде букмарклета для быстрого тестирования адаптивного дизайна. Вы просто перетаскиваете небольшой инструмент на панель ваших закладок, и он всегда будет у вас под рукой.
Opera Mobile Emulator представляет собой бесплатный эмулятор для тестирования проектов и приложений в мобильной версии Opera на ПК. Он также совмещён с Opera Dragonfly для более продвинутой отладки.
Библиотеки и инструменты Javascript
Croosfilter — это JavaScript библиотека для быстрого анализа больших объёмов данных непосредственно в браузере.
Graphene инстурмент на основе D3 и Backbone.
Foresight.js позволяет определять возможность устройства пользователя просматривать картинки высокого разрешения до момента запроса изображения с сервера.
Javascript Library Boilerplate
С помощью библиотеки javascript Boilerplate вы без труда сможете быстро разработать свою собственную библиотеку.
heatmap.js — это полностью настраиваемая JavaScript библиотека для отрисовки теплокарт на элементахcanvas из HTML5 на основе ваших данных.
Kartograph — фрэймворк для создания интерактивных карт без использования Google Maps или любого другого сервиса для создания карт. Он был создан с учетом потребностей как дизайнеров, так и программистов.
Heyoffline.js является полезным инструментом, который предупреждает пользователей, когда их сеть падает.
batman.js — фреймфорк для создания single-page — приложений. Он был написана в CoffeeScript. Но вы также можете использовать старый добрый JavaScript.
Sigma.js — это javascript-библиотека с открытым исходным кодом, не занимающая много дискового пространства, для построения схем с использованием HTML5 Canvas. Она предназначена для нанесения на веб-страницы статических или динамических, но непременно интерактивных карт сетевых сообществ с любым количеством узлов.
jPages — плагин для нумерации страниц, который дает намного больше возможностей по сравнению с большинством других похожих плагинов.
Smoke.js представляет собой портативную javascript-библиотеку, заменяющую собой весь функционал «маячка» (‘alert’) в стандартной настройке, с более удобным для пользователя набором уведомлений.
Keymaster — простая микро-библиотека, с помощью которой можно добавить клавиатурные сокращения (shortkuts) на любую страничку.
Leaflet представляет собой javascript-библиотеку для создания карт, работающих как в мобильных браузерах, так и в браузерах, установленных на настольном ПК. Посредством очень простого в использовании АПИ и коде, основанном на технологии OOP, библиотека представляет возможности разделения на модули и применения различных расширений.
Stroll.js – это небольшая JS-библиотека, которая позволяет вам создать привлекательные анимации, и применить их к прокрутке. Суть заключается в том, что у вас есть группа пунктов в прокручиваемом списке, и вы используете Stroll.js для того, чтобы сделать прокрутку более привлекательной.
Skrollr – отдельная javascript-библиотека анимации для прокрутки, которая сильно упрощает процесс разработки Parallax-эффекта.
Библиотека для создания интерактивных 2D композиций, применимых как для десктопных, так и для мобильных приложений.
Это javascript-библиотека, которая предоставляет вам больший контроль над кнопками социальных сетей. Она помогает вам сделать так, чтобы социальные виджеты загружались только тогда, как вам это необходимо на конкретных страницах.
Morris.js представляет собой облегченную библиотеку, которая использует Jquery и Raphaël и помогает создавать красивые графики.
dynamo.js помогает добавлять эффекты к содержанию.
Библиотека для работы с адресами. Позволяет как создавать URL, так и получать из них нужные параметры.
JavaScript Console – Debugging JavaScript Tool
JSconsole это простой инструмент для отладки Javascript и удаленной отладки приложений мобильной сети.
Он работает как онлайн, так и оффлайн, и предлагает змеевидных API для создания стилей.
Yeoman инструменты и фреймворки, которые могут помочь разработчикам быстро создавать веб-приложения.
Retina.js является открытым скриптом для работы с изображениями с высоким разрешением для устройств с дисплеями retina .
Автор: Speckyboy Editors
Перевод — Дежурка
