App | Soracom Design

Overview

The .ds-app component provides the layout/arrangement of a web app.

The details on this page may not be relevent if the html structure of the page is different to the expected structure.

Basic usage

The basic building blocks of ds-app are shown below.

The classes ds-app__* are specific named ‘grid areas’ - content with these classes will be shown in a specific location/order.

Class	Required?	Description
`ds-app`		The top-most level container.
`ds-app__header`		The container for the header component.
`ds-app__breadcrumb`	Optional	The container for the breadcrumb component.
`ds-app__notice`	Optional	The container for notice content.
`ds-app__main`		The container for the main content of the page.
`ds-app__main-content`		A panel to contain the main page content. This panel will scroll automatically.
`ds-app__main-footer`	Optional	A panel for footer content.

ds-app

ds-app__breadcrumb

ds-app__notice

Other html content directly inside ds-app appears here

ds-app__main

Banners, controls etc

...

ds-app__main-content

The main content for the page

ds-app__main-footer

Notices

A notice directly inside ds-app “should” always appear directly under the breadcrumbs and will be pinned with the header and not scroll off the page.

A notice inside ds-app__main will appear based on the source code order and will scroll when the main content scrolls.

The recommend structure for notices is (see Notice - pinned style and Notice - strong color):

<div class="ds-notice --alert --pinned --strong">
  An example alert notice
</div>

XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px

<div class="ds-notice --alert --pinned --strong">
  An example alert notice
</div>

Example

Core ds-app elements

<!-- Overall app container -->
<div class="ds-app">

<!-- App top section -->
  
  <!-- REQUIRED: Header -->
  <header class="ds-app__header ds-header" data-ds-size="header">
    <!-- Standard ds-header -->
  </header>

  <!-- OPTIONAL: Breadcrumb  -->
  <ul class="ds-app__breadcrumb ds-breadcrumb">
    <!-- Standard ds-breadcrumb -->
  </ul>

  <!-- OPTIONAL: Notice  -->
  <div class="ds-app__notice ds-notice --alert --pinned --strong">An important notice that will not disappear when scrolled</div>

<!-- App main section -->
  
  <!-- REQUIRED: Main section -->
  <main class="ds-app__main">

    <!-- RECOMMENDED: Main section title -->
    <header class="ds-banner --simple --indent-small">
      <div>
        <h2>Page title</h2>
        <p>Page description</p>
      </div>
    </header>
  
    <!-- OPTIONAL: Notice  -->
    <div class="ds-notice --info --pinned --strong">A notice that will scroll with the main content</div>
    
    <!-- OPTIONAL: Main section controls -->
    <section class="ds-controls --sticky">
      <div class="ds-button-bar">
        <!-- Left group button/fields -->
      </div>
      
      <div class="ds-button-bar">
        <!-- Right group button/fields -->
      </div>
    </section>
    
    <!-- REQUIRED: Main content -->
    <section class="ds-app__main-content">
      <!-- Main content -->
    </section>
    
    <!-- OPTIONAL: Footer  -->
    <footer class="ds-app__main-footer ds-cols --indent-small --center">
      <!-- Footer content -->
    </footer> 
  </main>
  
</div>

Full working example with sample content

Open in new window