Commits

Nate Arnold  committed ec22622

Added assemble for static site generation and refactored templates

  • Participants
  • Parent commits c54d555

Comments (0)

Files changed (23)

File Gruntfile.js

         }
       }
     },
+    assemble: {
+      options: {
+        assets: 'public/Assets',
+        partials: 'templates/partials/**/*.hbs',
+        layout: 'default.hbs',
+        layoutdir: 'templates/layouts',
+        flatten: true
+      },
+      site: {
+        files: {
+            'public/': ['templates/pages/*.hbs']
+        }
+      }
+    },
     validation: {
       options: {
         reset: grunt.option('reset') || true,
       },
       js: {
         files: 'js/*.js',
-        tasks: ['concat']
+        tasks: ['concat'],
+        options: {
+            livereload: true
+        }
       },
       html: {
-        files: 'public/*.html',
-        tasks: ['validation']
+        files: ['templates/**/*.hbs'],
+        tasks: ['assemble','validation'],
+        options: {
+            livereload: true
+        }
       },
       images: {
         files: 'img/*.{png,jpg,gif}',
-        tasks: ['imagemin']
+        tasks: ['imagemin'],
+        options: {
+            livereload: true
+        }
       }
     },
     connect: {
   grunt.loadNpmTasks('grunt-html-validation');
   grunt.loadNpmTasks('grunt-contrib-connect');
   grunt.loadNpmTasks('grunt-csscomb');
+  grunt.loadNpmTasks('assemble');
   grunt.registerTask('pro',['clean','less','autoprefixer','csscomb','concat','cssmin','uglify','imagemin']);
 };

File html/create-account.html

+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>MyQ Chamberlain</title>
+    <meta name="description" content="">
+
+    <!-- Google Font Import -->
+    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
+
+    <!-- Font Awesome Import -->
+    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+
+    <!-- Base Styles -->
+    <link href="Assets/styles/base.css" rel="stylesheet" media="screen">
+
+    <!-- Styles for Chamberlain Theme -->
+    <link href="Assets/styles/theme_chamberlain.css" rel="stylesheet" media="screen">
+
+</head>
+<body>
+
+    <header role="banner">
+        <div class="header mix-header_center">
+
+            <div class="header-crown">
+                <div class="container">
+                    <div class="languageSelect mix-languageSelect_center">
+                        <label class="languageSelect-label" for="ctl00$LocaleSelector1$ctl00">Language:</label>
+                        <select name="ctl00$LocaleSelector1$ctl00" class="languageSelect-select">
+                            <option value="de">Deutsch</option>
+                            <option value="en" selected>English</option>
+                            <option value="es">Español</option>
+                            <option value="fr">Français</option>
+                            <option value="nl">Nederlands</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container">
+                <div class="grid">
+                    <div class="grid-col grid-col_3of12">
+                        <img class="appLogo" src="Assets/images/logo-chamberlain@2x.png" alt="">
+                        <p class="isVisibleSmall">
+                            <strong>Control your garage door from your phone. Anytime. Anywhere.</strong>
+                        </p>
+                    </div>
+
+                    <div class="grid-col grid-col_9of12">
+                        <div class="pullNav" role="navigation">
+                            <ul class="stackList">
+                                <li>
+                                    <!-- <label class="label" for="username">Username</label> -->
+                                    <input class="input" type="text" name="username" placeholder="Username"/>
+                                    <div class="checkbox">
+                                        <input class="checkbox-checkbox" type="checkbox" name="rememberMe" id="rememberMe">
+                                        <label class="label" for="rememberMe">Remember Me</label>
+                                    </div>
+                                </li>
+                                <li>
+                                    <!-- <label class="label" for="password">Password</label> -->
+                                    <input class="input" type="password" name="password" placeholder="Password"/>
+                                    <a class="label" href="#">Forgot Password?</a>
+                                </li>
+                                <li>
+                                    <a class="btn btn_block" href="dashboard.html">Login</a>
+                                </li>
+                                <li>
+                                    <a class="btn btn_alt btn_block" href="#">Sign Up</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div><!-- END .grid -->
+            </div>
+
+        </div><!-- END .header -->
+    </header>
+
+
+    <!-- ############################## -->
+    <!--          PAGE CONTENT          -->
+    <!-- ############################## -->
+
+
+
+        <main role="main">
+            <div class="cardContainer">
+                <div class="container">
+
+<div class="card">
+
+<div class="grid-row grid-row-halfs create-account no-pad">
+    <div class="grid-col box-white">
+    <h2 class="headline">Create an Account</h2>
+    <h3>Don't have an account? Sign up.</h3>
+    <div class="form-row">
+    <div class="form-input">
+    <label>First Name<span class="requiredIdentifier">*</span></label>
+    <input type="text" id="new_first_name">
+    <span id="new_first_name_error" class="regError brandText">Please enter a first name</span>
+    </div>
+    </div>
+    <div class="form-row">
+    <div class="form-input ">
+    <label>Last Name<span class="requiredIdentifier">*</span></label>
+    <input type="text" id="new_last_name">
+    <span id="new_last_name_error" class="regError brandText">Please enter a last name</span>
+    </div>
+    </div>
+    <div class="form-row">
+    <div class="form-input">
+    <label>Account Email<span class="requiredIdentifier">*</span></label>
+    <input type="text" id="new_email">
+    <span id="new_email_error" class="regError brandText">Please enter a valid email address</span>
+    </div>
+    </div>
+    <div class="form-row">
+    <div class="form-input">
+    <label>Country<span class="requiredIdentifier">*</span></label>
+    <select name="ctl00$MainContent$new_country_code" id="new_country_code">
+    <option value="BRB">Barbados</option>
+    <option value="BEL">Belgium</option>
+    <option value="CAN">Canada</option>
+    <option value="COL">Colombia</option>
+    <option value="CRI">Costa Rica</option>
+    <option value="ECU">Ecuador</option>
+    <option value="SLV">El Salvador</option>
+    <option value="FIN">Finland</option>
+    <option value="FRA">France</option>
+    <option value="DEU">Germany</option>
+    <option value="GTM">Guatemala</option>
+    <option value="HND">Honduras</option>
+    <option value="ITA">Italy</option>
+    <option value="JAM">Jamaica</option>
+    <option value="MEX">Mexico</option>
+    <option value="NLD">Netherlands</option>
+    <option value="NIC">Nicaragua</option>
+    <option value="NOR">Norway</option>
+    <option value="001">Other Caribbean</option>
+    <option value="002">Other European</option>
+    <option value="003">Other Latin American</option>
+    <option value="PAN">Panama</option>
+    <option value="PER">Peru</option>
+    <option value="POL">Poland</option>
+    <option value="PRI">Puerto Rico</option>
+    <option value="ESP">Spain</option>
+    <option value="TTO">Trinidad and Tobago</option>
+    <option value="GBR">United Kingdom</option>
+    <option selected="selected" value="USA">United States</option>
+    </select>
+    </div>
+    </div>
+    <div class="form-row">
+    <div class="form-input"><label>Create Password<span class="requiredIdentifier">*</span></label>
+    <input type="password" id="new_password">
+    <span id="new_password_error" class="regError brandText">Must be 6 or more characters</span>
+    </div>
+    </div>
+    <div class="form-row">
+    <div class="form-input">
+    <label>Verify Password<span class="requiredIdentifier">*</span></label>
+    <input type="password" id="new_password_verify">
+    <span id="password_space_error" class="regError brandText">Please enter a password without space(s)</span>
+    <span id="verify_password_error" class="regError brandText">Both passwords must match</span>
+    </div>
+    </div>
+    <div id="contactInfoError" class="brandText requiredIdentifier">*Required fields</div>
+    <div class="form-row">
+    <div class="form-input">
+    <input type="checkbox" id="terms_check"><label class="label-checkbox">I agree to the <a target="_blank" href="https://www.mychamberlain.com/assets/docs/license-and-terms-of-use-chamberlain.html">License Agreement and Terms of Use</a></label>
+    <span id="terms_check_error" class="regError brandText">Please agree to the terms of service before continuing</span>
+    </div>
+    </div>
+    <div class="form-row">
+    <div class="form-input">
+    <a href="Javascript:createUser()" class="btn-action">Next</a>
+    <img src="/Assets/loader.gif" id="registerLoader">
+    <span id="newUserErrorMessage"></span>
+    </div>
+    </div>
+    </div>
+    <div class="grid-col box-border centered">
+    <a class="help-link" href="http://chamberlain.custhelp.com/">Need help getting set up?</a>
+    </div>
+</div>
+
+</div>
+
+                </div>
+            </div><!-- End .contentWrap -->
+
+            <div class="container">
+                <div class="grid">
+                    <div class="grid-col grid-col_6of12">
+                        <div class="box">
+                            <h2 class="hdg">Tips</h2>
+                            <p>
+                                Having trouble getting set up with your MyQ&trade; product? We have compiled a list of common issues and tips to get around them.
+                                <a href="#">View &gt;</a>
+                            </p>
+                        </div>
+                        <div class="box">
+                            <h2 class="hdg">Shop</h2>
+                            <p>
+                                Chamberlain&#174; offers a variety of accessories and other products that help make your life easier by simplifying and securing your garage and home.
+                                <a href="#">View &gt;</a>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="grid-col grid-col_6of12">
+                        <div class="box">
+                            <h2 class="hdg">Download App</h2>
+                            <p>
+                                Download the MyQ app from the Apple App Store or Google Play Store.
+                            </p>
+                            <a class="appIcon" href="#">
+                                <img class="appIcon-img" src="Assets/images/appIcon-img-apple@2x.png" alt="">
+                            </a>
+                            <a class="appIcon" href="#">
+                                <img class="appIcon-img" src="Assets/images/appIcon-img-google@2x.png" alt="">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div><!-- End .container -->
+        </main>
+
+
+    <!-- ############################## -->
+    <!--        END PAGE CONTENT        -->
+    <!-- ############################## -->
+
+
+    <footer role="contentinfo">
+        <div class="footer">
+            <div class="container">
+                <div class="grid">
+                    <div class="grid-col grid-col_4of12">
+                        <img class="appLogo appLogo_alt" src="Assets/images/logo-chamberlain_white@2x.png" alt="">
+                        <!-- <small class="contentInfo">&copy; 2014 The Chamberlain Group, Inc.</small> -->
+                    </div>
+                    <div class="grid-col grid-col_8of12">
+                        <div class="pullNav" role="navigation">
+                            <ul class="hList hList_spaced">
+                                <li><a class="link_alt" href="/">Home</a></li>
+                                <li><a class="link_alt" href="#">Openers</a></li>
+                                <li><a class="link_alt" href="#">Accessories</a></li>
+                                <li><a class="link_alt" href="#">Support</a></li>
+                                <li><a class="link_alt" href="#">Disclaimer</a></li>
+                                <li><a class="link_alt" href="#">Privacy</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+
+    <!-- Uncomment for development -->
+    <script src="Assets/scripts/scripts.js"></script>
+
+    <!-- Uncomment for production -->
+    <!-- <script src="Asstes/scripts/scripts.min.js"></script> -->
+
+</body>
+</html>

