Git Product home page Git Product logo

cssfilterlab's Introduction

CSS FilterLab

Supported Browsers

CSS FilterLab is using some cutting-edge technology that is available in the latest Google Chrome Canary and WebKit nightly builds. To enjoy the full experience you'll need to turn a few knobs:

Google Chrome Canary

  • Download and install Google Chrome Canary
  • Type chrome://flags/ in the browser's address bar
  • Find the Enable CSS Shaders flag and turn it on
  • Find the GPU Accelerated SVG Filters flag and turn it on
  • Relaunch the browser

WebKit (Mac only)

  • Download and install WebKit nightly for Mac OSX
  • Open the browser's preferences panel. Go to the Advanced tab and tick to show the Develop menu in the menu bar.
  • In the browser's menu bar select Develop > Enable WebGL

Enjoy CSS FilterLab!

Running

Git Submodules

The CodeMirror library is linked as a git submodule. After you clone the project on your machine you'll need to setup the submodules and pull in their code.

cd ./path/to/css/filterlab/
$ git submodule update --init

Build

CSS FilterLab uses Grunt.js to concatenate and minify JavaScript & CSS resources. Grunt.js is build on nodejs, so if you don't have it already installed, go to node.js website and follow the instructions to install it. After that use the command line node package manager to install grunt.js:

$ sudo npm install -g grunt

The grunt.js project file uses other node.js modules. To quicly install all the required libraries run "npm install" in the project folder.

cd ./path/to/css/filterlab/
$ sudo npm install

You also need to make sure you have Ruby & Sass installed. If you're on OS X or Linux you probably already have them installed. Try ruby -v in your terminal. When you've confirmed you have Ruby installed, run sudo gem install sass to get Sass.

To build CSS FilterLab, you need to run the "grunt" command line tool in the project folder. This will generate the "dist/" folder.

cd ./path/to/css/filterlab/
$ grunt

File System Access

CSS FilterLab requires XHR access, but that doesn't work very well when loaded from file:// URLs. For that reason running CSS FilterLab requires serving it from a server. The easiest way to do that on a Mac would be to use python's simple server:

cd [./path/to/css/filterlab]/dist/
python -m SimpleHTTPServer

Open http://localhost:8000 in your browser.

Legal

Notices, terms and conditions pertaining to third party software are located at http://www.adobe.com/go/thirdparty/ and incorporated by reference herein.

jQuery

Copyright 2012 jQuery Foundation and other contributors http://jquery.com/

MIT license

jQuery UI

Copyright (c) 2012 Paul Bakaus, http://jqueryui.com/

MIT license

ANGLE

Copyright (c) 2002-2011 The ANGLE Project Authors. All rights reserved. Use of this source code is governed by a BSD-style license that can be found in the LICENSE file.

This JavaScript library was automatically generated from the ANGLE project using emscripten

For more information go to ANGLE.js

CodeMirror

Copyright (C) 2012 by Marijn Haverbeke [email protected]

MIT License

cssfilterlab's People

Contributors

achicu avatar awgreenblatt avatar cjgammon avatar drublic avatar emalasky avatar larz0 avatar mibalan avatar mvujovic avatar oslego avatar pigucatalin avatar rhudea avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.