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

APP-View

Basic architecture

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>