File html/dashboard-liftmaster.html

+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>MyQ Dashboard</title>
+    <meta name="description" content="">
+
+    <!-- Google Font Import -->
+    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
+
+    <!-- Font Awesome Import -->
+    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+
+    <!-- Base Styles -->
+    <link href="Assets/styles/base.css" rel="stylesheet" media="screen">
+
+    <!-- Styles for Chamberlain Theme -->
+    <link href="Assets/styles/theme_liftmaster.css" rel="stylesheet" media="screen">
+
+</head>
+<body>
+    <div class="menuContainer isVisibleSmall">
+        <ul class="mobileMenu">
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_places.png" alt="">
+                    Dashboard
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_account.png" alt="">
+                    Account
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_history.png" alt="">
+                    History
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_rules.png" alt="">
+                    Rules
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_help.png" alt="">
+                    Help
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_signout.png" alt="">
+                    Signout
+                </a>
+            </li>
+        </ul>
+    </div>
+
+
+    <div class="pageContainer">
+        <header role="banner">
+            <div class="header">
+
+                <div class="header-crown">
+                    <div class="container">
+                        <div class="languageSelect">
+                            <label class="languageSelect-label" for="ctl00$LocaleSelector1$ctl00">Language:</label>
+                            <select name="ctl00$LocaleSelector1$ctl00" class="languageSelect-select">
+                                <option value="de">Deutsch</option>
+                                <option value="en" selected>English</option>
+                                <option value="es">Español</option>
+                                <option value="fr">Français</option>
+                                <option value="nl">Nederlands</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="container isHiddenSmall">
+                    <div class="grid">
+                        <div class="grid-col grid-col_3of12">
+                            <img class="appLogo appLogo_high" src="Assets/images/logo-liftmaster@2x.png" alt="">
+                        </div>
+
+                        <div class="grid-col grid-col_9of12">
+                            <div class="pullNav" role="navigation">
+                                <ul class="stackList">
+                                    <li>
+                                        <a class="btn btn_icon" href="#"><i class="fa fa-user fa-2x"></i></a>
+                                    </li>
+                                    <li>
+                                        <a class="btn btn_icon" href="#"><i class="fa fa-question-circle fa-2x"></i></a>
+                                    </li>
+                                    <li>
+                                        <a class="btn btn_block" href="index.html">Logout</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div><!-- END .grid -->
+                </div><!-- END .isHiddenSmall -->
+
+                <div class="container isVisibleSmall">
+                    <div class="grid">
+                        <a class="btn btn_icon btn_left js-openMobileNav" href="#"><i class="fa fa-reorder fa-2x"></i></a>
+                        <img class="appLogo appLogo_right" src="Assets/images/logo-liftmaster@2x.png" alt="">
+                    </div><!-- END .grid -->
+                </div><!-- END .isVisibleSmall -->
+
+            </div><!-- END .header -->
+        </header>
+
+
+        <!-- ############################## -->
+        <!--          PAGE CONTENT          -->
+        <!-- ############################## -->
+
+        <main role="main">
+            <div class="cardContainer">
+                <div class="container">
+
+                </div>
+            </div><!-- End .contentWrap -->
+
+            <div class="container">
+                <div class="grid">
+                    <div class="grid-col grid-col_6of12">
+                        <div class="box">
+                            <h2 class="hdg">Tips</h2>
+                            <p>
+                                Having trouble getting set up with your MyQ&trade; product? We have compiled a list of common issues and tips to get around them.
+                                <a href="#">View &gt;</a>
+                            </p>
+                        </div>
+                        <div class="box">
+                            <h2 class="hdg">Shop</h2>
+                            <p>
+                                Chamberlain&#174; offers a variety of accessories and other products that help make your life easier by simplifying and securing your garage and home.
+                                <a href="#">View &gt;</a>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="grid-col grid-col_6of12">
+                        <div class="box">
+                            <h2 class="hdg">Download App</h2>
+                            <p>
+                                Download the MyQ app from the Apple App Store or Google Play Store.
+                            </p>
+                            <a class="appIcon" href="#">
+                                <img class="appIcon-img" src="Assets/images/appIcon-img-apple@2x.png" alt="">
+                            </a>
+                            <a class="appIcon" href="#">
+                                <img class="appIcon-img" src="Assets/images/appIcon-img-google@2x.png" alt="">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div><!-- End .container -->
+        </main>
+
+        <!-- ############################## -->
+        <!--        END PAGE CONTENT        -->
+        <!-- ############################## -->
+
+
+        <footer role="contentinfo">
+            <div class="footer">
+                <div class="container">
+                    <div class="grid">
+                        <div class="grid-col grid-col_4of12">
+                            <img class="appLogo appLogo_alt" src="Assets/images/logo-liftmaster_white@2x.png" alt="">
+                            <!-- <small class="contentInfo">&copy; 2014 The Chamberlain Group, Inc.</small> -->
+                        </div>
+                        <div class="grid-col grid-col_8of12">
+                            <div class="pullNav" role="navigation">
+                                <ul class="hList hList_spaced">
+                                    <li><a class="link_alt" href="#">Openers</a></li>
+                                    <li><a class="link_alt" href="#">Accessories</a></li>
+                                    <li><a class="link_alt" href="#">Support</a></li>
+                                    <li><a class="link_alt" href="#">Disclaimer</a></li>
+                                    <li><a class="link_alt" href="#">Privacy</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+    </div><!-- END .pageContainer -->
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+
+    <!-- Uncomment for development -->
+    <script src="Assets/scripts/scripts.js"></script>
+
+    <!-- Uncomment for production -->
+    <!-- <script src="Asstes/scripts/scripts.min.js"></script> -->
+
+</body>
+</html>

