TACHYONS — отличный инструмент для создания красивых, отзывчивых и читаемых интерфейсов

У него есть сразу несколько методов для настройки: API, работа с CSS-переменными и изменения в theme.js

Используя их, TACHYONS позволяет создавать быстро загружающиеся, хорошо читаемые и на 100% отзывчивые интерфейсы. При этом используя как можно меньше CSS

Стоимость: #бесплатно

#css #web

SVG Generator — простенький инструмент для генерации волнистых html-элементов

Их можно использовать для симпатичных переходов между разделами на сайте

Делается всё максимально просто — необходимо лишь «взять» красные маркеры и создать с их помощью кривую, которая вам понравится

Стоимость: #бесплатно

#web #html #svg

Styled components — одно из популярных решений для написания кода методом CSS in JS

Инструмент лишает вас необходимости использовать className, при этом появляется простая динамическая стилизация и StylisJS «под капотом»

С основами Styled components вас познакомят на главной странице проекта. А дальнейшее его изучение можно пройти с помощью приятной официальной документации

Стоимость: #бесплатно

#css #js #web

Site palette — браузерное расширение для создания комплексных палитр

С его помощью можно буквально в пару кликов выгрузить цветовую схему нужного сайта. Незаменимый инструмент для дизайнеров и frontend-разработчиков

Стоимость: #бесплатно

#web #расширение #цвета

Stripo — бесплатный конструктор шаблонов электронной почты

С его помощью можно достаточно легко создать профессиональные и отзывчивые электронные письма. Что самое приятное — нет необходимости знать что-либо про то, как устроен HTML

Стоимость: #бесплатно (но есть платные тарифы)

#email #html #конструктор

Static forms — пожалуй, один из простейших способов интегрировать форму в ваши веб-сайты

При этом сама HTML-форма будет бесплатной и идеально подойдёт для статической страницы. А данные, которая она собрала, отправятся на ваш заранее зарегистрированный email-адрес

Стоимость: #бесплатно

#html #web #бесплатно

StackEdit — полнофункциональный бесплатный онлайн Markdown-редактор

В его основе лежит библиотека PageDown, которая, например, используется Stack Overflow и прочими порталами Stack Exchange

А ещё он имеет открытый исходный код

Стоимость: #бесплатно

#markdown #редактор #open_source

SpinKit — минималистичные загрузочные CSS-спиннеры

Они анимированы исключительно при помощи CSS

Пример того, как они выглядят, можно увидеть выше

Стоимость: #бесплатно

#css #анимации #web

Surge — площадка для бесплатной публикации статических сайтов

Самое приятное, что опубликовать свой проект можно прямо из командной строки буквально в одну команду. Поддерживаются HTML, CSS, JavaScript

На данный момент с помощью Surge уже опубликовано более 1,5 млн проектов

Стоимость: #бесплатно (но есть и платный тариф)

#web #html #css

Shotsnapp — простой инструмент для быстрого создания красивых макетов

С его помощью можно создавать наглядные презентации дизайна приложений и веб-сайтов

Бесплатная версия вполне покрывает более-менее базовые потребности, но больше возможностей появляется при оформлении платной подписки

Стоимость: #бесплатно (но есть платная подписка)

#дизайн #макет

SaaS Landing Page — отличный набор высококлассных лендинг-страниц

Собранные примеры достаточно заметно отличаются друг от друга. При этом сервис позволяет смотреть какие шрифты, цветовые наборы и т.д. используются на странице

Достойный инструмент в случае, если вы ищете источники вдохновения для своего проекта

Стоимость: #бесплатно

#web #saas #landing

Responsive Breakpoints — инструмент для анализа изображений в высоком разрешении

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

Стоимость: #бесплатно

#web #изображения

Remove Background — сервис, автоматически удаляющий задний фон

Участие пользователя практически не требуется — достаточно лишь загрузить желаемый снимок/картинку на сайт

После этого произойдёт магия и задний фон будет удалён примерно в течение 5 секунд

Стоимость: #бесплатно (но есть платная подписка)

#изображения #автоматизация

Mosaico — отличный редактор шаблонов электронной почты с открытым исходным кодом

Начинается всё с выбора базового шаблона, который уже в дальнейшем можно изменять под свои нужды

Инструмент может также похвастаться совместимостью со всеми основными почтовыми клиентами и устройствами

Стоимость: #бесплатно

#web #email

Remix Icon — нейтральные системные символы

Все они тщательно разработаны для дизайнеров и разработчиков. При этом, что самое приятное, иконки имеют открытый исходный код, бесплатны и могут быть использованы как в личных, так и коммерческих целях

Стоимость: #бесплатно

#иконки #open_source

Ouch — отличный способ восполнить недостаток графики, если это не ваша сильная сторона

Платформа позволяет скачать бесплатные иллюстрации от лучших художников Dribbble. Именно ими можно будет украсить свой продукт

Стоимость: #бесплатно (есть платная подписка)

#графика #3D #web

Nord Palette — набор холодных цветовых схем

Их все объединяет общий стиль и «настроение». При этом по своей сути проект чем-то напоминает язык дизайна Google с их Material Design и Material You

Только если у поискового гиганта акцент был сделан на материалах, то здесь — на цвете

Стоимость: #бесплатно

#цвет #дизайн

Moose — сервис для создания стоковых фото

Очень часто бывает так, что в проекте нужны стоковые фото. Но не редко встречаются ситуации, когда модель на них выглядит «как надо», а вот окружение — подводит

Именно для этих случаев отлично подойдёт Moose. Платформа предлагает огромное количество стоковых фото на прозрачном фоне в форматах PNG и PSD

Стоимость: от $5 долларов (но #бесплатно можно качать JPG-картинки)

#фото #сток

Micron.js — библиотека микровзаимодействий, построенная на CSS-анимациях и управляемая мощью JavaScript

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

Библиотека также позволяет управлять поведением взаимодействия, таким как эффект, скорость и «лёгкость»

Стоимость: #бесплатно

#css #js #open_source

Mockaro — онлайн-инструмент для генерации тестовых данных

С его помощью можно создать базу в совершенно разных форматах. В том числе CSV, SQL, JSON и т.д

Бесплатная версия предлагает до 1000 строк данных, в то время как платный вариант предлагает ещё больше

Стоимость: #бесплатно (но есть платный тариф)

#web #данные #sql

Memo — приложение для создания интеллектуальных заметок с помощью GitHub Gist

Инструмент позволяет владеть приватными данными, храня их в Github Gist, при этом получить к ним доступ можно из любого места и в любое время

Стоимость: #бесплатно

#github #gist #open_source