I'm creating a theme that inherits from vanilla. The goal is to throw out as much of the optional stuff (both CSS and JS) as possible, so I have a clean slate to work with.
Now I'm facing two issues. First, there is a very large number of JavaScript and CSS files being included, plus there seems to be inline-CSS as well as script-Blocks in the templates as well. Second, I have no idea how everything is connected, and, more importantly, what CSS/JS is part of the core functionality (= required) and what is just for styling and other cosmetics (= optional).
Currently, this is what my config.xml (files section) looks like:
Code:
<files>
<css>
<remove>css/ajaxify.css</remove>
<remove>bootstrap.css</remove>
<remove>bootstrap.min.css</remove>
<remove>template-core.css</remove>
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox-rtl.css</remove>
<remove>noto.css</remove>
<add>css/base.css</add>
<add>css/theme.css</add>
<add>css/custom.css</add>
</css>
<js>
<remove>scripts/ajaxify.js</remove>
<remove>pjax.js</remove>
<add>scripts/theme.js</add>
<add>scripts/custom.js</add>
</js>
<print_css>
<add>css/print_theme.css</add>
</print_css>
</files>
To illustrate the issue with the most obvious problem I'm seeing right now, this is what is still included at the moment:
Code:
<link rel="stylesheet" type="text/css" href="/tmp/assets/e9aa920f/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/3597de59/survey.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/880f5221/yiistrap.min.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/4903fc13/css/theme.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/4903fc13/css/base.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/4903fc13/./css/survey-list.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/2863dd51/css/custom.css" />
<script type='text/javascript'>window.debugState = {frontend : (0 === 1), backend : (0 === 1)};</script>
<script type="text/javascript" src="/tmp/assets/3e59ce7d/jquery-3.1.1.min.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/3e59ce7d/jquery-migrate-3.0.0.min.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/4c6da2f8/build/lslog.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/dead48be/moment-with-locales.min.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/3597de59/survey.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/7ae1ff/template-core.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/880f5221/bootstrap.min.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/880f5221/plugins/bootstrapconfirm/bootstrapconfirm.min.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/4903fc13/scripts/theme.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/4903fc13/scripts/custom.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/ce27514e/nojs.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/b44c5003/em_javascript.js" class="headScriptTag"></script>
Which of those can I safely remove via config.xml? Which are essential?
Now, because I already removed a lot, everything looks very basic. That's okay. However, when I take a look at the survey list page, there is a huge amount of whitespace at the top. I was wondering why, then I saw this:
Code:
<body class="reb-2019 vanilla font-noto lang-de brand-logo" style="padding-top: 692px;">
This is not in the templates, so I assume it comes from some JavaScript. Why? How do I remove this?
Also, the comments in the code suggest that everything AJAX-related is optional. So It should be safe to throw out all AJAX-related code as long as I'm fine with longer loading times, right? However, what about the PJAX-System? Is that also optional? For example, see this block in the templates:
Code:
{# This used for the pjax system #}
<div id="beginScripts">
<###begin###>
</div>
I'm sure I will have many more questions like these, but they all come down to the fact that I'm looking at a huge amount of entangles CSS and JS and can't make heads or tails of it. I hope you can guide me through this jungle. It would be much appreciated. Thank you!
