Semantic ui как пользоваться?

Подскажите пожалуйста новичку как использовать framework simantic ui? Установил в корень диска С:/ вместе с GULP. Не могу понять теперь как эту кучу хлама использовать. Пишут что эти инструменты облегчают труд разработчика. Есть ли какие то плагины визуализации проекта?

Вот тут на английском расписано Getting Started | Semantic UI. Скорее всего тебе интересна секция workflow.

Скользкая тема. Любой созданный инструмент облегчает труд разоаботчика. Но есть вопросы, которые не освящаются пропагандистами того или иного инструмента:

  • какие требования к знаниям чтобы начать пользоваться инструментом
  • какие конкретно проблемы/задачи решаются инструментом. Есть ли у тебя эти проблемы/задачи, и главное - надо ли тебе их решать.
  • какие ограничения у инструмента.

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

Что значит “визуализация”? Опиши как выглядит результат визуализации.

1 лайк

Чтобы можно было редактировать код и сразу же динамически менялось содержимое визабилити html/css, предполагаю для этого же и создаётся куча java script файлов.

Если нужно только автоматическое обновление после изменений файлов, я бы советовал такую комбинацию: serve + live.js. serve запускает локальный http сервер, а live.js опрашивает этот сервер и обновляет страницу каждый раз когда изменяется файл стилей, скриптов или html.

Сначала установи serve глобально. После этого в командной строке появится команда serve.

npm install serve -g

в папке проекта создай index.html, подключи в него все скрипты/стили которые будешь менять, и еще подключи livejs.

<script src="http://livejs.com/live.js"></script>

и теперь в командной строке перейди в папку в которой лежит эта html-ка и запусти

serve

Обрати внимание по какому адресу запустился сервер (если работаешь на винде, то тебя могут спросить о разрешении для nodejs принимать соединения - соглашайся).

Открой в браузере адрес из консоли (обычно http://localhost:5000)

Теперь если ты изменишь какой-то из подключенных файлов в index.html, или сам этот файл, то страница браузера перезагрузится.

НО
Но если тебе нужны препроцессоры (например less, или jsx для реакта), то мой подход неудобен. Он работает хорошо если ты работаешь только с чистыми html-css-js.

Не будет проблем, например, если подключишь файлы jquery или bootstrap, потому что они - простые css-js файлы.

А как работать c less(визуализировать)? Я так понимаю что должен быть визуальный конструктор который пере записывает CSS и правила JS

Тут начинается другая история. less - это язык, который компилируется (транспайлируется) в css. С тем подходом, который я описал выше, работать с less будет неудобно.

Меняем стратегию.

Возьми parcel - это такая штука, которая компилирует less в css, jsx в javascript, и умеет не только такие преобразования. Плюс умеет перезагружать страницу когда изменился оди из измененных файлов.

Установка

npm install parcel-bundler -g

Это добавит команду parcel в командной строке.

Создай файл index.html, подлючи в него скрипты. Допустип твой главный js файл называется main.js. А теперь фишка. Ты можешь написать будто подключаешь less файл как зависимость в скрипте.

// файл main.js
require('main.less')
// обычный джаваскрипт

И запусти parcel

parcel index.html

В консоли увидишь какой адрес открыть в браузере чтобы увидеть результаты.

Все. Теперь когда ты будешь менять файлы, браузер будет перезагружать страницу с результатами. И что круто, что эта же тулзовина преобразует less в css, а если ты решишь использовать другие преобразователи кода/компиляторы, то их будет проще настроить. И самое главное - parcel умеет делать билд для продакшена. Т.е. минифицированный скрипт и стиль который только остается подключить в браузере в конечном продукте. Читай в доке https://parceljs.org/cli.html