Chameleon 101 EP1 Transcript

chameleon-101-ep1-transcript.txt

Hello everyone

I am hanakin from phpBB. I am the Front-end Development Lead

and today I am going to provide some much needed insights and information on the new theme.

I know it has been awhile since the blog post, and I promised to provide more details. I apologize that it has taken this long, but I recently switched jobs and had to move. I am still trying to get settled finding a place etc...So please have be patience with me.

There is a lot of development todo still and a lot of information that I need to provide you.

I have been racking my brain trying to figure out the best way to inform, inspire, & motive everyone with related to the new theme.

That is why I have decided the best way was a face to face or as close as possible.

There is far too much however to cover in one video. So I have decided that I am going to try releasing a series of videos. Which I hope to transition into a stream. At first they will be informative only. I will then transition into recorded coding sessions. Then eventually may start doing live streams at some point.

This help to keep me on task and be as consistent as possible with the work, as well as help motivate myself while at the same time motive and inform all of you.

To start everything will be upload as video recordings to YouTube. The quality will improve over time, especially once I move in and get setup in my new place. 

I apologize for the quality of this video, but as I stated i'm in a hotel and do not have access too the proper equipment I would need to improve it.



Now that that is out of the way let's cover some of the information you are really here for.

Today I want to provide some answers to what Chameleon actually is. There seems to be a lot of confusion out there about this, and I apologize for any of that which I may have caused. A lot of things may have shifted or been reworked since the original announcements which may have lead to this as well.



Chameleon is a game changer. We are not just building a style to replace "prosilver" as the default style.

We are completely rethinking the software and how we work with the “front-end” (visual interface) for it..

Currently we ship the app with a base style called “prosilver” which can then be inherited from to produce a custom style. All Custom styles inherit from "prosilver".

This means that only the changes you need to make for your custom style are needed for your style. The app pull the rest from "prosilver" or whatever is specified as the inherited style.

Chameleon however is something different. Instead of inheriting from the base style the base style that will inherit from a global theme (Chameleon)

This theme is what is generally referred to as a bare-bone/skeleton theme. It is very minimal and not meant as to be used as a style. This does not mean that you can not use it as your style. If you prefer the minimal look then thats perfectly fine. You will still need to have style shell to do so however. (I will cover more on this in a later video).

Instead the purpose is to provide a very minimalistic starting base or foundation. It's meant to be easily modified and customized. This makes building styles and maintaining the software extremely easy.

All styles will then inherit from Chameleon in the same way. You can also choose to inherit from the style that we ship with but its not recommended.

So there will also be a custom style with the release that will inherit from Chameleon. This will contain all the actual design. All the visual aspects you see for chameleon are all wireframe/prototyping. It's a simple color scheme, a consistent spacing/grid system, and fonts. This makes it extremely easy and quick to block out and test all the components across all devices.





Style inheritance will also change drastically as well.

Most notably the folder structure will be completely different. We are still working on it so it will still have some further changes, but it will be more modular and easier to find exactly what file you need to make an adjustment or change. 

By modular I mean breaking everything up into the smallest pieces possible. For example instead of making a change to a page file to change the navbar. You will instead make a change to the template file for a navbar component or the SCSS file for a navbar component.

This brings us to assets, all assets will have their own folder. Every page is made of several different types of assets. You have imgs, css, scss, fonts, icons, js, twig files. (Yes we are using SCSS for all the coding. It will be compiled into CSS during a build step. No it it not integrated. We use gulp and nodejs for this.) Each of these will have their own folder in "all". They will also be further broken up into sub-folders. 

For example each piece of the template has a specific type of use and as such each use type should and will have its own folder. Have a look at the github repo to get an idea of this.

This makes things extremely more organized and far easier to maintain.

The Second part of inheritance will be far more granular or modular. Each include will look locally and then globally for what it's attempting to include. This goes for template files as well as assets. Currently we have several css files. None of which have any real meaning. I mean what goes in common.css or content.css? It very confusing and difficult to determine what to change and where to put things.

Again if I want to make a change to the navbar or add a navbar it should all be found in a file called navbar.

This is why we will be breaking everything up into what is called components. Each html tag for the component will be scoped to that component and have 2 or more classes that fall in to 4 different categories. Objects, Components, Utilities, and Theme. 

An Object is a pattern that is found across several components and pages. The best example of this in Chameleon is the "bar" object. You have navbar, toolbar, headerbar, footerbar, etc... These all share the same code. Rather than add it to all the components we break it out into its own object class. We can then apply component specifics on top of it.

Object classes start with "o-" like o-bar.

Components start with "c-" like c-forum

so you may have html that has o-bar c-forum-footer

Next are Utilities. These are classes that are not specific to any one theme. They provide a single purpose. For example hiding an element. Utilities start with "u-" like u-sr-only which hides things from screen readers.

Lastly we have Theme classes. This is the heart or bread and butter of the way inheritance works with the new system.

The new template system is a series of layers. We start with a core.css file. This is the foundation layer. provide by the underlying base-l framework I built for the project. Base-L contains all the global css like the reset/normalize code, and any re-styling of the html elements them selves such as the default look for "a" tags or h1's. It also contains all the object classes. As these are meant to be global and not changed but instead trumped or augmented via component/theme/utility classes.

The next layer is the theme.css layer. This layer consists of two parts. The components (This is what Chameleon is) and the theme classes (This is what the style is). The basic concept has all components being a part of chameleon and all customization being handled via theme classes. However more advanced styles can add their own components as well.

The last layer is the utilities.css layer. This layer is also comes from Base-L as it is not something that changes often.

We will cover all this in more depth in future videos.

Along with all the assets having their own folder, we will be relocating any and all to the same location. For example currently we have some JS files located in the theme folder, and yet some are located in the phpbb/assets folder. More still can be found in the adm/style folder

While you may still have some JS in your custom theme folder for your specific style. All others will be relocated to the new Chameleon folder which will be named “all”.

This is a global folder found in the styles folder.

Along with the “assets” folders and files from the theme folder. The ACP will also utilize the "all" folder for all of its theme assets as well.

This gives us 1 location for all JS/CSS/SCSS/IMG/TWIG files required to build the apps front-end. 

We will also be changing how img assets work. We have several types of img assets, some of which are contained in the theme others are contained in the phpbb/assets folder and controlled via the ACP. These are all moving to the all folder.

We are also making them way more customizable and handling all of them the same way. They will all be included in the theme/style the same way. You even have the ability to specify if it's a local asset or a cloud based asset, similar to how font-awsome works.

This will work for icons, imagesets, contact icons, topic icons, forum images, rank images, and smiles which lets face it are just custom emojis...so let's just call them that. The ACP will be change to allow for this as well.  So you will have the option to upload a custom emoji or rank img or entering the name of it and using a cloud based service to provide it via the name. There will be a future video specifically on this at a later time once more concrete information is available. It's still just in the brainstorming phase at the moment.

All of this will help us to keep everything modular and easier to maintain. While providing the ultimate capability to customize the app to your needs. 

I hope that you enjoyed this first video and will check out the rest of them. please feel free to comment below and provide suggestion and questions for further videos.

Have a great day!