adding names to key sections of app and updating breakpoints

frontend/src/components/article/index.js

@@ -1,4 +1,10 @@
 const Styled = require('styled-components');
+const constants = require('@ui/shared/constants');
+
+const {
+  colors,
+  sizes
+} = constants;
 
 const {
   default: styled
@@ -6,5 +12,7 @@ const {
 
 // Main Contonent Wrapper Styles
 module.exports = styled.article`
-  background-color: #fafafa;
+  background-color: ${colors.base.grey};
+  
+  ${sizes.sm}
 `;

frontend/src/components/header/index.js

@@ -113,7 +113,7 @@ const Header = ({
   );
 
   return (
-    <StyledHeader>
+    <StyledHeader name="application-header">
       <Container fluid>
         <Row>
           <Column xs={2}>

frontend/src/containers/app.js

@@ -85,14 +85,14 @@ module.exports = (props) => {
     <App {...props}>
       <Header />
 
-      <Nav>
+      <Nav name="application-org-navigation">
         <OrgNavigation />
       </Nav>
-      <Article>
+      <Article name="application-content">
         <Match component={Home} pattern='/:org?/:section?' />
         <Miss component={NotFound} />
       </Article>
-      <Footer />
+      <Footer name="application-footer" />
     </App>
   );
 };

ui/src/shared/constants/breakpoints.js

@@ -1,13 +1,44 @@
 const styled = require('styled-components');
 
 // github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
+const small = {
+  upper: '48rem'
+};
+
+const medium = {
+  upper: '64rem',
+  lower: '48.1rem',
+};
+
+const large = {
+  upper: '75rem',
+  lower: '64.1rem',
+};
+
+const xlarge = {
+  lower: '75.1rem',
+};
+
+const screen = 'only screen';
+
 const screens = {
   // >= 768px
-  small: 'only screen and (min-width: 48rem)',
+  'small-only': `${screen} and (max-width: ${small.upper})`,
+  'small': `${screen} and (min-width: ${small.upper}})`,
   // >= 1024px
-  medium: 'only screen and (min-width: 64rem)',
+  'medium-only': `${screen} and (min-width: ${medium.lower}) 
+                  and (max-width: ${medium.upper})`,
+  'medium-down': `${screen} and (max-width: ${medium.upper})`,
+  'medium': `${screen} and (min-width: ${medium.lower})`,
   // >= 1200px
-  large: 'only screen and (min-width: 75rem)'
+  'large-only': `${screen} and (min-width: ${large.lower}) 
+                 and (max-width: ${large.upper})`,
+  'larg-down': `${screen} and (max-width: ${large.upper})`,
+  'large': `${screen} and (min-width: 75rem)`,
+
+  'xlarge': `${screen} and (min-width: ${xlarge.lower}) 
+             and (max-width: ${xlarge.upper})`,
+  'xlarge-up': `${screen} and (min-width: ${xlarge.lower})`,
 };
 
 const breakpoints = Object.keys(screens).reduce((acc, label) => {