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

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

Post by hanakin »

*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
Donations welcome via Paypal Image

User avatar
Mess
Registered User
Posts: 199
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 »

I hope you will get support for this idea. Having such a resources would be amazing for people like 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] 16. Better consistency & standards across the theme need to be created and enforced.

Post by hanakin »

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
Donations welcome via Paypal Image

User avatar
Meis2M
Registered User
Posts: 448
Joined: Fri Apr 23, 2010 10:18 am
Contact:

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

Post by Meis2M »

+++++++++++++++++++111111111111111111

very good now...

User avatar
Qiaeru
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 Qiaeru »

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.

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] 16. Better consistency & standards across the theme need to be created and enforced.

Post by hanakin »

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

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 »

+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: 964
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 »

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: 394
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 »

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