Using the theme defined into the Style guide
The theme defined into the style guide is included into the Back Office. It comes from tao/views/css/tao-main-style.css
To prevent conflicts with current style, the style applies only to elements of a container with the class tao-scope
. For example, to use buttons, you need to wrap them into a container with this class:
Info button
SASS
TAO uses SASS to create the TAO main theme.
Structure
Main and bootstrap
The folder tao/views/scss/
contains the main theme (tao-main-style.scss
) as well as a bootstrap (inc/bootstrap.scss
) that provides variables, functions and mixins you can reuse into your own SASS files.
Extension’s custom styles
You can create your own style sheets into a specific extension. You need to create a structure according to the hierarchy described into Front Structure.
In extension’s SCSS files, include the bootstrap.
@import "inc/bootstrap";
.my-style { ... }
Do not forget to add the path to the bootstrap into your compiler’s options (--load-path=tao/views/scss
)
Compiling
In order to compile (or watch) your SASS files to the target CSS, you can either use:
-
The grunt task provided with TAO (see Front Tools)
-
The SASS CLI tool provided by SASS (requires ruby and the sass gem)
- Your favorite IDE SASS plugin
Build using Grunt
To compile the main theme, you need the Front Tools up and running. Then open a terminal into tao/views/build
.
For example to compile CSS files for the TAO extension :
grunt taosass
(grunt {nameOfTheExtension.toLowerCase()}sass
)
To compile files as you edit (watching):
grunt watch:taosass
(grunt watch:{nameOfTheExtension.toLowerCase()}sass
)
Your theme
To ensure your theme is compiled during the build phase, add new line into {extension}/views/build/grunt/sass.js
(if the file does not exists, you can copy it from another extension)
By example, if you want taoQtiTest/views/scss/creator.scss
to be compiled to taoQtiTest/views/css/creator.css
, edit the file taoQtiTest/views/build/grunt/sass.js
to add the line:
sass.taoqtitest.files[root + 'css/creator.css'] = root + 'scss/creator.scss';