Get started

Learn how to start using the CSS Framework

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 CSS Framework will fallback on a web-safe font.

.forceDefaultElements class

We provide most example snippets in two variants: one using semantically ‘best fitting’ elements such as a <button> element for a button, and another one where the default styling for e.g. a button can be applied to an <a> tag by adding a .button class. There are benefits as well as disadvantages for both ways so please chose whatever works for your use case best.

For the basic elements we provide html snippets for both implementations, the more complex snippets will use the semantically appropriate elements and therefor will make use of the forceDefaultElements class. Every example can be acchieved either way!

HTML starter template

  • Follow the code snippet below on how to import the 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: (uxt, uxt-defaults, forceDefaultElements)

Where (not) to apply styling?

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

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 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="uxt uxt-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: "CSS Framework",
            appId: "_mdspcontent"
        });
    </script>
</body>
</html>

Usage

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

Section Name Explanation
1HTML5 DoctypeThe CSS requires the use of the HTML5 doctype.
2CharsetAdd UTF-8 as encoding for the HTML file.
3CSSAdd the local version of the 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:
  • "uxt uxt-defaults":
    Apply styles defined with an IoT User Experience Toolkit CSS class selector: e.g. .button–primary
  • "uxt uxt-defaults forceDefaultElements":
    Automatically apply 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)
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top