ElkArte Community

Elk Development => Theme development => Theme development archive => Topic started by: TE on March 14, 2014, 03:18:07 am

Title: Board index markup
Post by: TE on March 14, 2014, 03:18:07 am
Serious discussions please (mainly  adresses @Antechinus )

While working on the boardindex I had an idea. Why do we use unordered lists? I think the Content fits well in a Definition list with 1 to n elements.. (one category with n boards, one child board title "sub-boards" with n childs..)

It's easy to style, it's working pretty well (even in ie8 it's responsive) and it looks still structured logical, just in case you disable the CSS completely.

Here's an example, didn't spend much time for borders, line-height and such things.. just a quick mockup:
Code: (test.html) [Select]
<doctyle !html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>Thorstens TEST</title>
<style type="text/css">
h2, h3 {
margin: 0;
padding: 0;
line-height: 2em;
}
p {
margin: 0;
padding: 0;
}
dl, dt, dd {
margin: 0;
padding: 0;
box-sizing: border-box;
border-collapse: collapse;
}
.category, .board {
display: table;
width: 100%;
border-collapse: collapse;
empty-cells: show;
}
.cat_name {
display: table-caption;
border-radius: 5px;
background: #eee;
font-weight: bold;
}
.boards {
display: table-row;
width: 100%;
}
.board:first-child {
border-top: 1px solid red;
margin: 1px;
}
.board {
border-bottom: 1px solid red;
margin: 1px;
}
.board.has_childs {
border-bottom: 1px solid #ccc;
margin: 1px;
}
.child_boards {
border-bottom: 1px solid red;
margin: 1px;
}
.title, .stats, .lastpost {
display: table-cell;
}

.title {
min-width: 50%;
}
.stats {
width: 12em;;
}
.lastpost {
width: 15em;
}
.child_boards {
display: block;
width: 100%;
margin-top: 5px;
position: relative;
}
.child_boards dt, .child_boards dd {
display: inline-block;
color: #999;
}
@media screen and (max-width: 50em) {
.stats {
display: none;
}
.board, .title, .lastpost {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<dl class="category">
<dt class="cat_name"><h2>First Category - this is an extra-long category title which should expand the table cells</h2></dt>
<dd class="boards">
<dl class="board has_childs">
<dt class="title">
<h3>My first Board</h3>
<p>my boards description</p>
</dt>
<dd class="stats">10 Topics / 233 Replies</dd>
<dd class="lastpost">Re: blablabla by Antechinus</dd>
</dl>
<dl class="child_boards">
<dt>Sub-Boards:</dt>
<dd>My Subboard1</dd>
<dd>Second Sub-Board</dd>
<dd>Second Sub-Board2</dd>
<dd>Second Sub-Board3</dd>
<dd>Second Sub-Board4</dd>
<dd>Second Sub-Board5</dd>
<dd>Second Sub-Board6</dd>
<dd>Second Sub-Board7</dd>
</dl>
<dl class="board">
<dt class="title"><h3>My Second parent</h3></dt>
<dd class="stats">10 Topics / 233 Replies</dd>
<dd class="lastpost">Re: blablablablablabla by Antechinus</dd>
</dl>
<dl class="board">
<dt class="title"><h3>My third parent</h3></dt>
<dd class="stats">10 Topics / 233 Replies</dd>
<dd class="lastpost">Re: bla by Antechinus</dd>
</dl>
<dl class="board">
<dt class="title"><h3>Yet another parent board</h3></dt>
<dd class="stats">10 Topics / 233 Replies</dd>
<dd class="lastpost">Re: bla by Antechinus</dd>
</dl>
<dl class="board">
<dt class="title"><h3>My redirect boards title</h3></dt>
<dd class="stats">150 Redirects</dd>
<dd class="lastpost"></dd>
</dl>
<dl class="board">
<dt class="title"><h3>Yet another parent board</h3></dt>
<dd class="stats">10 Topics / 233 Replies</dd>
<dd class="lastpost">Re: bla by Antechinus</dd>
</dl>
</dd>
</dl>
</body>
</html>
Serious oppinions please..
Note: Due to the lack of colspan / rowspan for Display: table-cell the child boards are not grouped inside it's parent ..
Class names are just samples
Title: Re: Board index markup
Post by: Antechinus on March 14, 2014, 04:06:51 pm
Serious opinion: yes you can use a dl if you like, but honestly nobody will ever care. It's the sort of semantic geewhizzery that code freaks will argue about until the cows come home, but people who just want to use the software will never notice or care about.

But, if you think it's important, there's nothing really wrong with it. However, I have noticed in the past the dl's seem to be trickier to style than ul's. Ul's generally seem to be more tractable, largely because you don't have to fight their default behaviour so much. My 2c.
Title: Re: Board index markup
Post by: IchBin on March 15, 2014, 08:12:31 pm
Agree with Antechinus here. I don't see any need to have a DL personally. They are both lists and fit the bill IMO. A DL fits something better like the register page where each item defines it's list item.  Boardindex for me doesn't really fall into that category for me.