unibz Pattern Library

Markup

Using the styles

The purpose of this pattern library is to showcase the markup (HTML) patterns and class names that you have to use to style your app or website in the unibz way.

In the menu to the left under Patterns you will find a list of all available components and the markup that is needed to generate them.

Be sure to check the Info section inside the patterns to get additional information about the usage (If a pattern is self explanatory the Info section might be empty).

Module vs. Utility?

A lot of simple markups structures can be created using the utility & layout classes have a look at the examples section to get a better idea.

Starter template

<!doctype html>
<html lang="en-US">
  <head>
    <title>My unibz App</title>

    <!-- Required  meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">

    <!-- unibz CSS -->
    <link rel="stylesheet" href="http://dev-framework.unibz.it/0.0.1/css/main.css">
  </head>
  <body>
    <h1>My unibz App</h1>

    <!-- unibz JavaScript -->
    <script src="http://dev-framework.unibz.it/0.0.1/js/main.js"></script>
  </body>
</html>

Markup requirements

To ensure that the library works as intended some markup requirements need to be met.

HTML5 doctype

<!doctype html>

Responsive meta tag

All patterns follow responsive design principles, that means their appearance adapts itself to the screen size they are displayed on. To ensure this behavior the viewport meta tag is needed/

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">

HTML lang attribute

Apart from semantics this tag is used to load correct translations for JavaScript widgets. Be sure to include the extended version <language>-<country code>. The supported locales are:

  • de-DE
  • it-IT
  • en-US
<html lang="is-IT">
<!-- ... -->
</html>