-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from andrejewski/site
Create website
- Loading branch information
Showing
1 changed file
with
214 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,214 @@ | ||
| <!doctype html> | ||
| <head> | ||
| <title>Raj - The best JavaScript framework</title> | ||
| <meta name='description' content='Raj is the best state management solution for JavaScript applications'/> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | ||
| <link href="https://fonts.googleapis.com/css?family=Roboto|Lato:900" rel="stylesheet"> | ||
| <style> | ||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0px; | ||
| font-family: Roboto, Helvetica, Arial, sans-serif; | ||
| } | ||
|
|
||
| main { | ||
| border-top: 3px solid #342590; | ||
| padding-bottom: 10vh; | ||
| } | ||
|
|
||
| header { | ||
| padding: 20px 0px; | ||
| margin: 0px; | ||
| } | ||
|
|
||
| h1, h2, h3, h4 {font-family: Lato, Roboto, Helvetica, Arial, sans-serif;} | ||
|
|
||
| h1 { | ||
| margin: 0; | ||
| font-size: 10vh; | ||
| color: #111; | ||
| } | ||
|
|
||
| h2 { | ||
| margin: 0 0 1em 0; | ||
| font-size: 3vh; | ||
| color: #333; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 2.5vh; | ||
| } | ||
|
|
||
| header a { | ||
| display: inline-block; | ||
| padding: 10px 15px; | ||
| border: none; | ||
| border-radius: 3px; | ||
| text-decoration: none; | ||
| color: rgba(255,255,255,0.9); | ||
| background-color: #342590; | ||
| font-size: 1.8vh; | ||
| } | ||
|
|
||
| header a:hover { | ||
| color: #fff; | ||
| } | ||
|
|
||
| section { | ||
| margin: 0px auto; | ||
| padding: 20px; | ||
| width: 90vw; | ||
| max-width: 420px; | ||
| } | ||
|
|
||
| ul { | ||
| margin: 0; | ||
| padding: 0; | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| li { | ||
| list-style-type: none; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: flex-start; | ||
| } | ||
|
|
||
| li div { | ||
| flex: 1; | ||
| } | ||
|
|
||
| li:before { | ||
| content: '►'; | ||
| font-size: 2.4vh; | ||
| padding-right: 1.5vh; | ||
| margin-top: 0.5vh; | ||
| } | ||
|
|
||
| li a { | ||
| text-decoration: none; | ||
| color: inherit; | ||
| } | ||
|
|
||
| li a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| h4 { | ||
| font-size: 2.5vh; | ||
| margin: 0; | ||
| color: #333; | ||
| } | ||
|
|
||
| p { | ||
| margin: 0 0 2.5vh 0; | ||
| font-size: 2.5vh; | ||
| color: #222; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <main> | ||
| <section> | ||
| <header> | ||
| <h1>Raj</h1> | ||
| <h2>The best JavaScript framework</h2> | ||
| </header> | ||
|
|
||
| </section> | ||
| <section> | ||
| <h3>Packages</h3> | ||
| <ul> | ||
| <li> | ||
| <div> | ||
| <h4><a href='https://github.com/andrejewski/raj'>raj</a></h4> | ||
| <p> | ||
| The core runtime for programs. | ||
| Runtimes can be used standalone or wrapped to integrate with view layers. | ||
| </p> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <div> | ||
| <h4><a href='https://github.com/andrejewski/raj-compose'>raj-compose</a></h4> | ||
| <p> | ||
| Program composition. | ||
| Applications assemble from small programs. | ||
| </p> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <div> | ||
| <h4><a href='https://github.com/andrejewski/raj-react'>raj-react</a></h4> | ||
| <p> | ||
| React bindings to integrate Raj's runtime into the React ecosystem. | ||
| </p> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <div> | ||
| <h4><a href='https://github.com/andrejewski/raj-spa'>raj-spa</a></h4> | ||
| <p>Single page applications and a way of coordinating navigation and views.</p> | ||
| </div> | ||
| </li> | ||
|
|
||
| <li> | ||
| <div> | ||
| <h4><a href='https://github.com/andrejewski/raj-web-debugger'>raj-web-debugger</a></h4> | ||
| <p>Time traveling debugger to pause, play, and rewind programs.</p> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h3>Features</h3> | ||
| <ul> | ||
| <li> | ||
| <div> | ||
| <h4>Testability</h4> | ||
| <p> | ||
| Raj is a state management solution focused on testability. | ||
| Following the program pattern utilized by Raj leads to | ||
| better separated concerns, simpler logic, and easier tests. | ||
| </p> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <div> | ||
| <h4>Small and understandable</h4> | ||
| <p> | ||
| Raj is 40 lines; 236 bytes minified but not yet gzipped. | ||
| With a minimal footprint, Raj lets us build libraries and | ||
| applications that will outlive the latest trends. | ||
| </p> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <div> | ||
| <h4>Replaceable</h4> | ||
| <p> | ||
| We do not compete with other frameworks on massive feature sets. | ||
| Raj provides the smallest core possible and you build only what you need. | ||
| If it does not work for your use case, get rid of it. | ||
| </p> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <div> | ||
| <h4>Bring your own view</h4> | ||
| <p> | ||
| Raj does not lock you into a view layer. | ||
| As far as Raj is concerned the view is just a side effect of state. | ||
| </p> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| </main> | ||
|
|
||
| </body> |