Bootstrap 3 Themes
- Default (Default bootstrap 3 theme)
- Flatly
- Yeti
- superhero
Theme source: https://bootswatch.com/
Themes - file structure
-
images - Contain all images related to the theme
-
infragistics.theme.less - The root file which import all partial files.
-
Modules - Contain all theme styles related to ignite ui modules.
-
Styles-guide - In progress theme style guide
-
framework.less - Contain all styles, that are needed, in order to make ignite UI component's to work properly witch jQueryUI components.
-
variables.less - Theme variables.
-
ignite-ui-variables.less -Theme variables.
-
mixins.less - Contain all mixins related to Ignite UI components
Note: the root file "infragistics-theme-less" is the only file that needs to be compiled to .CSS
Note: The order of File "@import" inside "infragistics.theme.less" is important! In order the theme to work correctly.
File order:
// Bootstrap Theme variables
@import "variables.less";
// Ignite UI Theme variables
@import "ignite-ui-variables";
// Ignite UI Mixins
@import "mixins.less";
//JQuery UI
@import "framework.less";
//Ignite UI styles
@import "modules/modules.less";
// Font styles
@import (css)"icons-styles.css";
Icons web font
*** css/structure/fonts *** hold all files related to icons web font
To add/remove/change icons form the web font:
- Go to icomoon.io/app and upload the file "jqurey-ui.svg" located in: css/structure/fonts
- Make the desired modification, download and replace the changed font.
IMPORTANT: in order the font to work you need to specify the prefix for the icons clsss. In "icomoon.io", font settings. The prefix should be "ui-icon-". Keep the name for the font the same in order to override the existing font.