Практически всем разработчикам могут понадобиться CSS фреймворки и инструменты, HTML5- ресурсы, JavaScript -интсрументы, веб-редакторы, фреймворки для создания приложений, ресурсы для работы с адаптивным дизайном и т.д. В сегодняшней статье мы немного подобьем итоги 2012 года и рассмотрим самые полезные и интересные ресурсы для веб-разработчиков за этот год.

 CSS-фреймворки

Base Framework

Адаптивный CSS фреймворк (стека  960 (макс.)  с 12 столбцами), который содержит необходимые файлы и достаточно быстро работает. Он содержит шаблон HTML5 (в том числе JQuery), таблицы стилей с основными стилями (для типографики, цитат, кода, элементов форм, таблиц ...), файл по умолчанию Javascript с базой , и, наконец, LESS -файл для настройки вашей таблицы стилей.

Bourbon Neat

Используя Sass 3.2, фреймворк позволяет достаточно быстро и легко создавать адаптивные шаблоны.

Kube CSS Framework

Минимальный, но в то же время достаточный адаптивный фреймворк. Включает в себя типографику и различные элементы: формы, кнопки, таблицы, ссылки. Для загрузки доступен готовый CSS-файл, или LESS для разработчиков. Поддерживает Chrome, Firefox, Safari, Opera, IE 8+

RWD Grid

RWD Grid — адаптивная система сетки, основана на  960.gs.

Gumby 960 Grid Responsive CSS Framework

Gumby - 960-пиксельная «гибридная» разметка, 12 или 16 колонок, встроенные элементы: формы, кнопки, выпадающие меню и табы. Также доступны Photoshop-шаблоны

Foundation 3

Последняя версия (3), разработана на Sass, позволяет быстро располагать элементы на странице, и предлагающая многоуровневые колонки, может быть адаптирована под любой размер. Разработчики добавили новые элементы, новые возможности, и тонны рационализации.

Gridiculous – A Fully Responsive Grid Boilerplate

Поддерживает ширину страницы от 320 до 1200px. Можно выставить фиксированную максимальную ширину в 960px, 640px, 320px. Также поддерживает  вложенные колонки, адаптивные картинки и видео.

Responsive Grid System

Responsive Grid System представляет собой «резиновую» сетку на любое количество колонок — от 2 до 12.

Less+ Framework

Less+ является расширенной версией Less Framework с разницей в том, что имеет  поддержку для Internet Explorer. Это дает возможность дизайнерам и разработчикам создавать веб-сайты, контент которых можно адаптировать  в зависимости от разрешения экрана, используя библиотеку JQuery Media Queries.

Bootstrap v. 2.0 от Twitter

Чрезвычайно популярный Bootstrap , уже второй версии — это интерфейсный набор инструментов для быстрой разработки веб-приложений. Язык LESS, 12-ти колоночная адаптивная разметка, поддержка мобильных устройств, планшетов и мониторов, множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков, заголовков, меток, иконок, алерты, табы, прогресс-бары, всплывающие подсказки, «аккордеон», «карусель», и так далее, различные Javascript-плагины, поддержка Scaffolding, в том числе применение Bootstrap-стиля к уже созданным HTML.

Wirefy – The Responsive Wireframe Boilerplate

Wirefy — CSS/JS-платформа для быстрого создания адаптивных и кросс-браузерных шаблонов структурных схем таблиц. Платформа включает стили для всех современных элементов веб-дизайна вроде шрифтов, сеток, таблиц, изображений, форм, кнопок, слайд-шоу и многого другого. 

One% CSS Grid

Это сетка, разделённая на 12 независимых столбцов, которые в зависимости от размеров экрана либо сжимаются, либо удаляются.

CSS и HTML Инструменты

Adobe Edge Free Web Fonts

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

Cedvel представляет собой приложение для быстрого проектирования и экспорта собственной системы сетки. 

Fontello – Easy Iconic Fonts Composer

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

HTML5 Please

HTML5 предлагает рекомендации по использованию polyfills. 

Stitches – An HTML5 Sprite Sheet Generator

Простой в использовании спрайт-лист генератор, написан на HTML5. Просто перетащите файлы с изображением и нажмите кнопку «Создать».

Bootstrap Generator – Twitter Bootstrap Generator

Twitter Bootstrap – это набор инструментов от Twitter (относится к классу инструментов: CSS-фреймворк), созданный для облегчения разработки Web приложений и сайтов. Он включает CSS и HTML для типографии, форм, кнопок, таблиц, сеток, навигации, и много другого. Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров.

CSSO (CSS Optimizer)

С его помощью можно улучшить и оптимизировать 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

CodePen — нашумевший проект Криса Койера. Его можно сравнить с Dribble, только создан он для разработчиков. Здесь вы найдёте лучшие примеры грамотной реализации различных эффектов и можете создать свой проект.

Shiny Demos

Shiny Demos - большой набор демок, сделанных разработчиками Оперы. 

Wireframe-приложения

Moqups – HTML5 App For Creating Wireframes

