[Define New Theme] 16. Better consistency & standards across the theme need to be created and enforced.

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.2/Rhea followed by 3.3.
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
hanakin
Infrastructure Team
Infrastructure Team
Posts: 790
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

[Define New Theme] 16. Better consistency & standards across the theme need to be created and enforced.

Post by hanakin » Thu Jul 03, 2014 2:36 pm

*Note This is part 16 of a series found here

As the title says everything from the fonts, font sizes, colors in the theme needed to be clearly defined and enforced, as well as a set of consistent common practice coding standards for the CSS and HTML.

In order to facilitate this I have begun working on a StyleGuide for PHPBB. Simply put this is a living breathing html/css file containing references to all the design elements for a theme, replacing the current PSD found here https://www.phpbb.com/customise/db/styl ... ial_fonts/.

Repo: https://github.com/hanakin/PHPBB-StyleGuide
Demo: http://hanakin.github.io/PHPBB-StyleGuide/

While its still in an early form

This provides a fast easy reference guide to developing new extensions and themes as well as maintaining the default theme that ships.

Its coded in less to help in the transition to a more modern development workflow.

Still unclear what a Style Guide is ? Here are some examples and references
http://getbootstrap.com/css/
http://designmodo.github.io/Flat-UI/
https://developers.google.com/web/funda ... tyleguide/
https://github.com/styleguide/css
http://sfdc-styleguide.herokuapp.com/?id=style
http://gumbyframework.com/docs/ui-kit/#!/

Requirements:
1. Depict all the colors, fonts, font sizes as well as individual elements, components and blocks that make up the theme for reference
2. Responsive
3. Use modern tools to establish a framework & workflow tailored to PHPBB
4. HTML/CSS based rather than PSD to use as actual examples in the browser
5. Its own Github page to render it for quick reference.

Thoughts & Suggestions

User avatar
Mess
Registered User
Posts: 197
Joined: Wed Jun 13, 2012 10:14 am

Re: [Define New Theme] 16. Better consistency & standards across the theme need to be created and enforced.

Post by Mess » Thu Jul 03, 2014 5:26 pm

I hope you will get support for this idea. Having such a resources would be amazing for people like me.


User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 790
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 16. Better consistency & standards across the theme need to be created and enforced.

Post by hanakin » Sat Aug 02, 2014 9:10 am

Progress Update: http://hanakin.github.io/phpBB-StyleGuide/

been trying to update this as much as I can. finally got all the common stuff put in and added icons as well. Next up buttons, then all the other elements and components


User avatar
Miles Cellar
Registered User
Posts: 32
Joined: Thu Jul 07, 2005 7:45 am
Location: Paris, France
Contact:

Re: [Define New Theme] 16. Better consistency & standards across the theme need to be created and enforced.

Post by Miles Cellar » Sat Aug 02, 2014 11:29 am

Very good job!

However, why do not use fa-google-plus instead of fa-google-square concerning Google+ social icon? Also, I don't like the fa-recycle as deleted topic icon.
AUTHOR OF THE FRENCH AND AMERICAN ENGLISH LANGUAGE PACK FOR PHPBB
GET THE LATEST LANGUAGE PACK NEWS…

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 790
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 16. Better consistency & standards across the theme need to be created and enforced.

Post by hanakin » Sat Aug 02, 2014 12:08 pm

topic deleted is the exact same icon as it is not, and as for google+ without the square its too thin

ecwpa
Registered User
Posts: 181
Joined: Mon Jan 24, 2005 2:10 am
Contact:

Re: [Define New Theme] 16. Better consistency & standards across the theme need to be created and enforced.

Post by ecwpa » Sat Aug 02, 2014 11:42 pm

+1

This is great, with this in place you can say you could change the whole site design replacing a single css file.
Slightly better English than it was in 2005, still improving :D

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

Re: [Define New Theme] 16. Better consistency & standards across the theme need to be created and enforced.

Post by brunoais » Sun Aug 03, 2014 5:46 pm

It looks good but...
Could you please make the HTML easier to read (includes indenting) ? I'd like to read that also so that I can understand it better. And I'd rather not have it automatically indented (unless you approve that automatic indenters do it right) because it may not convey the intention you wanted.

User avatar
Louis7777
Registered User
Posts: 378
Joined: Fri Apr 04, 2014 12:32 am

Re: [Define New Theme] 16. Better consistency & standards across the theme need to be created and enforced.

Post by Louis7777 » Sun Aug 03, 2014 5:56 pm

brunoais wrote:It looks good but...
Could you please make the HTML easier to read (includes indenting) ? I'd like to read that also so that I can understand it better.
Yeah, big +1

Would it also be a good idea to add HTML comments? For example:

Code: Select all

<!-- OPEN JS SCRIPTS -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript src="./assets/javascript/jquery.min.js?assets_version=1730" type="text/javascript"%3E%3C/script%3E'));</script><script type="text/javascript" src="./assets/javascript/core.js?assets_version=1730"></script>


<script type="text/javascript" src="./styles/prosilver/template/forum_fn.js?assets_version=1730"></script>

<script type="text/javascript" src="./styles/prosilver/template/ajax.js?assets_version=1730"></script>
<!-- CLOSE JS SCRIPTS -->

Post Reply