Consistent scope and naming for variables, mixins, and keyframes

ghdocs/CONTRIBUTING.md

@@ -20,6 +20,9 @@ When creating a pull request, please describe in detail the problem you are solv
 ### Feature requests
 Please be sure to open an issue before starting a hefty PR so we can let you know if we're likely to consider your request--and to make sure we aren't already planning on doing the work.
 
+### Naming conventions
+See the [code conventions](https://github.com/OfficeDev/office-ui-fabric-core/blob/master/ghdocs/CONVENTIONS.md) for details on what to name CSS classes, animation keyframes, variables, and mixins.
+
 ### Contribution license agreement
 For pull requests affecting fewer than 15 lines of code, you will need to sign a [Contribution License Agreement (CLA)](https://cla.microsoft.com/) before your contribution can be incorporated. To complete the CLA, you will need to submit the request via the form and then electronically sign the CLA when you receive the email containing the link to the document.
 

ghdocs/CONVENTIONS.md

@@ -0,0 +1,22 @@
+# Code conventions
+
+## Naming
+When naming classes, animation keyframes, variables, and mixins, please follow these conventions:
+
+- Everything in the global scope is prefixed with "ms-".
+- CSS classes follow [SUIT CSS conventions](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md).
+    - `ms-Grid-col`
+    - `ms-Icon--Airplane`
+    - _Exception: Pascal case is used for the icon names:_ `ms-Icon--EraseTool`
+- Animation keyframes all match their corresponding CSS class.
+    - `@keyframes ms-slideRightIn10`
+- Variables are kebab case.
+    - `$ms-animation-duration-3`
+    - `$ms-screen-min-xl`
+    - _Exception: camel case is used for colors to match class names:_ `$ms-color-themeLighterAlt`
+- Mixins are usually kebab case.
+    - `ms-focus-border()`
+    - `ms-drop-shadow()`
+    - _Exception: If the mixin maps directly to a CSS class, we match the class name:_
+        - `ms-u-borderBox()` outputs to `.ms-u-borderBox`
+        - `ms-fontSize-s()` outputs to `.ms-fontSize-s`

src/documentation/sass/_AnimationsSection.scss

@@ -6,7 +6,7 @@ $animationExample-height: 90px;
         display: none;
     }
 
-    @media(min-width: $ms-screen-md-min) {
+    @media(min-width: $ms-screen-min-md) {
         display: block;
         .docs-animationExampleColumn {
             display: block;
@@ -36,7 +36,7 @@ $animationExample-height: 90px;
         margin-bottom: 14px;
     }
 
-    @media(min-width: $ms-screen-lg-min) {
+    @media(min-width: $ms-screen-min-lg) {
         .docs-animationDescriptionColumn {
             margin-bottom: 0;
         }
@@ -48,7 +48,7 @@ $animationExample-height: 90px;
         }
     }
 
-    @media(min-width: $ms-screen-xl-min) {
+    @media(min-width: $ms-screen-min-xl) {
 
         .docs-animationCubicColumn {
             display: block;
@@ -70,19 +70,19 @@ $animationExample-height: 90px;
         min-height: 30px;
 
         .mobileText {
-            @include ms-baseFont;
+            @include ms-base-font;
             font-weight: $ms-font-weight-semibold;
         }
 
-        @media(min-width: $ms-screen-md-min) {
+        @media(min-width: $ms-screen-min-md) {
             line-height: 18px;
             vertical-align: middle;
             .mobileText {
                 display: none;
             }
         }
 
-        @media(min-width: $ms-screen-xl-min) {
+        @media(min-width: $ms-screen-min-xl) {
              min-height: $animationExample-height;
             line-height: $animationExample-height;
         }

src/documentation/sass/_ColorBoxes.scss

@@ -18,7 +18,7 @@ $ms-InfoBarHeight: 30px;
     margin: 0;
   }
   .mobileText {
-    @include ms-baseFont;
+    @include ms-base-font;
     font-weight: $ms-font-weight-semibold;
   }
 }
@@ -31,7 +31,7 @@ $ms-InfoBarHeight: 30px;
     line-height: 14px;
   }
 
-  @media (min-width: $ms-screen-lg-min) {
+  @media (min-width: $ms-screen-min-lg) {
 
      span.ms-font-size-m {
       font-size:  $ms-font-size-m;
@@ -43,7 +43,7 @@ $ms-InfoBarHeight: 30px;
 .docs-colorBox.ms-u-lg4 {
   line-height: 7px;
 
-  @media (min-width: $ms-screen-lg-min) {
+  @media (min-width: $ms-screen-min-lg) {
     width: 32.333333%;
     margin-right: 1%;
   }
@@ -57,7 +57,7 @@ $ms-InfoBarHeight: 30px;
     padding-top:12px;
   }
 
-  @media (min-width: $ms-screen-lg-min) {
+  @media (min-width: $ms-screen-min-lg) {
     .docs-colorBox {
       width: 32.333333%;
       font-size: $ms-font-size-m;

src/documentation/sass/_IconsSection.scss

@@ -22,11 +22,11 @@
         list-style: none !important;
 
         // Phone, Phablet
-        @media (min-width: $ms-screen-lg-min) {
+        @media (min-width: $ms-screen-min-lg) {
           width: 24%;
         }
 
-        @media (min-width: $ms-screen-xl-min) {
+        @media (min-width: $ms-screen-min-xl) {
           margin-right: 1%;
           margin-bottom: 1%;
           min-height: 124px;

src/documentation/sass/_LeftNav.scss

@@ -48,7 +48,7 @@
         }
 
         &.is-selected {
-            @include ms-baseFont;
+            @include ms-base-font;
             font-weight: $ms-font-weight-semibold;
             color: $ms-color-black;
             border-left-width: 2px;

src/documentation/sass/_TypographySection.scss

@@ -13,7 +13,7 @@
     }
   }
 
-  @media(min-width: $ms-screen-lg-min) {
+  @media(min-width: $ms-screen-min-lg) {
     .docs-HelperHeader {
       display: block;
     }

src/documentation/sass/base/_Typography.scss

@@ -9,42 +9,42 @@ h4 {
 
 h1 {
     color: $ms-color-neutralSecondary;
-    font-family: $ms-font-system-base;
+    font-family: $ms-font-base-system;
     font-size: $ms-font-size-su;
     font-weight: $ms-font-weight-light;
 }
 
 h2 {
-    font-family: $ms-font-system-base;
+    font-family: $ms-font-base-system;
     font-weight: $ms-font-weight-semilight;
     font-size: $ms-font-size-xxl;
     color: $ms-color-neutralPrimary;
 }
 
 h3 {
-    font-family: $ms-font-system-base;
+    font-family: $ms-font-base-system;
     font-weight: $ms-font-weight-regular;
     font-size: $ms-font-size-xl;
     color: $ms-color-neutralDark !important; // @todo: Remove this important when dev.office.com styles no longer leak
 }
 
 h4 {
-    font-family: $ms-font-system-base;
+    font-family: $ms-font-base-system;
     font-weight: $ms-font-weight-semibold;
     font-size: $ms-font-size-l;
     color: $ms-color-neutralPrimary;
 }
 
 p {
-    font-family: $ms-font-system-base;
+    font-family: $ms-font-base-system;
     font-weight: $ms-font-weight-regular;
     font-size: $ms-font-size-l;
     color: $ms-color-neutralPrimary;
     margin-bottom: 20px;
     line-height: 1.5;
 
     strong {
-        font-family: $ms-font-system-base;
+        font-family: $ms-font-base-system;
         font-weight: normal;
         font-weight: $ms-font-weight-semibold;
     }

src/documentation/sass/components/_Table.scss

@@ -5,7 +5,7 @@
     width: 100%;
 
     th {
-        @include ms-baseFont;
+        @include ms-base-font;
         font-size: 14px;
         font-weight: $ms-font-weight-regular;
         padding: 10px;

src/documentation/sass/docs.scss

@@ -69,7 +69,7 @@ $high-contrast-green: #3ff23f;
 
 // slideRightIn80
 @mixin ms-u-slideRightIn80 {
-    @include ms-animation((fadeIn, slideRightIn80), $ms-duration3, $ms-ease1);
+    @include ms-animation((fadeIn, slideRightIn80), $ms-animation-duration-3, $ms-animation-ease-1);
 }
 .ms-u-slideRightIn80 {
   @include ms-u-slideRightIn80;
@@ -85,7 +85,7 @@ $high-contrast-green: #3ff23f;
 
 // slideLeftIn80
 @mixin ms-u-slideLeftIn80 {
-    @include ms-animation((fadeIn, slideLeftIn80), $ms-duration3, $ms-ease1);
+    @include ms-animation((fadeIn, slideLeftIn80), $ms-animation-duration-3, $ms-animation-ease-1);
 }
 .ms-u-slideLeftIn80 {
   @include ms-u-slideLeftIn80;
@@ -102,7 +102,7 @@ $high-contrast-green: #3ff23f;
 
 // slideLeftIn80
 @mixin ms-u-slideLeftOut80 {
-    @include ms-animation((fadeOut, slideLeftOut80), $ms-duration3, $ms-ease1);
+    @include ms-animation((fadeOut, slideLeftOut80), $ms-animation-duration-3, $ms-animation-ease-1);
 }
 .ms-u-slideLeftOut80 {
   @include ms-u-slideLeftOut80;
@@ -119,7 +119,7 @@ $high-contrast-green: #3ff23f;
 
 // slideLeftIn80
 @mixin ms-u-slideRightOut80 {
-    @include ms-animation((fadeOut, slideRightOut80), $ms-duration3, $ms-ease1);
+    @include ms-animation((fadeOut, slideRightOut80), $ms-animation-duration-3, $ms-animation-ease-1);
 }
 .ms-u-slideRightOut80 {
   @include ms-u-slideRightOut80;

src/documentation/sass/layouts/_Page.scss

@@ -28,7 +28,7 @@ $docs-sideNavWidths: 300px;
 }
 
 // On larger screens, show and position the navs
-@media (min-width: $ms-screen-xl-min) {
+@media (min-width: $ms-screen-min-xl) {
     .docs-Page.has-leftNav {
         padding-left: $docs-sideNavWidths + 30px;
 

src/sass/_BrandIcon.scss

@@ -1,19 +1,19 @@
 // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
 
-@include brandIconClasses(1);
-@include brandIconSizesClasses();
+@include ms-brand-icon-classes(1);
+@include ms-brand-icon-size-classes();
 
 // Pixel Ratio 1.5
 @media only screen and (min-resolution: 144dpi) {
-  @include brandIconClasses(1_5);
+  @include ms-brand-icon-classes(1_5);
 }
 
 // Pixel Ratio 2
 @media only screen and (min-resolution: 192dpi)  {
-  @include brandIconClasses(2);
+  @include ms-brand-icon-classes(2);
 }
 
 // Pixel Ratio 3
 @media only screen and (min-resolution: 288dpi) {
-  @include brandIconClasses(3);
+  @include ms-brand-icon-classes(3);
 }