It's easy to get started with the Athena Framework. The steps below outline the minimum requirements for getting Athena set up using CDN assets.
A Note about Bootstrap
Athena is a complete replacement for Bootstrap. If you are already using Bootstrap on an existing project and want to use Athena instead, you should remove Bootstrap's CSS and JavaScript completely. Athena is designed to run as a completely standalone framework.
Read more about the differences between Athena and Bootstrap here.
Contents
1. Add required document metadata
HTML5 doctype
Athena requires the use of the HTML5 doctype. Make sure you've included it at the very top of your document.
<!DOCTYPE html>
<html lang="en">
...
</html>
Responsive meta tag
Athena is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
You can see an example of this in action in the starter template.
2. Add stylesheets
Add the Athena stylesheet before all other stylesheets in your document <head>. If you're using Cloud.typography, your CSS key should go immediately before the Athena stylesheet.
Using fallback fonts only (no Cloud.typography fonts)
<link rel="stylesheet" href="https://cdn.ucf.edu/athena-framework/v1.3.2/css/framework.min.css" />
Using Cloud.typography fonts
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/xxxxxx/xxxxxx/css/fonts.css" />
<link rel="stylesheet" href="https://cdn.ucf.edu/athena-framework/v1.3.2/css/framework.min.css" />
3. Add JavaScript
Add jQuery, Tether, and Athena's JavaScript near the end of your pages, right before the closing </body> tag. Be sure to place jQuery and Tether first, as our code depends on them. While we use jQuery's full build in our docs, the slim version is also supported.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.7/js/tether.min.js" integrity="sha384-CPFFlrdhp9pDDCqRqdTKNZ5oAHsnfnvHGt0CsRIeL5Gc7V/OkP1Y4w8zTxlV3mat" crossorigin="anonymous"></script>
<script src="https://cdn.ucf.edu/athena-framework/v1.3.2/js/framework.min.js"></script>
Starter template
Following the steps above, a basic starter template would look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Athena CSS -->
<link rel="stylesheet" href="https://cdn.ucf.edu/athena-framework/v1.3.2/css/framework.min.css" />
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery first, then Tether, then Athena JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.7/js/tether.min.js" integrity="sha384-CPFFlrdhp9pDDCqRqdTKNZ5oAHsnfnvHGt0CsRIeL5Gc7V/OkP1Y4w8zTxlV3mat" crossorigin="anonymous"></script>
<script src="https://cdn.ucf.edu/athena-framework/v1.3.2/js/framework.min.js"></script>
</body>
</html>
That's all you need for overall page requirements. Visit the Layout docs to start laying out your site's content and components.