added CSS Modules Example Page

Author: piotrwitek

src/app.tsx

@@ -7,7 +7,7 @@ import { syncHistoryWithStore } from 'react-router-redux';
 // app imports
 import { MainLayout } from './layouts/main-layout';
 import { HomeContainer } from './containers/home-container/index';
-import { AboutContainer } from './containers/about-container/index';
+import { CssModulesContainer } from './containers/css-modules-container/index';
 import CurrencyConverterContainer from './containers/currency-converter-container/index';
 
 import { store } from './store';
@@ -19,7 +19,7 @@ function App() {
       <Router history={history}>
         <Route component={MainLayout}>
           <Route path="/" component={HomeContainer}/>
-          <Route path="/about" component={AboutContainer}/>
+          <Route path="/about" component={CssModulesContainer}/>
           <Route path="/currency-converter" component={CurrencyConverterContainer}/>
         </Route>
       </Router>

src/containers/about-container/index.tsx

@@ -2,7 +2,7 @@ import csjs from 'csjs';
 import insertCss from 'insert-css';
 import colors from '../../themes/colors';
 
-interface AboutStyles {
+interface ContainerStyles {
   /** main content container */
   container: string;
   textCentered: string;
@@ -18,7 +18,7 @@ interface AboutStyles {
   effect__showOnMobile: string;
 }
 
-export const aboutStyles: AboutStyles = csjs`
+export const containerStyles: ContainerStyles = csjs`
 
   .textCentered {
     text-align: center;
@@ -80,4 +80,4 @@ export const aboutStyles: AboutStyles = csjs`
 
 `;
 
-insertCss(csjs.getCss(aboutStyles));
+insertCss(csjs.getCss(containerStyles));

src/containers/about-container/about-styles.tsx renamed to src/containers/css-modules-container/container-styles.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { PageSection } from '../../components/page-section';
+import { PageHeader } from '../../components/page-header';
+import { containerStyles } from './container-styles';
+
+
+export function CssModulesContainer() {
+  return (
+    <article>
+      <PageHeader>CSS Modules</PageHeader>
+      <p>
+        Own concept to achieve locally scoped CSS styles with statically typed CSS class names using TypeScript.
+      </p>
+      <ul>
+        <li>
+          Full CSS support with pseudo-classes & media queries, encapsulated in ES6 Modules that can be nicely imported by your UI components.
+        </li>
+        <li>Define interfaces with your CSS classes and you get className property type-checking, solid auto-completion and easy refactoring. You can also add doc comments and auto-generate docs of your styles library for your team and utilize IntelliSense features of your IDE.</li>
+      </ul>
+      <br />
+      <PageSection className={containerStyles.textCentered}>
+        <div className={containerStyles.effect__hideOnMobile}>
+          <div className={[containerStyles.darkBg, containerStyles.effect__elevate].join(' ')}>
+            <p className={containerStyles.glowingText}>
+              Shrink your window
+            </p>
+          </div>
+        </div>
+        <div className={containerStyles.effect__showOnMobile}>
+          <div className={[containerStyles.darkBg, containerStyles.effect__elevate].join(' ')}>
+            <p className={containerStyles.glowingText}>
+              SUPRISE!!!
+            </p>
+          </div>
+        </div>
+      </PageSection>
+      <br />
+      <p className="u-centered">
+        Source code: <a href="https://github.com/piotrwitek/react-redux-typescript-starter-kit/tree/master/src/containers/css-modules-container">Link to GitHub</a>
+      </p>
+      <br />
+    </article>
+  );
+};

src/containers/css-modules-container/index.tsx

@@ -23,6 +23,8 @@ export class CurrencyConverterContainer extends React.Component<IProps, IState>
 
     return (
       <section className="u-letter-box--super">
+        <p className="u-centered">(work in progress)</p>
+        <br />
         <CurrencyConverter currencies={currencies}
           baseCurrency={baseCurrency} targetCurrency={targetCurrency}
           baseValue={baseValue} targetValue={targetValue}

src/containers/currency-converter-container/index.tsx

@@ -6,10 +6,17 @@ export function HomeContainer() {
   return (
     <article>
       <PageHero title="Welcome to" subtitle="React / Redux / TypeScript - starter-kit" />
-      <PageSection>
-        <p className="u-centered">
-          Here you can find real world projects made using this starter-kit.
+      <PageSection className="o-container o-container--small">
+        <p>
+          Below you can find a few examples created using concepts of this starter-kit:
         </p>
+        <ul>
+          <li><a href="/#/currency-converter"> Currency Converter App</a> - (work in progress)</li>
+          <li><a href="/#/about"> CSS Modules </a></li>
+        </ul>
+        <div className="c-alerts__alert c-alerts__alert--primary">
+          Note: Open Redux DevTools Inspector
+        </div>
       </PageSection>
       <br />
       <br />

src/containers/home-container/index.tsx

@@ -15,7 +15,7 @@ export class MainLayout extends React.Component<{}, {}> {
           <LayoutTopNav>
             <LayoutTopNavLink href="/" isPrimary> Home </LayoutTopNavLink>
             <LayoutTopNavLink href="/currency-converter"> Currency Converter </LayoutTopNavLink>
-            <LayoutTopNavLink href="/about" isRight> About </LayoutTopNavLink>
+            <LayoutTopNavLink href="/about"> CSS Modules </LayoutTopNavLink>
           </LayoutTopNav>
         </LayoutHeader>