eMAG Apps UI KIT

Start

Bootstrap

Before you start

We've upgraded our components to Bootstrap 4.
For the previous version, based on Bootstrap 3, please folow this link .

Overview

A short description about what's it like to work with eMAG Apps UI KIT:

1. Intro

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.


Features:

  1. Keeping it light with an average page weight of 500Kb.

  2. W3C Compliant

  3. WCAG 2.0 Compliant

  4. Average page-load time of 1s


3. Working with Gulp.js

Installing Gulp:

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.

Afterwards run 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)


  • css - Main style CSS files.
    • flags - Countries flags as SVG file on 1:1 and 4:3 ratio.
    • fonts - Fonts files used in eMAG Apps UI KIT.
    • icons - Icons used in eMAG Apps UI KIT (created by eMAG and from other libraries).
    • img - Images used in demo pages.
    • lib - Styles required by libraries used in eMAG Apps UI KIT.
  • js - Main JS script files.
    • lib - Libraries' JS files.
  • plugins - Plugins used in eMAG Apps UI KIT (CSS and JS files).

6. eMAG Apps UI KIT source code (src)


  • boostrap - SCSS custom bootstrap files.
    • scss.
      • custom-mixins
  • others
    • js
      • custom - Custom wrappers' JS files.
    • scss
      • custom - Custom wrappers' SCSS files.
  • {{plugin-name}} - Plugins used in eMAG Apps UI KIT (SCSS and JS files).
    • js
      • custom - {{plugin-name}}
    • scss
      • custom - {{plugin-name}}

7. License


eMAG Apps UI KIT is released under the MIT license, this means:

You can

  • Comercial Use
    • You may use the work commercially.

  • Modify
    • You may make changes to the work.

  • Distribute
    • You may distribute the compiled code and/or source.

  • Sublicense
    • You may incorporate the work into something that has a more restrictive license.

  • Private Use
    • You may use the work for private use.

You cannot

  • Hold Liable
    • The work is provided "as is". You may not hold the author liable.

You must

  • Include Copyright
    • You must include the copyright notice in all copies or substantial uses of the work.

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

Getting started

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">

And the following javascript files before the end </body> tag:

<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