Hi all,
I’ve just pushed out a nice update for Source which fixes a few things up and also adds a few nice things too.
We have added 3 new stacks to the Add-on pack (Utility Classes, Dark Mode Vis and Image Fit).
The Utility Classes stack is perfectly suited to use alongside our Coder stack and this combo now really lets advanced users (with knowledge of CSS and HTML) to hand build large parts of their sites.
The Image Fit stack is great for when you want an image to take up all of the available space - e.g in a grid item. With this you can make really great image grids (example here using Grid Plus). It also lets you specify a max-height which is great if you want to create ‘card’ type layouts (various examples here).
The Dark Mode Vis stack lets you conditionally show / hide content based on the web page visitor’s preference for Dark or Light mode. It can be used alongside the regular Dark Mode stack (which is for global dark mode stylings) or on its own.
Here is a more detailed overview of Source v1.3:
Coder stack
- Added new content type of CSS - this is useful if you want to create a partial, external or template that includes some custom CSS (that you would normally add to the page settings).
- Option to add data attributes to the wrapper
Utility classes stack
- Option to add different types of utility classes to the page. These can then be used in the Stacks 4 classes boxes or with Coder stack
- Add all or only ones that you need in your project / page
- Class types include borders, margins, padding, flex box, position, size, z-index, overflow and display
- Custom values can be set for the borders, padding and margins
jQuery enabler stack
- Source doesn’t use / need jQuery but if you want to add your own jQuery code to the page then you can first enable jQuery with this stack
Dark mode Vis stack
- Stack to conditionally show content depending on the user’s preference for dark / light mode.
Image fit stack
- Add an image to take up all of the space in its container (a great option for adding images to grid items / building your own galleries with the Source grids!).
- Option to limit the height of an image (great for creating cards with the same height images!)
Source Base stack
- Option to limit the size of all images (including SVGs) in Edit mode. This is great for space saving in Edit mode!!
Nav stack
- More branding control options with site title (heading tag, font size, case)
- Option to adjust the border radius of the active links background
Heading stack
- Fixed issue if specifying a custom font name
- Added additional weight options (for if using with a self loaded font)
Paragraph stack
- Fixed issue if specifying a custom font name
- Added additional weight options (for if using with a self loaded font)
Image stack
- Option to limit image size by height or width (previously was limited by width only)