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

Microsite

Basic architecture

Microsite-Layout
Microsite-Layout
Microsite-Architektur
Microsite-Architektur

Schematic structure 

        

          body // The root container
          ├── header .microsite-header // GESIS Micro-Header
          │    ├── .logo-and-navigations
          │    │     ╰── .logo-and-navigations--inner
          │    │           ├── .logo-wrapper 
          │    │           │     ╰── logo_gesis_microsite.svg // GESIS micro Logo
          │    │           ╰── .navigations-wrapper
          │    │                 ├── // GESIS Back Link
          │    │                 ├── // language switch
          │    │                 ├── // contact link
          │    │                 ╰── // topnav    
          │    ╰── .gesis-search-wrapper // GESIS Suche
          ├── section .page-banner .microsite // microsite banner Image
          │          ╰── .page-banner--inner 
          │                ├── div
          │                │    ├── .gs_rootline
          │                │    │     ╰── // breadcrumb
          │                │    ╰── .h1
          │                │         ╰── // microsite title
          │                ╰── figure .microsite-logo
          ├── nav .microsite-menu // Microsite Navigation
          │    ╰── .gs_megamenu_nav // MegaMenu Desktop
          ├── main .microsite-main // Content Area
          │    ├── .gesis-contact-button // Contact Button
          │    ├── section .content-section // Content opener for a new content topic
          │    │     ╰── .content-section--inner
          │    │           ├── h2 // clean Seo Content Structures
          │    │           ├── h3
          │    │           ├── p
          │    │           ├── ul
          │    │           ╰── ...
          │    ├── section .content-section // new content topic
          │    │     ╰── .content-section--inner
          │    │           ╰── ...
          │    ╰── //  As many content items as required
          ╰── footer .page-footer

HTML-Basis 

       <!-- HTML Basis !-->
            <body>

              <!-- GESIS Micro-Header -->
              <header id="top" class="microsite-header">
                <!-- ... !-->
              </header>

              <!-- microsite banner -->
              <section class="page-banner microsite has-bg-color" >
                <!-- ... !-->
              </section>

              <!-- microsite navigation -->
              <nav class="microsite-menu">
                <!-- ... !-->
              </nav>

              <!-- content -->

              <!-- footer-->

            <body>
        <!-- HTML Basis !-->

HTML-Basis 



        <!-- HTML Basis !-->
            <body>

              <!-- GESIS Micro-Header -->
              <header id="top" class="microsite-header">
                <!-- ... !-->
              </header>

              <!-- microsite banner -->
              <section class="page-banner microsite has-bg-color" >
                <!-- ... !-->
              </section>

              <!-- microsite navigation -->
              <nav class="microsite-menu">
                <!-- ... !-->
              </nav>

              <!-- content -->
              <main class="microsite-main">
                <!-- ... !-->
              </main>

              <!-- footer-->
              <footer>
                <!-- ... !-->
              </footer>

            <body>
        <!-- HTML Basis !-->