[Define New Theme] 12. In-Depth Design study on each block of content semantics + modularity

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
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.
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics

Post by hanakin »

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.
Donations welcome via Paypal Image

User avatar
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

Post by callumacrae »

The 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://www.w3.org/html/wg/drafts/html/m ... av-element
Previous/next buttons (or pagination)
http://html5doctor.com/nav-element/
Made by developers, for developers!
My blog

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics

Post by hanakin »

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
Donations welcome via Paypal Image

User avatar
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

Post by callumacrae »

How is the ul required?

Also, I have no idea what you said in the rest of your message
Made by developers, for developers!
My blog

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics

Post by hanakin »

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.
Donations welcome via Paypal Image

User avatar
Sumanai
Registered User
Posts: 95
Joined: Sat Aug 31, 2013 11:12 am

Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics

Post by Sumanai »

hanakin 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
Okay, I'm not against the .button group. But the ensuing

Code: 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.
Sorry for my English.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics

Post by brunoais »

callumacrae wrote:

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">
                <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>
I removed 9999 unnecessary elements and replaced a random list element that wasn't a list with a nav :-)

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>
There. Was this what you meant, @callumacrae ?
@hanakin , Why is pagination not navigation?
Last edited by brunoais on Fri Jun 06, 2014 8:25 am, edited 1 time in total.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics

Post by hanakin »

Sumanai wrote: Okay, I'm not against the .button group. But the ensuing

Code: Select all

<span class="text-element">Post Reply</span> <i class="icon icon-reply"></i>
3

Is not necessary. I do not see any problems with stylized with styles using :Before and :After.
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! ;)

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
Donations welcome via Paypal Image

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 12. In-Depth Design study on each block of content based on semantics

Post by hanakin »

brunoais wrote: @hanakin , Why is pagination not navigation?
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 nav

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>
Proper usage:

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>
Donations welcome via Paypal Image

User avatar
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

Post by callumacrae »

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.
How to tell if an ul element is required:

Is it a list?

Hint, this is a list:
  • one
  • two
  • three
Made by developers, for developers!
My blog

Post Reply