Add lettering support

src/components/Lettering/Lettering.js

@@ -0,0 +1,55 @@
+import React from 'react';
+
+class Lettering extends React.Component {
+  getSpanElement(elem, className, index, spacer) {
+    const key = `${className}-${index}`;
+    return <span key={key} className={`${className} ${key}`}>{elem}{spacer}</span>;
+  }
+  getWrappedChars() {
+    let lineIndex = 0;
+    let wordIndex = 0;
+    let charIndex = 0;
+    const { children, lineClass, wordClass, charClass } = this.props;
+    const childrenArr = children.split('\\n');
+    const lines = childrenArr.map(line => {
+      lineIndex += 1;
+      const wordsArray = line.split(' ');
+      const words = wordsArray.map(word => {
+        wordIndex += 1;
+        const charsArray = word.split('');
+        const chars = charsArray.map(char => {
+          charIndex += 1;
+          return this.getSpanElement(char, charClass, charIndex);
+        });
+        return this.getSpanElement(chars, wordClass, wordIndex, ' ');
+      });
+      return this.getSpanElement(words, lineClass, lineIndex, ' ');
+    });
+    return lines;
+  }
+
+  render() {
+    const wrappedChars = this.getWrappedChars();
+    return React.DOM[this.props.tagName]({ className: this.props.className }, wrappedChars);
+  }
+}
+
+const tagNames = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'];
+Lettering.propTypes = {
+  className: React.PropTypes.string,
+  charClass: React.PropTypes.string,
+  children: React.PropTypes.string.isRequired,
+  lineClass: React.PropTypes.string,
+  tagName: React.PropTypes.oneOf(tagNames),
+  wordClass: React.PropTypes.string,
+};
+
+Lettering.defaultProps = {
+  className: 'lettering',
+  charClass: 'char',
+  lineClass: 'line',
+  tagName: 'h1',
+  wordClass: 'word'
+};
+
+module.exports = Lettering;

src/components/Navbar/Navbar.js

@@ -7,6 +7,7 @@ const Navbar = () => (
       <li><a href="#/">Home</a></li>
       <li><a href="#/about">About this project</a></li>
       <li><a href="#/styles">Style framework</a></li>
+      <li><a href="#/lettering">Lettering.js test</a></li>
       <li><a href="#/blog">Blog</a></li>
     </ul>
   </div>

src/components/index.js

@@ -1,5 +1,6 @@
 import Footer from './Footer/Footer';
 import Header from './Header/Header';
 import Navbar from './Navbar/Navbar';
+import Lettering from './Lettering/Lettering';
 
-export { Footer, Header, Navbar };
+export { Footer, Header, Navbar, Lettering };

src/containers/LetteringTest/LetteringTest.js

@@ -0,0 +1,11 @@
+import styles from './LetteringTest.styl';
+import { Lettering } from '../../components';
+import React from 'react';
+
+const LetteringTest = () => (
+  <Lettering className="fancyText" tagName="h1" charClass="custom">
+    Awesome Title!
+  </Lettering>
+);
+
+export default LetteringTest;

src/containers/LetteringTest/LetteringTest.styl

@@ -0,0 +1,103 @@
+:global
+  .fancyText {
+    padding: 20px;
+  }
+  .fancyText .line{
+    display: block;
+    margin-bottom: 20px;
+  }
+  .custom {
+    background: #e24b3b;
+    background-size: 175%;
+    color: whitesmoke;
+    display: inline-block;
+    width: 50px;
+    height: 70px;
+    font-size: 55px;
+    text-align: center;
+    -webkit-animation: 22s rotate-hue linear infinite;
+    -webkit-transition: all .5s;
+    -moz-transition: all .5s;
+    transition: all .5s;
+  }
+  .custom:nth-of-type(odd) {
+    -webkit-transform: scale(1) skewY(-15deg);
+    -moz-transform: scale(1) skewY(-15deg);
+    transform: scale(1) skewY(-15deg);
+  }
+  .custom:nth-of-type(even) {
+    background: #A3382D;
+    -webkit-transform: scale(1) skewY(15deg);
+    -moz-transform: scale(1) skewY(15deg);
+    transform: scale(1) skewY(15deg);
+  }
+  .custom-1 {
+    -webkit-animation-delay: 1s;
+  }
+  .custom-2 {
+    -webkit-animation-delay: 2s;
+  }
+  .custom-3 {
+    -webkit-animation-delay: 3s;
+  }
+  .custom-4 {
+    -webkit-animation-delay: 4s;
+  }
+  .custom-5 {
+    -webkit-animation-delay: 5s;
+  }
+  .custom-6 {
+    -webkit-animation-delay: 6s;
+  }
+  .custom-7 {
+    -webkit-animation-delay: 7s;
+  }
+  .custom-8 {
+    -webkit-animation-delay: 8s;
+  }
+  .custom-9 {
+    -webkit-animation-delay: 9s;
+  }
+  .custom-10 {
+    -webkit-animation-delay: 10s;
+  }
+  .custom-11 {
+    -webkit-animation-delay: 11s;
+  }
+  .custom-12 {
+    -webkit-animation-delay: 12s;
+  }
+  .custom-13 {
+    -webkit-animation-delay: 13s;
+  }
+  .custom-14 {
+    -webkit-animation-delay: 14s;
+  }
+  .custom-15 {
+    -webkit-animation-delay: 15s;
+  }
+  .custom-16 {
+    -webkit-animation-delay: 16s;
+  }
+  .custom-17 {
+    -webkit-animation-delay: 17s;
+  }
+  .custom-18 {
+    -webkit-animation-delay: 18s;
+  }
+  .custom-19 {
+    -webkit-animation-delay: 19s;
+  }
+  .custom-20 {
+    -webkit-animation-delay: 20s;
+  }
+  .custom-21 {
+    -webkit-animation-delay: 21s;
+  }
+  .custom-22 {
+    -webkit-animation-delay: 22s;
+  }
+  @-webkit-keyframes rotate-hue {
+    0% { -webkit-filter: hue-rotate(0deg); }
+    100% { -webkit-filter: hue-rotate(360deg); }
+  }

src/containers/index.js

@@ -3,5 +3,6 @@ import App from './App/App';
 import Home from './Home/Home';
 import NotFound from './NotFound/NotFound';
 import StyleScoping from './StyleScoping/StyleScoping';
+import LetteringTest from './LetteringTest/LetteringTest';
 
-export { About, App, Home, NotFound, StyleScoping };
+export { About, App, Home, NotFound, StyleScoping, LetteringTest };

src/routes.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IndexRoute, Route } from 'react-router';
-import { App, Home, About, NotFound, StyleScoping } from './containers';
+import { App, Home, About, NotFound, StyleScoping, LetteringTest } from './containers';
 
 export default (
   <Route path="/" component={App}>
@@ -10,6 +10,7 @@ export default (
     { /* routes */ }
     <Route path="about" component={About} />
     <Route path="styles" component={StyleScoping} />
+    <Route path="letering" component={LetteringTest} />
 
     { /* catch all route */ }
     <Route path="*" component={NotFound} />