Dev Update 9

Updates To Call To Actions

The majority of this update centres around the background image.
Previously, the image was used within a standard <img> tag, which worked fine, however, was limiting especially when it came to 'fixing' the image - where the image remained in place whilst the content scrolled over it.
The main issue for not having done this is because it would mean using in-line styling on the sites which has historically been deemed bad practice when it comes to CSP (Content Security Policy). In theory, malicious css could be injected by a compromised browser to glean data from a user.
Scott Helme writes an interesting article on this and whilst he is debating removing in-line styling from down-grading the Security Headers score, we thought it best to find an implementation that didn't cross over into the is area.
So, we have developed a way of dynamically generating background images so that they are imported exactly the same way as any style sheet is from our CDN (Content Delivery Network). Thus negating any issues that may compromise your's or your user's security but now gives us the ability apply css attributes such as fixing the background, plus others which are in the pipeline.

We have also added image masks. These are SVG's which sit over the image and effectively clip the image to the path of the SVG.
The image below, show this in practice (albeit an early implementation) where the InDesign screenshot is in the background and it now appears to have a curved bottom rather than being the bog-standard rectangular appearance!
- Image Mask
What this means is that your site layouts can be a lot more fluid rather than being so squarey.
Pretty neat, eh?! ...well I think so, but as you've probably guessed, I don't get out much :)

Because of the additional options we have separated the background options out from the layout options and grouped them under the imaginatively titled 'Background' label.
Although this is currently only available for the 'Call To Action' sections, we will be applying it to the 'Advanced Headers', early next week. We will also be looking into the practicality of adding backgrounds to most of the other sections, such as 'Call To Action Groups' and 'Pricing Tables'.
We don't want to over-cook it and make it available on everything because there are issues such as the practicality of implementation as well as the 'is it actually necessary' factor, which accounts for a lot of development decisions.
- New Background Options

Quite a bit of additional functionality has been added to the Call To Action Groups.
These are becoming quite popular in site builds so we wanted to add a few additional settings for you to play with to help your site stand out.

Vertical positioning allows you to effectively "layer" the content of the Call to Action Groups.
Moving the vertical positioning slider, effectively adds negative margin to the top when in a positive value, and negative margin to the bottom when in a negative value.
What this does is allow the content to break out of it's section container and provide a slight overlap of the content either above or below.

- CTA Group Alternate Images
You can now alternate the images for the call to action groups.
This allows you to give them a different look if you want a look that's a bit less repetitive

Another implementation is the ability to control the width of the Call To Action Group.
This means that the group of items no longer needs to span the full width of the section.
We have also added the ability to control the alignment of the items so that they can be left, center or right aligned within their section.
This should have a more obvious applications once the background images are implemented so that the balance of the group can be offset with the content of the imagery, allowing for even more variety in appearance across sites.