Common Elements

Layout

Our guiding principle is that components are responsible for their own internal layout, and should therefore avoid specifying external layout characteristics (such as for example margins on the component itself). Components can and should arrange the elements inside them (using for example margins or gaps), but should optimally not prescribe or interfere with layouts described on higher levels.

Pages

The default page layout requires a <body> element, which should contain a <main> element as its direct descendant. Additionally, the <header>, <aside> and <footer> optional elements are also supported (in any combination). The rendering typically follows the holy grail layout, with the <aside> element placed to the right according to the golden ratio.

Navigation

A standard navigation layout is provided with support for a logo, a menu (we recommend using the desktop menu and mobile menu macros), and an optional <aside> element.

Example

Jinja

{% import 'django_logikal/components/commons.html.j' as commons %}

{% set menu_items = [
  menu_item(title=_('Home'), view_name='main:home'),
  menu_item(title=_('About'), view_name='main:about'),
  menu_item(title=_('Contact'), view_name='main:contact'),
] %}

<nav>
  <a href="{{ url('main:home') }}" class="button logo">
    {{ include_static('django_logikal/images/logikal_logo.svg') }}
  </a>

  {{ commons.desktop_menu(menu_items, request=request|default(none)) }}

  <aside>
    <a class="button active">{{ _('Log in') }}</a>
  </aside>

  {{ commons.mobile_menu(menu_items, request=request|default(none)) }}
</nav>

HTML

<nav>
  <a href="main/home/" class="button logo">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="36.024mm"
      height="4.318mm"
      viewBox="0 0 36.024 4.318"
      fill="#000000">
      <g>
        <g transform="translate(-1)" stroke-width=".26458">
          <path d="m13.059 4.258v-1.0195h-1.9191v-3.1785h-1.1395v4.1981z" />
          <path
            d="m13.24 2.177c0 1.2114 0.93557 2.141 2.201 2.141s2.237-0.96555
        2.237-2.177c0-1.2114-0.93557-2.141-2.201-2.141s-2.237 0.96555-2.237
        2.177zm1.1395-0.017992c0-0.62971 0.44979-1.1095 1.0795-1.1095 0.62971 0 1.0795 0.47978
        1.0795 1.1095 0 0.62971-0.44979 1.1095-1.0795 1.1095-0.62971
        0-1.0795-0.47978-1.0795-1.1095z" />
          <path
            d="m20.319 1.8891v0.80962h0.95356c-0.10195 0.38382-0.4198 0.59972-0.89359
        0.59972-0.62971 0-1.0795-0.47978-1.0795-1.1275s0.44979-1.1215 1.0795-1.1215c0.59372 0
        0.8696 0.4258 0.8696 0.4258l0.79763-0.80363s-0.49177-0.67169-1.6492-0.67169c-1.2654 0-2.237
        0.96555-2.237 2.177 0 1.2114 0.93557 2.141 2.201 2.141 1.2774 0 2.087-0.94156 2.087-2.117
        0-0.14993-0.02399-0.31186-0.02399-0.31186z" />
          <path d="m23.137 4.258h1.1695v-4.1981h-1.1695z" />
          <path
            d="m27.819 4.258h1.3494l-1.7392-2.219 1.6192-1.9791h-1.3494l-1.3794
        1.8771v-1.8771h-1.1395v4.1981h1.1395v-1.9971z" />
          <path
            d="m31.895 0.059972h-1.1395l-1.6492 4.1981h1.1994l0.24589-0.71967h1.4873l0.24589
        0.71967h1.2594zm-0.16792 2.5788h-0.8696l0.4378-1.2654z" />
          <path d="m37.024 4.258v-1.0195h-1.9191v-3.1785h-1.1395v4.1981z" />
        </g>
        <rect y=".068" width="2.1" height="2.1" fill="#e44b55" />
        <rect y="2.168" width="2.1" height="2.1" />
        <rect x="2.1" y="2.168" width="2.1" height="2.1" fill="#307fe2" />
      </g>
    </svg>
  </a>

  <menu role="menubar" id="menu-desktop" class="desktop">
    <li role="none">
      <a
        role="menuitem"
        id="menu-desktop-home"
        class="button disabled"
        aria-current="page">
        Home
      </a>
    </li>
    <li role="none">
      <a
        role="menuitem"
        id="menu-desktop-about"
        class="button"
        href="main/about//">
        About
      </a>
    </li>
    <li role="none">
      <a
        role="menuitem"
        id="menu-desktop-contact"
        class="button"
        href="main/contact//">
        Contact
      </a>
    </li>
  </menu>

  <aside>
    <a class="button active">Log in</a>
  </aside>

  <div class="menu-mobile-container">
    <button
      class="icon toggle"
      id="menu-mobile-toggle"
      type="button"
      title="Show menu"
      aria-label="Show menu"
      data-active-title="Hide menu"
      data-active-aria-label="Hide menu"
      aria-haspopup="true"
      aria-controls="menu-mobile"
      aria-expanded="false">
      <span class="inactive" aria-hidden="false"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-menu preview-icon">
          <path d="M4 5h16" />
          <path d="M4 12h16" />
          <path d="M4 19h16" /></svg
      ></span>
      <span class="active" aria-hidden="true"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x preview-icon">
          <path d="M18 6 6 18" />
          <path d="m6 6 12 12" /></svg
      ></span>
    </button>
    <menu id="menu-mobile" role="menubar" class="mobile popover">
      <li role="none">
        <a
          role="menuitem"
          id="menu-mobile-home"
          class="button disabled"
          aria-current="page">
          Home
        </a>
      </li>
      <li role="none">
        <a
          role="menuitem"
          id="menu-mobile-about"
          class="button"
          href="main/about//">
          About
        </a>
      </li>
      <li role="none">
        <a
          role="menuitem"
          id="menu-mobile-contact"
          class="button"
          href="main/contact//">
          Contact
        </a>
      </li>
    </menu>
  </div>
