updated css-modules example

Author: piotrwitek

README.md

@@ -36,10 +36,10 @@ Local HTTP dev server with hot-reload out-of-the-box - highly reliable and scala
 If you are coding in a NO-IDE environment (notepad/vim) or expecting to have a common way across a team to target a specific version of typescript compiler even while using different Editors/IDEs, you can utilize __CLI type-checking workflow__ using `tsc -p src --watch` command for fast incremental type-checking or `tsc -p src` command for project-wide type-check, there is no JS emit so it will not clutter your project or disrupt different build processes based on various IDE plugins or gulp/grunt based tasks.
 (animated gif placeholder...)
 
-### TYPED-CSS-MODULES
-My concept to achieve locally scoped CSS styles with some enhancements using (csjs)[https://github.com/rtsao/csjs#faq]
-Full CSS support with all features like pseudo-classes & media queries, encapsulated in TypeScript (ES6 modules) can be easily imported by your UI components.
-BONUS: statically typed class names helping with auto-completion, simple type-checking, easy refactoring and doc comments.
+### CSS-MODULES WITH TYPED CLASS-NAMES
+My concept to achieve locally scoped CSS styles with some TypeScript enhancements using (csjs)[https://github.com/rtsao/csjs#faq]
+Full CSS support with all features like pseudo-classes & media queries, encapsulated in ES6 modules can be easily imported by your UI components.
+BONUS: statically typed class names - solid auto-completion, type-checking, easy refactoring. You can also add doc comments and auto-generate docs of your styles library for your team or utilize some powerful IDE support.
 EXAMPLE: (about-container component)[src/containers/about-container/index.tsx] and it's (about-styles css-module)[src/containers/about-container/about-styles.tsx]
 (animated gif placeholder...)
 

src/containers/about-container/about-styles.tsx

@@ -2,71 +2,82 @@ import csjs from 'csjs';
 import insertCss from 'insert-css';
 import colors from '../../themes/colors';
 
-interface IStyles {
+interface AboutStyles {
+  /** main content container */
   container: string;
-  well: string;
+  textCentered: string;
+  /** text with fancy highlight */
   glowingText: string;
-  visibleWell: string;
-  supriseWell: string;
+  /** dark background with border */
+  darkBg: string;
+  /** elevate element using box-shadow */
+  effect__elevate: string;
+  /** hide element on mobile screen  */
+  effect__hideOnMobile: string;
+  /** show element on mobile screen  */
+  effect__showOnMobile: string;
 }
 
-export const styles: IStyles = csjs`
+export const aboutStyles: AboutStyles = csjs`
 
-  .container {
+  .textCentered {
     text-align: center;
   }
   .glowingText {
     color: ${colors.textColor};
     text-shadow: ${colors.textColor} 0 0 10px;
     white-space: nowrap;
   }
-  .well {
+  .darkBg {
     border-radius: 5px;
     border: 1px solid ${colors.borderColor};
     background-color: ${colors.backgroundColor};
+  }
+
+  .effect__elevate {
     box-shadow: none;
+    transition: box-shadow 0.5s linear;
   }
-  .well:hover {
+  .effect__elevate:hover {
     box-shadow: 0 6px 20px 0 ${colors.shadowColor};
   }
 
-  .visibleWell extends .well {
+  .effect__hideOnMobile {
     margin: 0px 30px;
     opacity: 1;
     transition:
       margin 1s 0.5s,
-      opacity 1s 0.5s,
-      box-shadow 0.5s linear;
+      opacity 1s 0.5s;
   }
 
-  .supriseWell extends .well {
+  .effect__showOnMobile {
     margin: 0px 50px;
     opacity: 0;
     transition:
       margin 1s,
-      opacity 1s,
-      box-shadow 0.5s linear;
+      opacity 1s;
   }
 
   @media (max-width: 450px) {
-    .supriseWell {
+    .effect__hideOnMobile {
+      margin: 0px 50px;
+      opacity: 0;
+      transition:
+      margin 1s,
+      opacity 1s,
+      box-shadow 0.5s linear;
+    }
+
+    .effect__showOnMobile {
       margin: 0px 30px;
       opacity: 1;
       transition:
         margin 1s 0.5s,
         opacity 1s 0.5s,
         box-shadow 0.5s linear;
     }
-    .visibleWell {
-      margin: 0px 50px;
-      opacity: 0;
-      transition:
-        margin 1s,
-        opacity 1s,
-        box-shadow 0.5s linear;
-    }
   }
 
 `;
 
-insertCss(csjs.getCss(styles));
+insertCss(csjs.getCss(aboutStyles));

src/containers/about-container/index.tsx

@@ -1,22 +1,24 @@
 import * as React from 'react';
 import { PageSection } from '../../components/page-section';
 import { PageHeader } from '../../components/page-header';
-import { styles } from './about-styles';
+import { aboutStyles } from './about-styles';
 
 
 export function AboutContainer() {
   return (
     <article>
       <PageHeader>About</PageHeader>
-      <PageSection>
-        <div className={styles.container}>
-          <div className={styles.visibleWell}>
-            <p className={styles.glowingText}>
+      <PageSection className={aboutStyles.textCentered}>
+        <div className={aboutStyles.effect__hideOnMobile}>
+          <div className={[aboutStyles.darkBg, aboutStyles.effect__elevate].join(' ')}>
+            <p className={aboutStyles.glowingText}>
               Shrink your window
             </p>
           </div>
-          <div className={styles.supriseWell}>
-            <p className={styles.glowingText}>
+        </div>
+        <div className={aboutStyles.effect__showOnMobile}>
+          <div className={[aboutStyles.darkBg, aboutStyles.effect__elevate].join(' ')}>
+            <p className={aboutStyles.glowingText}>
               SUPRISE!!!
             </p>
           </div>