# 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](https://lesscss.org/)
- [Bootstrap 3 Documentation](https://getbootstrap.com/docs/3.3/)

## 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.

---

- [Back to ProteanCMS Version 5](/Front-End-Developer-Guide/v5)

---