office-ui-fabric-core
Version:
The front-end framework for building experiences for Office 365.
71 lines (61 loc) • 5.28 kB
HTML
@('./modules/components/DocumentationPageHeader.html')
<h1>Get Started</h1>
<h2 id="quick-start">Quick start</h2>
<p>The simplest way to get started is to add a copy of Fabric to your project.</p>
<ol>
<li>Download the source code zip file from the <a href="https://github.com/OfficeDev/Office-UI-Fabric/releases/latest">latest release on GitHub</a>.</li>
<li>Unzip the file and copy the Fabric folder into your project.</li>
<li>Add a reference to <code>fabric.css</code> in the <code><head></code> of your page. Make sure the path is correct.</li>
<li>If you're using <a href="http://dev.office.com/fabric/components">components</a>, add a reference to <code>fabric.components.css</code> after the <code>fabric.css</code> reference.</li>
</ol>
<h3>Using Fabric icons and fonts</h3>
<p>Now that your project references Fabric, you can apply <a href="/Typography">type styles</a> to any text element.</p>
<pre><code class="hljs"><span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span></code></pre>
<p>To use icons, add an <code><i></code> element with the appropriate <a href="/Icons">icon classes</a>.</p>
<pre><code class="hljs"><i class="ms-Icon ms-Icon--mail" aria-hidden="true"></i></code></pre>
<p>By default, icons inherit the text size and color of their parent. To override this, apply <a href="/Typography">type styles</a> directly to the icon.</p>
<p aria-hidden="true">
@@include('./modules/content/DownloadSVG.html')
</p>
<h3>Using components</h3>
<p>To use Fabric components:</p>
<ol>
<li>Add <a href="http://dev.office.com/fabric/components">markup</a> to your pages using the appropriate classes.</li>
<li>If the component requires JavaScript, you can use the sample JavaScript included in the <a href="https://github.com/OfficeDev/Office-UI-Fabric/releases/latest">latest release</a> on GitHub.</li>
<li>Initialize the component JavaScript, and you’re all set! For an example that shows how to initialize the JavaScript, see the <a href="http://dev.office.com/fabric/components">components page</a>.</li>
</ol>
<p aria-hidden="true">
@@include('./modules/content/ExampleUsageSVG.html')
</p>
<h2>Other ways to get Fabric</h2>
<p>In addition to downloading a copy for your project, you can include Fabric via a CDN reference, by adding it through a package manager, or by building your own copy from the source code.</p>
<h3 id="cdn">Reference the CDN</h3>
<p>If you prefer to have your project's assets stored on an external server, Fabric is available from the apps for Office CDN. To use it, include the following references in the <code><head></code> of your page.</p>
<pre><code class="hljs"><link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css">
</code></pre>
<p>New versions of Fabric might not be available on the CDN right away. The following table lists the releases that are available now. To reference a specific version, update the version number in the URL to match the one you want.</p>
<table class="docs-Table docs-Table--striped" style="width: 100%;">
<tr>
<th style="width: 80%;">Fabric Release</th>
<th style="width: 20%;">Available on CDN</th>
</tr>
{{#each AvailableOnCDNModel.items}}
{{> CDNRow this }}
{{/each}}
</table>
<h3 id="package-managers">Package managers</h3>
<p>Fabric is also available from a variety of package managers, including <a href="http://bower.io/">Bower</a>, <a href="https://www.npmjs.com/">npm</a>, and the <a href="https://www.nuget.org/">NuGet Package Manager</a>. You can quickly add Fabric as a package and stay up to date with the latest version.</p>
<h4>Install with Bower</h4>
<p>To install Fabric using Bower, run the following command:</p>
<pre><code class="hljs">$ bower install office-ui-fabric</code></pre>
<h4>Install with npm</h4>
<p>To install Fabric using npm, run the following command:</p>
<pre><code class="hljs">$ npm install office-ui-fabric</code></pre>
<h4>Install with NuGet Package Manager</h4>
<p>To install Fabric's NuGet package, run the following command in the <a href="http://docs.nuget.org/consume/package-manager-console">package manager console</a>:</p>
<pre><code class="hljs">PM> Install-Package OfficeUIFabric</code></pre>
<h3 id="build">Build from source</h3>
<p>Fabric is easy to build and customize locally using gulp and a handful of tasks to watch and build specific parts of the toolkit. You can also use gulp to build and tweak demos and samples.</p>
<p>For more information about how to build Fabric locally, including gulp tasks, check out <a href="https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/BUILDING.md">our instructions on GitHub</a>.</p>
@('./modules/components/DocumentationPageFooter.html')