*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?
[Define New Theme] 2. Need to establish a grid system and adhere to it.
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.
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.
[Define New Theme] 2. Need to establish a grid system and adhere to it.
Last edited by hanakin on Wed May 07, 2014 3:53 pm, edited 1 time in total.
- 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.
NOTE: Typos fixed in quote.hanakin wrote:*Note This is part 2 of a series found here
This discussion should not be whether we need a grid[....]
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.
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.
Re: [Define New Theme] 2. Need to establish a grid system and adhere to it.
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.
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.
Re: [Define New Theme] 2. Need to establish a grid system and adhere to it.
Eh... What?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.
Are there any good resources to translate that into something more simple and logical?
What, more exactly, is a grid?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.
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?
Re: [Define New Theme] 2. Need to establish a grid system and adhere to it.
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?
Re: [Define New Theme] 2. Need to establish a grid system and adhere to it.
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.hanakin wrote:1200 - wide
992 - desktop
768 - tablet
480 - mobile
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.
Re: [Define New Theme] 2. Need to establish a grid system and adhere to it.
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.
Re: [Define New Theme] 2. Need to establish a grid system and adhere to it.
You are right. I just proposed it, but still I am for using class based grid system.