Basic Layout Project - Seventh UI CSS

Result

The example uses framework-agnostic HTML, Seventh UI CSS components, monochrome icon classes, and the colored brand icon helper.

New Project

1. Create The Project

Use Vite as the local development server so package CSS and SVG imports resolve from node_modules.

mkdir seventh-ui-basic-layout
cd seventh-ui-basic-layout
npm init -y
npm pkg set scripts.dev="vite --host 0.0.0.0"
npm config set @seventh-ui:registry https://npm.seventh.com.br/
npm install @seventh-ui/css
npm install -D vite
mkdir src

2. Create The Initial Page

Create index.html in the project root.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Seventh UI Basic Layout</title>
  </head>
  <body>
    <div class="app-shell">
      <header class="sui-header app-titlebar">
        <div class="sui-header__leading">
          <a class="sui-header__brand" href="/" aria-label="Home">
            <span class="sui-colored-icon sui-colored-icon--brand-seventh-icon" role="img" aria-label="Seventh"></span>
            <span class="sui-header__brand-name">New Project</span>
          </a>
        </div>
        <div class="sui-header__actions">
          <button class="sui-header__icon-button" type="button" aria-label="User profile">
            <span class="sui-icon sui-icon--user-circle-outline" aria-hidden="true"></span>
          </button>
        </div>
      </header>

      <div class="app-body">
        <nav class="sui-navigation sui-navigation--drawer-min app-sidebar" aria-label="Main navigation">
          <div class="sui-navigation__top">
            <div class="sui-navigation__header">
              <div class="sui-navigation__company">
                <span class="sui-navigation__company-avatar" aria-hidden="true">S</span>
                <span class="sui-navigation__company-name">Workspace</span>
              </div>
            </div>
          </div>
          <div class="sui-navigation__body">
            <div class="sui-navigation__section">
              <a class="sui-navigation__item sui-navigation__item--selected" href="/" aria-current="page">
                <span class="sui-navigation__icon"><span class="sui-icon sui-icon--mosaic-puzzle-outline" aria-hidden="true"></span></span>
                <span class="sui-navigation__label">Dashboard</span>
              </a>
              <a class="sui-navigation__item" href="/">
                <span class="sui-navigation__icon"><span class="sui-icon sui-icon--file-system-file-with-items-outline" aria-hidden="true"></span></span>
                <span class="sui-navigation__label">Documents</span>
              </a>
              <a class="sui-navigation__item" href="/">
                <span class="sui-navigation__icon"><span class="sui-icon sui-icon--user-outline" aria-hidden="true"></span></span>
                <span class="sui-navigation__label">People</span>
              </a>
            </div>
          </div>
        </nav>

        <main class="app-content" tabindex="-1">
          <span class="sui-colored-icon sui-colored-icon--brand-seventh-icon app-content__mark" role="img" aria-label="Seventh"></span>
        </main>
      </div>
    </div>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>

3. Import The CSS

Create src/main.js. Import only the component and icon entrypoints used by this page.

import "@seventh-ui/css/core.css";
import "@seventh-ui/css/components/header.css";
import "@seventh-ui/css/components/navigation.css";
import "@seventh-ui/css/icons/base.css";
import "@seventh-ui/css/icons/file-system.css";
import "@seventh-ui/css/icons/mosaic.css";
import "@seventh-ui/css/icons/user.css";
import "@seventh-ui/css/icons-colored/brand.css";
import "./app.css";

4. Add App Layout CSS

Create src/app.css. Keep product layout classes outside the design system namespace.

html,
body {
  margin: 0;
  min-block-size: 100%;
}

body {
  background: var(--sui-color-neutral-100);
  color: var(--sui-color-neutral-900);
  font-family: var(--sui-font-family-base);
}

.app-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-block-size: 100vh;
}

.app-body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  min-block-size: 0;
}

.app-sidebar {
  min-block-size: 100%;
}

.app-content {
  align-items: center;
  display: grid;
  justify-items: center;
  min-block-size: 0;
  padding: var(--sui-spacing-1000);
}

.app-content__mark {
  --sui-colored-icon-size: 112px;
}

@media (max-width: 720px) {
  .app-body {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    min-block-size: auto;
  }
}

5. Run Locally

Start the development server and open the URL printed by Vite.

npm run dev