Skip to main content ↑ ↓
Topic: 2.0 CSS Updates (Read 2148 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

2.0 CSS Updates

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.
  • I went through and found duplicate selectors and combined them
  • Rearranged structure so a few !important calls could be dropped
  • Put things where they belonged (TOC), several items had been added and they were not in the right area
  • Went through all (well a lot) of the selectors and removed ones that could not be found.  This likely got a few innocents but may were simply not to be found, in the templates, in the JavaScript or in the sources.
  • Changed depreciated classes to the proper ones.
  • Moved any color declares back to the variant files, not many but found a few

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
  • Declared global box sizing and removed all box sizing declares scattered throughout
  • Changed default font to size 15 from 14
  • Added CSS variables for font sizes as --font9, --font10, etc done as rem.  Then used those vars in all font-size declarations.  Using rem allowed the removal of a lot of font-size lines and some other css where we were simply fighting with the font size cascade effect caused by em. 
  • Main menu done with pure CSS and still has the hover intention effect, no hoverintent or superfish JS, all by using transition effect.  The dropdowns are no longer positioned off screen but are instead rotated into the screen so they are zero height.  On hover they rotate out and give a nice effect.  Yes we will still need JS for mobile as hover does not exist but it should be pretty minimal (we will see)
  • Un-combined the menu css declarations to allow easier changes to main, quick, admin etc menus.  There are a few more lines now but its easier to follow and modify just the main menu (for example)
  • Used calc() in several areas such as the dropdown positioning and the breadcrumb arrows.
  • Redid the breadcrumbs trying to reduce the markup and css, but those darn things are a PITA
  • Converted board listing, topic listing, recent post, search results, topic display and others to use grid layout
  • Converted most "line" controls to use flexbox, such as page links, quick buttons, moderation buttons, search box control, poster area and many others as well.
  • The gird and flexbox allowed the removal of a lot of floats, margins, padding, inline-block, vertical-align stuff
  • Went through the media queries to use the above changes as well (and I will add that another PITA)
  • Updates to templates as needed to remove structure no longer needed, rearrange as needed, add as needed.

Variant file
  • Declared all colors as vars and used them thought the css. 
  • I did not just change all uses of #CCCCCC to --colorcCCC but instead tried to give everything descriptive names and also tried to break them up by type.  So if #CCCCCC was used on backgrounds and borders then I set two variables, --background and --border and used them as such. 
  • This had the effect of being much more consistent in where they were used and should make changing/finding colors easier.  Bit of an experiment really.

You want more?
  • Replaced a few background images in the CSS with proper SVG images
  • Changed SVG images to use a solid black fill and provide the color with the use of overlay filters.  This allowed the removal of essentially dubplate SVG icons whos only difference was in the fill color.
  • Moved all color filters to the variant file, easy to change and easy to see where they are used.
  • The filter declarations will look like madness, but there is a web app that you can enter the needed hex color and it will create the filter for you.  Now you can easily change the color of your SVG icons.

Not Done
  • beSocial
  • Admin
  • RTL

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.

Re: 2.0 CSS Updates

Reply #1 –

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.

Re: 2.0 CSS Updates

Reply #2 –

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.

Re: 2.0 CSS Updates

Reply #3 –

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, 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.

Re: 2.0 CSS Updates

Reply #4 –

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.

Re: 2.0 CSS Updates

Reply #5 –

 emanuele feels bad every time he reads "CSS"
Bugs creator.
Features destroyer.
Template killer.

Re: 2.0 CSS Updates

Reply #6 –

You think you feel bad now, just wait till you see what I've done LOL

Re: 2.0 CSS Updates

Reply #7 –

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.

Re: 2.0 CSS Updates

Reply #8 –

 emanuele is scared :D
Bugs creator.
Features destroyer.
Template killer.

Re: 2.0 CSS Updates

Reply #9 –

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.

Re: 2.0 CSS Updates

Reply #10 –

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:-)
Bugs creator.
Features destroyer.
Template killer.

Re: 2.0 CSS Updates

Reply #11 –

I'm curious to see how many add-on "exploits" blow up  (might need more pop-corn..)  8)
// Deep inside every dilemma lies a solution that involves explosives //