SocialvDocs

1. NodeJS
   • Windows – Download and install node.js from https://nodejs.org/en/ Install latest LTS version
   • Linux – Install with terminal by this link https://github.com/nodesource/distributions/blob/master/README.md#installation-instructions
   • Mac – Download and install node.js from https://nodejs.org/en/download/ install LTS version
2. Gulp
   • Gulp is a toolkit to automate & enhance your workflow for development.
     https://gulpjs.com/docs/en/getting-started/quick-start

• Template
  • gulp+hbs
    • src
      • assets
        • css
        • scss
        • js
        • images
        • vendor
      • template
        • app
          • all app html pages
        • backend
          • all backend html pages
    • gulp
      • all gulp task here
    • JsonData
      • all sidebar list item come with json file
    • gulp.config.json
    • gulpfile.js
    • package.json
  • html
    • assets
      • css
      • js
      • images
      • vendor
    • app
      • all app html pages
    • backend
      • all backend html pages
  • documentation
    • asset
    • index.html

<section class="... overview-block-ptb">
  [YOUR CONTENT]

</section>
                                        

Note Use this helper class to maintain all page section spacing. You can also use overview-block-pt for only padding top and overview-block-pb for only padding bottom.

<div class="main-color">
    [YOUR TEXT CONTENT]
</div>
                                        

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

<div class="green-bg">
    [YOUR CONTENT]
</div>
                                        

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

<div style="background-image:url(Path); ">
    [YOUR CONTENT]
</div>
                                        

If your background is small and you want to use repeated background then use styling property background-repeat and set the value repeat or no-repeat. See the example below:

<div style="background-image:url(Path); background-repeat:no-repeat;">
    [YOUR CONTENT]
</div>
                                        

If you want to use your background like cover or cointainer. You just need to add styling property background-size and set the value cover or cointainer. see the example below:

<div style="background-image:url(Path); background-size:cover;">
    [YOUR CONTENT]
</div>

<div class="iq-over-black-80">
    [YOUR CONTENT]
</div>
                                        

Structure: .iq-over-{color}-{opacity}. For Example, .iq-over-black-80

• Text Alignments
• Alerts
• Badges
• Carousel
• Offcanvas
• Columns
• Tables
• Buttons

"theme_color": "theme-color-default",
colors: {
      "--primary": "#3a57e8",
      "--info": "#08B1BA",
},
choices: 'theme-color-default', 'theme-color-blue', 'theme-color-red', 'theme-color-purple', 'theme-color-cyan', 'theme-color-green'
                                        

:root {

   @mixin custom-color-variables($color-name: 'primary',$color-value: $primary) {
         --#{$variable-prefix}heading-color: #{shade-color($color-value, 80%)};
         --#{$variable-prefix}#{$color-name}: #{$color-value};
         --#{$variable-prefix}#{$color-name}-shade-80: #{shade-color($color-value, 80%)};
         --#{$variable-prefix}#{$color-name}-shade-60: #{shade-color($color-value, 60%)};
         --#{$variable-prefix}#{$color-name}-shade-40: #{shade-color($color-value, 40%)};
         --#{$variable-prefix}#{$color-name}-shade-20: #{shade-color($color-value, 20%)};
         --#{$variable-prefix}#{$color-name}-tint-90: #{tint-color($color-value, 90%)};
         --#{$variable-prefix}#{$color-name}-tint-80: #{tint-color($color-value, 80%)};
         --#{$variable-prefix}#{$color-name}-tint-60: #{tint-color($color-value, 60%)};
         --#{$variable-prefix}#{$color-name}-tint-40: #{tint-color($color-value, 40%)};
         --#{$variable-prefix}#{$color-name}-tint-20: #{tint-color($color-value, 20%)};
         --#{$variable-prefix}#{$color-name}-rgb: #{to-rgb($color-value)};
   }

   @include custom-color-variables('primary',$primary);
   @include custom-color-variables('info',$info);
}
                                        

You can change the color with a single action.

• By changing some colors of variables in a file. Example is given below.

File Structure

• gulp+hbs
  • src
    • assets
      • scss
        • Custom
          • _variable.scss

If you wish to change the color of defined variable, you can follow the below action.

For example you have to change the color of variable $primary as #50b5ff then change the variable color in variable.scss file.

$primary: #50b5ff !default;
$info: #d592ff !default;