The CSS classes to implement buttons are not scoped to specific HTML elements, but as stated above it's recommended to use <button> elements when possible to match cross-browser rendering just like the Bootstrap button guidance states. The action buttons below show using the <button>, <a> and <div> elements, but the rest of this page will focus on using just the <button> element.
+
The CSS classes to implement buttons are not scoped to specific HTML elements, but as stated above it's recommended to use <button> elements when possible to match cross-browser rendering just like the Bootstrap button guidance states. The action buttons below show using the <button>, <a> and <div> elements, but the rest of this page will focus on using just the <button> element.
To create a button, simply add the CSS class .ms-Button to it. Add additional classes to make it an action, primary, hero, compound or command button or to make it disabled.
Add text to the button by adding an inner <span> element to the <button> element with the CSS class .ms-Button-label.
Hero buttons allow you to add icons and act more like links than buttons. Like action buttons, they be both enabled and disabled. These buttons will not render a description like some of the other buttons.
-
To add an icon to the button, <span> element to the <button> element with the CSS class .ms-Button-icon, then add one of the supported icons listed below using the same syntax you add regular icons.
+
To add an icon to the button, <span> element to the <button> element with the CSS class .ms-Button-icon, then add one of the supported icons listed below using the same syntax you add regular icons.
To create a radio button and checkbox choice field you will surround a pair of <input> and <label> elements within a <div> and decorate each of these element with specific CSS classes to render them appropriatly.
Radio button groups are implemented in a similar way except you will wrap all the controls in another <div> and decorate each of the input controls with the CSS class .ms-ChoiceFieldGroup to group them together.
You will want to add JavaScript to clear out the placeholder when the control receives focus as shown in the following snippets. An example of this code, using jQuery, can be found in the Office UI Fabric component distribution: Jquery.SearchBox.js
+
You will want to add JavaScript to clear out the placeholder when the control receives focus as shown in the following snippets. An example of this code, using jQuery, can be found in the Office UI Fabric component distribution: Jquery.SearchBox.js
Creating a text field control is as simple as adding the .ms-TextField-field class to an <input> element. You can also wrap it within a <div> and decorate it with the .ms-TextField CSS class to group a label with it.
Like other controls, include the .is-disabled decorator CSS class to indicate if the field is disabled.
Include the .is-required decorator CSS class to indicate if the field is required.
-
When using placeholders, in addition to adding the CSS classes, you will also want to add JavaScript to clear out the placeholder when the control receives focus as shown in the following snippets. An example of this code, using jQuery, can be found in the Office UI Fabric component distribution: Jquery.TextField.js
+
When using placeholders, in addition to adding the CSS classes, you will also want to add JavaScript to clear out the placeholder when the control receives focus as shown in the following snippets. An example of this code, using jQuery, can be found in the Office UI Fabric component distribution: Jquery.TextField.js
The Office UI Fabric also includes CSS classes for implementing placeholders in text fields. Adding the .ms-TextField--placeholder to the outter <div> will treat the label as a placeholder.
-
Note that this scenario requires the use of some JavaScript to handle the placeholder placement. Refer to the Usage section for more information on this.
+
Note that this scenario requires the use of some JavaScript to handle the placeholder placement. Refer to the Usage section for more information on this.
The underlined version of the text field moves the label into the first line of the input control.
-
Note that this scenario requires the use of some JavaScript to handle the placeholder placement. Refer to the Usage section for more information on this.
+
Note that this scenario requires the use of some JavaScript to handle the placeholder placement. Refer to the Usage section for more information on this.
Note that this scenario requires the use of some JavaScript to handle the placeholder placement. Refer to the Usage section for more information on this.
+
Note that this scenario requires the use of some JavaScript to handle the placeholder placement. Refer to the Usage section for more information on this.
diff --git a/css/styles.css b/css/styles.css
index 4d514ce..1c774d1 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2,6 +2,13 @@ body {
margin: 0;
padding: 0; }
+.clearfix:after {
+ content: ".";
+ visibility: hidden;
+ display: block;
+ height: 0;
+ clear: both; }
+
/* >>>>> MAIN PAGE ELEMENTS <<<<< */
#page-header {
background-color: #0078d7;
diff --git a/css/styles.min.css b/css/styles.min.css
index d2a0bc6..2c330f9 100644
--- a/css/styles.min.css
+++ b/css/styles.min.css
@@ -1 +1 @@
-#page-footer,#page-header{padding-top:15px;padding-bottom:15px}body,nav{margin:0}#brand-logo,#brand-name,#global-nav li,#site-tagline,.header-element-base{display:inline-block}#global-nav a,#page-header{text-align:center;color:#fff}#local-nav,nav{text-align:right}#global-nav,#local-nav ul{list-style:none}#global-nav a,#local-nav ul a{text-decoration:none;display:block}body{padding:0}#page-header{background-color:#0078d7;width:100%}#page-main{text-align:left;padding-right:25px}#page-footer{background-color:#005a9e;margin-top:25px;margin-bottom:25px;text-align:center}#brand-name{margin-left:15px}#site-tagline{margin-left:75px;width:360px;text-align:left}nav{background:#005a9e}#global-nav{margin-right:50px}#global-nav li a:hover{background:#004578}#global-nav a{padding:10px}#global-nav li:last-of-type a,#local-nav li:last-of-type a{border-bottom:none}#local-nav{margin:15px 50px 0 0}#local-nav ul a{padding:.5em}.align-middle{vertical-align:middle}.no-wrap-cell{white-space:nowrap}.icon-list ul li{float:left;font-size:11px;color:#000;width:15%;text-align:center;height:100px;padding:10px;overflow:hidden}.icon-list ul li .ms-Icon{font-size:35px;display:block;margin:10px auto}.animation-container{position:relative;width:100%;display:inline-block;overflow:hidden}.animation-panel-in,.animation-panel-out{position:absolute;top:0;width:60px;height:100%}.animation-content{height:100%;border:1px solid gray;padding:10px}.animation-panel-in{opacity:0}.animation-panel-out{opacity:1}
\ No newline at end of file
+#page-footer,#page-header{padding-top:15px;padding-bottom:15px}body,nav{margin:0}#global-nav a,#page-header{text-align:center;color:#fff}#local-nav,nav{text-align:right}#global-nav,#local-nav ul{list-style:none}#global-nav a,#local-nav ul a{text-decoration:none;display:block}body{padding:0}.clearfix:after{content:".";visibility:hidden;display:block;height:0;clear:both}#brand-logo,#brand-name,#global-nav li,#site-tagline,.header-element-base{display:inline-block}#page-header{background-color:#0078d7;width:100%}#page-main{text-align:left;padding-right:25px}#page-footer{background-color:#005a9e;margin-top:25px;margin-bottom:25px;text-align:center}#brand-name{margin-left:15px}#site-tagline{margin-left:75px;width:360px;text-align:left}nav{background:#005a9e}#global-nav{margin-right:50px}#global-nav li a:hover{background:#004578}#global-nav a{padding:10px}#global-nav li:last-of-type a,#local-nav li:last-of-type a{border-bottom:none}#local-nav{margin:15px 50px 0 0}#local-nav ul a{padding:.5em}.align-middle{vertical-align:middle}.no-wrap-cell{white-space:nowrap}.icon-list ul li{float:left;font-size:11px;color:#000;width:15%;text-align:center;height:100px;padding:10px;overflow:hidden}.icon-list ul li .ms-Icon{font-size:35px;display:block;margin:10px auto}.animation-container{position:relative;width:100%;display:inline-block;overflow:hidden}.animation-panel-in,.animation-panel-out{position:absolute;top:0;width:60px;height:100%}.animation-content{height:100%;border:1px solid gray;padding:10px}.animation-panel-in{opacity:0}.animation-panel-out{opacity:1}
\ No newline at end of file
diff --git a/css/styles.scss b/css/styles.scss
index ac1ffd9..a1b7715 100644
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -1,6 +1,14 @@
@import '_reset';
@import '_colors';
+.clearfix:after {
+ content: ".";
+ visibility: hidden;
+ display: block;
+ height: 0;
+ clear: both;
+}
+
/* >>>>> MAIN PAGE ELEMENTS <<<<< */
#page-header {
background-color: $ms-themePrimary;
diff --git a/features/animations.html b/features/animations.html
index 5a15398..86a2019 100644
--- a/features/animations.html
+++ b/features/animations.html
@@ -111,12 +111,12 @@
Features The animations vary in three different axis:
-
Direction: Aside from the common up / down / right / left direction options, animations can also move related to the origin and completion of tasks or occurance of events.
-
Orientation: How does the animation behave? Animations in the Office UI Fabric can slide in/out , scale or fade in/out, or zoom in/out.
-
Speed / Duration: How long does it take for the animation to complete. The speed of an animation conveys the importance or urgency of the action or subject of the animation.
+
Direction: Aside from the common up / down / right / left direction options, animations can also move related to the origin and completion of tasks or occurance of events.
+
Orientation: How does the animation behave? Animations in the Office UI Fabric can slide in/out , scale or fade in/out, or zoom in/out.
+
Speed / Duration: How long does it take for the animation to complete. The speed of an animation conveys the importance or urgency of the action or subject of the animation.
Microsoft offers the following guidance when applying animations to panels:
+
Microsoft offers the following guidance when applying animations to panels:
When choosing a motion for side panels, consider the origin of the triggering element. Use the motion to create a link between the action and the resulting UI. For example, if the triggering element is on the right side of the interface, consider having the panel move in from the right.
Microsoft offers the following guidance when applying animations to dialogs:
+
Microsoft offers the following guidance when applying animations to dialogs:
When choosing a motion for dialogs, consider the origin and tone of the content. For a warning or error dialog, a quick fade in might be appropriate. If the dialog appears when a user chooses an item to get more information, a scale-up might be appropriate.
Using the different colors is as simple as adding a CSS class to an element. Each color is provided as a font color, background color & border color. For instance here's a color swatch for the primary theme which is the hex code #0078D7:
The Office UI Fabric includes it's own iconography implemented as a custom font. This contains glyphs that can be treated just like other fonts in the sense that you can manipulate the size, color, style and orientation for localization.
-
Note all fonts in the Office UI Fabric are subject to the terms of the following license: Segoe UI and Fabric CDN License.
-
+
Note all fonts in the Office UI Fabric are subject to the terms of the following license: Segoe UI and Fabric CDN License.
+
+
Note the presence of the aria-hidden attribute. Including this will tell screen readers from reading the icon. Microosft's guidance here is as follows:
+
Note the presence of the aria-hidden attribute. Including this will tell screen readers from reading the icon. Microosft's guidance here is as follows:
"In cases where meaning is conveyed only through the icon, such as an icon-only navigation bar, be sure to apply an aria-hidden to the button for accessibility."
The Office UI Fabric includes the following ten base font CSS classes and multiple four helper that reflect the typography for the Office Design Language.
-
Note all fonts in the Office UI Fabric are subject to the terms of the following license: Segoe UI and Fabric CDN License.
+
Note all fonts in the Office UI Fabric are subject to the terms of the following license: Segoe UI and Fabric CDN License.
+
+
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.
What is the Office UI Fabric?
-
The Office UI Fabric is The front-end framework for building experiences for Office and Office 365. 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.
-
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 Office 365 Developer Podcast with the project lead.
+
The Office UI Fabric is The front-end framework for building experiences for Office and Office 365. 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.
+
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 Office 365 Developer Podcast with the project lead.
What Can You Find on this Site?
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.
@@ -91,9 +92,9 @@
By the Community - For the Community!
This site is not by Microsoft, it is built by and for the community.
Why?
-
I'm Andrew Connell 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 Bootstrap.
I'm Andrew Connell 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 Bootstrap.
Wouldn't it be cool to see some real world examples that use this? Of course! Submit your examples as issues on the site's GitHub issues list and we'll get them added here!
+
Wouldn't it be cool to see some real world examples that use this? Of course! Submit your examples as issues on the site's GitHub issues list and we'll get them added here!
diff --git a/status.html b/status.html
index 78b6b27..b0db423 100644
--- a/status.html
+++ b/status.html
@@ -25,6 +25,7 @@
+
@@ -70,16 +71,16 @@
h1roject Status
The site is currently a work in progress as we march to v1.0.0. The v1.0.0 for this site is when it reaches full feature & component parity with the Office UI Fabric v1.0.0 release. The goal is to get this site to the point where everything you find in the Features and Components sections of the Office UI Fabric is demonstrated on this site.
How can you see what's been added to this site? For now, watch the project's releases as each release will include a list of all the issues included in that release.
+
How can you see what's been added to this site? For now, watch the project's releases as each release will include a list of all the issues included in that release.
Think You've Found a Bug or Typo?
-
Bugs and typos are embarrasing but let's face it; they happen. If you think you've found an error on the site please file an issue.
+
Bugs and typos are embarrasing but let's face it; they happen. If you think you've found an error on the site please file an issue.
Contribute
-
If you're interested in helping out, head over to the contribute page to learn how you can get involed. Contributions are not only welcomed, they are requested!
+
If you're interested in helping out, head over to the contribute page to learn how you can get involed. Contributions are not only welcomed, they are requested!
