uix-kit

<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>@@{website_title}</title> @@include('./src/components/_global/include-header.html') </head> <body class="home"> @@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html') <div class="uix-wrapper">  <header class="uix-header__container uix-header__container--overlay"> <div class="uix-header"> <div class="container"> @@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html') </div>  <div class="uix-clearfix"></div> </div> </header> <main id="uix-maincontent">  <section style="background-color: #CE3A3E;"> <div class="uix-height--100 uix-typo--color-white"> <canvas id="3D-particle-effect-canvas" data-img-src="assets/images/logo-colorful.png"></canvas> <div class="uix-v-align--absolute uix-v-align--absolute--b uix-t-c uix-hidden-scrollbar-x"> <div class="container uix-t-c"> <div class="row"> <div class="col-md-6 offset-md-3"> <h3 class="uix-typo--h5 uix-typo--style-normal" data-text-eff="letters-eff-flyInOut-001" data-text-eff-speed="800">Free Web Kits For Fast Web Design And Development, Compatible With Bootstrap 5</h3> <div class="uix-btn__group uix-btn__margin--b"> <a href="https://github.com/xizon/uix-kit" target="_blank" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary is-pill">Download</a> <a href="https://www.youtube.com/watch?v=aRDY9Cr-1-E" target="_blank" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary is-pill"><i class="fa fa-play-circle" aria-hidden="true"></i>Getting Started</a> </div> <br>  <iframe src="https://ghbtns.com/github-btn.html?user=xizon&repo=uix-kit&type=star&count=true" style="width:100px;height:20px;border:none;overflow:hidden"></iframe>    <a href="https://twitter.com/uiux_lab?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="small" data-lang="en" data-show-count="true">Follow @uiux_lab</a><script async src="https://platform.twitter.com/widgets.js"></script> <div class="uix-spacing--s uix-spacing--no-bottom"></div> </div> </div>  </div>  </div> </div> </section>  <section class="uix-spacing--s"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 uix-list uix-list--normal uix-table uix-table--bordered"> <p><strong>Make over <span class="uix-typo--color-highlight">120+</span> components to wear again and again!</strong></p> <p>A free web kits for fast web design and development. Uix Kit can be used separately, or merge components and grid systems using bootstrap. Support JS, HTML and SASS component library automatically packaged. It is used to develop the full-static website (HTML templates or for dynamic language integration).</p> <p><a class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--primary is-rounded" href="https://github.com/xizon/poemkit" target="_blank">React Version</a></p> <hr> <h3><span>How To Use?</span></h3> <p>You will need to have <a href="https://nodejs.org/" target="_blank">node</a> setup on your machine. That will output the built distributables to <code>./dist/*</code> and <code>./examples/*.html</code>.</p> <p><strong>Step 1.</strong> Use NPM (Locate your current directory of project, and enter the following command.) or download the latest version from <a href="https://github.com/xizon/uix-kit">Github</a>. For nodejs you have to install some dependencies.</p> <pre class="uix-precode"><label>$</label><code>sudo npm install uix-kit</code></pre> <p>Or clone the repo to get all source files including build scripts: </p> <pre class="uix-precode"><label>$</label><code>git clone git://github.com/xizon/uix-kit.git</code></pre> <p><strong>Step 2.</strong> First, using an absolute path into your <code>"uix-kit/"</code> folder directory.</p> <pre class="uix-precode"><label>$</label><code>cd /{your_directory}/uix-kit</code></pre> <p><strong>Step 3.</strong> Before doing all dev stuff make sure you have `Node 10+` installed. After that, run the following code in the main directory to install the node module dependencies.</p> <pre class="uix-precode"><label>$</label><code>sudo npm install</code></pre> <p><strong>Step 4.</strong> When you’re ready to deploy to production, create a minified bundle with:</p> <pre class="uix-precode"><label>$</label><code>npm run build</code></pre> <p>When you have done, this will spin up a server that can be accessed at <code>http://localhost:8080/examples/</code></p> <p><strong>Step 5.</strong> To preview the page without compiling and packaging, please run the following command:</p> <pre class="uix-precode"><label>$</label><code>npm run preview</code></pre> <p>All pages can be previewed via <code>http://localhost:3000</code> </p> <blockquote> But there is no way to run PHP or get AJAX request on the pages. You need to visit the link on your server, or build a server via MAMP. Then visit a similar URL: <strong>http://localhost:{port}/uix-kit/examples/</strong> </blockquote> </div> </div>  </div>  </section> </main> @@include('./src/components/_global/include-copyright.html') </div>  @@include('./src/components/_global/include-footer.html')