[Define New Theme] 12. In-Depth Design study on each block of content semantics + modularity
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.
If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.
If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics
in an html 5 spec nav element have the same weight as section so the paging will dominate the rest of the content on the page reference this post https://area51.phpbb.com/phpBB/viewtopi ... 81&t=45677
as for the icons they absolutely are (reference any framework that handles icons) as we transition to font based icons inorder to objectify the icons they need their own element for modularity this way they do not have to rely on the container to define them. As for the span for the text since we have the icon element we need better seperation and control.
as for the icons they absolutely are (reference any framework that handles icons) as we transition to font based icons inorder to objectify the icons they need their own element for modularity this way they do not have to rely on the container to define them. As for the span for the text since we have the icon element we need better seperation and control.
- callumacrae
- Former Team Member
- Posts: 1046
- Joined: Tue Apr 27, 2010 9:37 am
- Location: England
- Contact:
Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics
http://www.w3.org/html/wg/drafts/html/m ... av-elementThe nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
http://html5doctor.com/nav-element/Previous/next buttons (or pagination)
Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics
yea as i said a ul is required it just suggests changing the container from a div to a nav block so instead of div.paging you would have nav.paging but its not required because the links to do point to different primary sections of the site just additional pages within the current section
- callumacrae
- Former Team Member
- Posts: 1046
- Joined: Tue Apr 27, 2010 9:37 am
- Location: England
- Contact:
Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics
How is the ul required?
Also, I have no idea what you said in the rest of your message
Also, I have no idea what you said in the rest of your message
Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics
Th ul is required as the nav is the primary container for the entire paging section. You are combining buttons, pagination, and text. These are all related to the paging component which is a navigation role.
However the nav has the same weight as section, header, footer semantically by the spec. While you can nest them you are giving more emphasis to the sub navigation by giving them dual importance and only to the right side.
The entire actionbar should not be weighted against the forums or topics as they are your primary content.
However the nav has the same weight as section, header, footer semantically by the spec. While you can nest them you are giving more emphasis to the sub navigation by giving them dual importance and only to the right side.
The entire actionbar should not be weighted against the forums or topics as they are your primary content.
Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics
Okay, I'm not against the .button group. But the ensuinghanakin wrote:its not going backwords and is completely semantic. the .button group is used as a wrapper for all the buttons so the post reply and the tools button I just did not do the post page mockup. But for consistency across pages it reamins but none of the css will rely on button group to render individual buttons
Code: Select all
<span class="text-element">Post Reply</span> <i class="icon icon-reply"></i>
But they have the weight transfer to the browser and litter DOM.hanakin wrote:411 divs do not break semantics as they have no weight in html5
Sorry for my English.
Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics
callumacrae wrote:I removed 9999 unnecessary elements and replaced a random list element that wasn't a list with a navCode: Select all
<section class="actionbar-block"> <div class="pull-left"> <div class="button-group"> <a class="icon-reply" href>Post Reply</a> </div> <div class="input-group"> <input type="search" placeholder="Search..."> <div class="input-button-group"> <button type="submit" value="GO"> <a class="button-dropdown icon-gear" href>Search Settings</a> </div> </div> </div> <div class="pull-right"> <span>39 Posts:</span> <a class="icon-unread" href>First Unread</a> <a class="icon-jump" href>Jump To Page</a> <nav class="pagination"> <a href class="active" title="Page 1">1</a> <a href title="Page 2">2</a> <a href title="Page 2">3</a> <a href title="Page 2">4</a> </nav> </div> </section>
Even, after fixing the HTML is still broken!
Code: Select all
<section class="actionbar-block">
<div class="pull-left">
<div class="button-group">
<a class="icon-reply" href="">Post Reply</a>
</div>
<div class="input-group">
<input type="search" placeholder="Search...">
<div class="input-button-group">
<button type="submit" value="GO">GO</button>
<a class="button-dropdown icon-gear" href>Search Settings</a>
</div>
</div>
</div>
<div class="pull-right">
<span>39 Posts:</span>
<a class="icon-unread" href>First Unread</a>
<a class="icon-jump" href>Jump To Page</a>
<nav class="pagination">
<a href class="active" title="Page 1">1</a>
<a href title="Page 2">2</a>
<a href title="Page 2">3</a>
<a href title="Page 2">4</a>
</nav>
</div>
</section>
@hanakin , Why is pagination not navigation?
Last edited by brunoais on Fri Jun 06, 2014 8:25 am, edited 1 time in total.
Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics
how do you control the text? with this approach you treat the icon as text which is problematic and not semantic. Lets ay I wish to have Login on a desktop application but on mobile I wish to just display the icon. With your approach you can not as it inherits you still require the wrapping span on the text. Now lets say we are going to use a font-icon they all use the i or span tag for a reason!Sumanai wrote: Okay, I'm not against the .button group. But the ensuing3Code: Select all
<span class="text-element">Post Reply</span> <i class="icon icon-reply"></i>
Is not necessary. I do not see any problems with stylized with styles using :Before and :After.
hanakin wrote:411 divs do not break semantics as they have no weight in html5
But they have the weight transfer to the browser and litter DOM.[/quote]
yes which is why we only utilize them as component wrappers to prevent
div.forumbg
div.inner
div.foo
div.bar
concepts
Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics
never said it is not a role=navigation just not a nav element. its miss used in the way callumacrae used it and its not nessecary in inside the section as it gives to much weight in the dom. We could swap section to navbrunoais wrote: @hanakin , Why is pagination not navigation?
callumacrae:
Code: Select all
<section class="actionbar-block">
<div class="pull-left">
<div class="button-group">
<a class="icon-reply" href="">Post Reply</a>
</div>
<div class="input-group">
<input type="search" placeholder="Search...">
<div class="input-button-group">
<button type="submit" value="GO">GO</button>
<a class="button-dropdown icon-gear" href>Search Settings</a>
</div>
</div>
</div>
<div class="pull-right">
<span>39 Posts:</span>
<a class="icon-unread" href>First Unread</a>
<a class="icon-jump" href>Jump To Page</a>
<nav class="pagination">
<a href class="active" title="Page 1">1</a>
<a href title="Page 2">2</a>
<a href title="Page 2">3</a>
<a href title="Page 2">4</a>
</nav>
</div>
</section>
Code: Select all
<nav class="actionbar-block" role="navigation">
<div class="pull-left">
<div class="button-group">
<a class="icon-reply" href="">Post Reply</a>
</div>
<div class="input-group">
<input type="search" placeholder="Search...">
<div class="input-button-group">
<button type="submit" value="GO">
<a class="button-dropdown icon-gear" href>Search Settings</a>
</div>
</div>
</div>
<div class="pull-right>
<span>39 Posts:</span>
<a class="icon-unread" href>First Unread</a>
<a class="icon-jump" href>Jump To Page</a>
<ul class="pagination">
<li class="active"><span class="text-element" title="Page 1">1</span></li>
<li><a href title="Page 2">2</a></li>
<li><a href title="Page 2">3</a></li>
<li><a href title="Page 2">4</a></li>
</ul>
</div>
</nav>
- callumacrae
- Former Team Member
- Posts: 1046
- Joined: Tue Apr 27, 2010 9:37 am
- Location: England
- Contact:
Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics
How to tell if an ul element is required:hanakin wrote:Th ul is required as the nav is the primary container for the entire paging section. You are combining buttons, pagination, and text. These are all related to the paging component which is a navigation role.
However the nav has the same weight as section, header, footer semantically by the spec. While you can nest them you are giving more emphasis to the sub navigation by giving them dual importance and only to the right side.
The entire actionbar should not be weighted against the forums or topics as they are your primary content.
Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
Is it a list?
Hint, this is a list:
- one
- two
- three