50 ресурсов для веб-разработчиков за 2012 год

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

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

Base Framework

1_web_development_resources_from_20121-590x276

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

Bourbon Neat

2_web_development_resources_from_2012-590x276

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

 

Kube CSS Framework

resp_framework_08

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

RWD Grid

 

resp_framework_09

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

Gumby 960 Grid Responsive CSS Framework

responive_framework_01

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

Foundation 3

::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::5

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

 

Gridiculous – A Fully Responsive Grid Boilerplate

 

responive_framework_07

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

Responsive Grid System

 

responive_framework_08

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

 

Less+ Framework

 

responive_framework_09

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

Bootstrap v. 2.0 от Twitter

responive_framework_a

 

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

Wirefy – The Responsive Wireframe Boilerplate

 

responive_framework_13

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

One% CSS Grid

 

resp_framework_10

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

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

Adobe Edge Free Web Fonts

webapps_d

Adobe Edge Free Web Fonts от Typekit . На данный момент сервис насчитывает около 500 семейств шрифтов.

 

Css2Less – CSS to LessCSS converter

webapps_05

С его помощью можно конвертировать код CSS в LESS простым копированием текста со стилями. Инструмент основан на использовании библиотеки Ruby css2less.

CSSComb – Sort CSS Properties in a Specific Order

webapps_06

CSSComb —  инструмент для сортировки CSS-свойств в рамках каждого селектора по заданному порядку.

Cedvel

new_jquery2_06

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

Fontello – Easy Iconic Fonts Composer

webapps_11

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

 

HTML5 Please

 

webapps_48

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

 

Stitches – An HTML5 Sprite Sheet Generator

 

webapps_16

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

Bootstrap Generator – Twitter Bootstrap Generator

 

webapps_19

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

CSSO (CSS Optimizer)

webdev_res_13

С его помощью можно улучшить и оптимизировать CSS-код.

Веб-редакторы и игровые площадки

EpicEditor – An Embeddable JavaScript Markdown Editor

webapps_25

EpicEditor это встроенные Markdown JavaScript-редактор с разделенным полноэкранного редактирования, предварительный просмотр, автоматическое сохранение проекта, форума поддержки, и многих других.

 

dabblet – A Playground for Testing CSS and HTML

 

webapps_28

dabblet  — интерактивная HTML&CSS3игровая площадка (online редактированиеHTML/CSS). Её основное предназначение — просмотр изменений на лету, сделанных в CSS илиHTML.

CodePen

webapps_30

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

Shiny Demos

webapps_50

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

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

Moqups – HTML5 App For Creating Wireframes

webapps_31

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

 

MockNow – An Online Wireframing Sharing Tool

 

webapps_51

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

Wireframe.cc

wireframe_01

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

 

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

RWD Calculator – Turning Pixels into Percentages

webapps_33

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

Screenqueri.es 

webapps_34

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

responsivepx – Find that Tricky Breakpoint

 

webapps_35

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

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

webapps_36

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

Viewport Resizer

new_jquery2_11

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

 

Opera Mobile Emulator

 

webdev_res_41

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

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

Crossfilter

webdev_res_15

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

Graphene

webdev_res_14

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

Foresight.js

webdev_res_18

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

 

Javascript Library Boilerplate

 

new_jquery2_07

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

heatmap.js

webdev_res_21

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

Kartograph

webdev_res_22

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

Heyoffline.js

new_jquery2_05

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

batman.js

new_jquery2_09

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

sigma.js

webdev_res_23

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

jPages

webdev_res_26

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

smoke.js

webdev_res_29

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

Keymaster

webdev_res_30

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

Leaflet

webdev_res_31

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

stroll.js

webdev_res_32

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

skrollr

webdev_res_34

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

KineticJS

webdev_res_38

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

Socialite.js

webdev_res_40

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

Morris.js

webdev_res_42

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

dynamo.js

webdev_res_43

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

URI.js

webdev_res_48

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

JavaScript Console – Debugging JavaScript Tool

webapps_18

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

Holder.js

new_jquery2_12

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

Yeoman

new_jquery2_13

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

Retina.js

webdev_res_49

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

 

Автор:  

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