adds CSS styleguide to contributing documentation

Author: aarongundel

CONTRIBUTING.md

@@ -6,6 +6,7 @@ today! Here are the guidelines we'd like you to follow:
 - [Contributing Code](#contribute-code)
     - [Commit Message Guidelines](#commit)
 - [Contributing Documentation](#documentation)
+- [CSS Styleguide](contributing/css-styleguide.md)
 
 ### <a name="issue"></a> Found an Issue?
 If you find a bug in the source code or a mistake in the documentation, you can help us by

contributing/css-styleguide.md

@@ -0,0 +1,46 @@
+# CSS Style Guide for Arches 7.x
+## Definitions
+
+### RTL Styling
+RTL (Right to Left) interfaces for internationalization are supported in Arches 7.x.  
+Some languages used in Arches (Hebrew, Arabic) have different UI needs because they 
+are read from right to left.  The guidelines in this document will help conform to 
+generally accepted RTL interface design principles.
+
+### Responsive Design
+Responsive design means that the interface of Arches should respond to changes in 
+size (specifically width).  This helps to accommodate differing screen sizes 
+(including very small screens, like mobile devices).
+
+## Guidelines
+### General advice:
+- Use scss to group related styles together through nesting.
+- Use rtl.scss as a last resort to overriding styles in arches.scss for RTL.  
+- Test styles by using the “dir” attribute of the body HTML tag of the page being 
+worked on.  Change it to “rtl” and the page will mirror as an RTL user would see 
+the page. (Note that it’s necessary to actually change the page language in the 
+Arches language dropdown in order to have rtl.scss included)
+- To get an idea about how RTL interfaces are different from LTR interfaces (and 
+how to convert one to the other) consult the following guides.  Material Style 
+Guide RTL Styling Guide
+- As a general rule try to adhere to the following rules, but there may be times 
+when it’s not possible.  In that case at least confirm that the site renders 
+reasonably in RTL as well as LTR.  Reach out for help if you need it.
+- Combine selectors with redundant rules.
+- Use shorthand css rules where applicable.
+- Remove unused CSS rulesets.
+
+### Prefer using:
+- Flex and Grid Layouts have great inherent RTL support.  When building out new 
+components, use them wherever possible. 
+- Left and right margins should be equal whenever possible
+- Alignment properties (align-items, justify-content, etc) versus padding and 
+margin to align content CSS overrides using specificity (example: .test 
+.test2 overrides .test2)
+
+### Avoid using:
+- CSS “float”
+- Positioning elements (eg: fixed, absolute, etc..)  that break RTL or responsive guidelines
+- Negative margins and negative padding
+- Empty rulesets
+- !important - it interrupts natural CSS overrides