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
1	HTML5 Doctype	The CSS requires the use of the HTML5 doctype.
2	Charset	Add UTF-8 as encoding for the HTML file.
3	CSS	Add the local version of the CSS or integrate a hosted CSS file by using our content delivery network (CDN).
4	Viewport	Add the responsive viewport meta tag to ensure proper rendering on all devices.
5	Apply 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)

Download (CSS Framework)