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.Download Athena Framework v1.0.8
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>
You can also clone a copy of the git project to your computer locally:
git clone email@example.com:UCF/Athena-Framework.git
npm install --save ucf-athena-framework
bower install --save ucf-athena-framework
The project folder will contain minified files (
/dist/) as well as source code (
/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 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
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.
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.
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.
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.
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.
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.
For base support with Athena, your Cloud.typography project should be configured to include the following fonts/weights:
- Gotham ScreenSmart
- Book Italic
- Bold Italic
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.
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
- Bold Italic
- Archer (for
- Book Italic
- Bold Italic
- Knockout Regular (for
- 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.