[Define New Theme] 2. Need to establish a grid system and adhere to it.

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.
Post Reply
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] 2. Need to establish a grid system and adhere to it.

Post by hanakin »

*Note This is part 2 of a series found here

This discussion is should not be whether we need a grid but how best to implement one and what the breakpoints should be etc...

If we implemented a preprocessor this task could be handled a lot easier

I would suggest a mixin system not unlike semantic.gs with 12 columns and no bleed. The breakpoints should be devisable by 12 to ensure easier design workflow as all the columns still breakout to even px with a fluid grid

1200 - wide
992 - desktop
768 - tablet
480 - mobile

Thoughts?
Last edited by hanakin on Wed May 07, 2014 3:53 pm, edited 1 time in total.
Donations welcome via Paypal Image

User avatar
Pony99CA
Registered User
Posts: 986
Joined: Sun Feb 08, 2009 2:35 am
Location: Hollister, CA
Contact:

Re: [Define New Theme] 2. Need to establish a grid system and adhere to it.

Post by Pony99CA »

hanakin wrote:*Note This is part 2 of a series found here

This discussion should not be whether we need a grid[....]
NOTE: Typos fixed in quote.

Actually, it should be about whether we need one. Otherwise that presupposes that we really do need a grid. That would be like me saying that I need you to give me money and then saying that we shouldn't discuss whether you need to do that but just discuss how much it should be.

How about describing what a "grid" is used for and why phpBB needs one (I think that I know, but I'd like a more expert explanation). For example, would styles be able to change the grid, or would they also have to "adhere to" the one that the default style chose?

Steve
Silicon Valley Pocket PC (http://www.svpocketpc.com)
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.

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] 2. Need to establish a grid system and adhere to it.

Post by hanakin »

If one is using the new theme as a base that is to say using inheritance then yes you should adhere to the same grid. Also the settings chosen are extremely widely used and account for almost all uses grids and adhere to the design related gestalt principles, etc... ie Rule of thirds, proportionality, spacing, etc...

From a design standpoint a grid is a tool plain and simple, that allows us to more efficiently determine spacing and layout within a theme. It allows us to align content throughout the different sections pages to establish better flow, appeal, help guide the users interactions.

From a coding standpoint. It simplifies the alignment of content in that their are predetermined division and sizes to work with. While it is not explicitly used, as with all design related tools, breaking the grid can sometimes offer better visual queues. It also allows for the controlling of content across different screen sizes in that by using the same construct across all the varying screens we can insure proper spacing of information and content.
Donations welcome via Paypal Image

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

Re: [Define New Theme] 2. Need to establish a grid system and adhere to it.

Post by brunoais »

hanakin wrote:From a design standpoint a grid is a tool plain and simple, that allows us to more efficiently determine spacing and layout within a theme. It allows us to align content throughout the different sections pages to establish better flow, appeal, help guide the users interactions.
Eh... What?
Are there any good resources to translate that into something more simple and logical?
hanakin wrote:From a coding standpoint. It simplifies the alignment of content in that their are predetermined division and sizes to work with. While it is not explicitly used, as with all design related tools, breaking the grid can sometimes offer better visual queues. It also allows for the controlling of content across different screen sizes in that by using the same construct across all the varying screens we can insure proper spacing of information and content.
What, more exactly, is a grid?

I view web pages as a series of rectangles that are placed relatively to each other. A rectangle can contain rectangles inside. CSS just tells how those rectangles relate to each other for display purposes.
So, I don't have the concept of a grid. For someone with that concept of a web page, how would you explain what a grid is?

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] 2. Need to establish a grid system and adhere to it.

Post by hanakin »

Let me explain it in bullet form.
  • Ensures content across multiple pages are using the same spacing and alignment. <- This is huge in design(design = 70% spacing, 20% alignment, 10% content) these are arbitrary numbers but you get the relation
  • Keeps consistent proportional spacing between rectangles across varying screen sizes. <- IE. three columns on a desktop with 30px in between would scale down to three columns on a tablet with 15px spacing proportionally based on the container sizes.
  • *Avoid Math* allows us to place those rectangles in relations that are better suited psychologically. Have you ever heard of any of the following concepts Rule of thirds, Golden Ratio, Gestalt, Fibernachi?
furthermore have a look at this article http://www.smashingmagazine.com/2007/04 ... -approach/
Donations welcome via Paypal Image

Senky
Extension Customisations
Extension Customisations
Posts: 315
Joined: Thu Jul 16, 2009 4:41 pm

Re: [Define New Theme] 2. Need to establish a grid system and adhere to it.

Post by Senky »

hanakin wrote:1200 - wide
992 - desktop
768 - tablet
480 - mobile
Another approach can be used here. It it called Logical Breakpoints, or Content-based breakpoints (ref. here). In fact, it adapts content according to screen needs, whatever size it is. I have used that on one project and it was interesting experience. Using that approach, you DON'T care about current devices screen sizes, because it can easily change in the future. So if there is a component, that you have styled for 480px wide screen and 768px wide screen, but it breaks when you look at it using 600px wide screen, you add a new breakpoint that fixes that. Formally, you should start with the smallest screen size and add breakpoints as soon as design allows it. If it is as soon as 550px - yes, add it.

Now, the problem with this approach is, that you are usually unable to create class helpers (xs-, s-, m-, l-, xl-) as known in Bootstrap, because there are much more of them. But design gracefully degrades as you downsize your screen.

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] 2. Need to establish a grid system and adhere to it.

Post by hanakin »

that approach is not scaleable with a project this massive and does not lend it self easily to digesting and understanding a theme. It will be mobile first.
Donations welcome via Paypal Image

Senky
Extension Customisations
Extension Customisations
Posts: 315
Joined: Thu Jul 16, 2009 4:41 pm

Re: [Define New Theme] 2. Need to establish a grid system and adhere to it.

Post by Senky »

You are right. I just proposed it, but still I am for using class based grid system.

Post Reply