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