util classes to lowercase (.Container -> .container)

src/components/Footer.js

@@ -5,7 +5,7 @@ import './Footer.css'
 export default ({ globalSettings, socialSettings, navLinks }) => (
   <footer className='Footer'>
     <div className='Footer--Lower'>
-      <div className='Container taCenter'>
+      <div className='container taCenter'>
         <span>© 2017 All rights reserved.</span>
       </div>
     </div>

src/components/Nav.js

@@ -7,8 +7,8 @@ import './Nav.css'
 
 export default ({ handlePopupOpen }) => (
   <nav className='Nav'>
-    <div className='Container'>
-      <div className='Flex alignCenter justifyStart'>
+    <div className='container'>
+      <div className='flex alignCenter justifyStart'>
         <Link to='/'>
           <Logo />
         </Link>

src/components/PageHeader.js

@@ -5,9 +5,9 @@ import BackgroundImage from './BackgroundImage'
 import './PageHeader.css'
 
 const PageHeader = ({ title, subtitle, backgroundImage }) => (
-  <div className='Section PageHeader relative'>
+  <div className='section PageHeader relative'>
     {backgroundImage && <BackgroundImage src={backgroundImage} opacity={0.5} />}
-    <div className='Container relative'>
+    <div className='container relative'>
       <h1 className='PageHeader--Title'>{title}</h1>
       {subtitle ? <h2 className='PageHeader--Subtitle'>{subtitle}</h2> : ''}
     </div>

src/globalStyles.css

@@ -130,65 +130,65 @@ pre code:after {
 
 /* Layout */
 
-.Section {
+.section {
   width: 100%;
   padding: 5rem 0;
 }
-.Section.thick {
+.section.thick {
   padding: 10rem 0;
 }
-.Section.thin {
+.section.thin {
   padding: 2.5rem 0;
 }
-.Section.noPadding {
+.section.noPadding {
   padding: 0;
 }
 
-.Container {
+.container {
   max-width: 1111px;
   width: 90%;
   margin: 0 auto;
 }
-.Container.skinny {
+.container.skinny {
   max-width: 888px;
 }
-.Container.skinnier {
+.container.skinnier {
   max-width: 555px;
 }
 
 /* Flex */
 
-.Flex {
+.flex {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
 }
-.Flex.column {
+.flex.column {
   flex-direction: column;
 }
-.Flex.justifyCenter {
+.flex.justifyCenter {
   justify-content: center;
 }
-.Flex.justifyEnd {
+.flex.justifyEnd {
   justify-content: flex-end;
 }
-.Flex.justifyBetween {
+.flex.justifyBetween {
   justify-content: space-between;
 }
-.Flex.justifyAround {
+.flex.justifyAround {
   justify-content: space-around;
 }
-.Flex.alignStart {
+.flex.alignStart {
   align-items: flex-start;
 }
-.Flex.alignEnd {
+.flex.alignEnd {
   align-items: flex-end;
 }
-.Flex.alignStretch {
+.flex.alignStretch {
   align-items: stretch;
 }
-.Flex.fill {
+.flex.fill {
   height: 100%;
   width: 100%;
 }

src/views/About.js

@@ -16,13 +16,13 @@ export default ({ page }) => (
       subtitle={page.subtitle}
       backgroundImage={page.featuredImage}
     />
-    <div className='Section thin'>
-      <div className='Container'>
+    <div className='section thin'>
+      <div className='container'>
         <Content source={page.section1} />
       </div>
     </div>
-    <div className='Section thin'>
-      <div className='Container'>
+    <div className='section thin'>
+      <div className='container'>
         <Content source={page.section2} />
         <p>The image below is a {'<LazyImage />'}</p>
         <LazyImage src={page.featuredImage} alt='LazyImage' />

src/views/Contact.js

@@ -11,8 +11,8 @@ import './Contact.css'
 export default ({ page, siteTitle }) => (
   <div className='Contact'>
     <PageHeader title={page.title} subtitle='<Contact />' />
-    <div className='Section thin'>
-      <div className='Container'>
+    <div className='section thin'>
+      <div className='container'>
         <Content source={page.content} />
         <h3>{'<EnquiryFormSimple />'}</h3>
         <EnquiryFormSimple name='Simple Form' />

src/views/Home.js

@@ -10,8 +10,8 @@ export default ({ page }) => {
   return (
     <main className='Home'>
       <PageHeader title={title} subtitle={subtitle} />
-      <div className='Section thin'>
-        <div className='Container'>
+      <div className='section thin'>
+        <div className='container'>
           <Content source={page.content} />
         </div>
       </div>

src/views/NoMatch.js

@@ -6,8 +6,8 @@ import './NoMatch.css'
 
 const NoMatch = ({ siteUrl }) => (
   <div className='NoMatch'>
-    <section className='Section thick'>
-      <div className='Container taCenter'>
+    <section className='section thick'>
+      <div className='container taCenter'>
         <h1>404 - Page Not Found</h1>
         <p>
           We can't find the page you are looking for!<br />Head back to{' '}