Skip to content
This repository has been archived by the owner on Nov 6, 2020. It is now read-only.

Single Page Apps

Jump to bottom
Norman Fomferra edited this page Nov 18, 2016 · 8 revisions

CSS Styling

This section contains some useful tips and tricks for creating single-page applications using web technology.

Get rid of all scroll-bars

The browser may decide to show scrollbars for its body if scrollbars appear in inner children, because they suddenly add extra width/height to the body element. To get rid of any automatic display of body scrollbars do

    * {
        overflow: hidden;
    }

and enable scrolling explicitly in child elements, e.g.

    .my-panel {
      overflow-y: auto;
    }

Make body take all available viewport space

    html, body {
      width: 100vw;
      height: 100vh;
    }

Get rid of all margins, paddings, borders

To style your app exactly the way you want it is advisable to get rid of all margin, padding, and borders default settings.

    html, body {
      margin: 0;
      padding: 0;
      border: 0;
    }

Allow for overlays

For a single-page app, if the <body> is styled with width: 100% and height: 100%, a blueprint’s Portal (or Overlay) may take up extra whitespace and cause the window to undesirably scroll. To fix this, instead apply position: absolute to the <body> tag.

    html, body {
      position: absolute;
    }

Disable highlighting/selecting across the application

By default, browsers allow highlighting/selecting across the page. This doesn’t feel native for desktop applications. To disable this behavior do:

  :not(input):not(textarea),
  :not(input):not(textarea)::after,
  :not(input):not(textarea)::before {
      -webkit-user-select: none;
      user-select: none;
      cursor: default;
  }

Use alternative scrollbar styles

  ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
  }
  
  ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      -webkit-border-radius: 10px;
      border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
      -webkit-border-radius: 10px;
      border-radius: 10px;
      background: rgba(191, 204, 214, 0.8);
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  
  ::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(191, 204, 214, 0.4);
  }

Best practices

Clone this wiki locally