Getting Started

Learn how to easily launch a project with Phoenix Startup UI Kit

Thanks for purchasing!

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.

contact us

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

Mailchimp Integration

Subscribe form

All the email collecting form components (such as call_to_action components) are completely integrated with Mailchimp. Forms are being validated and pass user data via AJAX out of the box.

To enable this functionality sign in here https://login.mailchimp.com

Then:

  1. go to "Lists"
  2. click on your list
  3. click "Signup forms"
  4. click "Embedded forms"
  5. opt in "Naked"
  6. copy the action="" attribute value and be sure it looks like this: action="http://xxxxx.us#.list-manage.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?"
  7. paste the value in a action="" in your Phoenix Startup project form
  8. find in the Mailchimp's code section a string like this one:
    <input type="text" name="b_c794049c1a6c0ccd061d10586_e521a9d387" tabindex="-1" value="">
  9. copy that strange name="" attribute and replace with it one in your Phoenix Startup project form

That is it!

Google Maps

How do I get a map?

Every Contacts component has a Google Map integrated. Please continue reading this section to find out how to easy activate and customize your Google Map.

Your API key

Google Maps require a special string (know as API key) to be injected in a page.

Simply follow these steps https://developers.google.com/maps/documentation/javascript/get-api-key and create an API key for your project.

After getting an API key, drop it in the Google Map's <script> tag. Just like this:

Please note, that Google Maps will not work at all unless you get your own API key from Google.

Zoom, center/pin coordinates

We got maps stored in a <div class="js-map"></div>. These 'map' divs are placed inside Contacts components. All of the divs have the following customisable attributes:


          data-zoom="14"                 // initial map zoom level
          data-center-lat="40.7306149"   // map center latitude
          data-center-lng="-73.9897637"  // map center longitude
          data-pin-lat="40.7306149"      // pin (marker) latitude
          data-pin-lng="-73.9897637"     // pin (marker) longitude
            

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
  |  |--lightbox2         //-- A plugin to zoom in the portfolio (works) images
  |
  |--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