2. Why is a framework so usefull?

[hanakin]

This will be the first of many discussion points for developing & designing a new theme for phpBB.

This will probably be very in-depth and may require some thorough research if you are not a regular front-end developer/designer.

Before I get started here are some vocabulary terms you can reference to better understand everything. But I highly recommend that you watch this seminar from Harry Roberts on "ITCSS" as it pretty much covers everything you will need to know far better than I can explain.

VOCABULARY
Component: A self contained element that can be easily re-used, such as a breadcrumb menu, A single post, navigation menu
Object: There are really two types of objects.

1. Design Pattern: the best example of this would be a media object. This is basically any element that has some sort of image or icon floating off to either side. You see this everywhere in design and by defining it as an object you can easily re-use the code with modifiers. These can problematic for something like phpBB that has to account for user customization. That being said possibly the only real objects of this type should be reserved for layout, like a grid system.
2. Singleton This is my own term but is essentially a small vastly reused object such as a button or tag that is endlessly used everywhere even within components. Each of which sharing a lot of base code but maybe changing a color or a size across different components. Consider prosilver you have different buttons everywhere that all have similar code. By simply using a component modifier instead of redefining all of the code every time we save a lot of code. We are actually sort of already doing this with prosilver

Framework: This is a resource that provides two primary fundamental things. A way to organize and define how things should be coded and broken up along the lines of some sort of methodology ie "MVC". The second a library of useful functions, and code to pull from that provide convenience and reduce the overhead of your projects code development. Most people when they here this term in relation to the front-end will think of "Twitter Bootstrap". However This is only half correct. "Twitter Bootstrap" is better defined as a component library rather than a framework because they focus more on the second aspect than the first.

Now that you have an understanding of the basic vocabulary I am going to be using about lets digging.

THE DISCUSSION TOPIC
I am proposing the use of a framework specifically built with phpBB in mind that follows the ITCSS concepts talked about by Harry Roberts in the seminar linked above.

The framework is broken up even further and looks something like this

• Core
  • Generic
  • Base
  • Objects (Global)
• Theme
  • Objects (Theme Specific)
  • Components
  • Theme Layer
• Utilities
  • Utilities
  • Tweaks

This way you essentially have all the content within every theme that never changes ie resets, base styles, globally used objects contained in a layer called Core that will never be changed.

You have a Utilities layer that as well should not to ever be altered outside of official updates like the core layer

This provides far better control when talking about inheritance and almost completely eliminates the need for it as All you really need to do is swap out Theme layers

This provides far better control over specificity which, currently prosilver's is one of the worst I have ever seen. Here are graphs of prosilver's specificity
3.0, 3.1, 3.2

What is specificity?
http://csswizardry.com/2014/10/the-specificity-graph/

This also allows for better scale-ability and maintainability for the theme over time. While providing a better well defined organization to our code.

I have started working on a framework and you can find the code located here:
https://github.com/hanakin/base-l

Its still a work in progress I need to still test some things and provide some documentation.

But this coupled with some other keys changes to several aspects will not only improve the code base and make things easier on the development team, but also should provide for a better methodology for customization as well.

Please feel free to provide any constructive feedback on this, especially if you are well versed in HTML & CSS

Thoughts...Suggestions...Ideas?

[david63]

I appreciate that this may not be either the time or place to raise this but assuming that this goes ahead at some time in a future version of phpBB but what, if any, consideration will be given to backwards compatibility - especially in relation to extensions.

[hanakin]

thats really another topic. But its also a hard one as its not really going to have any backwards capability, other than the fact that there extensions in that we will add the hooks back in... There will also be a transition period meaning prosilver will be supported for a year or two after this is released.

[Meis2M]

i think twitter bootstrap is good for phpbb.

[hanakin]

bootstrap is horribly organized, and extremely bloated. Not to mention that it relies too much on multi-selectors in the HTML which is sometimes problematic with customization as you really only want to edit the css but bootstrap forces you to have to edit the html.

My proposal will have far less code to maintain with a more thoughtful organization to it, plus we can control the core without relying on bootstrap upgrades.

Also as I stated bootstrap is not a framework...Its just a bunch of components which we can still leverage and use on top of our core as they play nice together...

[jameswarner]

I not agree with you because bootstrap is the web framework. This framework to allow you to rapid your web apps without having any trouble of design issue especially developing stage in your projects.

[Louis7777]

I not agree with you because bootstrap is the web framework. This framework to allow you to rapid your web apps without having any trouble of design issue especially developing stage in your projects.

I personally hate having bloat and unused CSS selectors.

[hanakin]

I not agree with you because bootstrap is the web framework. This framework to allow you to rapid your web apps without having any trouble of design issue especially developing stage in your projects.

Can not really understand fully what you argument is?

However without understanding the concepts put forward by ITCSS its going to be hard for anyone to grasp most of this, but essentially

