Dattaya/10. Readme.md

## 10. Readme.md

      
    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


## 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>
	<!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>