# Getting Started

#### Learn how to easily launch a project with Phoenix UI kit.

## Thanks for downloading this sample.

We are sure Phoenix will help launching your next project faster and will make it shine. If you want to get a support, ask any question or simply say "hello",
fell free to contact us.

Get the full version
contact us
Follow @ui_market

## Installation

Phoenix code base contains 2 versions: simple HTML+CSS+JS for beginners and JADE+SCSS+JS for advanced users.

For the easier start, place the content of the `/Phoenix_simple` folder into the root directory of your project.
Phoenix comes with two essential assets: the `main.css` and the `main.js` files. To start using Phoenix, all you have to do is to inject the lines in your project's HTML file and follow the markup:

          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width">
              <link rel="stylesheet" href="css/main.css">
              <script src="js/main.min.js" defer></script>
     	      </head>
            <body>
                <main class="page_wrapper">
                ...chosen components
                <main>
              <div class="js-overlay js-close-navigation js-close-menu overlay"></div>
            <body>
          <html>

## Components

#### Injecting a component

Now your are ready to build a wondeful website.

The easiest way to choose a component is to use the `presentation.html` file where all the components are served and numbered. Open it in any browser and pick some.

Once a component is chosen, open the `presentation.html` file in a code editor (e.g.: Sublime Text). Each component starts with
a "== START OF COUNTERS 01 =="-like comment line so one can be found with ease.

Copy the components' code in your project html like this:

          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width">
              <link rel="stylesheet" href="css/main.css">
              <script src="js/main.min.js" defer></script>
            </head>
            <body>
                <main class="page_wrapper">

                  <!-- START OF THE CHOOSEN COMPONENTS' CODE -->
                  <div class="counter counter--01">
                    <div class="container-fluid">

                      <div class="counter__item counter__item--01">
                        <div class="counter__title counter__title--01">clients</div>
                        <div class="counter__number">7343</div>
                      </div>

                      <div class="counter__item counter__item--01 counter__item--border">
                        <div class="counter__title counter__title--01">projects</div>
                        <div class="counter__number">53</div>
                      </div>

                      <div class="counter__item counter__item--01">
                        <div class="counter__title counter__title--01">years</div>
                        <div class="counter__number">13</div>
                      </div>

                      </div>
                  </div>
                  <!-- END OF THE CHOOSEN COMPONENTS' CODE -->

                <main>
              <div class="js-overlay js-close-navigation js-close-menu overlay"></div>
            <body>
          <html>

Now you have a counter in your project. Go on and get as many components as you need!

#### The Cover component

All the components are as simple as copy-and-paste to add. Yet, there is helpful information for some of them.
A cover component may contain multiple slides inside it. Those slider-covers are wrapped inside a special `.cover__slider` container.

#### The Header component

All the headers are placed inside covers for a better look.
Some of the headers are morphed into simplified mobile (iPad, iPhone) version with a burger inside it. Those burgers have a special attribute `data-menu-index="01"` where `01` is the corresponding mobile menu's index.

Let's say you have chosen the `.header--01` component. It has a burger with the `data-menu-index="01"` attribute so you need to place the `.menu--01` in your project html file.

Some headers have burger shown in both mobile and desktop versions. The algorithm is the same: notice the `data-menu-index="01--desktop"` attribute, find the `.menu--01--desktop` component and add it in your project html file.

#### The Popup component

To bind a button or a link on opening a popup, add the `js-open-popup` class to it, add the `data-popup-target="video"` attribute and inject a block with these attributes: `<div data-popup-name="video" class="popup js-popup"></div>` in your markup.

Here is an example:

          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width">
              <link rel="stylesheet" href="css/main.css">
              <script src="js/main.min.js" defer></script>
            </head>
            <body>
                <main class="page_wrapper">

                  <!-- START OF THE VIDEO POPUP EXAMPLE CODE -->
                  <a href="" class="js-open-popup" data-popup-target="video">Watch our video tour!</a>

                  <div data-popup-name="video" class="popup popup--video js-popup">
                    <button title="close" class="popup__close_btn js-close-all-popups"></button>
                    <iframe src="https://www.youtube.com/embed/9ZfN87gSjvI" frameborder="0" allowfullscreen="" class="popup__video_frame"></iframe>
                  </div>
                  <!-- END OF THE VIDEO POPUP EXAMPLE CODE -->

                <main>
              <div class="js-overlay js-close-navigation js-close-menu overlay"></div>
            <body>
          <html>

#### Customizing a component

Once you have chosen and placed some components, you may want to customize them.

The main.css and the main.js files contain both all the dependencies inside it and the Phoenix code. To start customizing Phoenix CSS (JS), find the
== START OF PHOENIX CSS == (== START OF PHOENIX JS ==) comment line. All the code below is the Phoenix's code you can change if need.

Each component has a unique CSS class like `.cover--01`. You can find it in the `main.css` file and perform any customization you want.
Please notice, that background pictures are placed inside the makup for an easier backend access.

## Fonts

#### Adding a font

We have embedded fonts via Webfont loader. If you want to add a new font, follow these steps:

##### Choose a font from Google fonts and add its JavaScript string in the `main.js` file:

##### All you need to do is add the font name to your CSS styles:

      body {
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }

## Bootstrap

Bootstrap uses the most up-to-date Bootstrap version: v4.0.0-alpha.2. However, you can use Bootstrap 3 if you want: the code is fully backwards compatible.

## Advanced

The following chapter describes the source files structure for advanced users.

#### Files structure

      Phoenix_advanced/
      |--bower_components/    //-- The bower served dependencies
      |  |--bootstrap
      |  |--filterizr         //-- A plugin to enable portfolio works filtering
      |  |--jquery
      |  |--slick-carousel    //-- The slider plugin
      |  |--webfontloader     //-- A tool to load fonts asynchronously
      |
      |--src/
      |  |--css/              //-- All the Phoenix SCSS styles
      |  |--js/               //-- All the Phoenix JS logic
      |  |--templates/        //-- A Jade template for each component
      |  |--img/              //-- Raw images and icons
      |
      |--build/               //-- The folder will appear after a successful compilation
      |  |--css/              //-- Compiled and minified CSS with SVG icons base64-encoded
      |  |--js/               //-- Compiled and minified JS
      |  |--fonts/            //-- Some fonts are not hosted in Google Fonts, place them here
      |  |--img/              //-- Compressed images
      |  |--index.html        //-- Compiled collection of all the components
      |
      |--gulpfile.js          //-- The Gulp configuration file
      |--package.json         //-- Node.js dependencies to process compiling

## Gulp

First, install Gulp.

If you are new to Gulp, learn more about the project building tool: http://gulpjs.com/.

After installing the dependecies with:

      $ npm install

Run Gulp to build a project:

      $ gulp compile

Or make Gulp watch all your changes and build everything automatically:

      $ gulp dev:watch