Download & install

Download Athena's compiled CSS and JavaScript, source code, or include it with your favorite package manager.

For quick usage, the Athena Framework is hosted on UCF's CDN. For those that want to utilize Athena's Sass variables and mixins directly, Athena can also be downloaded from Github, or included in your project using npm or Bower.

Contents

Download Options

Direct Download (.zip)

Download Athena Framework v1.0.8

CDN

Skip the download and use CDN-hosted files to deliver Athena's compiled CSS and JS to your project.


<link rel="stylesheet" href="https://cdn.ucf.edu/athena-framework/v1.0.8/css/framework.min.css">
<script src="https://cdn.ucf.edu/athena-framework/v1.0.8/js/framework.min.js"></script>

Github

You can also clone a copy of the git project to your computer locally:

git clone git@github.com:UCF/Athena-Framework.git

npm

npm install --save ucf-athena-framework

Bower

bower install --save ucf-athena-framework

What's Included

The project folder will contain minified files (/dist/) as well as source code (/src/):

Minified, pre-compiled assets

The framework download includes ready-to-use CSS, JavaScript, and webfont files in the /dist/ folder. Projects that just need to include Athena without modifications can use the already-minified files in this folder; see the Installing Minified Files section for more information.

├── dist/
   ├── css/
   │   └── framework.min.css
   ├── fonts/
   │   ├── tulia/…
   │   ├── ucf-condensed-alt/…
   │   └── ucf-sans-serif-alt/…
   └── js/
       └── framework.min.js

Source files

Source Sass files and other full, non-minified, files can be found in the /src/ folder. Projects that need to extend Athena and/or reference Athena's Sass variables should utilize the source code files in this folder. For more information on working with these files directly, see our build tools notes.

├── src/
   ├── fonts/…
   ├── js/…
   └── scss/
   │   ├── …
   │   ├── _alert.scss
   │   ├── _badge.scss
   │   ├── _breadcrumb.scss
   │   ├── _buttons.scss
   │   ├── _card.scss
   │   ├── …
   │   └── framework.scss

Installation

Installing Minified Files

After downloading and extracting the Athena-Framework, add the CSS, JS and font files from the /dist/ directory to somewhere within your project. You'll need to maintain the directory structure of the /dist/ folder's contents, since fallback font includes are imported using a relative, fixed path. See the Included Fonts section for more information.

For more information on embedding Athena's styles and scripts into your project's templates, or for instructions on installing CDN assets, see the Quick Start instructions.

Relative font paths in /dist/

Keep in mind that Athena's minified CSS references font files relative to the folder structure in /dist/--meaning that, in projects using these files, this existing folder structure must be maintained for fonts to load properly.

If you cannot store Athena's fallback fonts in a folder called /fonts/ that exists one directory up from the minified framework CSS, you must use Athena's source Sass files, modify the $athena-font-path Sass variable, and minify the framework manually.

Adding to Existing Project Using 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.

If you're upgrading from Bootstrap 3, be sure to check out the Migration Guide for the full list of differences between Bootstrap and Athena.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.ucf.edu/athena-framework/v1.0.8/css/framework.min.css">

…

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/js/tether.min.js" integrity="sha256-mIiWebTG82x+OcV3vUA49ffGDIAJ53uC9jflw5/+REs=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<script type="text/javascript" src="https://cdn.ucf.edu/athena-framework/v1.0.8/js/framework.min.js"></script>

Webfont Configuration

Athena is built to utilize premium fonts provided by the Cloud.typography service by default, with webfont fallbacks (available in the /dist/fonts/ directory). Using premium fonts with Athena is preferred, but not required.

Included Fallback Fonts

If you're loading Athena from UCF's CDN, fallback fonts will be used without any additional steps.

To utilize fallback webfonts in a manual installation, copy the /fonts/ directory (from the /dist/fonts/ in the framework's files) to the same folder in your project that you added the framework's CSS and JS files to. The framework's CSS is built to include webfonts from that directory.

 ├── css/
 ├── fonts/
 │   ├── tulia/
 │   ├── ucf-condensed-alt/
 │   └── ucf-sans-serif-alt/
 └── js/

Alternatively, you can pick a custom location for the fallback fonts directory within your project, as long as you modify the $athena-font-path Sass variable and recompile.

Cloud.typography Premium Font Configuration

While Athena provides fallback webfonts out-of-the-box, the preferred font families for Athena are only available via the Cloud.typography service. Athena Framework users are responsible for creating their own Cloud.typography accounts and maintaining their subscriptions to the service.

Base Configuration

For base support with Athena, your Cloud.typography project should be configured to include the following fonts/weights:

  • Gotham ScreenSmart
    • Book
    • Book Italic
    • Bold
    • Bold Italic

Gotham Licensing for the Web

Any existing print license for Gotham usage, whether purchased via the UCF Computer Store or separately, does not cover usage of webfonts.

To use Gotham on the web, you must register for the Cloud.typography service.

Do not attempt to self-host Gotham font files that are not provided by Cloud.typography for production font projects.

Font Family Extras

To take advantage of the font family overrides available with Athena, the following fonts/weights can also be added to your Cloud.typography project as needed*:

  • Chronicle Text Grade 3 (for .font-serif support)
    • Roman
    • Italic
    • Bold
    • Bold Italic
  • Archer (for .font-slab-serif support)
    • Book
    • Book Italic
    • Bold
    • Bold Italic
  • Knockout Regular (for .font-condensed support)
    • Knockout 49, Lightweight

Because Athena does not support older browsers, enabling Legacy Support is not necessary and is not recommended.

More weights can be added as needed per-project, however, we don't recommend usage of most "thin" or "extra light" weights due to readability concerns.

*Note: Avoid adding webfonts that aren't needed for your project; as the number of fonts in a project increases, the average load time for the font project increases.