We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 21838
    • 284 Posts
    Hi all,

    I’ve created a HTML5Boilerplate clone for MODX Revolution and now available for Evolution, too!
    You can find the package on GitHub: https://github.com/smooth-graphics/modx-boilerplate
    and the related blog post here: http://www.novolo.de/en/know-how/blog/2011/free-template-modx-boilerplate

    "MODX Boilerplate" is a HTML5/CSS3/jQuery based frontend template for further usage.

    https://github.com/smooth-graphics/modx-boilerplate
    https://github.com/smooth-graphics/modx-boilerplate-evo

    http://modx.novolo.de/
      MODX Free Template Base: MODX-Boilerplate | my blog (lots of MODX stuff) | my gitHub (translations) | MODX User Groups Germany (Facebook)
      • 34000
      • 77 Posts
      Any other HTML5 templates of interest... this one looks killer.
      Theme templates built on top of the boilerplate, would be something special.
      Possibly throwing in a CSS grid framework might be necessary to make that real user friendly.

      Thanks for the port on this.

      Did you look at Radu’s HTML5 starter pack offering:
      http://www.sickdesigner.com/resources/HTML5-starter-pack/index.html
      Looks like it has some goodness too.
        MODx Revo 2.1 and done!
        • 21838
        • 284 Posts
        Hi,

        thanks for your post.
        I’ve planned to implement CSSGrid into this for another release but it has to be optional in my mind.

        But what about your link? It looks like he’s given some layout functions (css) in addition to html5boilerplate. I didn’t see too much sense for it as
        it’s more than a basic site structure and more like a ready to use layout-template.
        If not, please specifiy what things I might implement…

        Thanks,
        smooth-graphics
          MODX Free Template Base: MODX-Boilerplate | my blog (lots of MODX stuff) | my gitHub (translations) | MODX User Groups Germany (Facebook)
          • 34000
          • 77 Posts
          I’m with you, still considering what things might be useful/necessary.
          I haven’t fully evaluated what your download includes and not includes.

          Part of what I liked about Radu’s start html5 template was the layout of the download page, that shows the possibilities.
          But that layout template is not available in the download there.
          I just think a good demo layout really helps show the end user, what all is available in the code.

          thanks again for making this available.
            MODx Revo 2.1 and done!
            • 21838
            • 284 Posts
            No problem at all. If you think there really should be some code you like, please file a bug at github or write it here.
            I’ll look into it and respond to.
              MODX Free Template Base: MODX-Boilerplate | my blog (lots of MODX stuff) | my gitHub (translations) | MODX User Groups Germany (Facebook)
              • 14822
              • 61 Posts
              Hi I’m noob with HTML5Boilerplate, any can help me with a question?

              I have two jquery libraries: jquery.corner.js and jquery.swfobject.min.js i put this files into /js/mylibs

              to call this files:

              <script>yepnope('[[++base_url]]assets/templates/agua_2011/js/mylibs/jquery.corner.js');</script>
              <script>yepnope('[[++base_url]]assets/templates/agua_2011/js/mylibs/jquery.swfobject.min.js');</script>


              But i don’t understand where put the call functions

              $(function() {
              	$("#menu").corner("top 20px");
                  $("div.formulario form").corner("10px");
                  $("div.formulario span.cenviado").corner("10px");
                  $('#carrusel').flash({swf:'[[++base_url]]assets/templates/agua_2011/[[!ifEval? &input=`[[*id]]==2` &contentTrue=`productos.swf` &contentFalse=`imagenes.swf` ]]  ',width:790,height:110});
                });


              I try put this into scripts.js but nothing happend.

              Well i try with this

              <script>yepnope([{
                load: '[[++base_url]]assets/templates/agua_2011/js/mylibs/jquery.corner.js',
                complete:function() {
                $("#menu").corner("top 20px");
                  $("div.formulario form").corner("10px");
                  $("div.formulario span.cenviado").corner("10px");
                }
              }]);
              </script>



              What is wrong??


                • 21838
                • 284 Posts
                Normally you should put both of your libraries (as they’re that small) into plugins.js and the call into script.js
                Do you have a working demo (link) of your site? It’s hard to say what’s going wrong with only this particular code.


                Well i try with this
                <script>yepnope([{
                  load: '[[++base_url]]assets/templates/agua_2011/js/mylibs/jquery.corner.js',
                  complete:function() {
                  $("#menu").corner("top 20px");
                    $("div.formulario form").corner("10px");
                    $("div.formulario span.cenviado").corner("10px");
                  }
                }]);
                </script>

                Does this work? If yes: Did you linked script.js correctly in your footer-chunk?
                  MODX Free Template Base: MODX-Boilerplate | my blog (lots of MODX stuff) | my gitHub (translations) | MODX User Groups Germany (Facebook)
                  • 14822
                  • 61 Posts
                  Hi, the library jquery.corner.js is 10.9k and jquery.swfobject.min.js 2.7k

                  I create a folder called "mylibs" into "js" folder

                  site_header chunk
                  <!doctype html>
                  <!--[if lt IE 7 ]> <html class="no-js ie6" lang="[[++cultureKey]]"> <![endif]-->
                  <!--[if IE 7 ]>    <html class="no-js ie7" lang="[[++cultureKey]]"> <![endif]-->
                  <!--[if IE 8 ]>    <html class="no-js ie8" lang="[[++cultureKey]]"> <![endif]-->
                  <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="[[++cultureKey]]"> <!--<![endif]-->
                  <head>
                    <base href="[[++site_url]]" />
                    <meta charset="[[++modx_charset:lcase]]" />
                    <title>[[++site_name]] - [[*pagetitle]]</title>
                    <meta name="description" content="[[*introtext:empty=`[[*content:strip_tags:strip]]`:limit=`200`]]">
                    <meta name="author" content="[[*publishedby:userinfo=`fullname`]]" />
                    <meta name="keywords" content="aguamarinas bisurteria, aguamarinas, bisuteria, aguamarinas joyas y accesorios, aguamarinas bisuteria joyas y accesorios, joyas, joyeria, accesorios, moda, neiva, huila, colombia, turmalina y durando joyeros, joyeros, turmalina y durando, durando, turmalina" />
                    
                    <link rel="shortcut icon" href="[[++site_url]]assets/templates/agua_2011/favicon.ico">
                    <link rel="apple-touch-icon" href="[[++site_url]]assets/templates/agua_2011/apple-touch-icon.png">
                  
                    <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0">
                  
                    <link rel="stylesheet" href="[[++site_url]]assets/templates/agua_2011/css/style.css">
                  
                    <link rel="stylesheet" href="[[++site_url]]assets/templates/agua_2011/css/smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
                    <link rel="stylesheet" href="[[++site_url]]assets/templates/agua_2011/css/ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">
                    <link rel="stylesheet" href="[[++site_url]]assets/templates/agua_2011/css/ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">
                    <link rel="stylesheet" href="[[++site_url]]assets/templates/agua_2011/css/iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">
                  
                    <script src="[[++site_url]]assets/templates/agua_2011/js/libs/modernizr.min.js"></script>
                  </head>
                  <body>


                  site_footer chunk
                  <script>
                  yepnope([{
                    load: '[[++base_url]]assets/templates/agua_2011/js/scripts.js'
                  }, {
                    load: '//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
                    complete: function () {
                      if (!window.jQuery) {
                        yepnope('[[++base_url]]assets/templates/agua_2011/js/libs/jquery-1.5.1.min.js');
                      }
                    }
                  }, {
                    load: '"[[++base_url]]assets/templates/agua_2011/js/plugins.js',
                    complete: function () {
                      jQuery(function () {
                        jQuery('div').plugin();
                      });
                    }
                  }]);
                  </script>
                  
                  <script>
                  yepnope([{
                    load: '[[++base_url]]assets/templates/agua_2011/js/mylibs/jquery.corner.js',
                    complete: function() {
                        $("#menu").corner("top 20px");
                        $("div.formulario form").corner("10px");
                        $("div.formulario span.cenviado").corner("10px");
                    }
                  },{
                    load: '[[++base_url]]assets/templates/agua_2011/js/mylibs/jquery.swfobject.min.js',  
                    complete: function() {  
                        $('#carrusel').flash({swf:'[[++base_url]]assets/templates/agua_2011/[[!ifEval? &input=`[[*id]]==2` &contentTrue=`productos.swf` &contentFalse=`imagenes.swf` ]]',width:790,height:110});
                    }
                  }]);
                  </script>
                  <!--[if lt IE 7 ]>
                    <script>yepnope('[[++base_url]]assets/templates/agua_2011/js/libs/dd_belatedpng.js');</script>
                    <script> DD_belatedPNG.fix('img, .png_bg'); </script>
                  <![endif]-->
                  </body>
                  </html>


                  site_content chunk
                  <header class="clearfix" >
                    <a href="http://www.facebook.com/group.php?gid=55952869961" target="_blank" title="Visitar grupo en Facebook" class="facebook">Facebook</a>
                    <a href="http://www.turmalinaydurando.com/" target="_blank" title="Visitar Turmalina & Durando Joyeros" class="durando">Turmalina & Durando Joyeros</a>
                  </header>
                  <div id="content">
                    <div id="menu" >[[Wayfinder? &startId=`0` &level=`1`]]</div>
                      <div id="carrusel"></div>
                      <div id="maincol" >
                          <div class="text">
                            [[!ifEval? &input=`[[*id]]==1 or [[*id]]==4` &contentFalse=`<h1>[[*pagetitle]]</h1>` ]]
                            [[!ifEval? &input=`[[*id]]==4` &contentTrue=`[[$seccion_contacto]]` &contentFalse=`[[*content]]` ]]          
                        </div>  
                      </div>
                      <div class="direccion">
                        <span>carrera 6 No. 16A - 33 local 101 barrio El Quirinal. Telf. 8746215 - Neiva (Huila), Colombia</span>
                      </div>
                      <div class="footer" >
                        <span>Derechos Reservados © 2010 Aguamarinas Bisutería | sitio web desarrollado por <a href="http://www.planetanaranja.com" target="_blank" title="visitar Planeta Naranja Estudio">Planeta Naranja Estudio</a> | hecho en <a href="http://www.modxcms.com" target="_blank" title="visitar modx CMS">modx</a></span>
                      </div>  
                  </div>  


                  The website is http://www.aguamarinasbisuteria.com/

                  Earlier it was using the version 1.0 without any problem but on having updated to the last version, I have had the problems that I have mentioned

                  tnx


                    • 21838
                    • 284 Posts
                    Okay, then it is a problem with yepnope.js - I’ll look into it tomorrow (sorry it’s to late for me today) and hope to give you a fix!
                      MODX Free Template Base: MODX-Boilerplate | my blog (lots of MODX stuff) | my gitHub (translations) | MODX User Groups Germany (Facebook)
                      • 21838
                      • 284 Posts
                      I’ve found out that your plugins.js file reports a 404 error because of that:
                      load: '"[[++base_url]]assets/templates/agua_2011/js/plugins.js',

                      should be:
                      load: '[[++base_url]]assets/templates/agua_2011/js/plugins.js',

                      same with piwik.js file.
                      And if you’re not using the @media-queries please remove the css links from your header-chunk! They all report a 404 which is not good for performance.

                      Actually your jquery plugins are loaded. Do the calls work, too? If not, you’ll likely have a yepnope.js syntax error in your code.
                        MODX Free Template Base: MODX-Boilerplate | my blog (lots of MODX stuff) | my gitHub (translations) | MODX User Groups Germany (Facebook)