Getting Started

Установка и сборка

npm install
npm run dev

Production build:

npm run build

Сборка кладет результат в dist/:

dist/css/kit.css
dist/css/demo.css
dist/js/gnexus-ui-kit.js
dist/index.html
dist/assets/*

Подключение в HTML

Минимально нужны иконки, CSS kit и JS bundle:

<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="/css/kit.css">
<script src="/js/gnexus-ui-kit.js"></script>

Если странице не нужны интерактивные компоненты, JS можно не подключать. Но для drawer, modals, toasts, overlays, accordion, date picker helpers и file upload previews нужен gnexus-ui-kit.js.

Базовая страница

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
  <link rel="stylesheet" href="/css/kit.css">
</head>
<body>
  <header class="page-header">
    <div>
      <h1 class="page-title">Projects</h1>
      <p class="page-subtitle">Internal workspace</p>
    </div>
    <div class="page-actions">
      <button class="btn btn-accent with-icon" type="button">
        <i class="ph ph-plus"></i>
        Create
      </button>
    </div>
  </header>

  <script src="/js/gnexus-ui-kit.js"></script>
</body>
</html>

Assets

Kit ожидает локальные assets из dist/assets:

IBM Plex Mono fonts
Phosphor icon font
highlight.js для demo/docs
gnexus-mark.svg

В приложении можно использовать свои пути, но классы с .ph предполагают, что Phosphor Icons подключены.

Версия

Текущая версия пакета: 0.2.0.