Airship

Build responsive, mobile-first location intelligence apps on the web with our front-end component library.

This library is still under support but it will not be further developed. We don’t recommend starting new projects with it as it will eventually become deprecated. Instead, learn more about our current CARTO for React library here

Airship offers a restricted series of optimized layouts to create LI apps.

Basic layout with all airship elements

An Airship app should always be wrapped inside an element with the .as-app class and is composed of the following elements:

  • Toolbar (1): Where the main navigation and options are located. Only icons, text and the app logo should be placed here.
  • Tabs: Used to navigate the app on small screens and control what is displayed in the app-content element. Hidden in desktop.
  • Content (5): The area where the app content will be visible.
    • Main:
      • Map Area
        • Map: The map itself.
        • Map Panels (6): Content areas that are displayed over the map.
      • Map Footer (4): Content area located below the map without overlapping.
    • Sidebar (2, 3): One or two sections beside the map wrapper where the main application contents should be placed.

Check the reference for a detailed description

Responsive design

LI apps should be responsive by default, we currently consider 2 different screen sizes.

  • Small screens: Screens smaller than 812px width.
  • Medium screens: Screens equal or higher than 812px width.

We provide some responsive utilities by default, for example sidebars are hidden by default in small screens and only visible adding the --visible class modifier.

We provide a web component named as-responsive-content that makes easier the layout design.

Examples

Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE html>
<html>
<head>
  <!-- Include CSS elements -->
  <link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v2.4.1/airship.css">
  <!-- Include icons -->
  <link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v2.4.1/icons.css">
  <!-- Include airship components -->
  <script type="module" src="https://libs.cartocdn.com/airship-components/v2.4.1/airship/airship.esm.js"></script>
  <script nomodule="" src="https://libs.cartocdn.com/airship-components/v2.4.1/airship/airship.js"></script>
</head>
<body class="as-app-body">
  <div class="as-app">
    <header class="as-toolbar"></header>
    <nav class="as-tabs"></nav>

    <div class="as-content">
      <aside class="as-sidebar as-sidebar--left"></aside>

      <main class="as-main">
        <div class="as-map-area">
          <div id="map"></div>

          <div class="as-map-panels">
            <div class="as-panel as-panel--top as-panel--right">
              <div class="as-panel__element as-p--32 as-bg--warning"></div>
            </div>
          </div>

        </div>
        <footer class="as-map-footer as-bg--complementary" style="height: 100px;"></footer>
      </main>

      <aside class="as-sidebar as-sidebar--right"></aside>
    </div>
  </div>

  <!-- Basic CARTO-VL MAP -->
  <script>
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
      center: [0, 30],
      zoom: 2,
      scrollZoom: false,
      dragRotate: false,
      touchZoomRotate: false
    });

  </script>
</body>
</html>