Heads Up! Components & docs are subject to change until official v1.0 release.
×
Introduction:
Components:
Resources:
Getting Started
The easiest way to try out Metaphor is by using our CDN and viewing the source code in our template examples. If you prefer downloading / installing from a package manager, check out the installation process below.
Installation
To include Metaphor in your next project simply run the following in the command line:
$ bower install metaphor --saveNote: If you haven't already you will need to install Node/NPM & Bower first.
Metaphor CDN
Alternatively, you can also add Metaphor to your project with our Content Delivery Network (CDN).
// CSS<link rel="stylesheet" href="//cdn.metalab.csun.edu/metaphor/css/metaphor.css">
// JavaScript<script src="//cdn.metalab.csun.edu/metaphor/js/metaphor.js"></script>Note: You will need to add jQuery to your project if you plan on using metaphor.js
Basic Template
Next add the following boilerplate code to your project:
<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metaphor by META+LAB</title>
<meta name="description" content="">
<link rel="icon" href="//www.csun.edu/sites/default/themes/csun/favicon.ico" type="image/x-icon">
<!-- CSUN Branded Fonts -->
<script src="//use.typekit.net/gfb2mjm.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<link rel="stylesheet" href="//cdn.metalab.csun.edu/metaphor/css/metaphor.css">
<link rel="stylesheet" href="../your-personal-project/path/to/styles.css">
</head>
<body>
<!-- Add Your Code Here & Start Building ;D -->
<script src="//cdn.metalab.csun.edu/metaphor/js/metaphor.js"></script>
</body>
</html>What's Included
When you download Metaphor via Bower, the following source files will be available to you
Metaphor
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bower.json
├── dist/
│ ├── css/
│ │ └── metaphor.css
│ ├── fonts/
│ └── js/
│ └── metaphor.js
├── docs/
├── examples/
├── gulpfile.js
├── index.html
├── package.json
└── src/
├── js/
└── sass/
