search

wanadev / PhotonUI

A javascript framework to create user interfaces
http://wanadev.github.io/PhotonUI/
BSD 3-Clause "New" or "Revised" License
63 stars 20 forks source link
gui javascript javascript-framework ui

readme

PhotonUI - A javascript framework to create user interfaces

NPM Version License Discord

PhotonUI javascript framework to create rich web user interfaces without having to manipulate any HTML nor CSS.

Screenshot

Getting Started

Standalone Version

All the files you need are in the dist folder. You just have to import

in your page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Boilerplate</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link type="text/css" rel="stylesheet" href="https://github.com/wanadev/PhotonUI/blob/master/dist/photonui-base.css" />
        <link type="text/css" rel="stylesheet" href="https://github.com/wanadev/PhotonUI/blob/master/dist/photonui-theme-particle.css" />
        <script src="https://github.com/wanadev/PhotonUI/raw/master/dist/photonui.js"></script>
    </head>

    <body>
    </body>
</html>

NPM and Browserify

If you are using Browserify in your project, a NPM package is available. To install it, juste type:

npm install --save photonui

then, to use it in your project you just have to import PhotonUI:

var photonui = require("photonui");

NOTE: do not forget to import CSS files in your HTML page:

<link rel="stylesheet" href="https://github.com/wanadev/PhotonUI/blob/master/node_modules/photonui/dist/photonui-base.css" />
<link rel="stylesheet" href="https://github.com/wanadev/PhotonUI/blob/master/node_modules/photonui/dist/photonui-theme-particle.css" />

Hacking

PhotonUI is built using Grunt, Less and Browserify. If you want to hack it, you will have to install few tools.

Installing Dependencies

To build PhotonUI, you will first have to install Node.js (or io.js).

NOTE: If you are on Ubuntu / Debian Linux you must install the nodejs-legacy package.

Next, install globally the grunt-cli npm package:

npm install -g grunt-cli

Then install the PhotonUI's dependencies:

npm install

Building PhotonUI

Once the build stuff and dependencies installed, you just have to run the grunt command to build PhotonUI:

grunt

All generated files are in the dist folder.

NOTE: during the development, it can be annoying to run the grunt command every time you make a change. You can instead run the following command to automatically rebuild what changed each time you modify a file:

grunt watch

Coding Style

PhotonUI follows the Yandex Javascript CodeStyle EXCEPT for the quote marks where we use double quotes (").

You can automatically check that your code follows the conventions by using this command:

grunt jscs

Testing

To run the PhotonUI tests, you can use the following commands (you should have chromium and firefox installed):

npm test

You can also run manually the tests in your browser:

  1. Check that the javascript is well formed and that it follows the coding style: grunt jshint jscs
  2. Build PhotonUI: grunt
  3. Run the tests: open test/index.html in your browser.

Git Hooks

To avoid committing bad stuff, you can install a git pre-commit hook that will abort the commit if the code contains errors. To install the hooks you just have to run the following command:

grunt githooks

Creating Your Own widgets

If you want to create you own PhotonUI widgets, first read this:

The documentation above explain how to create a custom widget outside of the PhotonUI project.

Once you feel comfortable with the custom widget creation, you can create widgets inside the PhotonUI project. We created a Yeoman generator that creates all required files for you:

Related projects:

Changelog: