-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 10.9 KB
/
index.html
1
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta content="minimum-scale=1.0, width=device-width" name="viewport"><meta name="description" content="A component framework for making web animations development easier."><title>Home - NevinhaJs</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto+Mono"><link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet"><link rel="stylesheet" href="/vendor/icon-12/icon-12.css"><link rel="stylesheet" href="/vendor/icon-16/icon-16.css"><link rel="stylesheet" href="/vendor/galano/galano.css"><link rel="stylesheet" href="/vendor/senna/senna.css"><link rel="stylesheet" href="/vendor/codemirror/lib/codemirror.css"><link rel="stylesheet" href="/vendor/codemirror/theme/dracula.css"><script src="/js/bundles/shared.electric.js"></script><script src="/vendor/senna/senna.js"></script><script src="/vendor/codemirror/lib/codemirror.js"></script><script src="/vendor/codemirror/mode/css/css.js"></script><script src="/vendor/codemirror/mode/javascript/javascript.js"></script><script src="/vendor/codemirror/mode/xml/xml.js"></script><link rel="stylesheet" href="/styles/main.css"></head><body><div id="wrapper"><div class="senna-loading-bar"></div><div id="pageComponent"><div><div class=""><main class="content"><nav class="topbar topbar-light"><div class="topbar-logo"><a class="topbar-logo-link" href="/"><h3 class="topbar-logo-text">NevinhaJs</h3></a></div><nav class="topbar-menu"><button class="topbar-toggle">Menu</button><ul class="topbar-list"><li class="topbar-item"><a class="topbar-link " href="/docs/" target="undefined"><span>Documentation</span></a></li><li class="topbar-item"><a class="topbar-link " href="/tutorials/example/first-step.html" target="undefined"><span>Tutorials</span></a></li></ul></nav></nav><header class="header presentation"><div class="container"><figure><img src="./images/nevinha-js.png"></figure><h1 class="header-title">NevinhaJs</h1><h2 class="header-subtitle">A component framework for making web animations development easier.</h2><div class="header-cta"><button class="btn btn-accent copy-clipboard" data-clipboard-text="yarn add nevinha-js">yarn add nevinha-js</button><a href="#" class="btn btn-default mt-2">Get Started</a><span class="bg-primary notification">Copied to your clipboard!</span></div></div></header><article class="about"><div class="container"><div class="row"><div class="col-md-12 col-md-offset-2"><h3 class="about-title">What's NevinhaJS?</h3><p class="about-description">A component render as React that goes beyond of static methods and component lifecycles, including state, props, improving the way you make meaningful animations and providing an amazing experience.</p></div></div><br><br><div id="nevinha-app"></div></div></article><div class="features"><div class="container"><div class="row"><section class="feature col-md-6 col-md-offset-2"><span class="icon-16-hammer"></span><h3 class="feature-title">Community Maintainence</h3><p class="feature-description">We don't have any enterprise behind us, so you don't have to be care about license or any thing related to Copyright. Our license will be MIT ever.</p></section><section class="feature col-md-6"><span class="icon-16-flash"></span><h3 class="feature-title">Fast and easy to understand</h3><p class="feature-description">NevinhaJS uses the virtual DOM and uses CSS Typed OM API, wich improves arround 30% of the performance of your browser css manipulations.</p></section></div></div></div><article class="about"><div class="container"><div class="row"><div class="col-md-12 col-md-offset-2"><h3 class="about-title">It's easier than you think</h3><p class="about-description">We know how difficult is learning to use a new javascript framework and was because of it that we have created NevinhaJS in a very simple way, where all of you need to know is just ES6 and our very simple API.</p></div></div></div></article><article class="examples"><div class="container"><div class="row"><div class="col-md-12 col-md-offset-2"><h3 class="feature-title text-center">Featured Examples</h3><div class="examples-images"><a href="/parallax-example/" title="Parallax"><img src="./images/nevinha-parallax.gif"></a><a href="/todo-list/" title="Todo list"><img src="./images/nevinha-todo-list.gif"></a><a href="/basic-example/" title="Basic example"><img src="./images/nevinha-basic-example.gif"></a></div></div></div></div></article><footer class="footer"><div class="container"><div class="row"><p class="footer-description col-md-6 col-md-offset-2">Copyright © <a href="https://github.com/NevinhaJS">NevinhaJS</a></p><p class="footer-description col-md-6">Powered by <a href="http://electricjs.com">Electric</a></p></div></div></footer></main></div><script src="./lib/bundle.js"></script></div></div><script src="/js/bundles/pageIndex.js"></script><script>var data = '{"pageLocation":"index","site":{"title":"NevinhaJs","githubRepo":"nevinhajs/nevinhajs.github.io","googleAnalytics":"UA-122807437-1","index":{"title":"Home","description":"A component framework for making web animations development easier.","srcFilePath":"src/pages/index.soy","id":"pages","location":"/./","url":"/./","children":{"docs":{"title":"Documentation","description":"Everything you need to know to get started.","srcFilePath":"src/pages/docs/index.soy","id":"docs","location":"/docs/","url":"/docs/","children":{"search":{"title":"Search","description":"Find what you\'re looking for in the documentation.","hidden":true,"srcFilePath":"src/pages/docs/search.soy","id":"search","location":"/docs/search.html","url":"/docs/search.html"},"basics":{"children":{"creating-your-fisrt-component":{"title":"Your first component","description":"We\'ve seen how to setup our project, now we\'ll see how to create our first component using NevinhaJs.","layout":"guide","icon":"arrow-right-rod","weight":1,"srcFilePath":"src/pages/docs/basics/creating-your-fisrt-component.md","id":"creating-your-fisrt-component","location":"/docs/basics/creating-your-fisrt-component.html","url":"/docs/basics/creating-your-fisrt-component.html"}},"title":"Basics","description":"To start to use NevinhaJs in your project is very simple and easy, if you don\'t want to spend time configuring your project, checkout NevinhaJS Boirlaplate by clicking in the button bellow.","layout":"guide","icon":"arrow-right-rod","weight":1,"srcFilePath":"src/pages/docs/basics/index.md","id":"basics","location":"/docs/basics/","url":"/docs/basics/","childIds":["creating-your-fisrt-component"]},"lifecycle-state-props":{"title":"Lifecycle, state and props","description":"When we were creating NevinhaJs, we noticed that even being a framework animation based, we would need some thing to control our components animations states and references of our components tags DOM representations. The follow topics in this section, will show you how to do it.","layout":"guide","icon":"code-file","weight":2,"srcFilePath":"src/pages/docs/lifecycle-state-props/index.md","id":"lifecycle-state-props","location":"/docs/lifecycle-state-props/","url":"/docs/lifecycle-state-props/"},"providers":{"title":"Providers","description":"","layout":"guide","icon":"database","weight":4,"srcFilePath":"src/pages/docs/providers/index.md","id":"providers","location":"/docs/providers/","url":"/docs/providers/","children":{"parallax":{"title":"Parallax Provider","description":"","layout":"guide","icon":"database","weight":2,"srcFilePath":"src/pages/docs/providers/parallax.md","id":"parallax","location":"/docs/providers/parallax.html","url":"/docs/providers/parallax.html"},"sticky":{"title":"Sticky Provider","description":"Sticky provider is a way to fix your component in the screen until the height of it parent finish.","layout":"guide","icon":"arrow-right-rod","weight":1,"srcFilePath":"src/pages/docs/providers/sticky.md","id":"sticky","location":"/docs/providers/sticky.html","url":"/docs/providers/sticky.html"}},"childIds":["sticky","parallax"]},"motions":{"title":"Motions","description":"Even states, props and Lifecycles, NevinhaJS has a very special set of animations and providers inside it architecture. It is what makes NevinhaJs be diferent of React and other component frameworks. Our motions you can use in any site, portal or web application.","layout":"guide","icon":"flash","weight":2,"srcFilePath":"src/pages/docs/motions/index.md","id":"motions","location":"/docs/motions/","url":"/docs/motions/","children":{"motions-reference":{"title":"Motions Reference","description":"First you need to know that NevinhaJs uses All Animation CSS3 as base of it animations, so our goal about motions is to rewrite all animations of the All Animation CSS using web animations API.","layout":"guide","weight":1,"srcFilePath":"src/pages/docs/motions/motions-reference.md","id":"motions-reference","location":"/docs/motions/motions-reference.html","url":"/docs/motions/motions-reference.html"}},"childIds":["motions-reference"]}},"childIds":["basics","lifecycle-state-props","motions","providers","search"]},"tutorials":{"title":"Tutorials","description":"Foo bar.","url":"/tutorials/example/first-step.html","layout":false,"srcFilePath":"src/pages/tutorials/index.soy","id":"tutorials","location":"/tutorials/","customURL":true,"children":{"example":{"children":{"first-step":{"title":"Step 1 - Preparing your environment","description":"","buttonTitle":"I did step 1","parentId":"example","layout":"tutorial","time":90,"weight":1,"srcFilePath":"src/pages/tutorials/example/first-step.md","id":"first-step","location":"/tutorials/example/first-step.html","url":"/tutorials/example/first-step.html"},"second-step":{"title":"Step 2 - Creating your first component","description":"","parentId":"example","layout":"tutorial","buttonTitle":"I did step 2","time":90,"weight":2,"srcFilePath":"src/pages/tutorials/example/second-step.md","id":"second-step","location":"/tutorials/example/second-step.html","url":"/tutorials/example/second-step.html"},"third-step":{"title":"Step 3 - Using state, props and animations","description":"","parentId":"example","layout":"tutorial","time":90,"weight":3,"srcFilePath":"src/pages/tutorials/example/third-step.md","id":"third-step","location":"/tutorials/example/third-step.html","url":"/tutorials/example/third-step.html"}},"title":"First Tutorial","description":"Foo bar.","tutorialTitle":"Getting started with your first tutorial","url":"/tutorials/example/first-step.html","layout":false,"srcFilePath":"src/pages/tutorials/example/index.soy","id":"example","location":"/tutorials/example/","customURL":true,"childIds":["first-step","second-step","third-step"]}},"childIds":["example"]}},"childIds":["docs","tutorials"],"active":true},"basePath":"","topbar":[{"href":"/docs/","label":"Documentation"},{"href":"/tutorials/example/first-step.html","label":"Tutorials"}]}}'; if (typeof electric !== 'undefined') {electric.init(data);}else {document.addEventListener('DOMContentLoaded', function() {electric.init(data);});}</script></div><script data-senna-track="permanent" src="/js/electric/electric.js"></script></body></html>