Skip to content

CSS .Less Guide

Jump to bottom
Callum Newman edited this page Sep 26, 2024 · 3 revisions

CSS in ProteanCMS

The CSS for a ProteanCMS website is divided into two main areas:

  1. CSS for the website
  2. CSS for the admin system

Both areas use Bootstrap 3 and .less for styling.

For more information, refer to these resources:

LESS in ProteanCMS

ProteanCMS and its XSLT have a built-in LESS processor.

  • In debug mode, the website runs a .less file through a server-side handler, which compiles the .less into CSS in real-time.
  • In live mode, the system checks if a cached .css file exists and is still valid. If not, it processes the .less file and saves it as CSS. This is handled by a custom XSLT function called BundleCSS.

Website CSS Structure

The CSS for the website theme is organized as follows:

  • /ewthemes/themefolder/css/bootstrapbase.less
    This file contains references to Bootstrap's core styles and any custom .less files required for the theme.

  • /ewthemes/themefolder/css/variables.less
    This is a copy of the Bootstrap variables file, allowing for custom theme settings and adjustments specific to the site’s design.

Clone this wiki locally