File html/dashboard.html

+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>MyQ Dashboard</title>
+    <meta name="description" content="">
+
+    <!-- Google Font Import -->
+    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
+
+    <!-- Font Awesome Import -->
+    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+
+    <!-- Base Styles -->
+    <link href="Assets/styles/base.css" rel="stylesheet" media="screen">
+
+    <!-- Styles for Chamberlain Theme -->
+    <link href="Assets/styles/theme_chamberlain.css" rel="stylesheet" media="screen">
+
+</head>
+<body>
+    <div class="menuContainer isVisibleSmall">
+        <ul class="mobileMenu">
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_places.png" alt="">
+                    Dashboard
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_account.png" alt="">
+                    Account
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_history.png" alt="">
+                    History
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_rules.png" alt="">
+                    Rules
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_help.png" alt="">
+                    Help
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_signout.png" alt="">
+                    Signout
+                </a>
+            </li>
+        </ul>
+    </div>
+
+
+    <div class="pageContainer">
+        <header role="banner">
+            <div class="header">
+
+                <div class="header-crown">
+                    <div class="container">
+                        <div class="languageSelect">
+                            <label class="languageSelect-label" for="ctl00$LocaleSelector1$ctl00">Language:</label>
+                            <select name="ctl00$LocaleSelector1$ctl00" class="languageSelect-select">
+                                <option value="de">Deutsch</option>
+                                <option value="en" selected>English</option>
+                                <option value="es">Español</option>
+                                <option value="fr">Français</option>
+                                <option value="nl">Nederlands</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="container isHiddenSmall">
+                    <div class="grid">
+                        <div class="grid-col grid-col_3of12">
+                            <img class="appLogo appLogo_high" src="Assets/images/logo-chamberlain@2x.png" alt="">
+                        </div>
+
+                        <div class="grid-col grid-col_9of12">
+                            <div class="pullNav" role="navigation">
+                                <ul class="stackList">
+                                    <li>
+                                        <a class="btn btn_icon" href="#"><i class="fa fa-user fa-2x"></i></a>
+                                    </li>
+                                    <li>
+                                        <a class="btn btn_icon" href="#"><i class="fa fa-question-circle fa-2x"></i></a>
+                                    </li>
+                                    <li>
+                                        <a class="btn btn_block" href="index.html">Logout</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div><!-- END .grid -->
+                </div><!-- END .isHiddenSmall -->
+
+                <div class="container isVisibleSmall">
+                    <div class="grid">
+                        <a class="btn btn_icon btn_left js-openMobileNav" href="#"><i class="fa fa-reorder fa-2x"></i></a>
+                        <img class="appLogo appLogo_right" src="Assets/images/logo-chamberlain@2x.png" alt="">
+                    </div><!-- END .grid -->
+                </div><!-- END .isVisibleSmall -->
+
+            </div><!-- END .header -->
+        </header>
+
+
+        <!-- ############################## -->
+        <!--          PAGE CONTENT          -->
+        <!-- ############################## -->
+
+        <main role="main">
+            <div class="cardContainer">
+                <div class="container">
+
+                </div>
+            </div><!-- End .contentWrap -->
+
+            <div class="container">
+                <div class="grid">
+                    <div class="grid-col grid-col_6of12">
+                        <div class="box">
+                            <h2 class="hdg">Tips</h2>
+                            <p>
+                                Having trouble getting set up with your MyQ&trade; product? We have compiled a list of common issues and tips to get around them.
+                                <a href="#">View &gt;</a>
+                            </p>
+                        </div>
+                        <div class="box">
+                            <h2 class="hdg">Shop</h2>
+                            <p>
+                                Chamberlain&#174; offers a variety of accessories and other products that help make your life easier by simplifying and securing your garage and home.
+                                <a href="#">View &gt;</a>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="grid-col grid-col_6of12">
+                        <div class="box">
+                            <h2 class="hdg">Download App</h2>
+                            <p>
+                                Download the MyQ app from the Apple App Store or Google Play Store.
+                            </p>
+                            <a class="appIcon" href="#">
+                                <img class="appIcon-img" src="Assets/images/appIcon-img-apple@2x.png" alt="">
+                            </a>
+                            <a class="appIcon" href="#">
+                                <img class="appIcon-img" src="Assets/images/appIcon-img-google@2x.png" alt="">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div><!-- End .container -->
+        </main>
+
+        <!-- ############################## -->
+        <!--        END PAGE CONTENT        -->
+        <!-- ############################## -->
+
+
+        <footer role="contentinfo">
+            <div class="footer">
+                <div class="container">
+                    <div class="grid">
+                        <div class="grid-col grid-col_4of12">
+                            <img class="appLogo appLogo_alt" src="Assets/images/logo-chamberlain_white@2x.png" alt="">
+                            <!-- <small class="contentInfo">&copy; 2014 The Chamberlain Group, Inc.</small> -->
+                        </div>
+                        <div class="grid-col grid-col_8of12">
+                            <div class="pullNav" role="navigation">
+                                <ul class="hList hList_spaced">
+                                    <li><a class="link_alt" href="#">Openers</a></li>
+                                    <li><a class="link_alt" href="#">Accessories</a></li>
+                                    <li><a class="link_alt" href="#">Support</a></li>
+                                    <li><a class="link_alt" href="#">Disclaimer</a></li>
+                                    <li><a class="link_alt" href="#">Privacy</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+    </div><!-- END .pageContainer -->
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+
+    <!-- Uncomment for development -->
+    <script src="Assets/scripts/scripts.js"></script>
+
+    <!-- Uncomment for production -->
+    <!-- <script src="Asstes/scripts/scripts.min.js"></script> -->
+
+</body>
+</html>

