Skip to content

Instantly share code, notes, and snippets.

@Dattaya

Dattaya/10. Readme.md

Created February 15, 2012 11:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Dattaya/1835184 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Dattaya/1835184 to your computer and use it in GitHub Desktop.
Download ZIP
Symfony2.0.10, Simple HTML5Boilerplate integration
Raw
10. Readme.md

Readme

HTML5Boilerplate - http://html5boilerplate.com/ , https://github.com/h5bp/html5-boilerplate .

  • Copy 20. base.html.twig into app/Resources/views/base.html.twig.
  • Libraries can be placed in web/lib/libraryName. For example, my structure:
web
    lib
        h5bp
            after.css 
            style.css
        jquery
            jquery-....js
        jqueryui
            js
                jquery-ui-....custom.min.js
            css
                themeName         
                    ...
        modernizr
            modernizr-2.5.2.js

Or you can create bundle named like CommonLibraries and store them in it.

  • Links to libraries, shipped with HTML5Boilerplate:

  • http://www.modernizr.com/download/

  • http://jquery.com/

  • I guess the HTML5Boilerplate's style.css should be divided into two parts, 'cause within it there is an instruction: "Please define your styles before this section."

  • Adjust base.html.twig to your needs - replace "Main description" and "Main title", include libraries, etc.

If you want to dump asset files and to use them in the dev environment:

  • Change app/config/config_dev.yml file:
assetic:
    use_controller: false
    debug: false
  • In app/config/routing_dev.yml comment out:
#_assetic:
#    resource: .
#    type:     assetic
  • Run a command:
    php app/console assetic:dump
  • To automatically regenerate assets as they change:
    php app/console assetic:dump --watch
Raw
20. base.html.twig
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="{% block meta_description %}Main description{% endblock %}">
<meta name="viewport" content="width=device-width">
<title>{% block title %}Main title{% endblock %}</title>
{% block head %}{% endblock %}
{% block stylesheets %}
{% stylesheets
'lib/h5bp/style.css'
'lib/jqueryui/css/*/*.css'
'bundles/example/css/style.css'
filter=""
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
{% endblock %}
{# Part of https://github.com/h5bp/html5-boilerplate/blob/master/css/style.css file. As recommended in style.css: "Please define your styles before this section." #}
{% block end_stylesheets %}
{% stylesheets
'lib/h5bp/after.css'
filter=""
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
{% endblock %}
{% block top_javascripts %}
{% javascripts
'lib/modernizr/*.js'
filter=""
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
</head>
<body>
{% block body %}
<header>
{% block header %}{% endblock%}
</header>
<div role="main">
{% block main %}{% endblock %}
</div>
<footer>
{% block footer %}{% endblock %}
</footer>
{% endblock %}
{% block javascripts %}
{% javascripts
'lib/jquery/*.js'
'lib/jqueryui/js/*.js'
filter=""
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment