Wordyblend logo

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

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», и это семейство шрифтов создано для того, чтобы поддерживать все языки, и в надежде покончить с тофу.