My Source Container Base workflow/system

I have been refining an idea which I though that other Source users might find useful.

As you probably are aware , Source has a killer feature, which is the ability to use multiple Container Base stacks for multiple configurations of padding/margins at all 4 breakpoints for px, %, vw, etc., and also BG colours, Custom BG gradients or SVG Code. Part of the beauty and simplicity of this implementation is that you just chose a preconfigured identifier, which is just a number chosen from a drop down number selector. You don’t need to know any class names and then type them in somewhere, just chose a number, 1,2,3, etc and go. This literally could not be easier to use and as you change a Container ID in a Container stack, you will instantly see the change in Edit mode. The simplicity makes this method easy to debug.

However, if you use this feature you may end up needing to remind yourself of the settings in order to chose the one you want.

My solution has been to build up a growing set of Container Bases made into a Template that I will eventually use across all sites. This obviously cuts down on creating new bases with every build, only requires debugging once, but also helps to refresh my memory of the base numbers (IDs) for the frequently used ones.

The final part of my workflow has been to create a page that uses this Template to display each ID in a grid where each grid position shows ID1, ID2, etc in a visual form. I set the grid height to 200px and show the ID number with some text which may or may not be used, together with the actual padding. In each grid, I use an outer Container set to the Base ID and set the BG to red, and then use an inner Container set to blue with the text. When previewed, the padding is shown as the red BG.

So far this has worked really well and gives a quick visual way to see the padding settings. Initially, I added this as a non publishing page within a project to view when needed. However, a far better (quicker way) is to preview the page in Solis with 4 displays, one for each BP range, and this arrangement is just about perfect.

This is still an evolving process, but so far it has turned out to be really useful. When or if I finalise this, I plan to make it available for download.

12 Likes

Thank you