{"id":19078523,"url":"https://github.com/codeworksdev/digital-sandbox","last_synced_at":"2025-02-22T05:27:03.420Z","repository":{"id":87703014,"uuid":"52024931","full_name":"codeworksdev/digital-sandbox","owner":"codeworksdev","description":"Sandboxed environment for testing dynamic web applications.","archived":false,"fork":false,"pushed_at":"2018-08-31T17:30:06.000Z","size":6055,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-02T18:43:59.651Z","etag":null,"topics":["css","devices","html","html5","sandbox","toolbar"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeworksdev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-18T17:23:20.000Z","updated_at":"2018-08-31T16:43:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"2f328e9a-d032-47b4-8007-7604dcf05b0e","html_url":"https://github.com/codeworksdev/digital-sandbox","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeworksdev%2Fdigital-sandbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeworksdev%2Fdigital-sandbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeworksdev%2Fdigital-sandbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeworksdev%2Fdigital-sandbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeworksdev","download_url":"https://codeload.github.com/codeworksdev/digital-sandbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240131771,"owners_count":19752725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","devices","html","html5","sandbox","toolbar"],"created_at":"2024-11-09T02:10:02.806Z","updated_at":"2025-02-22T05:27:03.412Z","avatar_url":"https://github.com/codeworksdev.png","language":null,"readme":"# Digital Sandbox\n_Cross-browser app launcher and device toolbar for showing responsive, mobile first web applications on the web or offline. Powered by [Mochi](https://github.com/codeworksdev/mochi) and [Bootstrap](http://getbootstrap.com/)._\n\n\u003e [**v2.1**](https://github.com/codeworksdev/digital-sandbox/releases/latest)\n\nThe digital sandbox is a portable (i.e., cross-browser) app launcher and device toolbar that allows you to easily display a collection of applications and websites in a [programmable](#api) [iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) window. It's inspired by Chrome DevTools' [device mode](https://developers.google.com/web/tools/chrome-devtools/device-mode/) feature, but with complete portability (i.e., can be used offline or online in most Internet browsers).\n\n## What is Mochi?\n[Mochi](https://github.com/codeworksdev/mochi) is a ready-to-deploy HTML5 boilerplate framework that runs on [Bootstrap](http://getbootstrap.com/), but adds tons of new features, with a strong focus on offline web applications without all the limitations. It achieves this goal by fully integrating and maintaining offline versions of popular libraries that have been out in the wild for years.\n\n## Usage\nTo use the digital sandbox, simply [download the latest distribution package](https://github.com/codeworksdev/digital-sandbox/releases/latest) and extract the contents of the included **`dist`** folder to the root of your website directory (e.g., **`/var/www/html`** in some systems). That's it! You now have a fully functioning and completely portable device toolbar installed on your website. The digital sandbox is designed to run either online or offline, depending on your desired [configuration](#api).\n\n## What's Included\n\nWithin the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations for all libraries. You'll see something like this:\n\n```\ndist/\n├── bootstrap/\n│   ├── css/\n│   │   ├── bootstrap.css\n│   │   ├── bootstrap.min.css\n│   │   ├── bootstrap-grid.css\n│   │   ├── bootstrap-grid.min.css\n│   │   ├── bootstrap-reboot.css\n│   │   └── bootstrap-reboot.min.css\n│   │\n│   └── js/\n│       ├── bootstrap.bundle.js\n│       ├── bootstrap.bundle.min.js\n│       ├── bootstrap.js\n│       └── bootstrap.min.js\n│\n├── frontend/\n│   ├── apps/\n│   │   ├── demos/\n│   │   │   └── starter-template/\n│   │   │       └── index.html\n│   │   │\n│   │   └── README.txt\n│   │\n│   ├── css/\n│   │   ├── print.css\n│   │   └── style.css\n│   │\n│   ├── img/\n│   │   ├── brand/\n│   │   │   ├── launcher-icon-1x.pmg\n│   │   │   └── launcher-icon-4x.pmg\n│   │   │\n│   │   └── web/\n│   │       ├── devices/\n│   │       │   ├── apple/\n│   │       │   │   ├── ipad.png\n│   │       │   │   ├── ipad_air.png\n│   │       │   │   ├── ipad_air-l.png\n│   │       │   │   ├── ipad_mini.png\n│   │       │   │   ├── ipad_mini-l.png\n│   │       │   │   ├── ipad_pro_9_7.png\n│   │       │   │   ├── ipad_pro_9_7-l.png\n│   │       │   │   ├── ipad_pro_12_9.png\n│   │       │   │   ├── ipad_pro_12_9-l.png\n│   │       │   │   ├── ipad-l.png\n│   │       │   │   ├── iphone_5s.png\n│   │       │   │   ├── iphone_5s-l.png\n│   │       │   │   ├── iphone_6plus.png\n│   │       │   │   └── iphone_6plus-l.png\n│   │       │   │\n│   │       │   ├── google/\n│   │       │   │   ├── nexus_7.png\n│   │       │   │   ├── nexus_7-l.png\n│   │       │   │   ├── nexus_10.png\n│   │       │   │   └── nexus_10-l.png\n│   │       │   │\n│   │       │   └── samsung/\n│   │       │       ├── galaxy_s5.png\n│   │       │       └── galaxy_s5-l.png\n│   │       │\n│   │       ├── walls/\n│   │       │   ├── bulbs.png\n│   │       │   ├── desk.png\n│   │       │   └── landscape.png\n│   │       │\n│   │       └── tile.png\n│   │\n│   ├── js/\n│   │   ├── config.js\n│   │   ├── onload.js\n│   │   └── onload.min.js\n│   │\n│   ├── less/\n│   │   ├── _2dppx_375up.less\n│   │   ├── _2dppx_425up.less\n│   │   ├── _2dppx_480up.less\n│   │   ├── _2dppx_576up.less\n│   │   ├── _2dppx_640up.less\n│   │   ├── _2dppx_750up.less\n│   │   ├── _2dppx_768up.less\n│   │   ├── _2dppx_970up.less\n│   │   ├── _2dppx_992up.less\n│   │   ├── _2dppx_1020up.less\n│   │   ├── _2dppx_1024up.less\n│   │   ├── _2dppx_1170up.less\n│   │   ├── _2dppx_1200up.less\n│   │   ├── _2dppx_1440up.less\n│   │   ├── _2dppx_1560up.less\n│   │   ├── _2dppx_2560up.less\n│   │   ├── _2dppx_base.less\n│   │   ├── _375up.less\n│   │   ├── _425up.less\n│   │   ├── _480up.less\n│   │   ├── _576up.less\n│   │   ├── _640up.less\n│   │   ├── _750up.less\n│   │   ├── _768up.less\n│   │   ├── _970up.less\n│   │   ├── _992up.less\n│   │   ├── _1020up.less\n│   │   ├── _1024up.less\n│   │   ├── _1170up.less\n│   │   ├── _1200up.less\n│   │   ├── _1440up.less\n│   │   ├── _1560up.less\n│   │   ├── _2560up.less\n│   │   ├── _base.less\n│   │   ├── _mixins.less\n│   │   ├── _notouch.less\n│   │   ├── _print.less\n│   │   ├── print.less\n│   │   └── style.less\n│   │\n│   └── themes/\n│       └── default/\n│           ├── css/\n│           │   ├── print.css\n│           │   └── style.css\n│           │\n│           ├── less/\n│           │   ├── _2dppx_375up.less\n│           │   ├── _2dppx_425up.less\n│           │   ├── _2dppx_480up.less\n│           │   ├── _2dppx_576up.less\n│           │   ├── _2dppx_640up.less\n│           │   ├── _2dppx_750up.less\n│           │   ├── _2dppx_768up.less\n│           │   ├── _2dppx_970up.less\n│           │   ├── _2dppx_992up.less\n│           │   ├── _2dppx_1020up.less\n│           │   ├── _2dppx_1024up.less\n│           │   ├── _2dppx_1170up.less\n│           │   ├── _2dppx_1200up.less\n│           │   ├── _2dppx_1440up.less\n│           │   ├── _2dppx_1560up.less\n│           │   ├── _2dppx_2560up.less\n│           │   ├── _2dppx_base.less\n│           │   ├── _375up.less\n│           │   ├── _425up.less\n│           │   ├── _480up.less\n│           │   ├── _576up.less\n│           │   ├── _640up.less\n│           │   ├── _750up.less\n│           │   ├── _768up.less\n│           │   ├── _970up.less\n│           │   ├── _992up.less\n│           │   ├── _1020up.less\n│           │   ├── _1024up.less\n│           │   ├── _1170up.less\n│           │   ├── _1200up.less\n│           │   ├── _1440up.less\n│           │   ├── _1560up.less\n│           │   ├── _2560up.less\n│           │   ├── _base.less\n│           │   ├── _mixins.less\n│           │   ├── _notouch.less\n│           │   ├── _print.less\n│           │   ├── print.less\n│           │   └── style.less\n│           │\n│           └── onload.js\n│\n├── mochi/\n│   ├── css/\n│   │   └── helpers/\n│   │       └── animate.less/\n│   │           └── dist/\n│   │               ├── css/\n│   │               │   └── animate.css\n│   │               │\n│   │               └── less/\n│   │                   ├── _mixins.less\n│   │                   ├── _options.less\n│   │                   └── animate.less\n│   │\n│   ├── js/\n│   │   ├── helpers/\n│   │   │   ├── font-awesome-free/\n│   │   │   │   └── js/\n│   │   │   │       └── all.min.js\n│   │   │   │\n│   │   │   ├── iScroll/\n│   │   │   │   └── build/\n│   │   │   │       ├── iscroll.js\n│   │   │   │       ├── iscroll.min.js\n│   │   │   │       ├── iscroll-infinite.js\n│   │   │   │       ├── iscroll-infinite.min.js\n│   │   │   │       ├── iscroll-lite.js\n│   │   │   │       ├── iscroll-lite.min.js\n│   │   │   │       ├── iscroll-probe.js\n│   │   │   │       ├── iscroll-probe.min.js\n│   │   │   │       ├── iscroll-zoom.js\n│   │   │   │       └── iscroll-zoom.min.js\n│   │   │   │\n│   │   │   ├── ViewerJS/\n│   │   │   │   ├── images/\n│   │   │   │   │   ├── kogmbh.png\n│   │   │   │   │   ├── nlnet.png\n│   │   │   │   │   ├── texture.png\n│   │   │   │   │   ├── toolbarButton-download.png\n│   │   │   │   │   ├── toolbarButton-fullscreen.png\n│   │   │   │   │   ├── toolbarButton-menuArrows.png\n│   │   │   │   │   ├── toolbarButton-pageDown.png\n│   │   │   │   │   ├── toolbarButton-pageUp.png\n│   │   │   │   │   ├── toolbarButton-presentation.png\n│   │   │   │   │   ├── toolbarButton-zoomIn.png\n│   │   │   │   │   └── toolbarButton-zoomOut.png\n│   │   │   │   │\n│   │   │   │   ├── tools/\n│   │   │   │   │   └── replaceByFileContents.js\n│   │   │   │   │\n│   │   │   │   ├── example.local.css\n│   │   │   │   ├── HeaderCompiled.html\n│   │   │   │   ├── HeaderCompiled.js\n│   │   │   │   ├── index.html\n│   │   │   │   ├── index-template.html\n│   │   │   │   ├── ODFViewerPlugin.css\n│   │   │   │   ├── ODFViewerPlugin.js\n│   │   │   │   ├── PDFViewerPlugin.css\n│   │   │   │   ├── PDFViewerPlugin.js\n│   │   │   │   ├── PluginLoader.js\n│   │   │   │   ├── viewer.css\n│   │   │   │   ├── viewer.js\n│   │   │   │   └── viewerTouch.css\n│   │   │   │\n│   │   │   ├── basil.min.js\n│   │   │   ├── Chart.bundle.min.js\n│   │   │   ├── clipboard.min.js\n│   │   │   ├── holder.min.js\n│   │   │   ├── modernizr-custom.js\n│   │   │   ├── popper.min.js\n│   │   │   ├── sprintf.min.js\n│   │   │   ├── underscore.string.min.js\n│   │   │   └── underscore-min.js\n│   │   │\n│   │   ├── jquery/\n│   │   │   ├── ui/\n│   │   │   │   ├── images/\n│   │   │   │   │   ├── ui-icons_444444_256x240.png\n│   │   │   │   │   ├── ui-icons_555555_256x240.png\n│   │   │   │   │   ├── ui-icons_777620_256x240.png\n│   │   │   │   │   ├── ui-icons_777777_256x240.png\n│   │   │   │   │   ├── ui-icons_cc0000_256x240.png\n│   │   │   │   │   └── ui-icons_ffffff_256x240.png\n│   │   │   │   │\n│   │   │   │   ├── jquery-ui.css\n│   │   │   │   ├── jquery-ui.js\n│   │   │   │   ├── jquery-ui.min.css\n│   │   │   │   ├── jquery-ui.min.js\n│   │   │   │   ├── jquery-ui.structure.css\n│   │   │   │   ├── jquery-ui.structure.min.css\n│   │   │   │   ├── jquery-ui.theme.css\n│   │   │   │   └── jquery-ui.theme.min.css\n│   │   │   │\n│   │   │   └── jquery.min.js\n│   │   │\n│   │   ├── plugins/\n│   │   │   ├── dialog/\n│   │   │   │   └── dist/\n│   │   │   │       ├── dialog.js\n│   │   │   │       └── dialog.min.js\n│   │   │   │\n│   │   │   └── veeva/\n│   │   │       └── dist/\n│   │   │           ├── veeva.js\n│   │   │           ├── veeva-library.js\n│   │   │           ├── veeva-library.min.js\n│   │   │           └── veeva.min.js\n│   │   │\n│   │   ├── libraries.js\n│   │   ├── mochi.js\n│   │   └── mochi.min.js\n│   │\n│   └── less/\n│       ├── _2dppx_375up.less\n│       ├── _2dppx_425up.less\n│       ├── _2dppx_480up.less\n│       ├── _2dppx_576up.less\n│       ├── _2dppx_640up.less\n│       ├── _2dppx_750up.less\n│       ├── _2dppx_768up.less\n│       ├── _2dppx_970up.less\n│       ├── _2dppx_992up.less\n│       ├── _2dppx_1020up.less\n│       ├── _2dppx_1024up.less\n│       ├── _2dppx_1170up.less\n│       ├── _2dppx_1200up.less\n│       ├── _2dppx_1440up.less\n│       ├── _2dppx_1560up.less\n│       ├── _2dppx_2560up.less\n│       ├── _2dppx_base.less\n│       ├── _375up.less\n│       ├── _425up.less\n│       ├── _480up.less\n│       ├── _576up.less\n│       ├── _640up.less\n│       ├── _750up.less\n│       ├── _768up.less\n│       ├── _970up.less\n│       ├── _992up.less\n│       ├── _1020up.less\n│       ├── _1024up.less\n│       ├── _1170up.less\n│       ├── _1200up.less\n│       ├── _1440up.less\n│       ├── _1560up.less\n│       ├── _2560up.less\n│       ├── _base.less\n│       ├── _mixins.less\n│       ├── _notouch.less\n│       └── _print.less\n│\n├── .htaccess\n├── index.html\n├── manifest.json\n├── offline.html\n├── project.appcache\n├── robots.txt\n└── sw.js\n```\n\n___\n# API\n\n## Configuration File\nThe included configuration file ([**`dist/frontend/js/config.js`**](https://github.com/codeworksdev/digital-sandbox/blob/master/dist/frontend/js/config.js)) is a great way to get started with using the digital sandbox. This file acts as your digital sandbox controller center, and uses special variables to organize your apps in a consistent, accessible format. Additionally, this is where you would include the basic HTML markup that allows the sandbox work to generate the app launcher screen (i.e., the inline frame). Continue reading below to learn how the standard HTML template should be structured to take full advantage of the sandbox.\n\n_**Note:** A full list of supported variables are listed [here](https://github.com/codeworksdev/digital-sandbox/issues/95)._\n\n## HTML Markup\nFirst things first! After the [unified configuration file](https://github.com/codeworksdev/digital-sandbox/blob/master/dist/frontend/js/config.js) is loaded and processed, the digital sandbox will determine if the included HTML body markup matches this basic structure:\n\n```html\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-sm-6\"\u003e\n        \u003cdiv data-title=\"Demos\"\u003e\n            \u003ca href=\"./?demos:my-first-app:v1.0/index\"\u003eMy First App v1.0\u003c/a\u003e\n            \u003ca href=\"./?demos:my-first-app:v2.0/index\"\u003eMy First App v2.0\u003c/a\u003e\n            \u003ca href=\"./?demos:my-first-app:v3.0/index\"\u003eMy First App v3.0\u003c/a\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-sm-6\"\u003e\n        \u003cdiv data-title=\"Websites\"\u003e\n            \u003ca href=\"https://google.com/\"\u003eGoogle\u003c/a\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\nIf it does, it will automatically be converted to something like this:\n\n```html\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-sm-6\"\u003e\n        \u003cdiv class=\"ds-widget ds-widget-simple\" id=\"ds-widget-simple-0\"\u003e\n            \u003cdiv data-bucket=\"demos\"\u003e\n                \u003ch1\u003eDemos\u003c/h1\u003e\n                \u003ctable class=\"table table-sm table-bordered table-hover\"\u003e\n                    \u003ctbody\u003e\n                        \u003ctr\u003e\n                            \u003ctd\u003e\u003ca target=\"_top\" title=\"My First App v1.0\" href=\"./index.html?demos:my-first-app:v1.0/index\"\u003eMy First App v1.0\u003c/a\u003e\u003c/td\u003e\n                            \u003ctd title=\"Launch Internal\"\u003e\u003ca target=\"_top\" href=\"./index.html?demos:my-first-app:v1.0/index\"\u003e\u003ci class=\"fas fa-sign-in-alt\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/td\u003e\n                            \u003ctd title=\"Launch External\"\u003e\u003ca target=\"_blank\" href=\"http://mydomain.com/frontend/apps/demos/my-first-app/v1.0/index.html\"\u003e\u003ci class=\"fas fa-link\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/td\u003e\n                        \u003c/tr\u003e\n                        \u003ctr\u003e\n                            \u003ctd\u003e\u003ca target=\"_top\" title=\"My First App v2.0\" href=\"./index.html?demos:my-first-app:v2.0/index\"\u003eMy First App v2.0\u003c/a\u003e\u003c/td\u003e\n                            \u003ctd title=\"Launch Internal\"\u003e\u003ca target=\"_top\" href=\"./index.html?demos:my-first-app:v2.0/index\"\u003e\u003ci class=\"fas fa-sign-in-alt\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/td\u003e\n                            \u003ctd title=\"Launch External\"\u003e\u003ca target=\"_blank\" href=\"http://mydomain.com/frontend/apps/demos/my-first-app/v2.0/index.html\"\u003e\u003ci class=\"fas fa-link\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/td\u003e\n                        \u003c/tr\u003e\n                        \u003ctr\u003e\n                            \u003ctd\u003e\u003ca target=\"_top\" title=\"My First App v3.0\" href=\"./index.html?demos:my-first-app:v3.0/index\"\u003eMy First App v3.0\u003c/a\u003e\u003c/td\u003e\n                            \u003ctd title=\"Launch Internal\"\u003e\u003ca target=\"_top\" href=\"./index.html?demos:my-first-app:v3.0/index\"\u003e\u003ci class=\"fas fa-sign-in-alt\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/td\u003e\n                            \u003ctd title=\"Launch External\"\u003e\u003ca target=\"_blank\" href=\"http://mydomain.com/frontend/apps/demos/my-first-app/v3.0/index.html\"\u003e\u003ci class=\"fas fa-link\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/td\u003e\n                        \u003c/tr\u003e\n                    \u003c/tbody\u003e\n                \u003c/table\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-sm-6\"\u003e\n        \u003cdiv class=\"ds-widget ds-widget-simple\" id=\"ds-widget-simple-1\"\u003e\n            \u003cdiv data-bucket=\"websites\"\u003e\n                \u003ch1\u003eWebsites\u003c/h1\u003e\n                \u003ctable class=\"table table-sm table-bordered table-hover\"\u003e\n                    \u003ctbody\u003e\n                        \u003ctr\u003e\n                            \u003ctd\u003e\u003ca target=\"_blank\" title=\"Google\" href=\"https://google.com/\"\u003eGoogle\u003c/a\u003e\u003c/td\u003e\n                            \u003ctd title=\"Launch Internal\"\u003e\u003cspan class=\"text-muted\"\u003e\u003ci class=\"fas fa-sign-in-alt\"\u003e\u003c/i\u003e\u003c/span\u003e\u003c/td\u003e\n                            \u003ctd title=\"Launch External\"\u003e\u003ca target=\"_blank\" href=\"https://google.com/\"\u003e\u003ci class=\"fas fa-link\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/td\u003e\n                        \u003c/tr\u003e\n                    \u003c/tbody\u003e\n                \u003c/table\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nAnd there you have it! We call this type of conversion *\"widgetization of the app directory\"*. Once widgetized, the digital sandbox will organize your apps in a structured format that's usable by most modern browsers. You can define which widget you'd like to use by modifying the [`LAUNCHER_WIDGET_NAME`](https://github.com/codeworksdev/digital-sandbox/issues/105) variable in the unified configuration file. See below for a list of supported widgets.\n\n## Supported Widgets\nThe following widgets are supported in the [standard distribution package](https://github.com/codeworksdev/digital-sandbox/releases/latest):\n\n| Widget Name | Description |\n|--|--|\n| `simple` | Organizes your apps in a basic table structure. This is the default widget. |\n| `accordion` | Organizes your apps as Bootstrap-powered [accordions](http://getbootstrap.com/docs/4.1/components/collapse/#accordion-example). |\n\n## Query String Parameters\nIn addition to allowing you to widgetize the app directory, the digital sandbox also supports a unique query string format for customizing the way your apps are appear within the [iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) window. Consider the following example:\n\n### FOR EXAMPLE\nTo launch **`dist/frontend/apps/demos/my-first-app/v1.0/home.html`** as an iPad device in portrait orientation, you would navigate to the following URL:\n```\n./index.html?demos:my-first-app:v1.0/home~ipad:p|demos\u0026title=Welcome\n```\nThe URL above would produce an iFrame window configured as:\n\n1. a wrapped window in a device image referenced as `ipad` (i.e., a standard iPad), and\n2. with the `ipad` device image set to `portrait` orientation, and\n3. ensuring the digital sandbox is aware the app is located under the `demos` folder, which would\n4. allow the sandbox to refer back to the folder when the user interacts with the toolbar, and\n5. making sure the app link always refreshes the iFrame parent window, and\n6. the `home.html` file in **`dist/frontend/apps/demos/my-first-app/v1.0`** is opened, and\n7. ensure the browser tab label is set to \"Welcome\".\n\n___\n# Further Reading\nBecause the digital sandbox is built with Bootstrap, learning to use it is as easy as digging into their official docs and mastering the awesome features provided by the framework. We encourage you to head on over to the [official Bootstrap documentation](https://getbootstrap.com/docs/4.1/getting-started/introduction/) to learn like a pro. Happy coding!\n\n___\n# License\nThis project is licensed under the MIT license. (http://opensource.org/licenses/MIT)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeworksdev%2Fdigital-sandbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeworksdev%2Fdigital-sandbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeworksdev%2Fdigital-sandbox/lists"}