Framework7 plugin to add 3d effect for side panels
HTML JavaScript CSS
Latest commit b850e16 Aug 22, 2015 @nolimits4web 1.0.0 Release
Permalink
Failed to load latest commit information.
demo 1.0.0 Release Aug 21, 2015
dist 1.0.0 Release Aug 21, 2015
src 0.9.5 Release Oct 2, 2014
.gitignore 1.0.0 Release Aug 21, 2015
.jshintrc Initial commit Jul 20, 2014
CHANGELOG.md 1.0.0 Release Aug 21, 2015
LICENSE Initial commit Jul 20, 2014
README.md 1.0.0 Release Aug 21, 2015
bower.json 1.0.0 Release Aug 21, 2015
gulpfile.js 1.0.0 Release Aug 21, 2015
package.json 1.0.0 Release Aug 21, 2015

README.md

devDependency Status Flattr this git repo

Framework7-3D-Panels

Framework7 plugin to add 3d effect for side panels

Installation

Just grab plugin files from dist/ folder or using bower:

bower install framework7-3d-panels

And link them to your app's right AFTER Framework7's scripts and styles:

<link rel="stylesheet" href="path/to/framework7.ios.min.css">
<link rel="stylesheet" href="path/to/framework7.ios.colors.min.css">
<link rel="stylesheet" href="path/to/framework7.3dpanels.css">
...
<script src="path/to/framework7.min.js"></script>
<script src="path/to/framework7.3dpanels.js"></script>

Usage

This plugin doesn't add new effect, it just converts "reveal"-effect panels to 3d panels. So make sure that you have "reveal" panel in your layout:

<div class="panel panel-left panel-reveal">...</div>

Demo

Plugin comes with demo example to see how it works and looks. To make demo works you need:

  • install bower dependencies. Go to demo/ folder and execute in terminal bower install

Contribute

All changes should be done only in src/ folder. This project uses gulp to build a distributable version.

First you need to install all dependencies:

$ npm install

Then to build plugin's files for testing run:

$ gulp build

If you need a local server while you developing you can run:

$ gulp server

And working demo will be available on http://localhost:3000/demo/