Skip to main content ↑ ↓
Reducing HTML containers Started by TE · · Read 11071 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Reducing HTML containers

While toying with the templates I thought it may be time to remove a bunch of wrapper DIVS from the files.. This is just an example (Template is mail_queue):
It's currently structured:
Code: [Select]
function template_mail_queue()
{
	global $context, $txt;

	echo '
	<div id="manage_mail">
		<div id="mailqueue_stats">
			<div class="cat_bar">
				<h3 class="catbg">', $txt['mailqueue_stats'], '</h3>
			</div>
			<div class="windowbg">
				<div class="content">
					<dl class="settings">
						<dt><strong>', $txt['mailqueue_size'], '</strong></dt>
						<dd>', $context['mail_queue_size'], '</dd>
						<dt><strong>', $txt['mailqueue_oldest'], '</strong></dt>
						<dd>', $context['oldest_mail'], '</dd>
					</dl>
				</div>
			</div>
		</div>';

	template_show_list('mail_queue');

	echo '
	</div>';
}

 I'd rewrite it to use the following structure:
Code: [Select]
function template_mail_queue()
{
	global $context, $txt;

	echo '
	<div id="manage_mail">
		<h3 id="mailqueue_stats" class="admin_header">', $txt['mailqueue_stats'], '</h3>
		<div class="admin_content">
			<dl id="mailqueue_settings" class="settings">
				<dt>', $txt['mailqueue_size'], '</dt>
				<dd>', $context['mail_queue_size'], '</dd>
				<dt>', $txt['mailqueue_oldest'], '</dt>
				<dd>', $context['oldest_mail'], '</dd>
			</dl>
		</div>
';

	template_show_list('mail_queue');

	echo '
	</div>';
}

With HTML5 and CSS3 (border-radius, multiple background images and all the other nice little helpers) there's IMO no need for the additional containers. I think many of them are just remnants from the old Curve (rounded corners needed a wrapper DIV/SPAN)

Note: I renamed some CSS classes, simply because their current names ("cat_bar", ""windowbg" ) don't make any sense to me  ;)
Benefits:
- Faster rendering (less code in HTML and CSS)
- Better readability
- easier for themers

Before I get on this I'd appreciate some feedback, especially from the theming guys (and girls)?
Bloc, Antechinus?



Thorsten "TE" Eurich
------------------------

Re: Reducing HTML containers

Reply #1 –

I think some of the containers are there to help make all the admin pages consistent (i.e. have all the same structure) and make easier to style them...

 emanuele runs
Bugs creator.
Features destroyer.
Template killer.

Re: Reducing HTML containers

Reply #2 –

Quote from: emanuele – I think some of the containers are there to help make all the admin pages consistent (i.e. have all the same structure) and make easier to style them...

 emanuele runs
LOL, I know... No need to run away ;) I added many of them myself (TE converted >90% of the admin interface from Core with tables for layout to Curve). They were needed at some point (rounded corners without border-radius is a mess) but as said: I think they are dispensable, if we are going to use HTML5 and CSS3.
Thorsten "TE" Eurich
------------------------

Re: Reducing HTML containers

Reply #3 –

Could not agreed more - the necessity of having several of these is much less now, using HTML5/CSS3. Trouble with many of the templates are excatly that: they are old and and it is/was sometimes easier to just transfer rather than transform them. Which is totally understandable. :D

On the other hand, having some fivs to style up s always useful, but the fact is simply that these admin templates never get changed anyway, not even by CSS only, so it makes sense to simplify them, and and let them be easily changed by a few classes.

Much of the code in SMF 2(and 2.1) index.css are there to support positions and placement of the sometimes intricate layouts. We have the common classes useful for floating and clearing..but not construct say 2x3 table-like layout for example. IME its been useful to simply use a grid system(a very simple one, no need to go overboard) which makes building different layouts easier.

Re: Reducing HTML containers

Reply #4 –

A grid system would be awesome. I'd like to see whatever theme comes out based on a commonly used CSS framework as well.

A couple of issues I always have when I go to change something in a theme are: style classes have confusing names and are hard to find, too many containers (I can't find where a HTML block starts/stops), too many conditions making it harder to actually see the HTML. It is hard enough to see the HTML because we use PHP/echo. I either use Mustache (Handlebars to be exact) or start/stop PHP engine now. <?= $var => is so nice and easy but it doesn't look as good when doing blocks.

Re: Reducing HTML containers

Reply #5 –

Practice. :) Thats they only key to reading teampltes..or any PHP code for that matter lol.  But seriously, I haven't seen that, if you ask me to look at Wordpress templates..ugh, thats really confusing. SMF templates: not so much.

Grid systems..well, I am not too fond of using just any, its makes it impossible to use something in default theme, needs updating from the source, most likely introduce some extra features you don't need.. and so on. Which is why I have been using a simple 16part grid system that does nothing but float and set percentage widths. No paddings, no margins, just making sure it clears by a container. And it can be used within each other without problems, some grid systems set limits on things like that.

Re: Reducing HTML containers

Reply #6 –

When I have something like <input type="input" name="$name" id="$id" class="class" value="$value"> I don't use <?= $var ?> because that is a pain. Then I use echo. Also, short tags would be a requirement for any project that does that then. So I only do that where I control the environment. Also, if I have a template where I am going to be doing a lot of helper function calls, I might assign the result to a variable and do it in a block then. <a href="<? echo getRoute(array('action' => $context['action'], 'sa' => $context['sub_action'])); ?>"><?= $link ?>[/url] is a lot harder to read than $route = getRoute(array('action' => $context['action'], 'sa' => $context['sub_action'])); echo '<a href="', $route, '">', $link, '[/url]';

Just found a bug: it replaced the closing <a> tag with the url bbc tag?

Edit: keeping the above for bug reference but below is a different version:
When I have something like
Code: [Select]
<input type="input" name="$name" id="$id" class="class" value="$value">
I don't use
Code: [Select]
<?= $var ?>
because that is a pain. Then I use echo. Also, short tags would be a requirement for any project that does that then. So I only do that where I control the environment. Also, if I have a template where I am going to be doing a lot of helper function calls, I might assign the result to a variable and do it in a block then.
Code: [Select]
<a href="<? echo getRoute(array(
    'action' => $context['action'],
    'sa' => $context['sub_action'])); ?>"><?= $link ?></a>
is a lot harder to read than
Code: [Select]
$route = getRoute(array('action' => $context['action'], 'sa' => $context['sub_action']));
echo '<a href="', $route, '">', $link, '</a>';