[docs] demos and styleguide

arwes · Jun 24, 2017 · 4b4afd9 · 4b4afd9
1 parent 7f5f544
commit 4b4afd9
Show file tree

Hide file tree

Showing 19 changed files with 73,139 additions and 151 deletions.
diff --git a/docs/app1/index.html b/docs/app1/index.html
@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Electrolize">
     <link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css">
     <link rel="stylesheet" href="/css/app1.css">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <meta name="theme-color" content="#021114">
   </head>
   <body>
     <div id="app"></div>

diff --git a/docs/app1/index.js b/docs/app1/index.js
@@ -9,56 +9,65 @@ function App () {
       <Frame border='down' className='header' component='header'>
         <div className='row'>
           <div className='col s12'>
-            <h1 className='title'>Romel Pérez</h1>
+            <h1 className='title'>Arwes Project</h1>
           </div>
         </div>
       </Frame>
       <div className='row'>
         <div className='col s12'>
           <Frame content>
-            <p>The page is a demo of the frame containers components to layout content in an application implementing Arwes.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis laboris nisi ut aliquip ex. Duis aute irure.</p>
           </Frame>
           <Frame content corners={1}>
-            <p>If you want to create more customized containers you should use the frame inside a wrapper component with the custom designs.</p>
+            <p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+              proident, sunt in culpa mollit anim id est laborum ea commodo consequat.</p>
           </Frame>
         </div>
       </div>
       <div className='row'>
         <div className='col s12'>
           <Frame content corners={2} component='article'>
-            <h1 className='content-title'>BucaramangaJS Website</h1>
-            <p>Official website for the meetup community BucaramangaJS, an intention to share the JavaScript knownledge and expertise with the Bucaramanga community.</p>
+            <h1 className='content-title'>Velit esse cillum dolore</h1>
+            <p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+              proident, sunt in culpa mollit anim id est laborum ea commodo consequat.</p>
           </Frame>
           <Frame content corners={2} component='article'>
-            <h1 className='content-title'>Asiste</h1>
-            <p>Web platform to manage social and business events. It lets you control users, organizations, their portfolios and conversions in the event. You can also contact them publicly. It is a Progressive Web Application.</p>
+          <h1 className='content-title'>Consectetur adipisicing elit</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis laboris nisi ut aliquip ex. Duis aute irure.</p>
           </Frame>
           <Frame content corners={2} component='article'>
-            <h1 className='content-title'>Calumet Realtime</h1>
-            <p>Real-Time communication framework for the project COMA of Grupo Calumet. RealTime is a web server based on Node.js, Express.js, Socket.io and Waterline to integrate with the existing platform of users.</p>
+            <h1 className='content-title'>Dolor in reprehenderit in voluptate</h1>
+            <p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+              proident, sunt in culpa mollit anim id est laborum ea commodo consequat.</p>
           </Frame>
           <Frame content corners={2} component='article'>
-            <h1 className='content-title'>Chrome DevTools</h1>
-            <p>Talk about the Developer Tools (DevTools) of the browser Google Chrome for programmers and designers working with web technologies. Inspect the DOM, track errors, review resources and much more.</p>
+          <h1 className='content-title'>Quis laboris nisi ut aliquip</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis laboris nisi ut aliquip ex. Duis aute irure.</p>
           </Frame>
           <Frame content corners={2} component='article' theme='success'>
-            <h1 className='content-title'>React / Redux Examples</h1>
-            <p>A serie of examples to learn the tools based on React and Redux libraries. The examples were used in workshops to teach and learn about the React ecosystem.</p>
+            <h1 className='content-title'>Est laborum ea commodo consequat</h1>
+            <p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+              proident, sunt in culpa mollit anim id est laborum ea commodo consequat.</p>
           </Frame>
           <Frame content corners={2} component='article' theme='alert'>
-            <h1 className='content-title'>Real-Time Web con WebSocket</h1>
-            <p>Talk about real-time applications implementing technologies based on WebSocket, an standard to create simultaneous bidirectional communication in web platforms.</p>
+          <h1 className='content-title'>Ut enim ad minim veniam, quis laboris nisi ut aliquip ex</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis laboris nisi ut aliquip ex. Duis aute irure.</p>
           </Frame>
           <Frame content corners={2} component='article' theme='disabled'>
-            <h1 className='content-title'>Katherine Navarro Website</h1>
-            <p>Katherine Navarro's personal website with basic information and social media links.</p>
+            <h1 className='content-title'>Velit esse cillum dolore eu fugiat nulla pariatur</h1>
+            <p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+              proident, sunt in culpa mollit anim id est laborum ea commodo consequat.</p>
           </Frame>
         </div>
       </div>
       <Frame border='up' className='footer' component='footer'>
         <div className='row'>
           <div className='col s12'>
-            <p>Copyright 2017 Romel Pérez</p>
+            <p>Copyright 2017 <a href="https://romelperez.com">Romel Pérez</a></p>
           </div>
         </div>
       </Frame>

diff --git a/docs/app2/index.html b/docs/app2/index.html
@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Electrolize">
     <link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css">
     <link rel="stylesheet" href="/css/app2.css">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <meta name="theme-color" content="#021114">
   </head>
   <body>
     <div id="app"></div>

diff --git a/docs/app2/index.js b/docs/app2/index.js
@@ -57,17 +57,13 @@ function App () {
               <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
             </ol>
             <p>Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <hr />
+
+            <p>Copyright 2017 <a href="https://romelperez.com">Romel Pérez</a></p>
 
           </Frame>
         </div>
       </div>
-      <Frame border='up' component='footer' className='footer'>
-        <div className="row">
-          <div className="col s12">
-            <p>Copyright 2017 <a href="http://romelperez.com">Romel Pérez</a></p>
-          </div>
-        </div>
-      </Frame>
     </Arwes>
   );
 }

