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

but we should easily allow for the use of one not to mention that we are pushing for this in 3.2. Also as I have stated its an element and by that definition it gets its own selector simply adding icon-user to the a makes it a modifier which is invalid.

also as for the : all browsers still allow and accept this and you will be hard pressed to see anyone adapt to one extra character for no real gain. Its in in valid spec in my eyes also CSS is completely different than html

css spec is almost never adhered to as its always behind where html is not.
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: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.
No problem. See the button "New Topic" with class .btn-new.
Instead of specifying the font size in pixels, you can use rem units, but, unfortunately, does not support IE8 and some other browsers.
Sorry for my English.

User avatar
PayBas
Registered User
Posts: 305
Joined: Tue Jul 29, 2008 6:08 pm
Contact:

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

Post by PayBas »

callumacrae wrote:phpBB doesn't use an icon font library.
3.2, here we come :)

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: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.
No problem. See the button "New Topic" with class .btn-new.
Instead of specifying the font size in pixels, you can use rem units, but, unfortunately, does not support IE8 and some other browsers.
hmm, not sure thats going to fly

it still breaks modularity as I have stated the icon is an element level model and thus requires its own selector by proper design. Its not a modifier which is how you are using it.
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 »

Do not see the point of blockage markup. Icon is a design, and it should not be present in the markup. In addition any conceivable icons in any manner there is no problem, as I have shown in the example.
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 »

its less extensible and less controllable. lets say we decide not to use a font on a project but instead a sprite with my approach you can define exact dimensions to the icon whereas with yours it requires large files as you have to account for the size of the container. also how do you go about stacking icons in your approach http://fortawesome.github.io/Font-Awesome/examples/ ?

by working with pre-defined re-useable blocks of code in this manner we simplify the browser space as well as increase modularity in that its fully and truly an object based approach.
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 less extensible and less controllable.
Sorry, but I do not see nothing "expandable" and "uncontrollable".
hanakin wrote:but instead a sprite with my approach you can define exact dimensions to the icon whereas with yours it requires large files as you have to account for the size of the container.
I changed the example, increasing the size of icons on screens up to 480.
Make as much as I do, and compare spent bytes.
hanakin wrote:also how do you go about stacking icons in your approach http://fortawesome.github.io/Font-Awesome/examples/ ?
I honestly do not care what they show in some examples the use of some font.
If there is a tag used <marquee>, you will promote it?
hanakin wrote:by working with pre-defined re-useable blocks of code in this manner we simplify the browser space as well as increase modularity in that its fully and truly an object based approach.
My version of more pre-defined and re-useable. To create a button with gradient and border in style forum just add one class in one tag. At your version to copy the entire structure of the markup.
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:its less extensible and less controllable.
Sorry, but I do not see nothing "expandable" and "uncontrollable".
with your way you a specifying how the icon is used. with mine I can place the icon anywhere I want and the same css works you want it before the text in the button place it there in the html no css needs changed. <-- more controllable
Sumanai wrote:
hanakin wrote:but instead a sprite with my approach you can define exact dimensions to the icon whereas with yours it requires large files as you have to account for the size of the container.
I changed the example, increasing the size of icons on screens up to 480.
Make as much as I do, and compare spent bytes.
all icons should be in one sprite. so count the number of icons and the fact that they are different sizes and used in different ways in prosilver. you will end up with a very complicated extremely large file full of a lot of white space. With mine all the icons fit on a single row with no spacing in between.
Sumanai wrote:
hanakin wrote:also how do you go about stacking icons in your approach http://fortawesome.github.io/Font-Awesome/examples/ ?
I honestly do not care what they show in some examples the use of some font.
If there is a tag used <marquee>, you will promote it?
It shows usage an modularity the ability to stack icons, spin them with modifiers applied to the element. <-- stack two icons with your method?
Sumanai wrote:
hanakin wrote:by working with pre-defined re-useable blocks of code in this manner we simplify the browser space as well as increase modularity in that its fully and truly an object based approach.
My version of more pre-defined and re-useable. To create a button with gradient and border in style forum just add one class in one tag. At your version to copy the entire structure of the markup.
its not because you have to create a new style based on positon of icon based on the size of the container and the content with in <-- add your class to the search to add the icon what happens you have to make a new class. <-- less modular HTML & CSS
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:with your way you a specifying how the icon is used. with mine I can place the icon anywhere I want and the same css works you want it before the text in the button place it there in the html no css needs changed. <-- more controllable
You change the markup, I styles. Just different approaches. Only your approach requires additional markup, and my no.
And if you want to put all the icons before the text, you have to change the position of elements in many places.
hanakin wrote:all icons should be in one sprite.
Sprite? You have the same font icons. What do you mean?
hanakin wrote:It shows usage an modularity the ability to stack icons, spin them with modifiers applied to the element. <-- stack two icons with your method?
For what? Fictional situation.
However, I still have a pseudo element :after.
hanakin wrote:its not because you have to create a new style based on positon of icon based on the size of the container and the content with in <-- add your class to the search to add the icon what happens you have to make a new class. <-- less modular HTML & CSS
In my case, one class describes the button with gradient and border, the second adds an individual icon. Everything else is solved styles and media requests. What separate class?
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: You change the markup, I styles. Just different approaches. Only your approach requires additional markup, and my no.
And if you want to put all the icons before the text, you have to change the position of elements in many places.
exactly the concept of this entire post the html should be the first piece created using the block/component/element method based on the content. An icon is a piece of content that can be used in several ways and place throughout the html. Also by your method you are not building an object in css as you have to reinvent the wheel with each use case.
Sumanai wrote: Sprite? You have the same font icons. What do you mean?
you missed the point by declaring an icon element you are not restricting your self to an icon font having to be one way and a sprite based concept another. They both can utilize the same object.
Sumanai wrote: For what? Fictional situation.
However, I still have a pseudo element :after.
their is no such thing as a fictional situation when it comes to OOD its meant to be self contained and infinitely configurable. This actually comes in handy when working with complex icon concept like that of the forum imagesets
Donations welcome via Paypal Image

Post Reply