Полезное

50 бесплатных веб-инструментов для фрилансера. Часть 1 - HTML, CSS и Sass

Автор: Елизавета Гуменюк Рейтинг топика: +4
Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!

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

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

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

Здесь вы найдете подборку лучших веб-инструментов в следующих категориях:

  • HTML,CSS иSass
  • JavaScript
  • Инструменты дизайна
  • RWD и Mobile
  • SVG и другие


HTML, CSS и Sass инструменты

01. ai2html


Это свободный скрипт, который преобразует ваши документы Ilustrator в HTML и CSS. Он является очень мощным и полезным инструментом для дизайнеров, которые работают в Adobe Illustrator. Это файл JavaScript, который вы можете скачать и поместить в папку скриптов вашего установщика  Illustrator.
 

02. PostCSS

Сообщество PostCSS набирает обороты и неуклонно растет. Это инструмент JavaScript плагинов, который поможет вам воспользоваться последними стандартами и преимуществами в разработке CSS.
 

03. Autoprefixe

Вы еще не пишете CSS префиксы вручную, да? Храните ваши файлы разработки чистыми и пусть Autoprefixer (ныне PostCSS плагин) делает тяжелую работу за вас, как часть процесса разработки.
 

04. UIkit


В то время как Bootstrap и Foundation являются явными победителями популярности в области фреймворков, UIKit – это инструмент, заслуживающий внимания. Особенно вас приятно удивят его основные функции и компоненты интерфейса.
 

05. AniCollection

AniCollection — это библиотека CSS-анимации. Программа имеет интерфейс, который позволяет легко добавлять анимацию к вашей коллекции и быстро захватить необходимый код HTML, CSS или JavaScript, чтобы реализовать его в вашем проекте. Вы даже можете отправить свой собственный код.
 

06. Brick

Библиотека пользовательского интерфейса Mozilla, на основе новых стандартов веб-компонентов. Она включает в себя календарь, форму, которая может быть подключена к компонентам IndexedDB, в Тabbar и многое другое.
 

07. HTML_CodeSniffer

Вы, наверное, знакомы с основами HTML и проверкой CSS. Этот инструмент предназначен специально для тестирования доступности, и вы можете использовать его непосредственно через сайт, или как букмарклет. Он проверит ваш HTML в отношении WCAG 2.0 Level A, AA, AAA и соответствия Section 508.
 

08. HTMLHint

Линтинг медленно обогнал проверку в важности. Этот инструмент имеет несколько вариантов и позволяет вам анализирует процесс через предупреждения и ошибки в коде.
 

09. DomFlags


Расширение Chrome, которое оставляет ваши отмеченные элементы DOM, используя атрибут domflags. Когда вы открыли DevTools, первые помеченные элементы будут автоматически проверены, а сочетания клавиш могут быть использованы для перехода через флаги.
 

10. Susy

Набор инструментов макета, основанный на Sass, который получил популярность в течение последнего года или около того. У него сильное сообщество и предлагает множество настраиваемых функций, чтобы удовлетворить потребности любого проекта.
 

11. Critical

Вы получили напоминание? Встроенный CSS является обязательным требованием для хорошей производительности. Critical от Адди Османи доступен как плагин Grunt, а вместе со скриптом loadCSS это отличный вариант для извлечения и загрузки ваших стилей страницы «выше сгиба».
 

12. Shoelace

Shoelace является простой в использовании визуальной сеткой строительства Bootstrap 3. Среди его особенностей отзывчивые изображения медиа-запросов и полностью функциональный предварительный просмотр.
 

13. Sass Lint

Качественный инструмент  для кодов Sass или SCSS, основанный на узлах. Он доступен в качестве плагина Grunt или Gulp. Sass Lint особенно отлично подходит для начинающих, которые не слишком хорошо знакомы с лучшей практикой Sass.

Продолжение следует…

Источник

 

  • 6227