{"id":21340277,"url":"https://github.com/mnestorov/gdir-mobile-ui","last_synced_at":"2026-04-11T19:03:49.734Z","repository":{"id":40417677,"uuid":"174957491","full_name":"mnestorov/gdir-mobile-ui","owner":"mnestorov","description":"The GDIR Mobile Web UI Template is a modern and versatile template designed to create stunning user interfaces for mobile web applications.","archived":false,"fork":false,"pushed_at":"2023-05-15T06:28:15.000Z","size":1092,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-16T02:47:58.505Z","etag":null,"topics":["babel","browsersync","css","es6","gulp","html","javascript","sass","webpack"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":false,"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/mnestorov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2019-03-11T08:32:24.000Z","updated_at":"2023-11-30T14:03:18.000Z","dependencies_parsed_at":"2025-03-16T02:42:08.942Z","dependency_job_id":"b89ba91d-f5dd-40bc-bcca-063c743d8d48","html_url":"https://github.com/mnestorov/gdir-mobile-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mnestorov/gdir-mobile-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnestorov%2Fgdir-mobile-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnestorov%2Fgdir-mobile-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnestorov%2Fgdir-mobile-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnestorov%2Fgdir-mobile-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mnestorov","download_url":"https://codeload.github.com/mnestorov/gdir-mobile-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnestorov%2Fgdir-mobile-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270850056,"owners_count":24656443,"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","status":"online","status_checked_at":"2025-08-17T02:00:09.016Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["babel","browsersync","css","es6","gulp","html","javascript","sass","webpack"],"created_at":"2024-11-22T00:49:55.958Z","updated_at":"2025-12-30T21:07:11.448Z","avatar_url":"https://github.com/mnestorov.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GDIR - Mobile Web UI Template\n\n[![Licence](https://img.shields.io/github/license/Ileriayo/markdown-badges?style=for-the-badge)](./LICENSE)\n\n## Overview\n\nThe GDIR Mobile Web UI Template is a modern and versatile template designed to create stunning user interfaces for mobile web applications. Whether you're building a progressive web app (PWA), a mobile-friendly website, or a hybrid mobile application, the GDIR template provides a solid foundation for creating engaging and responsive user interfaces.\n\n### Key Features\n\n- **_Responsive Design:_** The template is built with a mobile-first approach, ensuring that your user interface looks and functions seamlessly across a wide range of mobile devices and screen sizes.\n- **_Sleek and Modern Interface:_** GDIR offers a sleek and modern design, featuring a clean layout, intuitive navigation, and visually appealing elements that enhance the user experience.\n- **_Customizable Components:_** The template provides a rich set of UI components and elements that can be easily customized and tailored to suit your specific project requirements. From buttons and forms to navigation menus and cards, GDIR offers a comprehensive collection of reusable components.\n- **_Built-in Mobile Interactions:_** GDIR incorporates mobile-friendly interactions and gestures, enabling users to navigate and interact with your web application seamlessly. Touch events, swipe gestures, and smooth animations enhance the overall user experience.\n- **_Optimized Performance:_** The template follows best practices for web performance, ensuring fast loading times and smooth performance on mobile devices. It utilizes optimized code, lazy loading techniques, and image optimization to deliver a snappy and efficient user interface.\n- **_Cross-Browser Compatibility:_** GDIR is thoroughly tested and compatible with major web browsers, including Chrome, Firefox, Safari, and Edge, ensuring consistent performance and visual fidelity across different platforms.\n\n## Requirements\n\nThis project uses Gulp to automate tasks for building a mobile UI.\n\n- Node.js\n- Gulp\n\n### NPM Packages\n\n- [yargs](https://www.npmjs.com/package/yargs) - yargs helps you build interactive command line tools.\n- [gulp-sass](https://www.npmjs.com/package/gulp-sass) - sass plugin for gulp.\n- [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css) - gulp plugin to minify css, using clean-css.\n- [gulp-if](https://www.npmjs.com/package/gulp-if) - a ternary gulp plugin, conditionally control the flow of vinyl objects.\n- [gulp-sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps) - write inline source maps.\n- [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin) - minify PNG, JPEG, GIF and SVG images with imagemin.\n- [del](https://www.npmjs.com/package/del) - delete files and folders using globs\n- [webpack-stream](https://www.npmjs.com/package/webpack-stream) - run webpack as a stream to conveniently integrate with gulp.\n- [babel-loader](https://www.npmjs.com/package/babel-loader) - this package allows transpiling JavaScript files using Babel and webpack.\n- [gulp-uglify](https://www.npmjs.com/package/gulp-uglify) - minify JavaScript with UglifyJS3.\n- [vinyl-named](https://www.npmjs.com/package/vinyl-named) - give vinyl files arbitrary chunk names.\n- [gulp-zip](https://www.npmjs.com/package/gulp-zip) - ZIP compress files.\n- [gulp-replace](https://www.npmjs.com/package/gulp-replace) - a string replace plugin for gulp 3.\n\nSince all the packages are added in the `package-lock.json` file, when you run the npm install command, they will be installed automatically, so they are added here, just for reference.\n\n## Installation\n\n1. Clone the repository to your local machine:\n\n```\ngit clone https://github.com/mnestorov/gdir-mobile-ui.git\n```\n\n2. Navigate to the project directory:\n\n```\ncd gdir-mobile-ui\n```\n\n2. Install the dependencies:\n\n```\nnpm install --global gulp-cli\n``` \n**Note 1:** You can also read the [Quick Start guide for Gulp installation](https://gulpjs.com/docs/en/getting-started/quick-start)\n\n**Note 2:** Use latest JavaScript version in our gulpfile:\n\nNode already supports a lot of ES2015+ features, but to avoid compatibility problems we need to **install [Babel](https://babeljs.io/docs/en/babel-register)** and rename our **_gulpfile.js_** as **_gulpfile.babel.js_**.\n\n```\nnpm install --save-dev @babel/register @babel/core @babel/preset-env\n```\n\n## Usage\n\n**This project provides several Gulp tasks to help you during development:**\n\n- **_styles:_** Processes and minifies CSS files.\n- **_images:_** Optimizes image files.\n- **_fonts:_** Copies Font Awesome files to the dist/vendor/font-awesome directory.\n- **_scripts:_** Transpiles and minifies JavaScript files.\n- **_copy:_** Copies other files to the dist directory.\n- **_clean:_** Deletes the dist and packaged directories.\n- **_watch:_** Watches files for changes and runs the corresponding task.\n- **_compress:_** Compresses the project files into a zip file.\n\nYou can run the tasks using the gulp command followed by the task name.  \n\n**For example, to run the styles task, you can use:**\n\n```\ngulp styles\n```\n\n**There are also three pre-defined routines that consist of several tasks:**\n\n- **_dev:_** Runs all tasks in parallel and then runs the watch task. Use this during development.\n- **_prod:_** Cleans the dist directory and then runs all tasks in parallel. Use this to build the project for production.\n- **_bundle:_** Runs the prod routine and then compresses the project files. Use this to prepare the project for distribution.\n\n**Here is how you can use them:**\n\n```\ngulp dev\ngulp prod\ngulp bundle\ngulp clean\n```\n\nThese are all the commands we define in our `gulp.babel.js` file.\n\n**Run the project for development with hot reload:**\n\n```\ngulp dev\n``` \n\nor \n\n```\nnpm run dev\n```\n\n**Build the project for production:**\n\n```\ngulp bundle --prod\n``` \n\nor \n\n```\nnpm run bundle\n```\n\n**Clean the project and remove the `dist` folder:**\n\n```\ngulp clean\n```\n\nor\n\n```\nnpm run clean\n```\n\n## Screenshots\n\n![Mobile App Screenshot 1](screenshots/screenshot_1.png)\n![Mobile App Screenshot 2](screenshots/screenshot_2.png)\n![Mobile App Screenshot 3](screenshots/screenshot_3.png)\n![Mobile App Screenshot 4](screenshots/screenshot_4.png)\n![Mobile App Screenshot 5](screenshots/screenshot_5.png)\n![Mobile App Screenshot 6](screenshots/screenshot_6.png)\n![Mobile App Screenshot 7](screenshots/screenshot_7.png)\n![Mobile App Screenshot 8](screenshots/screenshot_8.png)\n![Mobile App Screenshot 9](screenshots/screenshot_9.png)\n![Mobile App Screenshot 10](screenshots/screenshot_10.png)\n![Mobile App Screenshot 11](screenshots/screenshot_11.png)\n![Mobile App Screenshot 12](screenshots/screenshot_12.png)\n![Mobile App Screenshot 13](screenshots/screenshot_13.png)\n\n---\n\n## License\n\nThis project is licensed under the MIT License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmnestorov%2Fgdir-mobile-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmnestorov%2Fgdir-mobile-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmnestorov%2Fgdir-mobile-ui/lists"}