File html/index-liftmaster.html

+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>MyQ Liftmaster</title>
+    <meta name="description" content="">
+
+    <!-- Google Font Import -->
+    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
+
+    <!-- Font Awesome Import -->
+    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+
+    <!-- Base Styles -->
+    <link href="Assets/styles/base.css" rel="stylesheet" media="screen">
+
+    <!-- Styles for Liftmaster Theme -->
+    <link href="Assets/styles/theme_liftmaster.css" rel="stylesheet" media="screen">
+</head>
+<body>
+
+    <header role="banner">
+        <div class="header mix-header_center">
+
+            <div class="header-crown">
+                <div class="container">
+                    <div class="languageSelect mix-languageSelect_center">
+                        <label class="languageSelect-label" for="ctl00$LocaleSelector1$ctl00">Language:</label>
+                        <select name="ctl00$LocaleSelector1$ctl00" class="languageSelect-select">
+                            <option value="de">Deutsch</option>
+                            <option value="en" selected>English</option>
+                            <option value="es">Español</option>
+                            <option value="fr">Français</option>
+                            <option value="nl">Nederlands</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container">
+                <div class="grid">
+                    <div class="grid-col grid-col_3of12">
+                        <img class="appLogo" src="Assets/images/logo-liftmaster@2x.png" alt="">
+                        <p class="isVisibleSmall">
+                            <strong>Control your garage door from your phone. Anytime. Anywhere.</strong>
+                        </p>
+                    </div>
+
+                    <div class="grid-col grid-col_9of12">
+                        <div class="pullNav" role="navigation">
+                            <ul class="stackList">
+                                <li>
+                                    <!-- <label class="label" for="username">Username</label> -->
+                                    <input class="input" type="text" name="username" placeholder="Username"/>
+                                    <div class="checkbox">
+                                        <input class="checkbox-checkbox" type="checkbox" name="rememberMe" id="rememberMe">
+                                        <label class="label" for="rememberMe">Remember Me</label>
+                                    </div>
+                                </li>
+                                <li>
+                                    <!-- <label class="label" for="password">Password</label> -->
+                                    <input class="input" type="password" name="password" placeholder="Password"/>
+                                    <a class="label" href="#">Forgot Password?</a>
+                                </li>
+                                <li>
+                                    <a class="btn btn_block" href="dashboard.html">Login</a>
+                                </li>
+                                <li>
+                                    <a class="btn btn_alt btn_block" href="#">Sign Up</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div><!-- END .grid -->
+            </div>
+
+        </div><!-- END .header -->
+    </header>
+
+
+    <!-- ############################## -->
+    <!--          PAGE CONTENT          -->
+    <!-- ############################## -->
+
+    <main role="main">
+        <div class="hero">
+            <div class="hero-wrap">
+                <img class="hero-wrap-hand" src="Assets/images/hero-phone_liftmaster@2x.png" alt="">
+
+                <h1 class="hero-wrap-hd">
+                    <span>Control your garage door</span>
+                    <span>With your smart phone.</span>
+                    <span>Anytime. Anywhere.</span>
+                </h1>
+            </div>
+        </div><!-- END .hero -->
+
+        <div class="triangleSection">
+            <div class="container">
+                <div class="circles">
+                    <div>
+                        <div class="iconImage iconImage_wifi"></div>
+                        <h2 class="hdg mix-hdg_center">Step 1</h2>
+                        <p>Connect your gateway or MyQ device to your internet router.</p>
+                    </div><!-- END .circle -->
+                    <div>
+                        <div class="iconImage iconImage_user"></div>
+                        <h2 class="hdg mix-hdg_center">Step 2</h2>
+                        <p>Sign up and complete the registration with a valid email address.</p>
+                    </div><!-- END .circle -->
+                    <div>
+                        <div class="iconImage iconImage_login"></div>
+                        <h2 class="hdg mix-hdg_center">Step 3</h2>
+                        <p>Download the MyQ app or login above and enjoy your MyQ!</p>
+                    </div><!-- END .circle -->
+                </div>
+            </div>
+            <div class="triangleSection-triangle"></div>
+        </div>
+
+        <div class="container">
+            <div class="grid">
+                <div class="grid-col grid-col_6of12">
+                    <div class="box">
+                        <h2 class="hdg">Tips</h2>
+                        <p>
+                            Having trouble getting set up with your MyQ&trade; product? We have compiled a list of common issues and tips to get around them.
+                            <a href="#">View &gt;</a>
+                        </p>
+                    </div>
+                    <div class="box">
+                        <h2 class="hdg">Shop</h2>
+                        <p>
+                            Chamberlain&#174; offers a variety of accessories and other products that help make your life easier by simplifying and securing your garage and home.
+                            <a href="#">View &gt;</a>
+                        </p>
+                    </div>
+                </div>
+                <div class="grid-col grid-col_6of12">
+                    <div class="box">
+                        <h2 class="hdg">Download App</h2>
+                        <p>
+                            Download the MyQ app from the Apple App Store or Google Play Store.
+                        </p>
+                        <a class="appIcon" href="#">
+                            <img class="appIcon-img" src="Assets/images/appIcon-img-apple@2x.png" alt="">
+                        </a>
+                        <a class="appIcon" href="#">
+                            <img class="appIcon-img" src="Assets/images/appIcon-img-google@2x.png" alt="">
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- ############################## -->
+    <!--        END PAGE CONTENT        -->
+    <!-- ############################## -->
+
+
+    <footer role="contentinfo">
+        <div class="footer">
+            <div class="container">
+                <div class="grid">
+                    <div class="grid-col grid-col_4of12">
+                        <img class="appLogo appLogo_alt" src="Assets/images/logo-liftmaster_white@2x.png" alt="">
+                        <!-- <small class="contentInfo">&copy; 2014 The Chamberlain Group, Inc.</small> -->
+                    </div>
+                    <div class="grid-col grid-col_8of12">
+                        <div class="pullNav" role="navigation">
+                            <ul class="hList hList_spaced">
+                                <li><a class="link_alt" href="#">Openers</a></li>
+                                <li><a class="link_alt" href="#">Accessories</a></li>
+                                <li><a class="link_alt" href="#">Support</a></li>
+                                <li><a class="link_alt" href="#">Disclaimer</a></li>
+                                <li><a class="link_alt" href="#">Privacy</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+
+    <!-- Scripts -->
+    <script src="Assets/scripts/scripts.js"></script>
+
+</body>
+</html>

File html/index.html

