#14 responsive layout

inc/classes/BxDolTemplate.php

@@ -299,6 +299,9 @@ class BxDolTemplate extends BxDol implements iBxDolSingleton {
             'general.css',
             'icons.css',
             'colors.css',
+            'media-tablet.css',
+            'media-phone.css',
+            'media-print.css',
         ));
 
         //--- Load default JS ---//
@@ -1464,7 +1467,7 @@ class BxDolTemplate extends BxDol implements iBxDolSingleton {
             "'<bx_text_attribute:([^\s]+) \/>'se",
             "'<bx_menu:([^\s]+) \/>'se",
             "'<bx_url_root />'",
-            "'<bx_url_studio />'"
+            "'<bx_url_studio />'",
         ));
         $aValues = array_merge($aValues, array(
             "\$this->parseHtmlByName('\\1', \$aVariables, \$mixedKeyWrapperHtml, BX_DOL_TEMPLATE_CHECK_IN_BOTH)",
@@ -1478,7 +1481,7 @@ class BxDolTemplate extends BxDol implements iBxDolSingleton {
             "bx_html_attribute(_t('\\1'))",
             "\$this->getMenu('\\1')",
             BX_DOL_URL_ROOT,
-            BX_DOL_URL_STUDIO
+            BX_DOL_URL_STUDIO,
         ));
 
         //--- Parse Predefined Keys ---//

template/_header.html

@@ -2,6 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=__page_charset__" />
+    <meta name="viewport" content="width=device-width" />
     <title>__page_header__</title>
     <base href="<bx_url_root />" />
     __page_description__
@@ -10,6 +11,11 @@
     __page_icons__
 
     <meta http-equiv="Content-Style-Type" content="text/css" />
+    <style>
+        .bx-def-page-width {
+            width:__main_div_width__;
+        }
+    </style>
     <bx_include_css />
 
     __dol_images__

template/_sub_footer.html

@@ -15,7 +15,7 @@
 
 
 
-<div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right" style="width:__main_div_width__;">
+<div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right bx-def-page-width">
 
     <div id="bx-footer" class="bx-def-margin-bottom bx-def-padding-sec bx-def-border bx-def-color-bg-block bx-def-round-corners">
 
@@ -37,7 +37,7 @@
 
 
 
-<div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right" style="width:__main_div_width__;">
+<div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right bx-def-page-width">
     __boonex_footers__
 </div>
 

template/_sub_header.html

@@ -9,11 +9,11 @@
 
 <div id="bx-toolbar">
 
-    <div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right" style="width:__main_div_width__;">
+    <div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right bx-def-page-width">
 
         <div id="bx-toolbar-content">
 
-            <div id="bx-menu-toolbar-1-container" class="bx-def-padding-sec-top">
+            <div id="bx-menu-toolbar-1-container" class="bx-def-padding-sec-top bx-def-media-phone-hide">
                 <bx_menu:sys_toolbar_site />
             </div>
 
@@ -48,7 +48,7 @@
 
     <div id="bx-menu-main-bar">
 
-        <div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right" style="width:__main_div_width__;">
+        <div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right bx-def-page-width">
 
             <bx_injection:injection_top_menu_before />
 
@@ -70,7 +70,7 @@
 __informer__
 
 
-<div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right" style="width:__main_div_width__;">
+<div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right bx-def-page-width">
 
     <div id="bx-content-container">
 

template/css/default.css

@@ -310,13 +310,13 @@
 
 .bx-def-font {
     font-family: Helvetica Neue, Helvetica, Arial, Verdana, sans-serif;
-    font-size:14px;
+    font-size:0.875em;
     color:#333;
 }
 
 .bx-def-font-inputs {
     font-family: Helvetica Neue, Helvetica, Arial, Verdana, sans-serif;
-    font-size:14px;
+    font-size:0.875;
     color:#333;
 }
 
@@ -325,28 +325,28 @@
 }
 
 .bx-def-font-small {
-    font-size:12px;
+    font-size:0.75em;
 }
 
 .bx-def-font-large {
-    font-size:18px;
+    font-size:1.125em;
 }
 
 h1,
 .bx-def-font-h1 {
-    font-size:28px;
+    font-size:2em;
     font-weight:bold;
 }
 
 h2,
 .bx-def-font-h2 {
-    font-size:22px;
+    font-size:1.6em;
     font-weight:bold;
 }
 
 h3,
 .bx-def-font-h3 {
-    font-size:16px;
+    font-size:1.175em;
     font-weight:bold;
 }
 

template/css/media-phone.css

@@ -0,0 +1,18 @@
+@media (max-width:520px) {
+
+
+.bx-def-media-phone-hide {
+    display:none;
+}
+.bx-def-media-phone-show-block {
+    display:block;
+}
+
+/* default.css */ 
+
+.bx-def-page-width {
+    width:auto;
+}
+
+
+} /* @media end */

template/css/media-print.css

@@ -0,0 +1,18 @@
+@media print {
+
+
+.bx-def-media-print-hide {
+    display:none;
+}
+.bx-def-media-print-show-block {
+    display:block;
+}
+
+/* default.css */ 
+
+.bx-def-page-width {
+    width:auto;
+}
+
+
+} /* @media end */

template/css/media-tablet.css

@@ -0,0 +1,18 @@
+@media (min-width:520px) and (max-width:1024px) {
+
+
+.bx-def-media-tablet-hide {
+    display:none;
+}
+.bx-def-media-tablet-show-block {
+    display:block;
+}
+
+/* default.css */ 
+
+.bx-def-page-width {
+    width:auto;
+}
+
+
+} /* @media end */