This repository has been archived by the owner on Dec 31, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
109 lines (96 loc) · 8.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head lang="en">
<title>Office UI Fabric - Demos and Examples</title>
<meta charset="UTF-8">
<!-- fav icons -->
<link rel="shortcut icon" href="/img/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/img/favicon/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/img/favicon/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/img/favicon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/img/favicon/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/img/favicon/favicon-32x32.png" sizes="32x32">
<!-- azure application insights -->
<script src="/js/azure-app-insights.js" type="text/javascript"></script>
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css" />
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css" />
<link rel="stylesheet" href="/css/styles.min.css" />
<meta http-equiv="refresh" content="5;url=http://dev.office.com/fabric" />
</head>
<body>
<div class="ms-Grid">
<!-- header -->
<header id="page-header" class="ms-Grid-row ms-Grid-col ms-u-sm12">
<div id="brand-name" class="ms-font-su ms-fontWeight-semibold ms-fontColor-white">
Office Fabric UI
</div>
<div id="site-tagline" class="ms-font-l ms-fontColor-white ms-fontWeight-light">
Demos of the front-end framework for building experiences using Office, Office 365 & SharePoint.
</div>
</header>
<!-- navigation -->
<nav class="ms-Grid-row ms-Grid-col ms-u-sm12">
<ul id="global-nav">
<li class="ms-font-l ms-fontWeight-light"><a href="/">Home</a></li>
<li class="ms-font-l ms-fontWeight-light"><a href="/features">Features</a></li>
<li class="ms-font-l ms-fontWeight-light"><a href="/components">Components</a></li>
<li class="ms-font-l ms-fontWeight-light"><a href="/resources.html">Resources</a></li>
<li class="ms-font-l ms-fontWeight-light"><a href="/status.html">Status</a></li>
<li class="ms-font-l ms-fontWeight-light"><a href="/contribute.html">Contribute!</a></li>
</ul>
</nav>
<div class="ms-Grid-row">
<!-- side-nav -->
<aside id="local-nav" class="ms-Grid-col ms-u-sm-3 ">
<ul>
<li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="https://github.com/OfficeDev/Office-UI-Fabric">Office UI Fabric Project</a></li>
<li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="https://blogs.office.com/2015/08/31/introducing-office-ui-fabric-your-key-to-designing-add-ins-for-office/">Office UI Fabric Announcement</a></li>
<li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="https://blogs.office.com/2015/09/10/episode-062-on-office-ui-fabric-office-365-developer-podcast/">Office 365 Developer Podcast<br/>Episode on the Office UI Fabric</a></li>
</ul>
</aside>
<!-- page body -->
<article id="page-main" class="ms-Grid-col ms-u-sm9 ms-font-m">
<h1 class="ms-font-su">Welcome to the Office UI Fabric Demos!</h1>
<p class="ms-font-l">The purpose of this site is to have a reference site containing demos for you to browse and see what you can do with the Office UI Fabric.</p>
<h2 class="ms-font-xxl">What is the Office UI Fabric?</h2>
<p class="ms-font-l">The <a href="https://github.com/OfficeDev/Office-UI-Fabric" class="ms-Link">Office UI Fabric</a> is <span class="ms-fontWeight-semiBold">The front-end framework for building experiences for Office and Office 365.</span> It is a responsive, mobile-first, front-end framework, designed to make it quick and simple for you to create web experiences using the Office Design Language. It's easy to get up and running with Fabric - whether you're creating a new Office experience from scratch or adding new features to an existing one.</p>
<p class="ms-font-l">You can learn more about the Office UI Fabric with the project & announcement links to the left, including the official announcement by Microsoft and an interview on the <a href="https://blogs.office.com/type/podcast/" class="ms-Link">Office 365 Developer Podcast</a> with the project lead.
<h2 class="ms-font-xxl">This Site Will Be Replaced...</h2>
<p class="ms-font-l" style="background-color:yellow;">In November 2015, Microsoft released their own site with samples and demos for the Office UI Fabric, located at <a href="http://dev.office.com/fabric" class="ms-Link">dev.office.com/fabric</a>. When the Microsoft site is up, this site will redirect to the Microsoft site as it doesn't make sense to have two demo sites when one is the real source of truth.</p>
<h2 class="ms-font-xxl">What Can You Find on this Site?</h2>
<p class="ms-font-l">As stated above, this site will hold demos & serve as a reference of sorts to show off the current version of the Office UI Fabric. This includes colors, typography, controls... everything.</p>
<h3 class="ms-font-xl">Features</h3>
<p class="ms-font-l">Features includes things like typography, color, icons, animations, the Office UI Fabric's responsive grid & details on the localization support.</p>
<h3 class="ms-font-xl">Components</h3>
<p class="ms-font-l">The Office UI Fabric contains many common components that you find within Office 365, the Office clients, and SharePoint. This includes things like buttons, drop-down lists, tables, toggle switches, the coveted people picker, callouts, dialogs and so much more! Some of these controls require an extra CSS file reference and a little JavaScript to implement the interactivity... all of which you'll find here on the site.</p>
<h3 class="ms-font-xl">Resources</h3>
<p class="ms-font-l">Looking for more information on the Office UI Fabric? Here you'll find a wealth of resources.</p>
<h3 class="ms-font-xl">Status</h3>
<p class="ms-font-l">The status page for the site will convey where we are on building out the different component demos, and a changelog for this site.</p>
<h3 class="ms-font-xl">Contribute</h3>
<p class="ms-font-l">Interested in helping build out the demos on this site? The contribute page explains everything you need to know.</p>
<h2 class="ms-font-xxl">By the Community - For the Community!</h2>
<p class="ms-font-l">This site is not by Microsoft, it is built by and for the community.</p>
<h2 class="ms-font-xxl">Why?</h2>
<p class="ms-font-l">I'm <a href="https://www.twitter.com/andrewconnell" class="ms-Link">Andrew Connell</a> and I started this effort out but I'm hoping this turns into a project with contributions from the community! I created this because I think we needed a reference site for all the samples, just like other design languages have such as <a href="http://getbootstrap.com" class="ms-Link">Bootstrap</a>.</p>
<p class="ms-font-l">But this is just the first step. What I really needed was a baseline to compare to for another project I kicked off: <a href="http://ngofficeuifabric.com" class="ms-Link">Angular Office UI Fabric<a>. That project will implement the Office UI Fabric for Angular 1.4.x+ & Angular 2. But we needed something to point to to say "that's our spec" when building it out... hence this site was born.</p>
<p class="ms-font-l">Oh... by the way... <a href="https://github.com/ngOfficeUIFabric/ng-officeuifabric#contributing-to-the-project" class="ms-Link">I want help on that project too!</a></p>
</article>
</div>
<!-- footer -->
<footer id="page-footer" class="ms-Grid-row ms-Grid-col ms-u-sm12 ms-font-m ms-fontWeight-light ms-fontColor-white">
<p>Microsoft, Office, Office 365 and SharePoint are registered trademarks of Microsoft Corporation.</p>
<p>Current Version of the Office UI Fabric used on this site: v1.0.0</p>
</footer>
</div>
</body>
</html>