Сервисы
Alexander Lashkov
7747

Подборка: 6 полезных инструментов для создания сайтов на Bootstrap

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

В закладки
Слушать

Что такое Bootstrap

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

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

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

Startup – это drag-n-drop конструктор Bootstrap-тем, который позволяет быстро создавать лендинги для бизнеса. Инструмент предлагает более 300 готовых блоков, которые можно использовать в интерфейсе. В несколько кликов собранный дизайн можно экспортировать в чистый HTMl, CSS, JavaScript.

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

Это десктоп-редактор для macOS, Windows и даже Linux, который позволяет создавать Bootstrap-сайты. Это инструмент уже скорее для разработчиков и верстальщиков, ведь он позволяет углубляться в такие моменты, как верстка CSS-сеток и правил, rich visual controls, SASS и LESS и т.п.

Помимо прочего, с помощью Pinegrow можно создавать интерфейсы под фреймворк Foundation и WordPress.

Еще один инструмент создания тем для Bootstrap 4.0, который подойдет более опытным разработчикам. Это продукт с открытым кодом, который позволяет писать HTML-код прямо в специальном редакторе и тут же генерировать его превью.

Это бесплатный билдер тем на Bootstrap 4 (и как уточняется, скоро появится поддержка пятой версии). Пользователи могут использовать до 500 элементов UI, а также создавать собственные темы на основе готовых шаблонов в специальном редакторе, а затем экспортировать результат работы в SASS-файлы.

Как и Pinegrow, это десктоп-приложение, но которое работает в формате drag-n-drop. Здесь есть большая библиотека встроенных компонентов, включая хедеры, футеры, галереи и слайдшоу.

Все это позволяет его использование для людей с небольшим опытом веб-разработки.

Это так называемый playground, в котором пользователи могут не только создавать темы с помощью редактора drag-n-drop, но и писать код с возможностью просмотра превью. Начать работу можно с помощью редактирования готовых шаблонов – есть как простые для лендингов или статей, так и более сложные, вроде контрольных панелей веб-приложений.

Заключение

Это лишь некоторые интересные инструменты, которые позволят создавать красивые Bootstrap-сайты быстрее и делать их функциональными. Делитесь в комментариях ссылками на другие полезные продукты – так наш список будет еще более полным.

{ "author_name": "Alexander Lashkov", "author_type": "self", "tags": [], "comments": 9, "likes": 72, "favorites": 411, "is_advertisement": false, "subsite_label": "services", "id": 161862, "is_wide": false, "is_ugc": true, "date": "Sat, 26 Sep 2020 20:47:52 +0300", "is_special": false }
Карьера
«Мы хотим помочь разработчикам сделать код неубиваемым». Рассказ тестировщика о карьере в Сбере
Вы не смогли бы пользоваться приложениями и сайтами, если бы не тестировщики. Это мы постоянно пытаемся все сломать и…
Объявление на vc.ru
0
9 комментариев
Популярные
По порядку
Написать комментарий...
–6

Все конечно круто, но о каждом я уже слышал ранее...

Ответить
29

Ну пиздец, Гриша Костин уже это видел, удаляем нахуй

Ответить
0

Держи в курсе

Ответить
3

Заключение:
Используйте Tailwindcss

Ответить
0

В Pinegrow недавно добавили поддержку TailwindCSS 

Ответить
2

Super хорошая статья 

Ответить
1

@Alexander Lashkov Скажите, а скриншот предыдущей версии сайта Saleor вы нашли в сети, или сделали сами?

Если второе, то подскажите пожалуйста, доступна ли она где-либо в работающем виде?
А то очень уж понравилась, хочется посмотреть пару вещей "под капотом".

Ответить
1

Скрин есть на сайте фреймворка Bootstrap https://expo.getbootstrap.com/ насчет работающей версии, мне для целей статьи она была не оч нужна, так что я особо не искал

Ответить
1

Есть ещё инструменты конвертации из Figma/Sketch в bootstrap. Некоторые показывают неплохие результаты. Getpages, например

Ответить

Комментарии

null