+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>MyQ Chamberlain</title>
+    <meta name="description" content="">
+
+    <!-- Google Font Import -->
+    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
+
+    <!-- Font Awesome Import -->
+    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+
+    <!-- Base Styles -->
+    <link href="Assets/styles/base.css" rel="stylesheet" media="screen">
+
+    <!-- Styles for Chamberlain Theme -->
+    <link href="Assets/styles/theme_chamberlain.css" rel="stylesheet" media="screen">
+
+</head>
+<body>
+
+    <header role="banner">
+        <div class="header mix-header_center">
+
+            <div class="header-crown">
+                <div class="container">
+                    <div class="languageSelect mix-languageSelect_center">
+                        <label class="languageSelect-label" for="ctl00$LocaleSelector1$ctl00">Language:</label>
+                        <select name="ctl00$LocaleSelector1$ctl00" class="languageSelect-select">
+                            <option value="de">Deutsch</option>
+                            <option value="en" selected>English</option>
+                            <option value="es">Español</option>
+                            <option value="fr">Français</option>
+                            <option value="nl">Nederlands</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container">
+                <div class="grid">
+                    <div class="grid-col grid-col_3of12">
+                        <img class="appLogo" src="Assets/images/logo-chamberlain@2x.png" alt="">
+                        <p class="isVisibleSmall">
+                            <strong>Control your garage door from your phone. Anytime. Anywhere.</strong>
+                        </p>
+                    </div>
+
+                    <div class="grid-col grid-col_9of12">
+                        <div class="pullNav" role="navigation">
+                            <ul class="stackList">
+                                <li>
+                                    <!-- <label class="label" for="username">Username</label> -->
+                                    <input class="input" type="text" name="username" placeholder="Username"/>
+                                    <div class="checkbox">
+                                        <input class="checkbox-checkbox" type="checkbox" name="rememberMe" id="rememberMe">
+                                        <label class="label" for="rememberMe">Remember Me</label>
+                                    </div>
+                                </li>
+                                <li>
+                                    <!-- <label class="label" for="password">Password</label> -->
+                                    <input class="input" type="password" name="password" placeholder="Password"/>
+                                    <a class="label" href="#">Forgot Password?</a>
+                                </li>
+                                <li>
+                                    <a class="btn btn_block" href="dashboard.html">Login</a>
+                                </li>
+                                <li>
+                                    <a class="btn btn_alt btn_block" href="#">Sign Up</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div><!-- END .grid -->
+            </div>
+
+        </div><!-- END .header -->
+    </header>
+
+
+    <!-- ############################## -->
+    <!--          PAGE CONTENT          -->
+    <!-- ############################## -->
+
+    <main role="main">
+        <div class="hero">
+            <div class="hero-wrap">
+                <img class="hero-wrap-hand" src="Assets/images/hero-phone@2x.png" alt="">
+
+                <h1 class="hero-wrap-hd">
+                    <span>Control your garage door</span>
+                    <span>With your smart phone.</span>
+                    <span>Anytime. Anywhere.</span>
+                </h1>
+            </div>
+        </div><!-- END .hero -->
+
+        <div class="triangleSection">
+            <div class="container">
+                <div class="circles">
+                    <div>
+                        <div class="iconImage iconImage_wifi"></div>
+                        <h2 class="hdg mix-hdg_center">Step 1</h2>
+                        <p>Connect your gateway or MyQ device to your internet router.</p>
+                    </div><!-- END .circle -->
+                    <div>
+                        <div class="iconImage iconImage_user"></div>
+                        <h2 class="hdg mix-hdg_center">Step 2</h2>
+                        <p>Sign up and complete the registration with a valid email address.</p>
+                    </div><!-- END .circle -->
+                    <div>
+                        <div class="iconImage iconImage_login"></div>
+                        <h2 class="hdg mix-hdg_center">Step 3</h2>
+                        <p>Download the MyQ app or login above and enjoy your MyQ!</p>
+                    </div><!-- END .circle -->
+                </div>
+            </div>
+            <div class="triangleSection-triangle"></div>
+        </div>
+
+        <div class="container">
+            <div class="grid">
+                <div class="grid-col grid-col_6of12">
+                    <div class="box">
+                        <h2 class="hdg">Tips</h2>
+                        <p>
+                            Having trouble getting set up with your MyQ&trade; product? We have compiled a list of common issues and tips to get around them.
+                            <a href="#">View &gt;</a>
+                        </p>
+                    </div>
+                    <div class="box">
+                        <h2 class="hdg">Shop</h2>
+                        <p>
+                            Chamberlain&#174; offers a variety of accessories and other products that help make your life easier by simplifying and securing your garage and home.
+                            <a href="#">View &gt;</a>
+                        </p>
+                    </div>
+                </div>
+                <div class="grid-col grid-col_6of12">
+                    <div class="box">
+                        <h2 class="hdg">Download App</h2>
+                        <p>
+                            Download the MyQ app from the Apple App Store or Google Play Store.
+                        </p>
+                        <a class="appIcon" href="#">
+                            <img class="appIcon-img" src="Assets/images/appIcon-img-apple@2x.png" alt="">
+                        </a>
+                        <a class="appIcon" href="#">
+                            <img class="appIcon-img" src="Assets/images/appIcon-img-google@2x.png" alt="">
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- ############################## -->
+    <!--        END PAGE CONTENT        -->
+    <!-- ############################## -->
+
+
+    <footer role="contentinfo">
+        <div class="footer">
+            <div class="container">
+                <div class="grid">
+                    <div class="grid-col grid-col_4of12">
+                        <img class="appLogo appLogo_alt" src="Assets/images/logo-chamberlain_white@2x.png" alt="">
+                        <!-- <small class="contentInfo">&copy; 2014 The Chamberlain Group, Inc.</small> -->
+                    </div>
+                    <div class="grid-col grid-col_8of12">
+                        <div class="pullNav" role="navigation">
+                            <ul class="hList hList_spaced">
+                                <li><a class="link_alt" href="#">Openers</a></li>
+                                <li><a class="link_alt" href="#">Accessories</a></li>
+                                <li><a class="link_alt" href="#">Support</a></li>
+                                <li><a class="link_alt" href="#">Disclaimer</a></li>
+                                <li><a class="link_alt" href="#">Privacy</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+
+    <!-- Uncomment for development -->
+    <script src="Assets/scripts/scripts.js"></script>
+
+    <!-- Uncomment for production -->
+    <!-- <script src="Asstes/scripts/scripts.min.js"></script> -->
+
+</body>
+</html>

File img/hero-phone@2x.png

Removed
Old image

File img/hero-phone_chamberlain@2x.png

Added
New image

