[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:

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

Post by hanakin »

*Note This is part 12 of a series found here

Its related to:
10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.
14. Template files need re-broken out into major files and included files for better organization and cleaner codebase(Componentized).

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

The Proposal

The main problem with alot of the content on the web today is the methods we use or have used in the past to design the front-end of a webpage are flawed.

Typically on a professional project we start with a design then code the HTML to fit said design. Then apply or code the CSS to make the HTML reflect the design. This is a flawed model and leads to bloated and extrrmely unefficent and maintainable code.

This is precisely how prosilver was created way back when in 2007 timeframe.

What we really should be doing is instead defining our content via HTML first. Then Designing a them based on this content and applying the CSS to it to reflect the design. This way we end up with a semantic reusable block of HTML code that at its core is completely editable via CSS to fit any design based on its content.

To facilitate this we need to analyse prosilver and break it down into Blocks. Then further break those blocks down into components which are comprized of individual elements.

EXP: The Action Bar would then look something like this

Block: actionbar-block
Components: button-group, paging, input-group
Button Group Elements: text-element, button, button-dropdown, icon
Input Group Elements: input-item, input-button-group, button, button-dropdown, icon
Paging Elements: text-element, pagination, button, icon

Code: Select all

<section class="actionbar-block">
    <div class="pull-left">
        <div class="button-group">
            <a class="button" href="#" title="Post Replay"><span class="text-element">Post Reply</span> <i class="icon icon-reply"></i></a>
        </div>
        <div class="input-group">
            <input class="input-item type="text" placeholder="Search...">
            <span class="input-button-group">
                <button class="button" type="submit" value="GO">
                <a class="button button-dropdown" href="#" title="Search Settings"><span class="text-element">Search Settings</span> <i class="icon icon-gear"></i></a>
            </span>
        </div>
    </div>
    <div class="pull-right">
        <div class="paging">
            <span class="text-element">39 Posts: </span>
            <a class="button" href="#" title="First Unread"><span class="text-element">First Unread</span> <i class="icon icon-first-unread"></i></a>
            <a class="button" href="#" title="Jump To Page"><span class="text-element">Jump To Page</span> <i class="icon icon-page-jump"></i></a>
            <ul class="pagination">
                <li class="active><span class="text-element">1</span>
                <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>
    </div>
</section>
Thoughts and suggestions... keep in mind that this is a quick example of just one small and rather simple block not nessecarily exactly how it should end up. ;)
Last edited by hanakin on Sat Jun 07, 2014 1:26 pm, edited 1 time in total.
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 »

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 »

sort of bem was the first real focus on this but its not an exact science as bem states. their is somethings that it does not completely get right. Plus its way over complicated. Atomic design is a better description of this.
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 »

I've been using BEM really strictly (along with strict property order), and it's given me a very clean project which I can make big changes to and know exactly what it going to happen.

I basically do everything Harry Roberts says to. Amazing developer.
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 »

yeah i follow him as well but what im saying is that it can be overly verbose sometimes and the definitions are not as clean or clear to pick-up. Also the inter-relations of the roles is still a little buggy sometimes in certain projects as its defined strictly. Not even he follows it completely.

but yes its quite amazing at organization, scope, and modularity
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:

Code: Select all

        <div class="button-group">
            <a class="button" href="#" title="Post Replay"><span class="text-element">Post Reply</span> <i class="icon icon-reply"></i></a>
        </div>
IMHO, it's awful. Just get rid of the junk items, why go back?
Enough of something resembling

Code: Select all

<a class="button icon-reply" href="#" title="Post Replay">Post Reply</a>
Clean semantic code.
Sorry for my English.

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:
hanakin wrote:

Code: Select all

        <div class="button-group">
            <a class="button" href="#" title="Post Replay"><span class="text-element">Post Reply</span> <i class="icon icon-reply"></i></a>
        </div>
IMHO, it's awful. Just get rid of the junk items, why go back?
Enough of something resembling

Code: Select all

<a class="button icon-reply" href="#" title="Post Replay">Post Reply</a>
Clean semantic code.
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

411 divs do not break semantics as they have no weight in html5
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 »

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 :-)
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 »

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 :-)

icon elements are not unessecary, they are required and considered best practice as are the wrappiong .text spans around the text this gives better control over the content in regaurds to screen readers and responsiveness. they are extremely useful and semantic, by removing them you are omitiing the flexability of the element portion. also nav element is to important semantically in html 5 so it has to be a list
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:they are required
No they're not
hanakin wrote:and considered best practice
No they're not
hanakin wrote:as are the wrappiong .text spans around the text this gives better control over the content in regaurds to screen readers and responsiveness. they are extremely useful and semantic, by removing them you are omitiing the flexability of the element portion.
There is already an element there for that text, it doesn't need another one.
hanakin wrote:also nav element is to important semantically in html 5 so it has to be a list
How is pagination not navigation? :S
Made by developers, for developers!
My blog

Post Reply