Lets get started, shall we?

This is a quick overview of what Schema provides to build rich web interfaces.


You'll need to download the framework, first.

All source files, and the entire project, can be found in this repository on Github.

Schema UI

You'll find compiled and minified versions. There is no documentation, or original source files for you to change. Are you looking to use Schema 'as-is'? Then this is for you.

Download Schema

Schema UI Source

This file contains all Less, JS, and font files. You will also find the documentation on how to implement Schema. You will need a Less compiler and some minor knowledge of that process.

Download Schema Source


File Structure

Once downloaded, you'll find all source files ready to use for your next project. Styling has been kept at a bare-minimum to give you more flexibility in development, but we do have some styling associated with certain components. These are easily changeable in the right Less files.

Folder Description
src/css When your Less compiles into CSS. It ends up here.
src/less Contains all Less files (variables, mixins, etc).
src/js Contains Javascript and Jquery files.
src/fonts Contains Font Awesome source and any fonts needed.
src/lib Contains all dependencies.
dist/css Minified and compressed CSS ready for production.

Setting up your source files.

Using Schema out of the box? You'll find compiled and minified files in the dist folder.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="dist/css/yourfile.css" />
        <script src="dist/js/yourfile.js"></script>
    </head>
    <body>
    </body>
</html>

Viewport Meta Tag

Schema comes with a responsive grid system, so be sure to include this line of code in the head section of your site.

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=1">

For Modern Browsers

Schema was built for modern browsers. We built it to take advantage of the latest desktop and mobile browsers, so it may not play so well in older browsers. We're only support the latest versions of the top five browsers. It's time to look forward, not backwards, in web development.

Chrome Firefox Internet Explorer Opera Safari
Mac OS X
Windows
Android
iOS