eMAG Apps UI KIT
A short description about what's it like to work with eMAG Apps UI KIT:
eMAG Apps UI Kit is a collection of visual elements and guidelines for eMAG internal applications.The purpose of this collection is to help you build amazing software easier and faster and to maintain a consistent look and feel for all eMAG internal applications. Below you will find details about how you should use these assets in your application.
2. Based on Bootstrap 4.3
Our open source UI KIT is based on the Bootstrap architecture. If you're not familiarized with it, check-out their stuff from getbootstrap.com Aside from the elements provided by Bootstrap, it comes with its own set of unique components, styling and useful plugins that you can use in your project.
3. Working with Gulp.js
To install Gulp, you must first download and install node.js (which includes npm). Believe it or not, npm stands for node packaged modules and is a way to manage development dependencies through node.js.
Once you've installed node.js, open up the command line in the root directory.
Install gulp-cli globally by running
npm install gulp-cli -g.
npm install for npm to look at the package.json file and automatically install the necessary local dependencies listed there.
When completed, you'll be able to run the various Gulp commands provided from the command line.
Available gulp commands:
gulp bs4_styles - CSS distribution task gulp bs4_scripts - JS distribution task gulp bs4_plugin_styles - Generate plugin styles gulp bs4_plugin_scripts - Generate plugin scripts gulp default - Generate main styles and scripts
4. Working with eMAG Apps UI KIT's folder structure:
Once downloaded, unzip the compressed folder to find the three main folders:
eMAG Apps UI KIT/ | ├── demo/ ├── dist/ │ ├── css/ | | ├── flags/ | | ├── fonts/ | | ├── icons/ | | ├── img/ | | └── lib/ │ ├── js/ | | └── lib/ | └── plugins/ | └── presentation/ └── src/
5. Precompiled files (dist)
6. eMAG Apps UI KIT source code (src)
eMAG Apps UI KIT is released under the MIT license, this means:
You may use the work commercially.
- You may use the work commercially.
You may make changes to the work.
- You may make changes to the work.
You may distribute the compiled code and/or source.
- You may distribute the compiled code and/or source.
You may incorporate the work into something that has a more restrictive license.
- You may incorporate the work into something that has a more restrictive license.
You may use the work for private use.
- You may use the work for private use.
The work is provided "as is". You may not hold the author liable.
- The work is provided "as is". You may not hold the author liable.
You must include the copyright notice in all copies or substantial uses of the work.
- You must include the copyright notice in all copies or substantial uses of the work.
You must include the license notice in all copies or substantial uses of the work.
- You must include the license notice in all copies or substantial uses of the work.
The full eMAG Apps UI KIT license can be found in project repository.
There are a couple of ways to install eMAG Apps UI KIT:
1. The easiest way to install is to add the following css line in the head of your webpage:
<link rel="stylesheet" type="text/css" href="examplepath/to/main_style.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script>window.jQuery || document.write("<script src=\"../dist/js/lib/jquery-3.3.1.min.js\">"+"<"+"/script>")</script> <script src="../dist/js/main_script.min.js"></script>
2. You can download the latest release from GitHub.
3. You can also clone the Git repository by running the following command:
[sudo] git clone https://github.com/eMAGTechLabs/emag-apps-ui-kit.git