Веб-разработчику постоянно необходимо быть в курсе появления новых библиотек и инструментов. Я нашёл и выбрал несколько лучших инструментов для разработки как CSS, так и JavaScript. Это не просто копипаста – это выборка, основанная как на рекомендациях, так и на личном опыте использования.

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

Лучшие инструменты для CSS и JavaScript


1) Fileicone

Сборник 100%-CSS файловых иконок. Может пригодиться для дизайна страниц.

image

2) Marx

Элегантное обнуление CSS безо всякого JavaScript.

image

3) Transformicons

Потрясающие и отлично сделанные анимированные иконки, кнопки и символы, сделанные через CSS и SVG.

image

4) Sanitize.css

Обеспечивает последовательный рендеринг элементов, добавляет возможность использовать стили с обновлениями.

image

5) Loader.css

Удивительный набор быстрых анимаций на чистом CSS

image

6) SassyFlags

Простая библиотека, добавляющая флаги на сайт.

image

7) Primer

CSS-фреймворк, использующийся в работе GitHub.

image

8) Flickity

CSS-библиотека для создания галерей и слайдеров без усилий с вашей стороны.

image

9) Pushy

Адаптивное меню навигации. Использует CSS-трансформации и транзиты.

image

10) CSS Stats

Выводит статистику относительно вашего CSS

image

11) Flexbox

Создание flexbox за 5 минут, используя самые распространённые возможности CSS.

image

12) Flexbugs

Поддерживаемый и обновляемый общественностью список проблем и ошибок, возникающих при создании flexbox.

image

13) cssPlus

Хорошо работающая, быстрая кросс-браузерная раскладка, основанная в основном на Flexbox.

image

14) Flexible.gs

Адаптивный и простой в использовании CSS-фреймворк для создания сеток.

image

15) Rin

Библиотека шаблонов для HTML и SASS на основе gulp.

image

16) Wee

Ещё один лёгкий фреймворк для фронтэнда. Помогает создавать сложные варианты дизайна веб-страниц.

image

17) SpaceBase

Ещё один адаптивный CSS-фреймворк.

image

18) Decorator

Фреймворк сразу для HTML, JavaScript и CSS.

image

19) Rebar

Фреймворк для создания сеток на Sass / Stylus

image

20) Lost

Ещё одна система сеток на основе Stylus, работающая с использованием calc().

image

21) RWDGRID

Система для создания адаптивных сеток, на основе 960grid.

image

22) Manhattann

Простая и понятная настраиваемая система для создания сеток на CSS.

image

Фреймворки для Google Material Design


23) Material

Фреймворк для HTML5 UI, использующий Material Design.

image

24) LumX

Один из первых фреймворков для фронтэнда, основанный одновременно на спецификациях AngularJS и Material Design.

image

25) MUI

Лёгкий фреймворк на основе Material Designs.

image

Всякое разное


26) icono

Отличный набор иконок на чистом CSS

image

27) CSS Gradient Animator

Создаёт красивые анимированные градиенты, при этом работать с ним можно через веб-форму.

image

28) LocalFont

Помогает работать со шрифтами в локальном хранилище localStorage.

image

29) Web Font Load

Простой способ установки Google Web Fonts на OSX.

image

30) ai2html

Скрипт с открытым исходным кодом, превращающий документы Adobe Illustrator в HTML с CSS.

image

Библиотеки и фреймворки JavaScript


31) Marx

CSS-ресет.

image

32) Sprint

Небольшая jQuery-подобная библиотека с акцентом на скорость и минимальное потребление ресурсов (в особенности для смартфонов и планшетов)

image

33) Svidget.js

Фреймворк для создания SVG-виджетов

image

34) Challenger.js

Библиотека для добавления на страницу задачек на JavaScript.

image

35) Verlon.JS

Платформа для удалённой отладки и тестирования JavaScript. Использует node.js и socket.io.

image

36) Layzr.JS

Небольшая независимая библиотека для «ленивой» загрузки.

image

37) Clusterize.js

Небольшой плагин для удобного вывода на страницу больших наборов данных.

image

38) Elevator.js

Забавный плагин для прокрутки страницы обратно к началу.

image

39) egg.js

Плагин для добавления «пасхалок» на страницы.

image

41) epicGrid

Небольшая библиотека для создания адаптивных сеток.

image

42) ramjet.js

Инструмент для плавного визуального преобразования элементов DOM между собой.

image

43) ItemSlide.js

Каруселька с поддержкой сенсорных экранов, простая в реализации.

image

44) Plumin.js

Создание и использование шрифтов.

image

45) smiley.js

Библиотека поворачивает все текстовые смайлики на 90 градусов для комфортного просмотра.

image

46) vivus.js

Библиотека анимации SVG.

image

47) Rimg

Набор инструментов для беспроблемного создания адаптивных страниц с поддержкой media queries.

image

48) Animsition

jQuery плагин для CSS-переходов анимированных страниц.

image

49) Unicoder.js

Плагин преобразует текст в необычный вид при помощи символов Unicode.

image

50) Space.js

HTML и JavaScript библиотека для трёхмерной прокрутки.

image

Комментарии (15)


  1. olegkrasnov
    12.11.2015 09:01
    +17

    От передоза фреймворков в глазах рябит. Marx два раза упомянут. Зачем это всё?


  1. lifestyle
    12.11.2015 10:25
    +35

    50 рандомных инструментов для разработки CSS и JavaScript


    1. lexasss
      12.11.2015 11:00
      +1

      Разработка фронтэнда – штука хитрая.


  1. domix32
    12.11.2015 11:55
    +7

    обнуление CSS безо всякого JavaScript.

    Такие извращенцы вообще существовали?


    1. Apathetic
      12.11.2015 13:13

      Потому что это не обнуление, это микрофреймворк на самом деле.


    1. handymade
      12.11.2015 15:59

      туда же «шаблонов для HTML и SASS на основе gulp»


  1. savostin
    12.11.2015 12:54
    +1

    Хоть бы битые ссылки проверили…


  1. DenimTornado
    12.11.2015 13:02
    +1

    2 и 31 совпадают


  1. sashabeep
    12.11.2015 13:17
    +1

    Некоторые не открываются вообще


  1. KlonD90
    12.11.2015 22:43

    Кто-то этим пользуется? Больше смахивает на кучу бесполезных случайных тулов.


    1. NeXTs_od
      13.11.2015 14:41
      +3

      тот момент когда твою тулу назвали бесполезной :'(


  1. derSmoll
    13.11.2015 15:20

    Это как buzzfeed, но без смешных картинок :(


  1. 776166
    13.11.2015 18:56
    -1

    C каких пор анимация иконок стала частью разработки?


  1. IonDen
    16.11.2015 16:18
    +1

    Подборка местами сомнительная. Гораздо лучше подборка Awesome JavaScript.


  1. leMar
    17.11.2015 22:10

    Серьезно? 7 svg иконок – инструмент? 7(!), Вячеслав!

    PostCSS и gulp, вот и все инструменты которые нужны фронтендеру.