2 2. Getting Started
athena edited this page 4 months ago

Getting Started

Before we start, you should have good experience with HTML, CSS, and JavaScript. It is highly recommended that you modify Jupiter for each of your projects. Doing it this way allows you to add extensions that can use any part of Jupiter. If you choose not to modify Jupiter, you will only have access to the CSS of Jupiter, as the JavaScript is enclosed in a function, making all of the functions scoped.

With that out of the way, we can get into it.

We'll be actively using Jupiter throughout the docs, so it's recommended to get a test environment setup.


Go ahead and Download Jupiter. Inside the examples/ directory, create a learning.html file. You can go ahead and fill it with this HTML:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>JupiterUI - Playground</title>
		<link rel="stylesheet" href="../dist/jupiterui.css" />
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
	</head>
    <body>


        <script src="../dist/jupiterui.js"></script>
    </body>
</html>

Content in-between linebreaks like these are part of the document we will build together.

Next: 3. Layout