responsivetest

by nghuuphuoc

nghuuphuoc / responsivetest

Test responsive layout, powered by AngularJS and Bootstrap 3. If this tool is useful to you, please ...

439 Stars 213 Forks Last release: about 7 years ago (v1.2.1) 62 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Responsive Test

This tool is used to test responsive layout. You can see the live demo on http://responsivetest.net.

Powered by jQuery, Bootstrap 3, and AngularJS.

You should also check BootstrapValidator, the best jQuery plugin to validate form fields. It's another cool thing by @nghuuphuoc

ResponsiveTest screen shot

Download and run

  • Download ResponsiveTest from the Github page directly. It's also possible to download the tool with bower:
$ bower install responsivetest
  • Point your web server to the ResponsiveTest directory. You can use python to simplify this step by running the following command:
$ python -m SimpleHTTPServer 

Then, access the browser at

http://localhost:

ResponsiveTest is written in CSS, Javascript, and HTML entirely. The tool uses an Ajax request to retrieve the devices data which is stored in an external file (

data/devices.json
).

As you know, the browser doesn't allow to do it if the file is served locally due to security concern

Origin null is not allowed by Access-Control-Allow-Origin

That's why we need to run it with a HTTP server.

Add more devices

The device sizes are defined in

data/devices.json
file.

If you want it to support more devices and screen resolutions, please fork the project and pull a new request.

You don't have to rebuild if you only change the

data/devices.json
file.

By default, the tool will randomly load an URL found in

randomUrls
section from
data/devices.json
.

Build

The build process finds the CSS, JS files in the

src
and compresses them, places compressed files in the
dist
directory.

First, use grunt to install the dependent packages:

$ npm install grunt --save-dev
$ npm install grunt-contrib-copy --save-dev
$ npm install grunt-contrib-cssmin --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-ngmin --save-dev

Then, execute the following command to build:

$ grunt

Author

ResponsiveTest is developed by Nguyen Huu Phuoc * http://twitter.com/nghuuphuoc * http://github.com/nghuuphuoc

Big thanks to the contributors:

License

Copyright (c) 2013 Nguyen Huu Phuoc

ResponsiveTest is licensed under the MIT license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.