1. bootstrap is a library of components that are all included into a single render file in no particular order with no thought to the order or at least none until v4 which has minimal thought to it. By this fact alone it is not a framework as that is the definition of a framework instead it is just a library or repository of components that are mass included for no reason.
2. There are several aspects that we need to consider with our approach in development.
   1. We need to consider inheritance in the scope of customization. This is something bootstrap can not do. Currently we handle this through a very verbose template inheritance process. This is cool when you are talking about html but it falls apart when you couple the html/css together into components. As css already has inheritance by nature. You are essentially compounding the inheritance which makes for very buggy and problematic code. Instead we need to re-approach how our css is order. And more intelligently break it up into what will change/what can change/and what will not change. By doing this we give our selves a nice layering effect that is much easy to maintain and ultimately customize.
   2. We need to consider how the inheritance can work for theming in css without relying on template inheritance as the only thing driving it. This is easily accomplished via separating the theming into its own theme classes. This way our objects/components have massive penetration when it comes to inheritance without defects as the core layout is separated from the theme.

I realize this is very high level I am working on putting together an example of it in action for everyone to play with but my time is extremely limited until the holidays are over.

[hanakin]

update to the progress with the framework.

Its pretty much in a stable place... anyone who wants to start using it playing with it can.

I have started to put together some example components along side a simple testing ground. all of which can be found https://github.com/hanakin/base-l/tree/components

the examples can be found in the dist/views directory

The forum component is pretty much done baring some minor tweaks to component naming or cat seperation. you can see it in action here: http://codepen.io/hanakin/pen/jybzBY?editors=1000

a little explanation of how things work with the components and how they will be implemented and function.

if you examine the html code for a single forum

Code: Select all

    <div class="c-card t-card">
    	<div class="c-card-body t-block">
    		<div class="c-card-media t-card-media">
    			<svg class="o-icon c-card-media-icon t-card-media-icon c-card-media-icon-read t-card-media-icon-read"><use xlink:href="#forum"></use></svg>
    		</div>
    		<div class="c-card-info t-card-info">
    			<h4 class="c-card-title t-card-title">
    				<a class="c-card-title-link t-card-title-link" href="#">Chit Chat</a>
    			</h4>	
    		</div>
    	</div>
    	<div class="c-card-footer t-card-footer">
    		<ul class="c-card-data t-card-data">
    			<li class="c-card-data-item t-card-data-item"><svg class="o-icon c-card-data-icon t-card-data-icon"><use xlink:href="#topic"></use></svg> 2</li>
    			<li class="c-card-data-item t-card-data-item"><svg class="o-icon c-card-data-icon t-card-data-icon"><use xlink:href="#replies"></use></svg> 2</li>
    		</ul>
    		<ul class="c-card-action t-card-action">
    			<li class="c-card-action-item t-card-action-item">
    				<a class="c-card-link t-card-link" style="color: " href="" data-toggle="tooltip" data-placement="top" title="Moved, by mod, 1446831128">
    					<svg class="o-icon c-card-link-icon t-card-link-icon"><use xlink:href="#last-page"></use></svg>
    				</a>
    			</li>
    		</ul>
    	</div>
    </div>

you will notice the use of three different letters at the start of all of the classes

as follows

• o : Object
• c : Component
• t : Theme

The represent what type of class it is and must be specified in inheritance order that is to say Object - Component - Theme

All components will have to utilize objects from time to time but may need to trump the default styling such as the icon object we are using in here in this component. So we start by specifying the o-icon base class and then modify it with the c-card-media-icon component class. Them we add the theme version t-card-media-icon

Lastly you may notice all the component classes are essentially duplicated but as theme classes for exp c-card-title-link t-card-title-link
This is how template inheritance will work in the future to prevent improper specification and bloated css.

essentially if you wish to modify the style of a component for your theme you only have to add your modifications to the t-card-title-link class which makes inheritance extremely simple as you just include the base theme and then include your custom theme css file.

This reduces the overhead of themes drastically for those that perform no html edits.

Further going back to our icon example you might notice after the t-card-media-icon there are two more classes.

This is how dynamic classes will and should be handled rather than swapping classes out for handling things like changing the forum icon color in prosilver, we instead add a modifier class with the different color. This class also needs to be theme-able so it needs to have a theme version of the modifier as well.

We do it this way to keep our css files clean and sane. Rather than just double defining both classes with the full css and swaping them out which is difficult to understand by just reading the css.

****Long post sorry but had to get all that out there**** Hopefully this helps to clear up some things with the basics constructs for the framework and components. There is a lot more that I will need to cover/convey I realize but do not want to overwhelm everyone.

For now you can take a look at everything get familiar with these concepts.

As for where we go from here now that the groundwork has been laid we can begin coding the crap out of some components to start building the codebase for the new theme.

If anyone is interested in assisting with this, go here: https://github.com/hanakin/base-l/tree/components

fork it, clone it, npm install, create a pr for a component or a bug!

in order to add a component for the simplistic testing I have in place you need three things

1. component scss file: https://github.com/hanakin/base-l/tree/ ... components
2. component json file:https://github.com/hanakin/base-l/tree/ ... s/src/mock
3. component twig file:https://github.com/hanakin/base-l/tree/ ... /src/views

The view and json files need to be named the same then just run gulp from the cmd line

[3Di]

The link to the Harry Robert's site posted into the TS is wrong.
https://csswizardry.com/

So are you proposing a "OO" sort of styling?