Skip to content

Theming

Jump to bottom
harishkumar gangula edited this page Oct 16, 2017 · 1 revision

Pre Requirements

  1. Node v6.11.3
  2. gulp (npm install -g gulp)
  3. bower (npm install -g bower)
  4. Cassandra (optional if not installed and configured it uses in-memory for session store)
  5. semantic ui (npm install semantic-ui --save)

Setup Instructions

  • RUN 'npm install'
  • RUN 'bower cache clean'
  • RUN 'bower install --force'
  • RUN 'npm install -g gulp'
  • RUN 'npm install semantic-ui --save'
  • RUN 'cd semantic/'
  • RUN 'gulp build'
  • RUN gulp theme --create "name of your theme"
  • RUN 'gulp themes'
  • RUN gulp theme --watch "name of the theme to be watched"

Build Commands

  1. gulp theme --create "name of your theme" ----> this command create the theme with specified name.

    example:: gulp theme --create material 
          creates material theme in src/semantic/src/themes

  2. theme.config --->To override a theme for an individual element specify theme name.

     example::
 @container  : 'default';
 @site       : 'material';
 @card       :  'github';
 refer material theme theme.config file  in src/semantic/src/themes/material/theme.config.

  3. gulp themes ----> this command creates all the themes.

  4. gulp theme --watch "name of the theme to be watched" ----> this command will build the theme again if any changes made to the theme.

        example:: gulp theme --watch material
                  build the theme again if any changes made to the theme

P.S :: All the themes generated will be stored in src/app/themes

Modifying Theme

  1. Copy the default theme from src/semantic/src/themes and change the name of it.

    example:: default theme in src/semantic/src/themes/default

  2. theme.config --->To override a theme for an individual element specify theme name.

     example::
 @container  : 'default';
 @site       : 'material';
 @card       :  'github';
 refer material theme theme.config file  in src/semantic/src/themes/default/theme.config.

  3. gulp themes ----> this command creates all the themes.

  4. gulp theme --watch "name of the theme to be watched" ----> this command will build the theme again if any changes made to the theme.

        example:: gulp theme --watch default
                  build the theme again if any changes made to the theme

P.S ::All the themes generated will be stored in src/app/themes

References:-

  1. Semantic Theming
  2. LESS
Clone this wiki locally