Moqups является веб-приложением на HTML5 для создания каркасов и макетов.

MockNow – An Online Wireframing Sharing Tool

Онлайн-инструмент для создания вайрфреймов.

Wireframe.cc

Иснтурмент для удобного и быстрого прототипирования интерфейсов. Очень прост в использовании.

Инструменты для адаптивного дизайна

RWD Calculator – Turning Pixels into Percentages

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

Screenqueri.es 

Screenqueri.es — бесплатное веб приложение для проверки работы шаблона сайта на экранах различных мобильных устройств. Для проверки шаблона нужно ввести URL сайта , выбрать тип мобильного устройства  или установить границы окна просмотра.

responsivepx – Find that Tricky Breakpoint

C помощью Responsivepx можно не только проверить свой сайт (даже локально), но и получить рекомендации, которые можно использовать в media queries для создания адаптивного дизайна.

Gridpak — Ааптивный генератор сетки

С помощью gridpak.com можно в несколько кликов сгенерировать модульную сетку и CSS-фреймворк для адаптивного дизайна вашего проекта.

Viewport Resizer

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

Opera Mobile Emulator

Opera Mobile Emulator представляет собой бесплатный эмулятор для тестирования проектов и приложений в мобильной версии Opera на ПК. Он также совмещён с Opera Dragonfly для более продвинутой отладки.

Библиотеки и инструменты Javascript

Crossfilter

Croosfilter — это JavaScript библиотека для быстрого анализа больших объёмов данных непосредственно в браузере.

Graphene

Graphene инстурмент на основе D3 и Backbone. 

Foresight.js

Foresight.js позволяет определять возможность устройства пользователя просматривать картинки высокого разрешения до момента запроса изображения с сервера.

Javascript Library Boilerplate

С помощью библиотеки javascript Boilerplate вы без труда сможете быстро разработать свою собственную библиотеку.

heatmap.js

heatmap.js - это полностью настраиваемая JavaScript библиотека для отрисовки теплокарт на элементахcanvas из HTML5 на основе ваших данных.

Kartograph

Kartograph — фрэймворк для создания интерактивных карт без использования Google Maps или любого другого сервиса для создания карт. Он был создан с учетом потребностей как дизайнеров, так и программистов.

Heyoffline.js

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

batman.js

batman.js — фреймфорк для создания single-page — приложений. Он был написана в CoffeeScript. Но вы также можете использовать старый добрый JavaScript.

sigma.js

Sigma.js — это javascript-библиотека с открытым исходным кодом, не занимающая много дискового пространства, для построения схем с использованием HTML5 Canvas. Она предназначена для нанесения на веб-страницы статических или динамических, но непременно интерактивных карт сетевых сообществ с любым количеством узлов.

jPages

jPages — плагин для нумерации страниц, который дает намного больше возможностей по сравнению с большинством других похожих плагинов.

smoke.js

Smoke.js представляет собой портативную javascript-библиотеку, заменяющую собой весь функционал «маячка» ('alert') в стандартной настройке, с более удобным для пользователя набором уведомлений.

Keymaster

Keymaster — простая микро-библиотека, с помощью которой можно добавить клавиатурные сокращения (shortkuts) на любую страничку. 

Leaflet

Leaflet представляет собой javascript-библиотеку для создания карт, работающих как в мобильных браузерах, так и в браузерах, установленных на настольном ПК. Посредством очень простого в использовании АПИ и коде, основанном на технологии OOP, библиотека представляет возможности разделения на модули и применения различных расширений.

stroll.js

Stroll.js – это небольшая JS-библиотека, которая позволяет вам создать привлекательные анимации, и применить их к прокрутке. Суть заключается в том, что у вас есть группа пунктов в прокручиваемом списке, и вы используете Stroll.js для того, чтобы сделать прокрутку более привлекательной.

skrollr

Skrollr – отдельная javascript-библиотека анимации для прокрутки, которая сильно упрощает процесс разработки Parallax-эффекта.

KineticJS

Библиотека для создания интерактивных 2D композиций, применимых как для десктопных, так и для мобильных приложений.

Socialite.js

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

Morris.js

Morris.js представляет собой облегченную библиотеку, которая использует Jquery и Raphaël и помогает создавать красивые графики. 

dynamo.js

dynamo.js помогает добавлять эффекты к содержанию. 

URI.js

Библиотека для работы с адресами. Позволяет как создавать URL, так и получать из них нужные параметры.

JavaScript Console – Debugging JavaScript Tool

JSconsole это простой инструмент для отладки Javascript и удаленной отладки приложений мобильной сети.

Holder.js

Он работает как онлайн, так и оффлайн, и предлагает змеевидных API для создания стилей. 

Yeoman

Yeoman инструменты и фреймворки, которые могут помочь разработчикам быстро создавать веб-приложения.

Retina.js

Retina.js является открытым скриптом для работы с изображениями с высоким разрешением для устройств с дисплеями retina . 

Автор:  Speckyboy Editors

Перевод — Дежурка

 Читайте также: 50 полезных плагинов JQuery 2012 года