Fluidal is based upon the Bootstrap framework and uses Carbon Fields as the underlying method for manipulating custom fields. On most sites, Gravity Forms will also be installed and configured.
The Fluidal theme is then built upon these solid foundations with speed and efficiency of primary importance.
Fluidal uses the default Bootstrap breakpoints as below:
Breakpoint | CSS class | Container width |
---|---|---|
Extra small | - | ≤ 575px |
Small | sm | 576px - 767px |
Medium | md | 768px - 991px |
Large | lg | 992px - 1199px |
Extra large | xl | 1200px - 1399px |
Extra extra large | xxl | ≥ 1400px |
Full width | fluid | Maximum browser width |
These are useful to know should you wish to override some of the default PHP templates or use the Bootstrap row to write your own custom layout.
All images should be sized accordingly and compressed to keep file sizes small.
As well as the default sizes which WordPress creates, images should be uploaded at 800 x 600px (or a derivative of the 4:3 aspect ratio with a minimum width of at least 800px wide).
Using these dimensions ensures that when the website is viewed on smaller screens, all images will always be nicely aligned and displayed correctly.
If an image is specifically intended to be displayed at full browser width e.g. a background image on a container, then this should generally be 1500 x 600px (or taller). Furthermore, for a full window height image, we would recommend approx 1500 x 800px or greater. Background images for parallax should ideally be 2000 x 1000px. This is to ensure the effect works perfectly on all browsers and on all devices.
When selecting background images, be aware of where the focal point is, as the image will naturally get cropped from the left and righthand sides of the image at smaller screen sizes.
Your site will be built with a child theme associated to the parent Fluidal theme. Using a child theme allows for bespoke customisation and to override templates as well as creating new rows or further development specific to your requirements.
Therefore any custom PHP, CSS or Javascript/jQuery must reside in the child theme rather than the parent Fluidal theme. This ensures that future updates to the core Fluidal theme will not delete any customisations.
If you have any queries or issues, then contact us for further assistance.