First, you need to get the source code of Skin module by the command: git clone https://github.com/exoplatform/platform-ui.git. The project named platform-ui is generated.
Go to the platform-ui\platform-ui-skin\src\main\webapp\skin
folder to learn about its structure.
bootstrap
folder includes all .less
, .js
and image files of Bootstrap.
fonts
folder includes font files.
images
folder includes all images, and background images (including .psd
files) of eXo Platform.
commons
, ecms
, calendar
, forum
, integration
, platform
, social
, wiki
folders include all stylesheets of each eXo Platform application.
component
folder includes all stylesheets of icons and UI components, such as button, table, drop-down menu, as below:
_bootstrap.less
file includes all .less
files of the bootstrap
folder above.
_font-icon.less
file defines icons of eXo Platform.
_responsive.less
file defines responsive layout of eXo Platform.
_size-responsive.less
file defines size of icons on mobile and tablet devices.
Core.less
file should import bootstrap.less
, variables.less
, mixins.less
, and all files in the component
folder.
mixins.less
file defines functions and mixins that are used commonly in eXo stylesheet.
reset.less
file defines global values of eXo stylesheet (for example, headings, bullets).
variables.less
file defines values that overwrite the variables of Bootstrap and set new variables of eXo stylesheet.