Small little details
Introduction
Sometimes its the small details in life that can make all the difference.
Disclaimers
- Firefox® is a registered trademark of the Mozilla Foundation – www.mozilla.org/en-US/foundation/trademarks/policy/.
- Ubuntu® is a registered trademark of Canonical Ltd – ubuntu.com/legal/intellectual-property-policy.
- Moodle™ is a registered trademark of ‘Martin Dougiamas’ – moodle.com/trademarks.
Other names / logos can be trademarks of their respective owners. Please review their website for details.
I am independent from the organisations listed above and am in no way writing for or endorsed by them.
References
- Bootstrap – getbootstrap.com
- Bootswatch – bootswatch.com
- Collapsed Topics – moodle.org/plugins/format_topcoll
- CSS – www.w3schools.com/html/html_css.asp
- Foundation theme – moodle.org/plugins/theme_foundation
- SASS – sass-lang.com
Header image
The image of ‘45212 LMS Class 5MT ‘Black 5’ 4-6-0’ in the header of theme screenshots and featured image of the post is my copyright. Please don’t use without my permission.
Background
My Foundation theme has ‘Swatches’ which quickly change the look of the theme. Think of them to be similar to the Boost theme ‘Presets’, but with Foundation they are all there already and changeable at the click of a selection box:
Most of them come from ‘Bootswatch’, bar ‘Default’ which is as supplied by ‘Bootstrap’ version 4 and ‘Seventies’ that I created. They are great, but what if you wanted to change one or more of the colours? So, I’ve added a ‘Swatch custom colours’ tab which is activated with one setting ‘swatchcustomcolours’ that you can see in the screenshot – this is so that you can keep the number of tabs down to what you need.
Colour settings
When ‘swatchcustomcolours’ is ticked then we get ‘Swatch custom colours’ tab:
with a list of colour settings, which with Foundation, all currently correspond to Boostrap SASS variables. You will notice though that the colour picker is not the same as the core one:
this is because I’ve copied and improved the one I use for ‘Collapsed Topics’ so that its:
- Smaller.
- Allows an ‘ignore’ value.
- Shows the current colour for that setting.
The first item on the list makes sense as there can be lots of settings on the page, and all we need to do is click on the box to bring up the picker:
The second is more thoughtful. If you think about it with themes, then there are loads of colour settings, but you don’t want the theme to set them all, you only want certain ones to be set and leave the rest up to the CSS, custom or otherwise. This is where I had the concept of an ‘ignore’ value, thus if you enter a dash ‘-’ then that tells the code ‘ignore and don’t apply this setting’.
The third and possibly most subtle is showing the ‘current colour’ for that setting. If we look at the setting magnified by 300%:
then you can see that the box that brings up the colour picker has a border that is in the colour of the default value of the setting, but the actual colour is blue. That is the colour that has been ‘detected’ by the code that the variable as it is with the current ‘Swatch’ is in the CSS. Thus you can look at the page and get an idea of what potential elements that setting can affect in the theme. If we change to the ‘Slate’ swatch then we get:
The detection code only operates when the setting is set at ‘ignore’. When an actual colour is set, then the box shows you that colour completely, including the border (I might change this to default one day). Then you know the colour as represented by the value you have entered.
Conclusion
I believe that small little details like this can make all the difference to how you interact with software. They can be subtle and often go unnoticed.
What do you think? Please let me know in the comments.
- Moodle 4 Security – A Review – 16th April 2024
- A little bit #fab – 16th March 2024
- Static framework – 16th February 2024
Great post Gareth !
You are totally correct, small things do make a huge difference.
People don’t “notice” when things are really good, but we do notice when things are “bad” – so we often don’t appreciate just how much tie, and thought, and work has gone into something we don’t even notice !
Stop press! -> You can get the theme with the supporting code for this post via https://moodle.org/mod/forum/discuss.php?d=419677.