Посібник із семантичного інтерфейсу

Що таке семантичний інтерфейс?

Semantic UI - це інтерфейсний фреймворк, подібний до bootstrap, призначений для тематизації. Він містить заздалегідь побудовані семантичні компоненти, які допомагають створювати красиві та чуйні макети, використовуючи зручний для людини HTML.

За даними веб-сайту Semantic UI, фреймворк використовує стислий HTML, інтуїтивно зрозумілий JavaScript та спрощену налагодження, щоб зробити інтерфейсну розробку веселою та чудовою.

І він інтегрується з React, Angular, Meteor, Ember та багатьма іншими фреймворками, щоб допомогти організувати рівень інтерфейсу користувача поряд з логікою додатків.

Історія версій семантичного інтерфейсу

Перший попередній реліз з’являється на github у вересні 2013 року, створений Джеком Лукічем.

1.xВперше семантичний інтерфейс був випущений в листопаді 2014 року, змінивши попередні випуски.

2.xВперше семантичний інтерфейс був випущений в червні 2015 року і представив новий інтерфейс, кілька виправлень помилок, вдосконалення та вдосконалення теми за замовчуванням.

Підтримка семантичного інтерфейсу користувача

Поточна версія 2.2.xпідтримує такі браузери

  • Останні 2 версії FF, Chrome, Safari Mac
  • IE 11+
  • Android 4.4+, Chrome для Android 44+
  • iOS Safari 7+
  • Microsoft Edge 12+

Як встановити семантичний інтерфейс

Існує декілька способів встановлення семантичного інтерфейсу, деякі найпростіші способи:

Через мережу доставки вмісту (CDN)

Це найпростіший для початківців. Створіть файл HTML, як показано нижче

   Semantic UI         

NOTE:Наведене вище посилання CDN у рядку 5 включатиме всі доступні компоненти в семантичному інтерфейсі. Якщо ви хочете встановити певний компонент, натисніть тут, щоб переглянути відповідне посилання CDN.

Використання інструментів побудови

Це припустить, що ви використовуєте ОС Ubuntu Linux зі встановленою nodeта npmвстановленою, для інших операційних систем натисніть тут

У каталозі проекту встановіть gulp глобально, використовуючи npm

npm install -g gulp

Встановіть семантичний інтерфейс

npm install semantic-ui --save cd semantic/ gulp build

Включити в HTML

Оновлення через npm

npm update

Інтеграція з іншими фреймворками

Ви можете інтегрувати семантичний інтерфейс з іншими фронтенд-фреймворками, такими як React, Angular, Ember або Meteor. Натисніть тут, щоб отримати додаткову інформацію та інструкції щодо інтеграції.

Більше інформації про семантичний інтерфейс:

У семантичному інтерфейсі є детальна та дуже добре організована документація, яка в найкоротші терміни підготує вас до роботи. Наступні посилання будуть корисними у вашій подорожі до семантичного інтерфейсу.

  • Веб-сайт семантичного інтерфейсу
  • Початок роботи з семантичним інтерфейсом
  • Зразки семантичних шаблонів інтерфейсу
  • Налаштування та створення семантичних тем інтерфейсу користувача