Small little details

Introduction

Sometimes its the small details in life that can make all the difference.

Disclaimers

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

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:

Foundation theme swatches

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:

Foundation theme colour settings

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:

Setting colour picker

this is because I’ve copied and improved the one I use for ‘Collapsed Topics’ so that its:

  1. Smaller.
  2. Allows an ‘ignore’ value.
  3. 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:

Setting access the colour 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%:

Setting current colour

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:

Foundation theme in the Slate swatch showing the detection of the colours attributed to the SASS variables.

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.

Gareth Barnard
Latest posts by Gareth Barnard (see all)
blank

Gareth Barnard

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Shoelace, and other modules such as course formats.

2 thoughts on “Small little details

  • 16th March 2021 at 8:50 am
    Permalink

    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 !

    Reply

Add a reply or comment...

%d bloggers like this: