Getting Started

Getting started with Nox is extremely easy. The links for download (both developer and minified) are below. After that, include everything like you normally would.

Minified

Download

Developer

Download

In the Box

Nox comes in 2 forms, Minified and Developer. Both are outlined below in terms of what you get.

jQuery Required

For Nox to work, it requires jQuery. It's bundled by default in the js/vendor folder.

Skinny Nox

This is what you will see when you open the uncompressed folder for Nox (minified)

nox/
	css/
		nox.css
		nox.min.css
		font-awesome.min.css
	fonts/
		FontAwesome.otf
		fontawesome-webfont.eot
		fontawesome-webfont.svg
		fontawesome-webfont.ttf
		fontawesome-webfont.woff
		fontawesome-webfont.woff2
	js/
		vendor/
			jquery.min.js
			modernizr.js
		auto-meta.js
		auto-meta.min.js
		modal.js
		nav_fallback.js
		navdrop.js
		navigation.js
		navigation.min.js
		nox.js
		nox.min.js
		scrollTop.js

Fat Nox

This is what you will see when you open the uncompressed folder for Nox (developer). It also includes every file that comprises this website.

nox/
	ajax/
	changelog/
	css/
	docs/
	fonts/
	img/
	js/
	release/
	src/
	theme/
	vendor/
	index.html
	prepros-6.config
	README.md
	test.html

Compiling CSS & JS

Nox was built using PrePros, so therefore the config file is included in the developer version and is very easy to just fire up PrePros and go. It monitors any changes you make and autocompiles/minifies them live so there is no need for any command line tools. Of course, if you want to, you can, but I don't support that officially as I use PrePros.

Basic Template

This is the basic HTML template that you should use. Please customize this template as you see fit.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- This isn't needed if you're using auto-meta.js -->
	<title>A Beautiful Nox Website</title>

	<link href="css/nox.min.css" rel="stylesheet">
</head>
<body>
	<h1>Hello world!</h1>
	<p>This is my first Nox website! Hooray!</p>

	<!-- jQuery & scripts -->
	<script src="js/vendor/jquery-3.0.0.min.js"></script>
	<script src="js/nox.min.js"></script>
</body>
</html>