File package.json

   "author": "@arnonate",
   "license": "MIT",
   "devDependencies": {
+    "assemble": "^0.4.41",
     "grunt": "~0.4.1",
     "grunt-autoprefixer": "~0.3.0",
     "grunt-contrib-clean": "~0.5.0",

File public/Assets/images/hero-phone_chamberlain@2x.png

Added
New image

File public/dashboard-liftmaster.html

-<!DOCTYPE html>
-<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <title>MyQ Dashboard</title>
-    <meta name="description" content="">
-
-    <!-- Google Font Import -->
-    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
-
-    <!-- Font Awesome Import -->
-    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
-
-    <!-- Base Styles -->
-    <link href="Assets/styles/base.css" rel="stylesheet" media="screen">
-
-    <!-- Styles for Chamberlain Theme -->
-    <link href="Assets/styles/theme_liftmaster.css" rel="stylesheet" media="screen">
-
-</head>
-<body>
-    <div class="menuContainer isVisibleSmall">
-        <ul class="mobileMenu">
-            <li>
-                <a class="mobileLink" href="#">
-                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_places.png" alt="">
-                    Dashboard
-                </a>
-            </li>
-            <li>
-                <a class="mobileLink" href="#">
-                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_account.png" alt="">
-                    Account
-                </a>
-            </li>
-            <li>
-                <a class="mobileLink" href="#">
-                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_history.png" alt="">
-                    History
-                </a>
-            </li>
-            <li>
-                <a class="mobileLink" href="#">
-                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_rules.png" alt="">
-                    Rules
-                </a>
-            </li>
-            <li>
-                <a class="mobileLink" href="#">
-                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_help.png" alt="">
-                    Help
-                </a>
-            </li>
-            <li>
-                <a class="mobileLink" href="#">
-                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_signout.png" alt="">
-                    Signout
-                </a>
-            </li>
-        </ul>
-    </div>
-
-
-    <div class="pageContainer">
-        <header role="banner">
-            <div class="header">
-
-                <div class="header-crown">
-                    <div class="container">
-                        <div class="languageSelect">
-                            <label class="languageSelect-label" for="ctl00$LocaleSelector1$ctl00">Language:</label>
-                            <select name="ctl00$LocaleSelector1$ctl00" class="languageSelect-select">
-                                <option value="de">Deutsch</option>
-                                <option value="en" selected>English</option>
-                                <option value="es">Español</option>
-                                <option value="fr">Français</option>
-                                <option value="nl">Nederlands</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="container isHiddenSmall">
-                    <div class="grid">
-                        <div class="grid-col grid-col_3of12">
-                            <img class="appLogo appLogo_high" src="Assets/images/logo-liftmaster@2x.png" alt="">
-                        </div>
-
-                        <div class="grid-col grid-col_9of12">
-                            <div class="pullNav" role="navigation">
-                                <ul class="stackList">
-                                    <li>
-                                        <a class="btn btn_icon" href="#"><i class="fa fa-user fa-2x"></i></a>
-                                    </li>
-                                    <li>
-                                        <a class="btn btn_icon" href="#"><i class="fa fa-question-circle fa-2x"></i></a>
-                                    </li>
-                                    <li>
-                                        <a class="btn btn_block" href="index.html">Logout</a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div><!-- END .grid -->
-                </div><!-- END .isHiddenSmall -->
-
-                <div class="container isVisibleSmall">
-                    <div class="grid">
-                        <a class="btn btn_icon btn_left js-openMobileNav" href="#"><i class="fa fa-reorder fa-2x"></i></a>
-                        <img class="appLogo appLogo_right" src="Assets/images/logo-liftmaster@2x.png" alt="">
-                    </div><!-- END .grid -->
-                </div><!-- END .isVisibleSmall -->
-
-            </div><!-- END .header -->
-        </header>
-
-
-        <!-- ############################## -->
-        <!--          PAGE CONTENT          -->
-        <!-- ############################## -->
-
-        <main role="main">
-            <div class="cardContainer">
-                <div class="container">
-
-                </div>
-            </div><!-- End .contentWrap -->
-
-            <div class="container">
-                <div class="grid">
-                    <div class="grid-col grid-col_6of12">
-                        <div class="box">
-                            <h2 class="hdg">Tips</h2>
-                            <p>
-                                Having trouble getting set up with your MyQ&trade; product? We have compiled a list of common issues and tips to get around them.
-                                <a href="#">View &gt;</a>
-                            </p>
-                        </div>
-                        <div class="box">
-                            <h2 class="hdg">Shop</h2>
-                            <p>
-                                Chamberlain&#174; offers a variety of accessories and other products that help make your life easier by simplifying and securing your garage and home.
-                                <a href="#">View &gt;</a>
-                            </p>
-                        </div>
-                    </div>
-                    <div class="grid-col grid-col_6of12">
-                        <div class="box">
-                            <h2 class="hdg">Download App</h2>
-                            <p>
-                                Download the MyQ app from the Apple App Store or Google Play Store.
-                            </p>
-                            <a class="appIcon" href="#">
-                                <img class="appIcon-img" src="Assets/images/appIcon-img-apple@2x.png" alt="">
-                            </a>
-                            <a class="appIcon" href="#">
-                                <img class="appIcon-img" src="Assets/images/appIcon-img-google@2x.png" alt="">
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div><!-- End .container -->
-        </main>
-
-        <!-- ############################## -->
-        <!--        END PAGE CONTENT        -->
-        <!-- ############################## -->
-
-
-        <footer role="contentinfo">
-            <div class="footer">
-                <div class="container">
-                    <div class="grid">
-                        <div class="grid-col grid-col_4of12">
-                            <img class="appLogo appLogo_alt" src="Assets/images/logo-liftmaster_white@2x.png" alt="">
-                            <!-- <small class="contentInfo">&copy; 2014 The Chamberlain Group, Inc.</small> -->
-                        </div>
-                        <div class="grid-col grid-col_8of12">
-                            <div class="pullNav" role="navigation">
-                                <ul class="hList hList_spaced">
-                                    <li><a class="link_alt" href="#">Openers</a></li>
-                                    <li><a class="link_alt" href="#">Accessories</a></li>
-                                    <li><a class="link_alt" href="#">Support</a></li>
-                                    <li><a class="link_alt" href="#">Disclaimer</a></li>
-                                    <li><a class="link_alt" href="#">Privacy</a></li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </footer>
-
-    </div><!-- END .pageContainer -->
-
-    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-
-    <!-- Uncomment for development -->
-    <script src="Assets/scripts/scripts.js"></script>
-
-    <!-- Uncomment for production -->
-    <!-- <script src="Asstes/scripts/scripts.min.js"></script> -->
-
-</body>
-</html>

File public/dashboard-lm.html

+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Dashboard | MyQ Liftmaster</title>
+    <meta name="description" content="">
+
+    <!-- Google Font Import -->
+    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
+
+    <!-- Font Awesome Import -->
+    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+
+    <!-- Base Styles -->
+    <link href="Assets/styles/base.css" rel="stylesheet" media="screen">
+
+    <!-- Styles for Chamberlain Theme -->
+    <link href="Assets/styles/theme_liftmaster.css" rel="stylesheet" media="screen">
+
+</head>
+<body>
+
+    <div class="menuContainer isVisibleSmall">
+        <ul class="mobileMenu">
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_places.png" alt="">
+                    Dashboard
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_account.png" alt="">
+                    Account
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_history.png" alt="">
+                    History
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_rules.png" alt="">
+                    Rules
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_help.png" alt="">
+                    Help
+                </a>
+            </li>
+            <li>
+                <a class="mobileLink" href="#">
+                    <img class="mobileLink-icon" src="Assets/images/mobileLink-icon_signout.png" alt="">
+                    Signout
+                </a>
+            </li>
+        </ul>
+    </div>
+
+
+    <div class="pageContainer">
+        <header role="banner">
+            <div class="header">
+
+                <div class="header-crown">
+                    <div class="container">
+                        <div class="languageSelect">
+                            <label class="languageSelect-label" for="ctl00$LocaleSelector1$ctl00">Language:</label>
+                            <select name="ctl00$LocaleSelector1$ctl00" class="languageSelect-select">
+                                <option value="de">Deutsch</option>
+                                <option value="en" selected>English</option>
+                                <option value="es">Español</option>
+                                <option value="fr">Français</option>
+                                <option value="nl">Nederlands</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="container isHiddenSmall">
+                    <div class="grid">
+                        <div class="grid-col grid-col_3of12">
+                            <img class="appLogo appLogo_high" src="Assets/images/logo-liftmaster@2x.png" alt="">
+                        </div>
+
+                        <div class="grid-col grid-col_9of12">
+                            <div class="pullNav" role="navigation">
+                                <ul class="stackList">
+                                    <li>
+                                        <a class="btn btn_icon" href="#"><i class="fa fa-user fa-2x"></i></a>
+                                    </li>
+                                    <li>
+                                        <a class="btn btn_icon" href="#"><i class="fa fa-question-circle fa-2x"></i></a>
+                                    </li>
+                                    <li>
+                                        <a class="btn btn_block" href="index.html">Logout</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div><!-- END .grid -->
+                </div><!-- END .isHiddenSmall -->
+
+                <div class="container isVisibleSmall">
+                    <div class="grid">
+                        <a class="btn btn_icon btn_left js-openMobileNav" href="#"><i class="fa fa-reorder fa-2x"></i></a>
+                        <img class="appLogo appLogo_right" src="Assets/images/logo-liftmaster@2x.png" alt="">
+                    </div><!-- END .grid -->
+                </div><!-- END .isVisibleSmall -->
+
+            </div><!-- END .header -->
+        </header>
+
+
+
+
+        <!-- ############################## -->
+        <!--          PAGE CONTENT          -->
+        <!-- ############################## -->
+
+        <main role="main">
+
+            
+
+<div class="cardContainer">
+    <div class="container">
+
+    </div>
+</div><!-- End .cardContainer -->
+
+<div class="container">
+    <div class="grid">
+        <div class="grid-col grid-col_6of12">
+            <div class="box">
+                <h2 class="hdg">Tips</h2>
+                <p>
+                    Having trouble getting set up with your MyQ&trade; product? We have compiled a list of common issues and tips to get around them.
+                    <a href="#">View &gt;</a>
+                </p>
+            </div>
+            <div class="box">
+                <h2 class="hdg">Shop</h2>
+                <p>
+                    Chamberlain&#174; offers a variety of accessories and other products that help make your life easier by simplifying and securing your garage and home.
+                    <a href="#">View &gt;</a>
+                </p>
+            </div>
+        </div>
+        <div class="grid-col grid-col_6of12">
+            <div class="box">
+                <h2 class="hdg">Download App</h2>
+                <p>
+                    Download the MyQ app from the Apple App Store or Google Play Store.
+                </p>
+                <a class="appIcon" href="#">
+                    <img class="appIcon-img" src="Assets/images/appIcon-img-apple@2x.png" alt="">
+                </a>
+                <a class="appIcon" href="#">
+                    <img class="appIcon-img" src="Assets/images/appIcon-img-google@2x.png" alt="">
+                </a>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+
+
+        </main>
+
+        <!-- ############################## -->
+        <!--        END PAGE CONTENT        -->
+        <!-- ############################## -->
+
+
+
+
+        <footer role="contentinfo">
+            <div class="footer">
+                <div class="container">
+                    <div class="grid">
+                        <div class="grid-col grid-col_4of12">
+                            <img class="appLogo appLogo_alt" src="Assets/images/logo-liftmaster_white@2x.png" alt="">
+                            <!-- <small class="contentInfo">&copy; 2014 The Chamberlain Group, Inc.</small> -->
+                        </div>
+                        <div class="grid-col grid-col_8of12">
+                            <div class="pullNav" role="navigation">
+                                <ul class="hList hList_spaced">
+                                    <li><a class="link_alt" href="/">Home</a></li>
+                                    <li><a class="link_alt" href="#">Openers</a></li>
+                                    <li><a class="link_alt" href="#">Accessories</a></li>
+                                    <li><a class="link_alt" href="#">Support</a></li>
+                                    <li><a class="link_alt" href="#">Disclaimer</a></li>
+                                    <li><a class="link_alt" href="#">Privacy</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+    </div><!-- END .pageContainer -->
+    
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+
+    <!-- Uncomment for development -->
+    <script src="Assets/scripts/scripts.js"></script>
+
+    <!-- Uncomment for production -->
+    <!-- <script src="Asstes/scripts/scripts.min.js"></script> -->
+
+</body>
+</html>

File public/dashboard.html

     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>MyQ Dashboard</title>
+    <title>Dashboard | MyQ Chamberlain</title>
     <meta name="description" content="">
 
     <!-- Google Font Import -->
 
 </head>
 <body>
+
     <div class="menuContainer isVisibleSmall">
         <ul class="mobileMenu">
             <li>
         </header>
 
 
+
+
         <!-- ############################## -->
         <!--          PAGE CONTENT          -->
         <!-- ############################## -->
 
         <main role="main">
-            <div class="cardContainer">
-                <div class="container">
 
-                </div>
-            </div><!-- End .contentWrap -->
-
-            <div class="container">
-                <div class="grid">
-                    <div class="grid-col grid-col_6of12">
-                        <div class="box">
-                            <h2 class="hdg">Tips</h2>
-                            <p>
-                                Having trouble getting set up with your MyQ&trade; product? We have compiled a list of common issues and tips to get around them.
-                                <a href="#">View &gt;</a>
-                            </p>
-                        </div>
-                        <div class="box">
-                            <h2 class="hdg">Shop</h2>
-                            <p>
-                                Chamberlain&#174; offers a variety of accessories and other products that help make your life easier by simplifying and securing your garage and home.
-                                <a href="#">View &gt;</a>
-                            </p>
-                        </div>
-                    </div>
-                    <div class="grid-col grid-col_6of12">
-                        <div class="box">
-                            <h2 class="hdg">Download App</h2>
-                            <p>
-                                Download the MyQ app from the Apple App Store or Google Play Store.
-                            </p>
-                            <a class="appIcon" href="#">
-                                <img class="appIcon-img" src="Assets/images/appIcon-img-apple@2x.png" alt="">
-                            </a>
-                            <a class="appIcon" href="#">
-                                <img class="appIcon-img" src="Assets/images/appIcon-img-google@2x.png" alt="">
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div><!-- End .container -->
+            
+
+<div class="cardContainer">
+    <div class="container">
+
+    </div>
+</div><!-- End .cardContainer -->
+
+<div class="container">
+    <div class="grid">
+        <div class="grid-col grid-col_6of12">
+            <div class="box">
+                <h2 class="hdg">Tips</h2>
+                <p>
+                    Having trouble getting set up with your MyQ&trade; product? We have compiled a list of common issues and tips to get around them.
+                    <a href="#">View &gt;</a>
+                </p>
+            </div>
+            <div class="box">
+                <h2 class="hdg">Shop</h2>
+                <p>
+                    Chamberlain&#174; offers a variety of accessories and other products that help make your life easier by simplifying and securing your garage and home.
+                    <a href="#">View &gt;</a>
+                </p>
+            </div>
+        </div>
+        <div class="grid-col grid-col_6of12">
+            <div class="box">
+                <h2 class="hdg">Download App</h2>
+                <p>
+                    Download the MyQ app from the Apple App Store or Google Play Store.
+                </p>
+                <a class="appIcon" href="#">
+                    <img class="appIcon-img" src="Assets/images/appIcon-img-apple@2x.png" alt="">
+                </a>
+                <a class="appIcon" href="#">
+                    <img class="appIcon-img" src="Assets/images/appIcon-img-google@2x.png" alt="">
+                </a>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+
+
         </main>
 
         <!-- ############################## -->
         <!-- ############################## -->
 
 
+
+
         <footer role="contentinfo">
             <div class="footer">
                 <div class="container">
                         <div class="grid-col grid-col_8of12">
                             <div class="pullNav" role="navigation">
                                 <ul class="hList hList_spaced">
+                                    <li><a class="link_alt" href="/">Home</a></li>
                                     <li><a class="link_alt" href="#">Openers</a></li>
                                     <li><a class="link_alt" href="#">Accessories</a></li>
                                     <li><a class="link_alt" href="#">Support</a></li>
         </footer>
 
     </div><!-- END .pageContainer -->
-
+    
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 

File public/index-liftmaster.html

-<!DOCTYPE html>
-<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <title>MyQ Liftmaster</title>
-    <meta name="description" content="">
-
-    <!-- Google Font Import -->
-    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
-
-    <!-- Font Awesome Import -->
-    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
-
-    <!-- Base Styles -->
-    <link href="Assets/styles/base.css" rel="stylesheet" media="screen">
-
-    <!-- Styles for Liftmaster Theme -->
-    <link href="Assets/styles/theme_liftmaster.css" rel="stylesheet" media="screen">
-</head>
-<body>
-
-    <header role="banner">
-        <div class="header mix-header_center">
-
-            <div class="header-crown">
-                <div class="container">
-                    <div class="languageSelect mix-languageSelect_center">
-                        <label class="languageSelect-label" for="ctl00$LocaleSelector1$ctl00">Language:</label>
-                        <select name="ctl00$LocaleSelector1$ctl00" class="languageSelect-select">
-                            <option value="de">Deutsch</option>
-                            <option value="en" selected>English</option>
-                            <option value="es">Español</option>
-                            <option value="fr">Français</option>
-                            <option value="nl">Nederlands</option>
-                        </select>
-                    </div>
-                </div>
-            </div>
-
-            <div class="container">
-                <div class="grid">
-                    <div class="grid-col grid-col_3of12">
-                        <img class="appLogo" src="Assets/images/logo-liftmaster@2x.png" alt="">
-                        <p class="isVisibleSmall">
-                            <strong>Control your garage door from your phone. Anytime. Anywhere.</strong>
-                        </p>
-                    </div>
-
-                    <div class="grid-col grid-col_9of12">
-                        <div class="pullNav" role="navigation">
-                            <ul class="stackList">
-                                <li>
-                                    <!-- <label class="label" for="username">Username</label> -->
-                                    <input class="input" type="text" name="username" placeholder="Username"/>
-                                    <div class="checkbox">
-                                        <input class="checkbox-checkbox" type="checkbox" name="rememberMe" id="rememberMe">
-                                        <label class="label" for="rememberMe">Remember Me</label>
-                                    </div>
-                                </li>
-                                <li>
-                                    <!-- <label class="label" for="password">Password</label> -->
-                                    <input class="input" type="password" name="password" placeholder="Password"/>
-                                    <a class="label" href="#">Forgot Password?</a>
-                                </li>
-                                <li>
-                                    <a class="btn btn_block" href="dashboard.html">Login</a>
-                                </li>
-                                <li>
-                                    <a class="btn btn_alt btn_block" href="#">Sign Up</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div><!-- END .grid -->
-            </div>
-
-        </div><!-- END .header -->
-    </header>
-
-
-    <!-- ############################## -->
-    <!--          PAGE CONTENT          -->
-    <!-- ############################## -->
-
-    <main role="main">
-        <div class="hero">
-            <div class="hero-wrap">
-                <img class="hero-wrap-hand" src="Assets/images/hero-phone_liftmaster@2x.png" alt="">
-
-                <h1 class="hero-wrap-hd">
-                    <span>Control your garage door</span>
-                    <span>With your smart phone.</span>
-                    <span>Anytime. Anywhere.</span>
-                </h1>
-            </div>
-        </div><!-- END .hero -->
-
-        <div class="triangleSection">
-            <div class="container">
-                <div class="circles">
-                    <div>
-                        <div class="iconImage iconImage_wifi"></div>
-                        <h2 class="hdg mix-hdg_center">Step 1</h2>
-                        <p>Connect your gateway or MyQ device to your internet router.</p>
-                    </div><!-- END .circle -->
-                    <div>
-                        <div class="iconImage iconImage_user"></div>
-                        <h2 class="hdg mix-hdg_center">Step 2</h2>
-                        <p>Sign up and complete the registration with a valid email address.</p>
-                    </div><!-- END .circle -->
-                    <div>
-                        <div class="iconImage iconImage_login"></div>
-                        <h2 class="hdg mix-hdg_center">Step 3</h2>
-                        <p>Download the MyQ app or login above and enjoy your MyQ!</p>
-                    </div><!-- END .circle -->
-                </div>
-            </div>
-            <div class="triangleSection-triangle"></div>
-        </div>
-
-        <div class="container">
-            <div class="grid">
-                <div class="grid-col grid-col_6of12">
-                    <div class="box">
-                        <h2 class="hdg">Tips</h2>
-                        <p>
-                            Having trouble getting set up with your MyQ&trade; product? We have compiled a list of common issues and tips to get around them.
-                            <a href="#">View &gt;</a>
-                        </p>
-                    </div>
-                    <div class="box">
-                        <h2 class="hdg">Shop</h2>
-                        <p>
-                            Chamberlain&#174; offers a variety of accessories and other products that help make your life easier by simplifying and securing your garage and home.
-                            <a href="#">View &gt;</a>
-                        </p>
-                    </div>
-                </div>
-                <div class="grid-col grid-col_6of12">
-                    <div class="box">
-                        <h2 class="hdg">Download App</h2>
-                        <p>
-                            Download the MyQ app from the Apple App Store or Google Play Store.
-                        </p>
-                        <a class="appIcon" href="#">
-                            <img class="appIcon-img" src="Assets/images/appIcon-img-apple@2x.png" alt="">
-                        </a>
-                        <a class="appIcon" href="#">
-                            <img class="appIcon-img" src="Assets/images/appIcon-img-google@2x.png" alt="">
-                        </a>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </main>
-
-    <!-- ############################## -->
-    <!--        END PAGE CONTENT        -->
-    <!-- ############################## -->
-
-
-    <footer role="contentinfo">
-        <div class="footer">
-            <div class="container">
-                <div class="grid">
-                    <div class="grid-col grid-col_4of12">
-                        <img class="appLogo appLogo_alt" src="Assets/images/logo-liftmaster_white@2x.png" alt="">
-                        <!-- <small class="contentInfo">&copy; 2014 The Chamberlain Group, Inc.</small> -->
-                    </div>
-                    <div class="grid-col grid-col_8of12">
-                        <div class="pullNav" role="navigation">
-                            <ul class="hList hList_spaced">
-                                <li><a class="link_alt" href="#">Openers</a></li>
-                                <li><a class="link_alt" href="#">Accessories</a></li>
-                                <li><a class="link_alt" href="#">Support</a></li>
-                                <li><a class="link_alt" href="#">Disclaimer</a></li>
-                                <li><a class="link_alt" href="#">Privacy</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </footer>
-
-    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-
-    <!-- Scripts -->
-    <script src="Assets/scripts/scripts.js"></script>
-
-</body>
-</html>

File public/index-lm.html

+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">