diff --git a/docs/app3/index.html b/docs/app3/index.html
@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Electrolize">
     <link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css">
     <link rel="stylesheet" href="/css/app3.css">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <meta name="theme-color" content="#021114">
   </head>
   <body>
     <div id="app"></div>

diff --git a/docs/app3/index.js b/docs/app3/index.js
@@ -11,7 +11,8 @@ function App () {
           <Frame content corners={2}>
             <h1>Application structure</h1>
             <p>Demo of structure of an application and the organization of the components.</p>
-            <p>Copyright 2017 <a href="http://romelperez.com">Romel Pérez</a></p>
+            <hr />
+            <p>Copyright 2017 <a href="https://romelperez.com">Romel Pérez</a></p>
           </Frame>
         </div>
       </div>

diff --git a/docs/css/app1.css b/docs/css/app1.css
diff --git a/docs/css/app2.css b/docs/css/app2.css
diff --git a/docs/css/app3.css b/docs/css/app3.css
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/index.html b/docs/index.html
@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Electrolize">
     <link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css">
     <link rel="stylesheet" href="/index.css">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <meta name="theme-color" content="#021114">
     <style>
       body { margin: 20px; }
       h1 { margin: 0; }
@@ -24,16 +26,17 @@ <h1>Arwes</h1>
       <div class="col s12">
         <p>Front-end framework to build web apps user interfaces based on sci-fi and futuristic concepts.</p>
         <ul>
+          <li><a href="/styleguide">Styleguide</a></li>
           <li><a href="/app1">Containers</a></li>
           <li><a href="/app2">Article Content</a></li>
           <li><a href="/app3">Application structure</a></li>
         </ul>
-        <p>This project is currently in development and API may change.</p>
+        <p>This project is currently in development and the API may change.</p>
       </div>
     </main>
     <footer class="row">
       <div class="col s12">
-        <p>Copyright 2017 <a href="http://romelperez.com">Romel Pérez</a></p>
+        <p>Copyright 2017 <a href="https://romelperez.com">Romel Pérez</a></p>
       </div>
     </footer>
   </body>

diff --git a/docs/js/app1.js b/docs/js/app1.js
diff --git a/docs/js/app2.js b/docs/js/app2.js
diff --git a/docs/js/app3.js b/docs/js/app3.js
diff --git a/docs/logo.png b/docs/logo.png
diff --git a/docs/styleguide/build/0.8f1f9ae3.js b/docs/styleguide/build/0.8f1f9ae3.js
diff --git a/docs/styleguide/build/bundle.5f8f4692.js b/docs/styleguide/build/bundle.5f8f4692.js
diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<title>Arwes</title>
+		<link rel="shortcut icon" href="/favicon.ico">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Titillium+Web:400,600">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Electrolize">
+    <link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css">
+    <link rel="stylesheet" href="/index.css">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <meta name="theme-color" content="#021114">
+	</head>
+	<body>
+		<div id="app"></div>
+	<script type="text/javascript" src="build/bundle.5f8f4692.js"></script></body>
+</html>
diff --git a/docs/styleguide/template.html b/docs/styleguide/template.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<title>Arwes</title>
+		<link rel="shortcut icon" href="/favicon.ico">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Titillium+Web:400,600">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Electrolize">
+    <link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css">
+    <link rel="stylesheet" href="/index.css">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <meta name="theme-color" content="#021114">
+	</head>
+	<body>
+		<div id="app"></div>
+	</body>
+</html>