mnestorov/gdir-mobile-ui

The GDIR Mobile Web UI Template is a modern and versatile template designed to create stunning user interfaces for mobile web applications.

GDIR - Mobile Web UI Template

Overview

The 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.

Key Features

• 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.
• 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.
• 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.
• 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.
• 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.
• 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.

Requirements

This project uses Gulp to automate tasks for building a mobile UI.

• Node.js
• Gulp

NPM Packages

• yargs - yargs helps you build interactive command line tools.
• gulp-sass - sass plugin for gulp.
• gulp-clean-css - gulp plugin to minify css, using clean-css.
• gulp-if - a ternary gulp plugin, conditionally control the flow of vinyl objects.
• gulp-sourcemaps - write inline source maps.
• gulp-imagemin - minify PNG, JPEG, GIF and SVG images with imagemin.
• del - delete files and folders using globs
• webpack-stream - run webpack as a stream to conveniently integrate with gulp.
• babel-loader - this package allows transpiling JavaScript files using Babel and webpack.
• gulp-uglify - minify JavaScript with UglifyJS3.
• vinyl-named - give vinyl files arbitrary chunk names.
• gulp-zip - ZIP compress files.
• gulp-replace - a string replace plugin for gulp 3.

Since 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.

Installation

1. Clone the repository to your local machine:

git clone https://github.com/mnestorov/gdir-mobile-ui.git

2. Navigate to the project directory:

cd gdir-mobile-ui

2. Install the dependencies:

npm install --global gulp-cli

Note 1: You can also read the Quick Start guide for Gulp installation

Note 2: Use latest JavaScript version in our gulpfile:

Node already supports a lot of ES2015+ features, but to avoid compatibility problems we need to install Babel and rename our gulpfile.js as gulpfile.babel.js.

npm install --save-dev @babel/register @babel/core @babel/preset-env

Usage

This project provides several Gulp tasks to help you during development:

• styles: Processes and minifies CSS files.
• images: Optimizes image files.
• fonts: Copies Font Awesome files to the dist/vendor/font-awesome directory.
• scripts: Transpiles and minifies JavaScript files.
• copy: Copies other files to the dist directory.
• clean: Deletes the dist and packaged directories.
• watch: Watches files for changes and runs the corresponding task.
• compress: Compresses the project files into a zip file.

You can run the tasks using the gulp command followed by the task name.

For example, to run the styles task, you can use:

gulp styles

There are also three pre-defined routines that consist of several tasks:

• dev: Runs all tasks in parallel and then runs the watch task. Use this during development.
• prod: Cleans the dist directory and then runs all tasks in parallel. Use this to build the project for production.
• bundle: Runs the prod routine and then compresses the project files. Use this to prepare the project for distribution.

Here is how you can use them:

gulp dev
gulp prod
gulp bundle
gulp clean

These are all the commands we define in our gulp.babel.js file.

Run the project for development with hot reload:

gulp dev

or

npm run dev

Build the project for production:

gulp bundle --prod

or

npm run bundle

Clean the project and remove the dist folder:

gulp clean

or

npm run clean

Screenshots

---

License

This project is licensed under the MIT License.