Новые инструменты для веб-дизайна⁠⁠

Перевод статьи "10 best new web design tools for October 2016"

HTML email-шаблоны, доступные цветовые схемы, FrameJS и многое другое

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

Есть также крошечная grid-система, основанная на Flexbox, весом 93 байта, загрузчик веб-сайтов, SVG шаблоны и новый шрифт от Google.

1. You Might Not Need JavaScript

Зачем создавать себе дополнительную зависимость, если она вам не нужна? Этот сайт покажет вам, как создать вещи, которые вы, возможно, захотите сделать через JavaScript, с помощью HTML, CSS или Sass. К примеру, слайдер, view switcher, colour picker, формы, загрузку файлов и так далее.

2. HTML Email

Если вы когда-нибудь пытались создать HTML-письмо, тогда вы знаете, как тяжело сделать так, чтобы все отображалось правильно. Добавьте сюда мобильные, на которых открывают половину ваших писем, и это превращается в ужасную работу. Эти email-шаблоны тестировались на всех основных email-клиентах, чтобы спасти вас от необходимости делать эту работу самому. Если хотите испробовать бесплатную альтернативу, используйте Litmus Community templates.

3. Yarn

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

4. Open Color

Open Color – это цветовая схема, которая тестировалась для двух типов дальтонизма и подходит для использования в пользовательских интерфейсах. В ней 12 цветов, один из которых серый, и она поддерживается CSS, SCSS, LESS, Stylus, Adobe library, Photoshop/illustrator swatches и Sketch palette.

5. FrameJS Club

Посмотрите на демонстрации прототипов FrameJS и FrameJS Club. Многие из них ссылаются на посты их создателей в блоге, объясняющие что они делают и как.

6. Hugo

Hugo – это новый быстрый движок для статических страниц. Но зачем вам использовать его вместо Jekyll? Первое преимущество в том, что он состоит всего из двух частей, так что вам не придется сохранять полный комплект Ruby. Также говорят, что он значительно быстрее Jekyll в плане генерации ваших сайтов, а это уже может быть поводом к смене.

7. Fukol

Эта впечатляющая grid-система, в основе которой лежит Flexbox, весит всего 93 байта! Она сужается до одной единственной колонки там, где не поддерживается Flexbox, и вместо break point’ов использует element query, так что объекты увеличиваются, чтобы заполнить доступное пространство. Можете протестировать эту систему на CodePen.

8. Website Downloader

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

9. Hero Patterns

С ростом популярности SVG начинают появляться все новые ресурсы. Эти повторяющиеся, кастомизируемые SVG рисунки для бэкграунда выглядят здорово, и они абсолютно бесплатные.

10. Google Noto Fonts

Когда девайсы не отображают некоторые буквы шрифта, они появляются в виде квадратиков, называемых тофу. Noto означает «no more tofu», и это семейство шрифтов создано для того, чтобы поддерживать все языки, и в надежде покончить с тофу.