</nav>

Note

The breakpoint at which the design switches from the desktop layout to the mobile layout needs to be specified explicitly in each project’s own style sheets. The switching can be done using an approach similar to the following declarations:

@media (width <= 68.75rem) {
  nav {
    grid-template: 'logo menu-icon' / 1fr auto;
    & > menu.desktop { display: none; }
    & > aside { display: none; }
    & > .menu-mobile-container { display: block; }
  }
}

Buttons

Text Buttons

Example

Jinja

<div class="button-group">
  <!-- Links -->
  <div class="button-group horizontal">
    <a class="button">{{ _('Button') }}</a>
    <a class="button disabled">{{ _('Disabled') }}</a>
    <a class="button active">{{ _('Active') }}</a>
    <a class="button neutral">{{ _('Neutral') }}</a>
    <a class="button danger">{{ _('Danger') }}</a>
  </div>

  <!-- Buttons -->
  <div class="button-group horizontal">
    <button type="button">{{ _('Button') }}</button>
    <button type="button" class="disabled">{{ _('Disabled') }}</button>
    <button type="button" class="active">{{ _('Active') }}</button>
    <button type="button" class="neutral">{{ _('Neutral') }}</button>
    <button type="button" class="danger">{{ _('Danger') }}</button>
  </div>
</div>

HTML

<div class="button-group">
  <!-- Links -->
  <div class="button-group horizontal">
    <a class="button">Button</a>
    <a class="button disabled">Disabled</a>
    <a class="button active">Active</a>
    <a class="button neutral">Neutral</a>
    <a class="button danger">Danger</a>
  </div>

  <!-- Buttons -->
  <div class="button-group horizontal">
    <button type="button">Button</button>
    <button type="button" class="disabled">Disabled</button>
    <button type="button" class="active">Active</button>
    <button type="button" class="neutral">Neutral</button>
    <button type="button" class="danger">Danger</button>
  </div>
</div>

Icon Buttons

Example

Jinja

<div class="button-group horizontal">
  <!-- Icon-only button -->
  <button type="button" class="icon">
    {{ include_static('django_logikal/icons/x.svg') }}
  </button>

  <!-- Icon-only toggle -->
  <button type="button"
          class="icon toggle"
          title="{{ _('Show password') }}"
          aria-label="{{ _('Show password') }}"
          data-active-title="{{ _('Hide password') }}"
          data-active-aria-label="{{ _('Hide password') }}">
    <span class="inactive" aria-hidden="false">
      {{ include_static('django_logikal/icons/eye-off.svg') }}
    </span>
    <span class="active" aria-hidden="true">
      {{ include_static('django_logikal/icons/eye.svg') }}
    </span>
  </button>

  <!-- Icon and text button -->
  <button type="button" class="icon text">
    {{ include_static('django_logikal/icons/x.svg') }}
    <span>{{ _('Close') }}</span>
  </button>
</div>

HTML

<div class="button-group horizontal">
  <!-- Icon-only button -->
  <button type="button" class="icon">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-x preview-icon">
      <path d="M18 6 6 18" />
      <path d="m6 6 12 12" />
    </svg>
  </button>

  <!-- Icon-only toggle -->
  <button
    type="button"
    class="icon toggle"
    title="Show password"
    aria-label="Show password"
    data-active-title="Hide password"
    data-active-aria-label="Hide password">
    <span class="inactive" aria-hidden="false">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-eye-off preview-icon">
        <path
          d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
        <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
        <path
          d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
        <path d="m2 2 20 20" />
      </svg>
    </span>
    <span class="active" aria-hidden="true">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-eye preview-icon">
        <path
          d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
        <circle cx="12" cy="12" r="3" />
      </svg>
    </span>
  </button>

  <!-- Icon and text button -->
  <button type="button" class="icon text">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-x preview-icon">
      <path d="M18 6 6 18" />
      <path d="m6 6 12 12" />
    </svg>
    <span>Close</span>
  </button>
</div>

Icon Link Buttons

Example

Jinja

<div class="button-group horizontal">
  <!-- Icon-only button -->
  <a class="button icon">{{ include_static('django_logikal/icons/settings.svg') }}</a>

  <!-- Icon and text button -->
  <a class="button icon text">
    {{ include_static('django_logikal/icons/user-round.svg') }}
    <span>{{ _('Account') }}</span>
  </a>
</div>

HTML

<div class="button-group horizontal">
  <!-- Icon-only button -->
  <a class="button icon"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-settings preview-icon">
      <path
        d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
      <circle cx="12" cy="12" r="3" /></svg
  ></a>

  <!-- Icon and text button -->
  <a class="button icon text">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-user-round preview-icon">
      <circle cx="12" cy="8" r="5" />
      <path d="M20 21a8 8 0 0 0-16 0" />
    </svg>
    <span>Account</span>
  </a>
</div>

Dialogs

Component Macros

template django_logikal/components/commons.html.j

class django_logikal.components.commons.MenuItem(title: str, view_name: str | None = None, view_kwargs: dict[str, ~typing.Any] = <factory>, submenu: list[~django_logikal.components.commons.MenuItem] = <factory>, id: str | None = None): An item in a menu.

Common Elements

Layout

Pages

Navigation

Buttons

Text Buttons

Icon Buttons

Icon Link Buttons

Dialogs

Popover

Component Macros