Get started

To use the Ozli framework, you simply need to include a couple of stylesheets in your head. Then, all your plain HTML5.1 code will be styled by the framework.

For more advanced uses of the framework, such as Microsoft Fluent Design "Materials", badges and dialogue boxes, please refer to the documentation.

Everything

For the full featureset, including styling common HTML5.1 elements out-of-the-box, include both grid.css and general.css:

<link rel="stylesheet" href="https://ozli.ga/Ozli-v1.8/grid.css">
<link rel="stylesheet" href="https://ozli.ga/Ozli-v1.8/general.css">

Everything except grid utilities

If you already have your own layout done or want to use specific techniques for your layout, you can get Ozli without the basic grid utilities and still take advantage of everything else it has to offer:

<link rel="stylesheet" href="https://ozli.ga/Ozli-v1.8/general.css">

Grid only

If you only need a simple 12-column-based CSS Grid to HTML shortcut via data-grid attributes, you can get away with solely including the grid.css:

<link rel="stylesheet" href="https://ozli.ga/Ozli-v1.8/grid.css">