2. Why is a framework so usefull?

Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB's style.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB or modifying styles of released phpBB versions. If you need support for phpBB please visit the Support Forums on phpbb.com.

If you have questions regarding creating styles please post in Styles Support & 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:

2. Why is a framework so usefull?

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

User avatar
david63
Registered User
Posts: 355
Joined: Mon Feb 07, 2005 7:23 am

Re: 1. Why is a framework so usefull?

Post by 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.
David
Remember: You only know what you know -
and you do not know what you do not know!

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: 1. Why is a framework so usefull?

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

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

Re: 2. Why is a framework so usefull?

Post by Meis2M »

i think twitter bootstrap is good for phpbb.

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: 2. Why is a framework so usefull?

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

jameswarner
Registered User
Posts: 1
Joined: Fri Nov 11, 2016 11:26 am

Re: 2. Why is a framework so usefull?

Post by 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.

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

Re: 2. Why is a framework so usefull?

Post by Louis7777 »

jameswarner wrote: Fri Nov 11, 2016 11:37 am 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.

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: 2. Why is a framework so usefull?

Post by hanakin »

jameswarner wrote: Fri Nov 11, 2016 11:37 am 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.
Donations welcome via Paypal Image

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: 2. Why is a framework so usefull?

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

User avatar
3Di
Registered User
Posts: 951
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano 🇮🇹 Frankfurt 🇩🇪
Contact:

Re: 2. Why is a framework so usefull?

Post by 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?
🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades

Post Reply