[4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

For style authors to post and receive feedback on 3.3.x styles still in development. Any development styles you wish to use on your live board should be installed with caution!
Heo32
Registered User
Posts: 207
Joined: Sat Jan 07, 2017 10:08 pm

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by Heo32 »

Thank you for your response, Hanakin.
Hanakin wrote: Wed Jul 29, 2020 12:38 am
  • No thats not something we will be doing by default. You are free to do so if you prefer for your own forum. It would be very easy as it will be CSS grid controlled.
Unnecessary white space is not pretty when there is notable visual imbalance. Changing it would be east for someone like you but I've never worked with CSS and I'd rather not tinker with anything.

Everything on the Internet concerning forum software all have a similar layout with stacked rows. They are never next to each other as columns. What is the reasoning for wanting to have 2 forums side-by-side?
stevemaury wrote: Sun May 20, 2018 8:16 pm I went to your board and looked for an hour or so, but did not see the women without underwear.
Allow using Content-Security-Policy without unsafe-inline • Content-Security-Policy
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by Hanakin »

That’s not true a lot of sites use a similar approach. The reasoning is as you mentioned poor use of space for one. Given the little info that a forum has. It fits more to a card which allows for better interaction and a better responsive experience. It also opens up the layout for the addition of a sidebar down the road.

As for white space that’s you opinion. But studies suggest the amount of white space used in the mockups is better for lots of reasons. One it look far cleaner and more professional, but it’s a lot easier to read and navigate especially on smaller devices. It provides for better comprehension of functionality of the various components as well. This is all detailed in the design specs of material design which you can google.
User avatar
spaceace
Registered User
Posts: 1999
Joined: Wed Jan 30, 2008 8:50 pm
Contact:

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by spaceace »

whitespace used to be bad, now it's good. just like eggs. but it all comes down to opinion.

i've never been a fan of how whitespace is used now. i actually actively avoid sites using it when i can. i see it simply as blank wasted space. so you now have to scroll the equivalent of a huge skyscraper to see what should be an apartment building :roll:

when you have a forum with a lot of categories, the page height could be enormous :shock:
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by Hanakin »

When exactly was white space ever bad? Never was it’s just very misused and misunderstood. Either way no need to worry as it’s all based on a single variable grid of 8px if you change that you change all the space
User avatar
serek
Registered User
Posts: 79
Joined: Fri Jan 30, 2015 12:47 pm
Location: London
Name: Serge Victor
Contact:

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by serek »

I find it really sad that instead of re-using an existing GPL/MIT framework you are writing another one just for phpBB.

It makes things more complicated and incompatible, which will require more work of developers and less tested code in result.
--
find me somewhere in SW London, 100 meters from Thames River
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by Hanakin »

Actually we are using a framework its called ITCSS just a custom implementation of it which is how its meant to be used. The fact of the matter is there are very few frameworks out there, three to be exact which we will cover latter. In actuality you are most likely referring to a UI library more than an actual framework. The use of these lead to more blot to the software than is actually needed. Not to mention that they force your hands to use w/e coding style and implementations they adopt and update as they deem fit which is not ideal for large scale applications. Then there is the fact that most of the components we use are not in any of these libraries leading to custom code anyway. The fact is for the code we would need from a UI library such as bootstrap for example is about 10% of the code in bootstrap. Thats alot of overhead and becomes very difficult to manage from a development perspective. Not to mention that the code is not well organized, documented, or without errors. Its better to instead only use what you need from it to reduce that overhead. Which in turn allows us to improve upon it. This is actually the approach we took. For the core and every component I start by looking at a couple of these libraries to see if they have a similar component (forms for exp which is mostly influenced by bootstap base layer and material UI design layer). If they do then i will use that as a base to start with. But the fact is everything outside of the core layer is not represented by any and ends up piece mailed from multiple sources before i retool to what is needed. So if you look at the core.css which is the framework, 90% of that would be what you are referring to. But for arguments sake lets take the full core and utilities layers. Core is currently at 3.1k lines of code and utilities is at 142 lines. Lets look at bootstrap which is broken up into several files in the latest version bootstrap.css Which is 9,728 lines, bootstrap-grid.css at 3,951 lines, bootstrap-reboot.css at 425 lines, and bootstrap-utilities.css at 3,516 lines of code. So thats 3.2k lines in base-l unrefined with better structure and code quality at the moment vs. 17.4k lines in bootstrap which is bloat unstructured and not well documented, not to mention not a clean 1:1 plug and play.

Our approach has all of the upsides with none of these downsides. We can also easily plug and play a specific component in from any framework you want if there is overlap. You want to use buttons from materialize? Navbars from material UI? Forms from bootstrap? Just replace the scss objects in base-l with the one from them and rework the html...bobs your uncle. The main difference between all of these libraries for these objects is mostly code quality, naming and adherence to your projects coding guidelines. The fact is most of core is that way. There is not alot of difference in the code for buttons, tables, code blocks, navbars, grids and forms. It all boils down to code quality and ease of maintenance. None of the major UI libraries have good coding standards in place that make them easy to use in large projects. Outside of two actual frameworks you probably never heard of inuit.css and SUIT.css. SUIT suffers from odd choices is naming practices and a weird structure which makes it a hard sell. As for inuit its the purest implementation of ITCSS as its a repurpose of the original framework from the creator of both ITCSS and the original inuit.css. Its main problem is that it does a bad job of creating the base layer and does not fully align with our coding standards.

In the end none of it matters though as the main purpose for any of these is to speed up the development workflow, and ease of maintenance. The fact is when you boil it all down a custom approach is always better at handling both of these.

So all that leaves is customization to look at. And the fact is the use of any of these UI libraries makes it more difficult to customize not easier. Sure you may be used to their code? But the amount of bloat introduced into the html in any of these UI libraries would make maintaining the project a nightmare. None of them have any framework in place. Meaning there is no thought put into different layers needed to render any one component.

This is where ITCSS really shines as it is an actual framework that does put thought into all of this. It makes understanding, working with, and maintaining the code simple. It defines layers that all our code fits into and naming conventions that help us to separate out our code, not unlike another framework you may be familiar with called SMACCS which ITCSS bases its approach off of seeing as how it been around for ages. You get the benefit of clean controllable customization through the use of theme classes. It also has a better strategy for controlling css inheritance which is something that can not be said for any of the mainstream UI libraries. Which is one of the main problems with prosilver.

Looking at the html/css i know for any given component what code is responsible for the layout vs any utilities code while allowing for separation of the theme.

This makes for a very clean and easy to understand codebase.

Lastly all of this makes it far easier for us down the road to implement tools to make customization easier.
User avatar
serek
Registered User
Posts: 79
Joined: Fri Jan 30, 2015 12:47 pm
Location: London
Name: Serge Victor
Contact:

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by serek »

You have a right to make an academic paper with your arguments and defend it on any scientific conference. But why do we all have to be engaged in such a venue?

These frameworks are being developed for decades to reach maturity and having less bugs. With userbase of phpBB you have no chance to ever reach that level, statistically.

Chose a framework you agree with 95%, and spend the rest of time fixing it on Github with their developers.

Seriously, we still can stop this madness.
--
find me somewhere in SW London, 100 meters from Thames River
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 18316
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón
Contact:

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by DavidIQ »

Agree with hanakin on this. From having worked with different frameworks/"ui" libraries for the past 15 years or so I know what it is to spend more time making your code work with the framework than actually making it work or look the way you want it to. Picking up a "mature" framework and making it work and look how we need it to might probably take the same amount of effort as what's being done, except that you end up with a ton of bloat, components, code, etc. that will never be used.

None of the projects I've been involved with go with a framework and simply stick to what it provides nor do they use everything they provide. Most times a custom framework is what ends up getting developed. On brand new projects I've seen that a custom library has been the best solution because you can make things work and look the exact way you need them to. So there's nothing at all wrong about having a "custom" framework. As long as there are familiar tools in place, or an easy way to set things up, everything will be fine.
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by Hanakin »

Again not frameworks, and the class names alone is reason not to use any of them. Its not madness its sanity.

Also you are wrong to think they know what they are doing just because they have been here first? And as states you can still leverage the code in the development of a better approach.

You obviously do not grasp that. Im sorry but we will not be using an off the shelf solution.

This topic is really meant for showcase the components/work to garner insights suggestions and ideas on the look/feel/interactivity. Not to discuss the workflow. That is better discussed on the development site area51. In the style development forum by creating a topic there
User avatar
DTMWC
Registered User
Posts: 379
Joined: Tue Jan 16, 2018 6:17 am

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by DTMWC »

Obviously a lot of time has gone into so far and in my opinion if Hanakin has the time and energy to put in to such a huge project then building something that suits phpBB rather than having to make phpBB work with other frameworks is a sensible way to go forward.
Boom.
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by PlanetStyles.net »

I think a prime example to highlight phpBB's position and Hanakin's point here is to look at current styles that have tried adopting bootstrap:

viewtopic.php?f=596&t=2389941 (Abandoned)

See how strange everything looks? Particularly the inconsistent padding / margins, and the weird way that some content is justified while other content isn't. This is what happens when you're limited to a range of structural components that weren't designed with phpBB in mind.

Pit did a better job here: viewtopic.php?f=596&t=2404406 (Not updated for 3.3x), although there are similar issues with weird padding / margins / line-heights - particularly on the poll layout, viewforum, forumrow pagination etc.

Both examples demonstrate how frameworks emphasise structure over content, which is the opposite of what phpBB needs to achieve.

I believe the premium Flatboots theme is bootstrap-based too, and it's better than both of the above examples, but it would have taken some considerable time to make it look polished. And, prosilver-based styles still sell better.

Off the shelf, using the native CSS from these frameworks does not generate an appealing design, as evidenced from the links above. Adoption of an existing framework would require the phpBB team and style authors to invest considerable time polishing it up and making it work nicely with phpBB's elements - (a problem that exists in prosilver today)

That time might as well be utilised developing a modern phpBB-first framework that we control every aspect of.
elinzone
Registered User
Posts: 1
Joined: Fri Oct 23, 2020 10:33 am

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by elinzone »

1) Yes
2) Too early to say
3) all the code is in github
4) No
User avatar
Darth Apple
Registered User
Posts: 19
Joined: Mon Jan 07, 2013 1:25 am

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by Darth Apple »

