[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 next feature release of phpBB 3 will be 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.1. If you need support for phpBB 3.1 please visit the 3.1.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
callumacrae
Infrastructure Team
Infrastructure Team
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 » Fri Jun 06, 2014 8:45 am

hanakin wrote: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! ;)

Could you give me a specific example of where an icon element is required? Like an actual real life example that I can prove you wrong on.
Made by developers, for developers!
My blog

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
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 » Fri Jun 06, 2014 8:50 am

Sumanai wrote:Is not necessary. I do not see any problems with stylized with styles using :Before and :After.
Fyi, it's ::after, not :after—single colon for psuedo classes (e.g. :nth-child, :hover), double colon for pseudo elements (e.g. ::before, ::first-letter).
Made by developers, for developers!
My blog

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 794
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 » Fri Jun 06, 2014 9:45 am

callumacrae wrote:
hanakin wrote: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! ;)

Could you give me a specific example of where an icon element is required? Like an actual real life example that I can prove you wrong on.



what do you mena by required the icon itself? or the <i class="icon icon-user"></i>

icons themself are not required just used to enhaced UI but if you are refering to the useage of the element then reference any library

font-awsome
glyphicon
entypo
icomoon.io

example if I have an primary navigation for an application like facebook that has the text labels for some icons on desktop when it scales down to 312px we loose the text shoqw me that without utilizing a wrapping span on the text while font-awsome and provide the level of control to manipulate the icon without affecting the text as we do on our buttons in prosilver where the font is red but the icon changes color.

User avatar
brunoais
Registered User
Posts: 958
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 » Fri Jun 06, 2014 10:43 am

@hanakin
Again with the invalid HTML? -_-
Anyway, Is post reply navigation? Is selecting filtering or resorting page content navigation?

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 » Fri Jun 06, 2014 10:47 am

hanakin wrote: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! ;)


I do not see the realization of this, nothing is impossible. Things still can be made through styles. Additional markings are not required.

hanakin wrote:yes which is why we only utilize them as component wrappers to prevent

div.forumbg
div.inner
div.foo
div.bar

concepts


I do not see how it relates. This solved the appointment class element.

callumacrae wrote:Fyi, it's ::after, not :after—single colon for psuedo classes (e.g. :nth-child, :hover), double colon for pseudo elements (e.g. ::before, ::first-letter).


Unfortunately, IE8 does not support the syntax with two colons.

hanakin wrote:example if I have an primary navigation for an application like facebook that has the text labels for some icons on desktop when it scales down to 312px we loose the text shoqw me that without utilizing a wrapping span on the text while font-awsome and provide the level of control to manipulate the icon without affecting the text as we do on our buttons in prosilver where the font is red but the icon changes color.



Is that the problem will be to set the font size. Or in pixels, or in rem, but it does not support IE8.
Last edited by Sumanai on Fri Jun 06, 2014 11:32 am, edited 1 time in total.
Sorry for my English.

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 794
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 » Fri Jun 06, 2014 10:55 am

@brunoais
what is invalid? , and I said that is where the nav would fit. My original post is still the valid code!

@sumani
sorry if i am not interpreting your post correctly as its quotes are messed up.

your question and callums are best suited at the countless libraies of font based icons as that is how they handle and it makes perfect snese and we need to adhere to it is a standard until they change. I doubt they can though as it follows proper componet/element pased design

as to the :: you are correct they are not required for anything other than browser specifcs so :before & :after are the proper usage

not sure what the last question is in reference to?

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
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 » Fri Jun 06, 2014 11:27 am

hanakin wrote:example if I have an primary navigation for an application like facebook that has the text labels for some icons on desktop when it scales down to 312px we loose the text shoqw me that without utilizing a wrapping span on the text while font-awsome and provide the level of control to manipulate the icon without affecting the text as we do on our buttons in prosilver where the font is red but the icon changes color.
I don't understand you, sorry :-/
Sumanai wrote:Unfortunately, IE8 does not support the syntax with two colons.
Nobody cares.
hanakin wrote:as to the :: you are correct they are not required for anything other than browser specifcs so :before & :after are the proper usage
No, :before is wrong. All modern browsers support the correct syntax, so it should be the one we use.
Made by developers, for developers!
My blog

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 » Fri Jun 06, 2014 11:40 am

hanakin wrote:sumani
sorry if i am not interpreting your post correctly as its quotes are messed up.
Fixed.
hanakin wrote:font based icons
IMHO, font based icons are a mistake.
But at the same time doing what you describe, perhaps using only one element in the markup.
callumacrae wrote:Nobody cares.
Actually phpBB 3.1 declares compatibility with IE8, so that with its features must be considered.
Sorry for my English.

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 794
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 » Fri Jun 06, 2014 11:49 am

callumacrae wrote:
Sumanai wrote:Unfortunately, IE8 does not support the syntax with two colons.
Nobody cares.
hanakin wrote:as to the :: you are correct they are not required for anything other than browser specifcs so :before & :after are the proper usage
No, :before is wrong. All modern browsers support the correct syntax, so it should be the one we use.
i meant in the confines of IE 8 all the modern browers accept both so by utilizing : you have full support.
callumacrae wrote:
hanakin wrote:example if I have an primary navigation for an application like facebook that has the text labels for some icons on desktop when it scales down to 312px we loose the text shoqw me that without utilizing a wrapping span on the text while font-awsome and provide the level of control to manipulate the icon without affecting the text as we do on our buttons in prosilver where the font is red but the icon changes color.
I don't understand you, sorry :-/
Try and recreate the current New Topic buttons of prosilver using font-awsome icons then hide the text below 480px. omit the gradients and shadows just focus on colors and size.

either way as I previously stated its a standard that we must adhere to for extension as its the most restrictive for the element and follows the proper use of componet/element based modular development. If you disagree take it up with countless icon font libraires.

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
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 » Fri Jun 06, 2014 1:05 pm

hanakin wrote:
callumacrae wrote:
Sumanai wrote:Unfortunately, IE8 does not support the syntax with two colons.
Nobody cares.
hanakin wrote:as to the :: you are correct they are not required for anything other than browser specifcs so :before & :after are the proper usage
No, :before is wrong. All modern browsers support the correct syntax, so it should be the one we use.
i meant in the confines of IE 8 all the modern browers accept both so by utilizing : you have full support.
True. But it's the same with semantic HTML5 elements; are you suggesting we drop them and go back to divs? Clearly not.

Why do you think the HTML should be correct, but not the CSS?
hanakin wrote:
callumacrae wrote:
hanakin wrote:example if I have an primary navigation for an application like facebook that has the text labels for some icons on desktop when it scales down to 312px we loose the text shoqw me that without utilizing a wrapping span on the text while font-awsome and provide the level of control to manipulate the icon without affecting the text as we do on our buttons in prosilver where the font is red but the icon changes color.
I don't understand you, sorry :-/
Try and recreate the current New Topic buttons of prosilver using font-awsome icons then hide the text below 480px. omit the gradients and shadows just focus on colors and size.

either way as I previously stated its a standard that we must adhere to for extension as its the most restrictive for the element and follows the proper use of componet/element based modular development. If you disagree take it up with countless icon font libraires.
phpBB doesn't use an icon font library.
Made by developers, for developers!
My blog

Post Reply