Get started

Learn how to start using MindSphere CSS

Setup

  • Download our zip file.
  • Extract content.
  • Open the files directory.
  • Copy the content of the files directory into the directory where your application is located. Your directory could look like this:
|--assets/
|  |--fonts/
|  |--images/
|
|--css/
|  |--mdsp-css.min.css
|  |--mdsp-css.min.css.map
|--index.html

Siemens Sans web-font

Internal use

The Siemens Sans web-font is not included in the zip files, they are reserved for Siemens internal use only!

A zip file containing the font files, CSS and SCSS code snippets is available to download here. Without included Siemens web-font, the MDSP-CSS Framework will fallback on a web-safe font.

HTML starter template

  • Follow the code snippet below on how to import MDSP-CSS into your application.
  • We do not want to break anything in your application by adding the CSS file to an existing project. So you have to add the following CSS selectors explicitly: (mdsp, mdsp-defaults, forceDefaultElements)

Recommended setup for a new project:

<!-- Application index.html -->
<!-- [1] HTML5 Doctype -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- [2] Charset UTF-8 -->
    <meta charset="utf-8" />
    <!-- [3] Import the local MDSP-CSS file -->
    <link type="text/css" rel="stylesheet" href="css/mdsp-css.min.css"  media="screen,projection" />
    <!-- [4] Responsive viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello world</title>
</head>
<body>
    <!-- [5] Apply styles -->
    <div class="mdsp mdsp-defaults forceDefaultElements" id="_mdspcontent">
        <h1>Starter template</h1>
        <!-- Sample content -->
        <h2>A simple message</h2>
        <div class="messageWrapper">
            <div class="message message--withIcon">
                <h1 class="message__headline">hello world</h1>
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </div>
            </div>
        </div>
        <h2>Additional html elements</h2>
        <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
        </ul>
        <button class="button--primary">A simple button</button>
    </div>

    <!-- OS Bar integration -->
    <script src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>
    <script>
        _mdsp.init({
            title: "MindSphere CSS",
            appId: "_mdspcontent"
        });
    </script>
</body>
</html>

Usage

The following explanations refer to the numbered sections in the HTML code / example above:

Section Name Explanation
1HTML5 DoctypeMDSP-CSS requires the use of the HTML5 doctype.
2CharsetAdd UTF-8 as encoding for the HTML file.
3CSSAdd the local version of MDSP-CSS or integrate a hosted CSS file by using our content delivery network (CDN).
4ViewportAdd the responsive viewport meta tag to ensure proper rendering on all devices.
5Apply styles Add the following CSS selectors to appy the styles:
  • "mdsp mdsp-defaults":
    Apply styles defined with an MDSP-CSS class selector: e.g. .button–primary
  • "mdsp mdsp-defaults forceDefaultElements":
    Automatically apply MDSP-CSS styles to commonly used HTML elements:
    • headings (h1 - h6)
    • paragraph (p)
    • bold text (b, strong)
    • small text (small)
    • emphasized text (i, em)
    • marked/highlighted text (mark)
    • links (a, button)
    • horizontal rule (hr)
    • lists (ul, ol, dl)

Where (not) to apply styling?

Don't apply styling to the <body> element since you shall not overwrite MindSphere OS Bar styles by accident; apply styles only to the container of your application.

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top