Frameworks also add bloat. In many cases it's completely worth it, but in this case, it represents a very concerning negative towards them. I wrote a CMS from scratch for a University project last year and it was pretty well-featured. It worked like a charm, and we chose to use Bootstrap as a time saving measure and a design measure. We could have done a better design if design was primary our focus, and in such a case we would have chosen NOT to use Bootstrap. But we chose to use a framework because it was "good enough" and allowed us to make a nice looking CMS with the time constraints we had. Those are the situations where using Bootstrap makes sense.

But in all honesty, frameworks can be a bit of a roadblock as a developer if you have a vision for something and the framework sort of pushes you in a different direction. That's what Bootstrap does. It pushes the design in a certain direction. It's a good thing for many use cases (that default "direction" usually looks good), but it's hardly unique, and it's definitely not phpBB-esque.

Websites built with these frameworks pretty much all look the same; every single website is instantly recognizable. Theme developers like to get creative. We rip and replace as much stuff as we can and we try to create something unique. In order to "undo" that bootstrap look that is so clearly associated with it, a lot of core changes to the CSS would need to be made. Unfortunately this could break the normal workflow of the framework, and people who use it expecting it to work or look a certain way would find that it isn't quite vanilla bootstrap, and would be ready to pull their hair out wondering why this non-vanilla bootstrap wasn't behaving like Bootstrap.

Making designs from scratch is not hard. I strongly believe that the developer for Chameleon is absolutely taking the right approach here. Using frameworks is good when they are needed, but in this case, it makes more sense to design for phpBB first and to build it from the ground up with phpBB in mind (as they are doing currently with ITCSS). Otherwise we run the risk of building the design around Bootstrap rather than the user experience (as Planetstyles very eloquently mentioned).


Just my two cents,
-Darth
User avatar
Meis2M
Translator
Posts: 1009
Joined: Wed Mar 03, 2010 11:32 am
Location: IR.Damghan
Name: میثم نوبری
Contact:

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by Meis2M »

Hello dear hanakin
any new progress ?
phpBB persian international support
Follow us in Instagram
Free upgrade and install extensions on your forum - drop me PM
Ultimate phpBB SEO Friendly URL extension
eveneme
Registered User
Posts: 134
Joined: Fri Aug 15, 2014 12:53 am
Location: Poland
Contact:

Re: [4.0.x][DEV] [OFFICIAL] CODENAME: Chameleon

Post by eveneme »

PlanetStyles He is right.
Post Reply

Return to “[3.3.x] Styles in Development”