Skip to content

Refactor Skosmos 3 CSS#1831

Merged
UnniKohonen merged 11 commits intomainfrom
issue-1597-refactor-CSS
Nov 25, 2025
Merged

Refactor Skosmos 3 CSS#1831
UnniKohonen merged 11 commits intomainfrom
issue-1597-refactor-CSS

Conversation

@UnniKohonen
Copy link
Contributor

@UnniKohonen UnniKohonen commented Nov 25, 2025

Reasons for creating this PR

Current Skosmos 3 CSS needs to refactored. The code is badly organized and there is a lot of unused and unnecessary code. This PR attempts to fix these issues.

Link to relevant issue(s), if any

Description of the changes in this PR

  • Fix errors in code
  • Remove unused rules
  • Remove duplicate rules
  • Remove unnecessary definitions
  • Reorganize and group code according to page type and page section
  • Fix HTML for about, feedback and error pages

Known problems or uncertainties in this PR

  • HTML code is not majorly altered in this PR and therefore no consistent CSS framework is used (for example SMACSS)
  • Color schemes are not addressed by this PR, those will have to done separately
  • There are a few unused rules left in the CSS that either have incorrect selectors (vocab statistics) or relate to features that will be added later (striped background images)
  • Color definitions are not consistently applied, this will have to fixed when implementing color schemes
  • There are probably many unnecessary individual definitions remaining in the code

Checklist

  • phpUnit tests pass locally with my changes
  • I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
  • The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
  • The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

@UnniKohonen UnniKohonen added this to the 3.0 milestone Nov 25, 2025
@UnniKohonen UnniKohonen self-assigned this Nov 25, 2025
@UnniKohonen UnniKohonen moved this to Needs review in Skosmos 3.x Backlog Nov 25, 2025
Copy link
Contributor

@miguelvaara miguelvaara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on the changes made, the following have been reviewed in particular:

1

  • Sidebar
  • Search
  • about
  • feedback

2
The changes were compared visually with the layouts created by Hahmo (colors and sizes were not measured) and everything appears to be in order.

3
Frontend tests run – all OK

4
Accessibility tests run – all OK

The points that raised questions were the following:

1
The variables --sidebar-scrollbar-thumb and --vocab-bg do not have fallback colors defined, which could cause issues in older browsers that do not support CSS variables. We agreed together that we will not provide support for such old browsers. In practice all common browsers released after spring 2017 support this.

2

-.tooltip-html-content:after {
+.tooltip-html-content::after {

= Okay

3
A more detailed reviewing is not needed so based on a reasonably thorough review the work looks good - excellent! 👍

If you decide to fix the appearance issue (on the other comments) - great but if not, that is probably fine as well. In any case, I think this can be merged.

Copy link
Contributor

@miguelvaara miguelvaara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can merge it but please take a look at a couple of my suggestion. Nice work 👍

@sonarqubecloud
Copy link

@UnniKohonen UnniKohonen merged commit 6f65e4f into main Nov 25, 2025
15 checks passed
@github-project-automation github-project-automation bot moved this from Needs review to Issue/PR closed in Skosmos 3.x Backlog Nov 25, 2025
@UnniKohonen UnniKohonen deleted the issue-1597-refactor-CSS branch November 25, 2025 16:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CSS audit needed

2 participants