> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemreference/wmt/styling.md).
# Styling
WEM uses Bootstrap v3 as its base design system. While there are ways to use other design systems, the generated HTML is currently compatible only with Bootstrap v3.
### File Structure
Depending on the design template you copied via the WMT tool, the styles structure may look something like this:
```
/my-design-template
/styles
/bootstrap
/bootstrap-extensions
/custom
/fonts
/wem
default.less
email.less
pdf.less
```
The folder structure is fixed but can be modified. The `/bootstrap` and `/bootstrap-extensions` folders are reserved for Bootstrap Less files. You can make additional changes in the `/custom` folder, which is empty by default. The `/fonts` folder contains FontAwesome v4 and Glyphicon font icons, while the `/wem` folder is reserved for WEM-specific components.
#### styles/default.less
By default, a Bootstrap stylesheet is generated from the default Less files in the `/styles/default.less` file. The `<% Uses Bootstrap [version] %>` template part, or the absence of it, determines which Bootstrap version is used to compile `default.less` into `default.css`. This process occurs automatically when you push changes to the design template.
#### styles/email.less
This file is processed by the WMT server and compiled into `/styles/email.css`. This stylesheet is used in emails sent by your WEM application.
#### styles/pdf.less
This file is processed by the WMT server and compiled into `/styles/pdf.css`. This stylesheet is used in PDFs generated by your WEM application.
### CommonStyles Template Part
By using the `<% CommonStyles %>` template part, you include the default WEM runtime styles compiled from `/styles/default.less` as well as the styles from the included custom controls in your WEM project.
While it is possible to omit this template part, you would then need to manually add the mandatory stylesheets of the WEM runtime. The paths are determined by the runtime and may change in the future, so we advise using the template part instead.
```html
```
### Custom Design System
If you want to use your own design system instead of Bootstrap v3, you can simply add your own CSS stylesheets to the design template. However, we recommend overwriting the `/styles/default.less` file with an empty comment like `/**/` or `body{}`. This is necessary because the WMT server expects this file and wants to compile it into `default.css`. Making this file "empty" prevents the Bootstrap Less file from being compiled and included in your website, avoiding unnecessary bloat from having both the default Bootstrap design system and your own.
To ignore using Bootstrap, the `/styles/default.less` file should be made "empty" as follows:
```css
body{}
```
The location of your new design system may vary, but to be safe, either avoid using the reserved `/styles` folder altogether or use the `/styles/custom` folder.
Putting everything together, your design template would include an additional entry for your custom CSS file:
```html
<% CommonStyles %>
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.wem.io/platform/wemreference/wmt/styling.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.