CSS

ZoaUI focuses on responsive design, aims at maintainable and modular CSS, and follows BEM conventions in its classnames.

Note: It is intended that ZoaUI does not “correct” the variation of box-sizing between different elements.

Overall DOM structure

<!DOCTYPE html>
<html>
<head>
    <title><!-- Title goes here --></title>
    <!-- Viewport meta tags are important -->
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="/css/zoaui.css" />
    <!-- Now customize it! -->
    <link rel="stylesheet" href="/css/YourOwnCSSFile.css" />
</head>
<body>
    <!-- Content goes here -->
    <script src="/js/jquery.js"></script>
    <!-- ZoaUI relies on jQuery -->
    <script src="/js/zoaui.js"></script>
    <!-- Now include your own scripts -->
    <script src="/js/YourOwnScriptFile.js"></script>
</body>
</html>

File inclusion order

We recommend that you use the build version, which includes all the CSS files and is minified. However if you want to build on your own, the requirements in the order of file inclusion are:

helper.css be included after other ZoaUI’s CSS files (but sure, before your own)
form.css be included after button.css (which is a bug, and will be fixed in later releases)

An example import order goes here:

@import url("../fonts.css");
@import url("../general.css");
@import url("../layout.css");
@import url("../typography.css");
@import url("../button.css");
@import url("../nav.css");
/* form.css comes after button.css */
@import url("../form.css");
@import url("../dialog.css");
@import url("../dropdown.css");
@import url("../triangle.css");
@import url("../pagination.css");
@import url("../image.css");
/* helper.css comes last */
@import url("../helper.css");