Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

# 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)

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