ElkArte Community

Elk Development => Theme development => Topic started by: Spuds on May 31, 2021, 06:19:08 pm

Title: 2.0 CSS Updates
Post by: Spuds on May 31, 2021, 06:19:08 pm
I've been doing some work, well quite a bit actually, to our current CSS which is for the most part 10ish years old.

Over that time its been updated, changed, tweaked, added to, etc.  I felt it was time for a good review and update so that is what I've been working on doing.  Normal warning, some of this is not really my area so some carnage may have occurred.

Just to note we really should not do class concats in the sources like echo 'class = "selector_', if (bla) ? 'ccc' : 'ddd', '"'; Sure it saves typing selector_ twice but it makes finding those in the code tedious.

Now the madness sets in

Variant file

You want more?

Not Done

I'll setup a test site with the changes, the goal was that it should not look much different, although there are many subtle alignment / layout fixes.
Title: Re: 2.0 CSS Updates
Post by: Arantor on May 31, 2021, 08:50:40 pm
Are you thinking about adding some kind of preparser, e.g. SCSSPHP or similar, to allow for breaking up the CSS into logical files that can be combined (and minified)?

I mean, retrofitting that onto what was in my case 2017-era "Curve 2" was painful and I'm not even close to being finished, but something to think about.

Especially since I decided to allow for themes to cross-reference each other to include things, so I have what amounts to half a dozen child themes whose principle differences amount to variable changes and some bonus CSS just for them to have different headers.
Title: Re: 2.0 CSS Updates
Post by: Spuds on May 31, 2021, 11:52:20 pm
Its certainly tempting to break up the main CSS file, its pretty difficult to maintain as is.  Now you have me thinking :D

Did you go full on SASS or just break up the CSS into modules?

There is still so much more that could be done in the templates to drive consistency.  There are still too many rules that are in place just to deal with odd templates, or one off templates.  We have done a few main ones but there are a bunch of opportunities remaining.
Title: Re: 2.0 CSS Updates
Post by: Arantor on June 01, 2021, 12:38:28 am
So what happened is that I renamed the original index.css to original.scss and made it as compliant as it needed to be to compile, then built index.scss to just be a skeleton to load all the parts.

It's still very much a WIP but you can see the overall structure in https://github.com/StoryBB/StoryBB/tree/master/Themes/natural/css of the files (yes, I finally decided I didn't want 'default' as the folder and to just name it), and right now it has awful colours so I can see when I missed something in the theming. The eventual plan is to expose at least some of the things in _variables.scss to the user in a UI so they can change colours in the UI without having to touch a line of code.

For context we have 6 theme variants running on our one 'production' site (https://floo.network/), which all share the same base theme, with their own colour variants, images folders and a couple of component SCSS files (e.g. they all have a logo that behaves a certain way on mobile, it's an image per theme but the CSS just says 'get me the image from the current theme') - I was able to knock out 4 of the variants in a couple of evenings with the hardest part being finding good colours for the 4 Hogwarts houses.

Theme CSS is by default compiled and minified, and served from that via a controller, but it can be run in a 'developer mode' where my local machine takes ~4 seconds to compile (mostly caused by I/O drama in Docker - Linux containers on Windows hurts) - the controller for that is https://github.com/StoryBB/StoryBB/blob/master/Sources/StoryBB/Controller/Css.php

Note that the installer currently has no CSS as a result but I'll figure something out for that at some point, probably a static copy of the compiled theme baked into a CI job somewhere.

(I started a much, much larger rewrite of all the things to go full dependency injection, inversion of control; this is one of the few components that actually works fully in that system, but it should be clear enough what it's doing. In the end I stopped and just started to implement the functionality we actually cared about in an agile fashion as people were actually using it and I'll refactor it later into something nicer.)

The other thing we did was replace out all the theme template files with actual templates with a template engine. Though we used one that gave Handlebars-esque syntax and we butchered in crude logic back in to fix the amount of inline logic in theme. It wasn't pretty and I plan to move again, probably to Twig, sometime after I stop building features for the site that is actively using it and can focus on refactoring.
Title: Re: 2.0 CSS Updates
Post by: Spuds on June 14, 2021, 01:07:42 am
Back on phase 1 of  the CSS.  I made my way through beSocial and the Admin files, so those are updated.  Sitll a few rough spots by hey thats OK for now.  I think just RTL is remaining now.  After that I'll try to get a test site up and then begin to ponder scss and the rest.
Title: Re: 2.0 CSS Updates
Post by: emanuele on June 14, 2021, 10:43:51 pm
/me feels bad every time he reads "CSS"
Title: Re: 2.0 CSS Updates
Post by: Spuds on June 15, 2021, 03:56:52 am
You think you feel bad now, just wait till you see what I've done LOL
Title: Re: 2.0 CSS Updates
Post by: Spuds on June 19, 2021, 08:00:59 pm
Made my way through, a good part of, the RTL file.  Looks like it languished a bit during the 1.1 updates so there was some old crud, some missing selectors, and some structure still in the color files.  Anyway I cleaned up a lot of that and then made the changes needed for the flex/grid updates (both of which at RTL aware).  It still needs some more work but thats for another time.

I put up a quick 2.0 test site at https://elk.spudsdesign.com  You can use id test and pw testing

That site has all of the CSS updates.  The goal was to update the structure while maintaining the current look.  Doing that made it easier to see what I broke or improved ;)

The default is hover to open menus, again the in/out delays are done via css, no JS is used. 

You can also use the click menus, either by going to your browsers development panel and enabling mobile view OR going to the profile section look/layout and selecting always use click to open menus.  Using click menus does require the use of JS (all redone), and follows the current experience, where a single click on a top menu will open the submenu (if there is one) clicking it again will follow it.  It also has some keyboard help, such as pressing ESC will close the menu, clicking outside of the menus will close them as well.
Title: Re: 2.0 CSS Updates
Post by: emanuele on June 19, 2021, 09:56:08 pm
/me is scared :D
Title: Re: 2.0 CSS Updates
Post by: Spuds on June 19, 2021, 11:24:32 pm
Good :D

The PR will be a mess since I fixed a bunch of small issues "all over the place" so I could test as many functions as I could.  There are so many affected files that I'm not going to do much to sort it, its just going to be one of those blob changes I'm afraid.
Title: Re: 2.0 CSS Updates
Post by: emanuele on June 20, 2021, 11:24:28 am
I guess it's normal for this type of changes LOL
Something similar to what Ant was used to do :P

BTW... we could throw the code up here with all the new stuff O:-)
Title: Re: 2.0 CSS Updates
Post by: Steeley on June 20, 2021, 07:12:12 pm
I'm curious to see how many add-on "exploits" blow up  (might need more pop-corn..)  8)