{"id":28541459,"url":"https://github.com/zestia/glide","last_synced_at":"2025-09-11T05:05:33.625Z","repository":{"id":2861636,"uuid":"3866566","full_name":"zestia/glide","owner":"zestia","description":"Glide is a mobile user interface library built with Backbone in mind","archived":false,"fork":false,"pushed_at":"2019-03-20T16:31:58.000Z","size":1280,"stargazers_count":10,"open_issues_count":1,"forks_count":5,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-06-09T20:08:32.998Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://glide.zestia.com","language":"CSS","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/zestia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-03-29T13:59:56.000Z","updated_at":"2019-08-31T21:31:52.000Z","dependencies_parsed_at":"2022-07-31T13:59:12.269Z","dependency_job_id":null,"html_url":"https://github.com/zestia/glide","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/zestia/glide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fglide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fglide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fglide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fglide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zestia","download_url":"https://codeload.github.com/zestia/glide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fglide/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264102978,"owners_count":23557858,"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":[],"created_at":"2025-06-09T20:08:37.199Z","updated_at":"2025-07-07T15:31:23.114Z","avatar_url":"https://github.com/zestia.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Glide.js\n\nGlide.js is as a simple lightweight mobile framework built with Backbone in mind. Take a look at the demo on your device:\n\n[View Demo](http://glide.zestia.com)\n\n## Getting Started\n\n### Using Glide.js\n\nThis guide will take you through some steps to get started. Further down we cover how to use Glide.js with backbone.js. Feedback welcome [@hallodom](https://twitter.com/hallodom)\n\n### Features\n\n- \u003ccode\u003eglide.css\u003c/code\u003e gives scructure to your app making it easy to create fixed top or bottom positioned elements with native\n- \u003ccode\u003eglide.js\u003c/code\u003e handles forwards and backwards page transitions.\n- We use \u003ccode\u003efastclick.js\u003c/code\u003e to speed up clicks.\n- Extend Glide wih your own plugins.\n\n### Device Support\n\n- iPhone 9.3+\n- Android 4.4+\n* Glide only works in Webkit based browsers at this time\n\n## Markup\n\n### Anatomy of a page\n\nInclude glide.js and css files. Make sure to include a theme.\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"css/glide.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"css/glide.theme.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\n    \u003c!-- pages here --\u003e\n\n    \u003cscript src=\"js/glide.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      window.glide = new Glide\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\nOrganise your app into pages. Make sure each page has the class .page and .hidden:\n\n```html\n\u003cdiv id=\"page-1\" class=\"page hidden\"\u003e\n  \u003c!-- page content --\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"page-2\" class=\"page hidden\"\u003e\n  \u003c!-- page content --\u003e\n\u003c/div\u003e\n```\n\nGlide will use the unique ID's to target the pages. Once you have some pages marked tell Glide to open the first page by passing the page id as a string to the to() function:\n\n```html\n\u003cscript\u003e\n  window.glide = new Glide\n  glide.to('#page-1')\n\u003c/script\u003e\n```\nThat's all you need to get started.\n\n### Scrolling\n\nGlide makes use of native scrolling [reference](https://github.com/joelambert/ScrollFix/issues/2). This solution does away with rubber banding on iOS without the need of a javscript solution. The solution requires three divs. Anything outside div.scrollview becomes a fixed positioned element:\n\n```html\n\u003cdiv id=\"page-1\" class=\"page hidden\"\u003e\n  \u003c!-- fixed header here --\u003e\n  \u003cdiv class=\"scrollview\"\u003e\n    \u003cdiv class=\"scrollview-inner\"\u003e\n      \u003cdiv class=\"scrollview-content\"\u003e\n        \u003c!-- scrollable content here --\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003c!-- fixed footer here --\u003e\n\u003c/div\u003e\n```\n## Transitioning pages\n\nTransitioning pages can be done in a router or using simple click events binding the glide.to() function. Glide does not watch for hash change events.\n\n```html\n\u003ca href=\"#page-2\" id=\"#page-2-link\" class=\"button\"\u003e\n  \u003cbutton\u003eGo to page 2\u003c/button\u003e\n\u003c/a\u003e\n```\nIn your javascript assign a click event to the anchor.\n\n```javascript\n$('#page-2-link').on('click',function(){\n  glide.to(\"#page-2\");\n});\n```\nGlide will perform the default slide transition to #page-2. You can make a back button with:\n\n```html\n\u003cdiv id=\"page-2\"\u003e\n  \u003ca href=\"#page-1\" class=\"back\"\u003e\n    \u003cbutton\u003eBack\u003c/button\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n```\nWe wrap a button within an anchor so we can pad the hit target to make it easier to tap. Then have some javascript to go back. You must explicitly state back as true for a reverse transition:\n\n```js\n$('#page-2 a.back').on('click',function(){\n  glide.back = true\n  glide.to('#page-1')\n});\n\nor \n\n$('#page-2 a.back').on('click',function(){\n  glide.back = true\n  window.history.back()\n});\n```\n\n### Slide Up\n\nTo transition to a page using a slideUp transtion use `data-transition=\"slideUp\"` on the target page:\n\n```\n  \u003cdiv id=\"page-1\" class=\"page hidden\" data-transition=\"slideUp\"\u003e \u003c/div\u003e\n ``` \n \nGlide will know when to reverse the transitions when navigating back to a page. \n \n### No transition\n\nTo display a page without a transition use `data-transition=\"none\"` on the target page:\n\n```\n  \u003cdiv id=\"page-1\" class=\"page hidden\" data-transition=\"none\"\u003e \u003c/div\u003e\n ``` \n \n## Using the menu plugin\n\nTo use the menu plugin include the js and pass in a plugins has as options when instantiating Glide. We wrote the menu as a plugin so it's easier to build your own custom implmentations.\n\n```html\n\u003cscript src=\"js/glide.menu.js\"\u003e\u003c/script\u003e\n```\n```js\nwindow.glide = new Glide({\n  plugins: {\n    menu: GlideMenu\n  }\n});\n```\nGlideMenu will look for the id #main-menu, make sure that is the ID for your menu markup. Now bind glide.plugins.menu.toggle() to your menu button:\n\n```js\n$('#main-menu-button').on('click',function(e){\n  e.preventDefault();\n  glide.plugins.menu.toggle()\n});\n```\nHiding the menu can be calling toggle() again while the menu is open:\n\n```js\n$('#close-menu-btn').on('click',function(e){\n  e.preventDefault();\n  glide.plugins.menu.toggle()\n});\n```\n## Using Glide with Backbone.js\n\nWe built Glide because we needed a flexible mobile framework that would work well with backbones router implementation. See the example below:\n\n```js\nvar AppRouter = Backbone.Router.extend({\n    routes: {\n      '': 'index',\n      'getting-started': 'gettingStarted'\n      'animations': 'animations'\n      'slide': 'slide'\n      'slideUp': 'slideUp'\n      'contacts': 'contacts'\n      'contacts/:id': 'showContact'\n    },\n    index: function() {\n      glide.to('#index')\n    },\n    gettingStarted: function() {\n      glide.to('#getting-started')\n    },\n    animations: function() {\n      glide.to('#animations')\n    },\n    slide: function() {\n      glide.to('#slide')\n    },\n    slideUp: function() {\n      glide.to('#slideUp')\n    },\n    contacts: function() {\n      view = new app.Views.Contacts collection: app.Collections.Contacts\n      view.render()\n      glide.to('#contacts')\n    },\n    showContact: function(id) {\n      model = app.Collections.Contacts?.get(id)\n      view = new app.Views.ContactsShow model: model\n      view.render()\n      glide.to('#contact-page')\n    }\n});\n```\nExample below in coffescript:\n\n```coffee\nclass AppRouter extends Backbone.Router\n\n  routes:\n    '': 'index'\n    'getting-started': 'gettingStarted'\n    'animations': 'animations'\n    'slide': 'slide'\n    'slideUp': 'slideUp'\n    'contacts': 'contacts'\n    'contacts/:id': 'showContact'\n\n  index: -\u003e\n    glide.to '#index'\n\n  gettingStarted: -\u003e\n    glide.to '#getting-started'\n\n  animations: -\u003e\n    glide.to '#animations'\n\n  slide: -\u003e\n    glide.to '#slide'\n\n  slideUp: -\u003e\n    glide.to '#slideUp'\n\n  contacts: -\u003e\n    view = new app.Views.Contacts collection: app.Collections.Contacts\n    view.render()\n    glide.to '#contacts'\n\n  showContact: (id) -\u003e\n    model = app.Collections.Contacts?.get(id)\n    view = new app.Views.ContactsShow model: model\n    view.render()\n    glide.to '#contact-page'\n\n@app = window.app ? {}\n@app.Routers.AppRouter = AppRouter\n```\n\nAbove you can see how clean using Glide is when coupled with backbone routing. No need to worry about forward and back transitions, using glide.to() on each route has that all worked out for you.\n\n## View example app\n\nTo see Glide in full use view our example contacts app and take time to download and look [through the source](https://github.com/zestia/glide/tree/master/demo).\n\n## Contribute\n\nHere's the most direct way to get your work merged into the project.\n\n1. Fork the project\n2. Clone down your fork\n3. Create a feature branch\n4. Hack away\n5. If necessary, rebase your commits into logical chunks without errors\n6. Push the branch up to your fork\n7. Send a pull request for your branch\n\n## Copyright\n\nCopyright \u0026copy; Zestia, Ltd. See LICENSE for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzestia%2Fglide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzestia%2Fglide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzestia%2Fglide/lists"}