Get started
Contents
Basic template
The fastest way to get started is to simply copy the HTML template below. There is no need to download anything as odin.css can be served from the jsDelivr CDN. If you are integrating Odin into an existing project, make sure that you are including an HTML5 doctype declaration and a viewport meta tag so that your site will have proper responsive behaviors.
Any resets such as normalize.css should be linked before odin.css. Custom stylesheets and any stylesheets that override default Odin styling should be linked after. You will also need to link to odin.js and JQuery if you plan on using slideout navbars or carousels. Otherwise, the JavaScript referrences can be deleted.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- metadata -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- page title -->
<title>Page Title</title>
<!-- styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/joncoop/odin@0.11.2/dist/css/odin.min.css">
<!-- link to your custom stylesheets here -->
</head>
<body>
<!-- make your grid and add content here -->
<!-- include any javascript below this line -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/joncoop/odin@0.11.2/dist/js/odin.min.js"></script>
</body>
</html>
Source Code
If you'd rather have the code stored locally, then you can download unminified source. The framework is defined entirely in odin.css. Interactive elements such as slide-out navigation and carousels require odin.js which is reliant on jQuery.