Custom CSS Editor & Responsive Controls

Liam Handford | February 1st, 2019

We’ve been busy adding extra functionality to give you more control with CSS, and superior responsiveness of your content.

Custom CSS Editor

Canvasflow has always made it easy for users to build and customise the styles that power the design of their articles. From text colour to font size, canvas padding to background colour – making global style changes can be made in just a few clicks – and with no coding knowledge required.

These controls are great for users with no coding background or limited resources, but what if you have a working knowledge of CSS, or access to a front-end web developer?

From today, using the new ‘Advanced CSS Editor’ feature, users with a knowledge of CSS can take advantage of being able to write custom CSS and begin to push the design capability much further.

custom css

Each text component can be individually targeted, or rules can be added at the canvas level. Any css changes update in realtime and Canvasflow manages all custom CSS added in an intelligent way, ensuring that any conflicts with existing styles are automatically handled. This leaves you to focus on creating stunning article designs.

With the advanced css editor, you are not limited to what you can achieve.  Here are just a few ways you might use the new Custom CSS feature:

  • Add drop shadows to headlines or titles
  • Use pseudo elements like :before and :after to insert attributes
  • Add additional spacing or border effects
  • Add transition effects and :hover states
  • Add a drop cap to the start of a paragraph
  • Override the default styling of the gallery and image components

A Responsive Canvas

Canvasflow now offers the ability to define the canvas padding values in percentages as well as pixels.  Setting a percentage based padding enables the canvas to automatically respond to the device it is being viewed on.  This allows a higher padding value to be used when content is viewed on desktop, while reducing the padding when viewed on a mobile, helping to maximise the screen real estate available.

 

responsive padding

 

To begin using percentage based responsive padding, navigate to your chosen style, select the ‘Canvas editor’  and change the ‘Canvas Padding Unit‘ from ‘px‘ to ‘%’.  Next, set the appropriate padding values in the appropriate fields.  You can easily test how the values you set affect the canvas using the workspace preview.

For more details on customising the canvas, check our help documentation.

responsive padding

 

Base Size Font Control

You may have noticed a new option in the Text Components section of the Style Editor – ‘Base Font Size’.

This features enables you to independently manage the font size for all text components, for different device types.  For example, increasing the ‘Desktop‘ font size will make text appear larger when displayed on a desktop device.  You can test how the values you set affect the font size across different devices by using the workspace preview feature.

This functionality helps you deliver a mobile-first font size without limiting the reading experience on desktop or tablet.

 

responsive font sizes

 

As always, you can find a full list of updates via our changelog – alternatively if there’s functionality you want to see in Canvasflow, drop us a Feature Request.


Go with TheFlow, stay in the know

Subscribe to our monthly newsletter TheFlow and stay up to date with everything Canvasflow