GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen
GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen
Styleguide

Basic architecture

Wann verwende ich die App-View?

App-View ist eine Erweiterung des Main-Bereichs für die beiden Basisarchitekturen Mainsite und Mircosite.

App-View wird verwendet, wenn ein interaktiver GESIS-Inhalt ähnlich einem Tool, einer Datenbank, einer Suche, einer Anwendung, einer Schnittstelle, einem Dashboard oder einem Filter-System angezeigt werden soll, bei dem der Benutzer mehrere Interaktionsschritte durchführen muss und mehre Ebenen in einer Ansicht abgebildet werden sollen. In dieser Ansicht ist die Anzeige bewusst platzsparend gestaltet, um den Fokus auf den Inhalt einer Anwendung zu legen. Sie bietet mehrere Ebenen der Seitennavigation und Interaktion. Sie kommt auch für native Anwendungen im mobilen Bereich zum Einsatz.

Grundaufbau 

      

      body // The root container
      ├── // GESIS Micro-Header 
      ├── // Microsite Banner
      ├── // Microsite Navigation    
      ├── .gs-app-view // Wrapper
      │    ├── .gs-left-sidebar // sidebar
      │    │     ├── header
      │    │     ├── nav
      │    │     ╰── footer
      │    ├── main // Content Area
      │    │     ├── .gs-intro // teaser, filter or banner
      │    │     ├── .gs-toc // table of content
      │    │     ╰── .gs-content
      │    │          ├── // content
      │    │          ╰── // ...
      │    ╰── .gs-right-sidebar // sidebar
      ╰── // footer

App View 

    <!-- app view -->
    <div class="gs-app-view">

      <!-- left sidebar navigation -->
      <aside class="sidebar gs-left-sidebar">

         <!-- Brand and Title der Seite -->
         <header>
           ...
         </header>

         <!-- Sidebar Content -->
         <nav>
           ...
         </nav>

      </aside>

      <!-- main content -->
      <main>
         
         <!-- Intro / Filter / Tabs / Teaser -->
         <header class="gs-intro">
           ...
         </header>
         
         <!-- Table of Content -->
         <div class="gs-toc">
           ...
         </div>

         <div class="gs-content">
           ...
         </div>

      </main>

      <!-- right sidebar navigation -->
      <aside class="sidebar gs-right-sidebar">

         <!-- Brand and Title der Seite -->
         <header>
           ...
         </header>

         <!-- Sidebar Content -->
         <nav>
           ...
         </nav>

      </aside>

    </div>