Index: arms/docs/aRMs-Document.html =================================================================== diff -u --- arms/docs/aRMs-Document.html (revision 0) +++ arms/docs/aRMs-Document.html (revision 7307f90f91cf368f8085403e0f0646ae05bda84d) @@ -0,0 +1,570 @@ + + + + + + + + Documentation | Your ThemeForest item Name + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ + + +
+ + + + + + +
+ + + + + +
+
+ + +
+

A-RMS Document

+ + + + + + + + + + + + + + + + + + +
+
+ + +
+

1. 배경

+

A-RMS는 ALM 시스템(Atlassian Jira, Redmine 등)과 연계하여 제품(Service)(기반의 요구사항( Issue)을 공유할 수 + 있는 RMS (Requirement Management System)입니다. +

+

+ 현존하는 이슈 기반 요구사항( Issue) 관리 시스템은 없으므로, A-RMS를 만들어서 제품(Service)별 요구사항( Issue)을 관리 및 전파하여 추적성을 확보하고 + ALM 시스템과 통합하여 제품(Service)기반 프로젝트 진척도를 파악 할 수 있는 가시성을 제공하는 시스템 입니다. +

+

제품(Service)별 요구사항( Issue ) 기반 진척상황 파악 : 제품(Service) 진척 상황을 쉽게 파악할 수 있는 시스템이 부재하여, 프로젝트 참여자들은 + 실시간으로 제품의 진행 상황을 파악하기 어려운 점이 있습니다. +

+

요구사항( Issue) 이력 관리 부재: 요구사항( Issue)의 등록, 채택, 거절 및 변경 이력을 관리하지 않음으로써, 프로젝트의 진행 과정에서 어떤 변화가 있었는지 + 추적하기 어려운 상황이 발생합니다. +

+

제품(Service)별 요구사항과 ALM Project Issue간 매핑 어려움: 제품(Service) 와 요구사항( Issue) 간의 매핑이 복잡하여, 프로젝트 기반의 작업 + 플로우를 제품(Service) 기반으로 확장하기 어렵습니다. 이로 인해 요구사항과 실제 제품(Service) 간의 일치 여부 파악이 어려워지는 점이 있습니다. 이를 파악하기 + 쉽게 해결하고자 합니다. +

+

요구사항( Issue) 변경 권한 관리 필요성: 요구사항( Issue) 변경에 대한 권한 관리가 필요하며, 이를 통해 요구사항( Issue)의 변경이 비효율적으로 이루어지거나 + 예기치 못한 변경이 발생하는 상황을 방지하고자 합니다. +

+

개발 진척 상황 보고의 어려움: 개발 진척 상황을 문서화하여 개발 팀장에게 보고하는 과정이 복잡하고 시간 소모적으로 진행되며, 보고 자료의 작성에 상당한 시간과 노력이 + 소요됩니다. +

+

SRS에 적시되는 요구사항( Issue)의 작성자: 현재 SRS에 기재되는 요구사항( Issue)은 주로 개발자가 작성하고 있습니다. 이는 개발자의 기술적인 시각으로부터의 + 관점이 강조될 수 있으며, 고객이나 업무 담당자의 요구와 일치하지 않을 수 있습니다

+

요구사항( Issue)의 발의자: 요구사항( Issue)의 발의는 고객 또는 업무 담당자와 직접적으로 상호작용하는 사람들이 주로 수행하고 있습니다. 또한 기획자나 내부 개발자 + 역시 요구사항( Issue)을 발의하는데 관여하고 있습니다. 이로 인해 다양한 역할들 간의 의사소통 부재와 일관성의 결여가 문제로 작용할 수 있습니다. +

+

요구사항( Issue)의 발의자: 요구사항( Issue)의 발의는 고객 또는 업무 담당자와 직접적으로 상호작용하는 사람들이 주로 수행하고 있습니다. 또한 기획자나 내부 개발자 + 역시 요구사항( Issue)을 발의하는데 관여하고 있습니다. 이로 인해 다양한 역할들 간의 의사소통 부재와 일관성의 결여가 문제로 작용할 수 있습니다. +

+

요구사항( Issue)에 대한 이력 미관리: 현재 요구사항( Issue) 변경에 대한 이력은 SRS에 기록됨에도 불구하고, 변경 사항의 추적성이 부족합니다. 변경 사항의 최종 + 형상만 확인되며, 중간 과정의 변경 및 이력이 적절히 관리되지 않습니다. +

+

요구사항( Issue) 충족 여부 확인의 어려움: 요구사항( Issue)을 발의한 사람들이 제시한 대로 제품(Service) 개발되고 있는지 확인하는 것이 어렵습니다. 개발 + 팀장을 통해 요구사항( Issue)의 해석과 개발 진행 상황을 전달받기 때문에, 요구사항( Issue)의 충족 여부를 정확하게 확인하기 어려운 상황이 발생합니다. +

+

이러한 문제점들은 요구사항( Issue) 관리 및 프로젝트 진행 상황 파악에 대한 투명성과 효율성을 제한하는 요인으로 작용하고 있습니다. 이러한 배경을 통해 새로운 요구사항( + Issue) 관리 시스템의 필요성과 중요성을 높이고자 합니다. +

+
+ +
+ + +
+

2. 내용

+

2.1 경쟁 제품 조사 및 비교

+

Atlassian 제품군 요구사항 관리 툴 조사

+

Atlassain 제품과 connector 를 제공하는 솔루션으로 아래의 링크는 요구사항에 관련한 Atlassian 의 자라 사용방법에 관련된 내용입니다.

+
+

경쟁 제품 : + Jira + Software Support +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
솔루션 명WEB 링크
Modern Requirements + Azure + Requirements Management Tools +
Visure + visuresolution + +
reqtest + Reqtest +
doors + jazz +
jama + jamasoftware +
+
+
    +
  • 현재 5가지 종류의 RMS는 Atlassain과 분리된 채 독자적 제품을 구성하는 경우입니다.
  • +
  • 위의 제품들은 ALM의 라이프 사이클에 녹아들지 못하는 형태로 구성되어, 연관성 및 관리성, 일관성에 문제점이 있습니다.
  • +
  • 유료로 사용을 하며 가격이 비싸다는 점이 있습니다
  • +
  • 아틀라시안 제품군과는 전혀 다른 UI 및 구성을 가지고 있으며 활용성 측면에서 낮은 상태입니다.
  • +
  • 솔루션에서는 제품 기준 (이슈 기반) 진척사항을 확인하는 DashBoard는 제공하지 않습니다.
  • + +
+
+
+

2.2 추진과제

+

ARMS 도식화 모형

+

※ ARMS 적용 후 ALM단계별 설명

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
구분단계설명
1요구 사항 관리 + 요구사항( Issue)을 수집하고 정립 + 프로젝트 별 이슈 기반 추적 메트릭스를 통한 제품의 가시성 ( Dashboard ) 관리 +
2이슈 관리 + 프로젝트 별 이슈 기반 추적 메트릭스를 통한 제품의 가시성 ( Dashboard ) 관리 +
3문서 관리 + 요구사항( Issue) 기반 이슈 생성 및 관리(ex : 요구사항( Issue) 정립부터 코드 개발에 이르기까지의 전 과정 이슈 추적 관리) +
4문서 관리 + 프로젝트 문서를 온라인 화 및 관리 + 지식 저장소의 역할 +
5CI/CD 관리 + 코드를빌드하고(자동화된UnitTest, 정적분석및자동화된프로젝트문서산출) 아티팩트 생성 +
6릴리즈 관리 + 아티팩트 공유 및 배포 레파지토리 관리※ ARMS 적용 후 ALM (ROSE) 프로토타입 +
+
+

1. 제품 이해 관계자들이 요구사항( Issue)을 쉽고, 단순하게 올릴 수 있습니다. (누가, 언제, 어떤 변화 이력이 있는지에 관한 시스템을 지원)

+

2. WORKS(jira)에 특정 label을 달고 자동으로 요구사항( Issue) 이슈가 등록되며, 선정된 요구사항( Issue)을 토대로 DOCS(confluence)에 + SRS가 기재되어야 합니다.

+

3. ARMS가 이를 수집하여 현재 상태를 표시합니다

+
+
+

2.3 기술의 구성A-RMS 시스템 구성도

+ 시스템구성도 + + +

A-RMS 시스템 설명

+

1. 사내, 사외에서 요구사항( Issue)을 손쉽게 등록할 수 있도록 Device 의 다양성을 대응할 Frontend Application

+

2. 다양한 Frontend Application 에 대응하기 위한 표준화된 Backend Application과 표준 통신 프로토콜 ( JSON ) API 처리 + 시스템

+

3. 요구사항( Issue)이 등록되는 대상은 제품, Jira 는 제품을 구성하는 프로젝트 ( 1:1 ~ 1:N ) 이므로 두 시스템을 맵핑 할 수 있는 유연한 분류체계 + 시스템

+

4. 진척상황(Dashboard)은 실시간 요소가 아니며, Jira 에 추가 부하가 없도록 함

+

5. Jira 에 등록된 정보(API)를 배치처리하여 데이터를 누적하기 위한 정보 저장 및 검색을 지원하는 색인, 검색엔진 시스템

+

6. 각역할별권한처리시스템(Rolebase)-LDAP,AD,CROWD 인증 연동

+

7. 요구사항( Issue) 이력관리시스템(분류체계시스템의서브기능)

+

8. JIRA 등록 처리 시스템

+

9. Private Cloud Service 를 위한 Docker 지원 서비스 솔루션 : Kubernetes

+
+
+
+

A-RMS 기술 요소 특징

+

추가적인 기술적용의 특징요소는 다음과 같습니다.

+

1. A-RMS 는 대한민국정부가 인증한 전자정부표준프레임워크 3.6 을 기준한 Framework 를 Backend 로 사용합니다.

+

2. 누구나 재사용 할 수 있는 아키텍쳐를 적용하고, 확장할 수 있도록 PLE(Product Line Engineering) 기법을 적용

+

3. Atlassian UI 구성인 Bootstrap + jQuery 및 CSS 를 채택하여 개발 진행 ( Design 요소가 필요 없습니다 )

+

4. Frontend 어플리케이션과 Backend 어플리케이션을 분리 개발 및 통신 프로토콜을 JSON 표준으로 채택하여 Frontend 개발이 Backend 영향없이 + 100% 분리하여 병렬 개발 가능합니다.

+

5. SonarQube 를 활용한 ( CPD, PMD, Checkstyle 등의 코드 퀄리티 측정 ) Sacle A 등급 코드 유지합니다

+

6. UnitTest Ccoverage 를 핵심인 분류체계 시스템에 한정하여 100%를 달성합니다.

+

7. 최종 산출 아티팩트를 Docker 로 구성( build automatioin)하고, Kubernetes 를 활용하여 배포 및 서비스 운영을 목표로 합니다.

+
+
+
+

A-RMS 분류 체계 시스템 제품(Service) – Project mapping

+

A-RMS 의 특징적 기술요소는 유연한 분류체계가 탑재된 서버사이드 시스템입니다

+

A-RMS 분류 체계 시스템 - 객체의 구조적 활용 중심의 시스템

+ +
    +
  • 입력된 요구사항( Issue)이 어느 제품(Service)에 요구하는 것인지. 해당 요구사항( Issue)과 JIRA mapping 정보 분류
  • +
  • 요구사항( Issue) 의시스템이력관리 (기능확장의유연성)
  • +
  • 요구사항( Issue) 자체의 구조관리 ( PM 과 기획자의 역할, 채택과 변경등 )
  • +
+

A-RMS(atlassian Requirements Managment System) 는 제품(서비스)관점의 JIRA 전용 RMS입니다. 제품(서비스) 중심으로 Jira + Project를 분석하고, 제품(서비스)중심으로 요구사항을 Jira Project에 전파합니다.

+ 요구사항 정보 +
+
+
+

3. 활용 방안

+

3.1 기대 효과

+

ARMS 적용 후 순기능

+
    +
  • 프로젝트 버전관리에 중요성 대해 인식이 높아질 것이며 릴리즈 날짜를 선정하고, 어떠한 요구사항( Issue)을 적용했는지에 관리를 할 수 있습니다.
  • +
  • 제품(Service)의 모든 관련자가 요구사항( Issue)을 기반으로 소통할 수 있습니다.
  • +
  • 상위 관리자는 현재 진행되는 모든 프로젝트의 진행 척도와 개발 진척사항을 확인합니다.
  • +
+ +

ARMS 적용 후 역할 별 효과

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
구분효과 설명
고객 면대면 + 고객의 요구사항( Issue) 실시간 채택여부, 개발 진척상황, 제품(Service) 적용 시점 확인 가능 +
기획 담당자 + 요구사항( Issue)의 이력 관리 및 분류, 구분, 변경에 대한 개발팀과의 소통 창구 개설 +
상위 관리자 + 전체 제품(Service) 개발 진척 상황 모니터링 +
개발팀 + 1. 명시된 요구사항( Issue) 을 근거로 이슈 생성
+ 2. 문서 작성
+ 3. 개발
+ 4. 리뷰
+ 5. 코드 분석
+ 6. 빌드
+ 7. 배포 FM Flos
+
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + FishEye: Tag 7307f90f91cf368f8085403e0f0646ae05bda84d refers to a dead (removed) revision in file `arms/docs/demo.html'. FishEye: No comparison available. Pass `N' to diff? Index: arms/docs/sampleDemo.html =================================================================== diff -u --- arms/docs/sampleDemo.html (revision 0) +++ arms/docs/sampleDemo.html (revision 7307f90f91cf368f8085403e0f0646ae05bda84d) @@ -0,0 +1,1433 @@ + + + + + + + +Documentation | Your ThemeForest item Name + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ + + +
+ + + + + + +
+ + + + + +
+
+ + +
+

Documentation

+

Your ThemeForest Item Name Here

+

Thank you so much for purchasing our item from themeforest.

+
+
+
+ +
+
+
    +
  • Created: 8 April, 2020
  • +
  • Update: 12 May, 2020
  • +
+
+
+

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

+
+ +
+ + +
+

Installation

+

Follow the steps below to setup your site template:

+
    +
  1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
  2. +
  3. Below is the folder structure and needs to be uploaded to your website or localhost root directory: +
      +
    • HTML/assets - Contains all of the assets referenced +
        +
      • HTML/css - Stylesheet files
      • +
      • HTML/images - Images files
      • +
      • HTML/js - Javacript files
      • +
      • HTML/sass - Sass files
      • +
      • HTML/vendor – All external libs.
      • +
      +
    • +
    • HTML/index.html - Homepage +
    +
  4. +
  5. You should upload all or specific HTML files as per your need.
  6. +
  7. You are good to go for adding your content now!
  8. +
+
+ +
+ + +
+

HTML Structure

+

iDocs follows a simple and easy to customize coding structure. Here is the sample for your reference:
+ The template is based on Bootstrap Framework

+
<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<!-- Your Title, Description, Stylesheets
+============================================= -->
+
+</head>
+
+<body data-spy="scroll" data-target=".idocs-navigation" data-offset="125">
+
+<!-- Document Wrapper   
+=============================== -->
+<div id="main-wrapper"> 
+  
+  <!-- Header
+  ============================ -->
+  <header id="header" class="sticky-top">
+   ......
+  </header>
+  <!-- Header End --> 
+  
+  <!-- Content
+  ============================ -->
+  <div id="content" role="main"> 
+    
+    <!-- Sidebar Navigation
+    ============================ -->
+    <div class="idocs-navigation bg-light">
+     .....
+    </div>
+    
+    <!-- Docs Content
+    ============================ -->
+    <div class="idocs-content">
+      <div class="container">
+        .......
+      </div>
+    </div>
+  </div>
+  <!-- Content end --> 
+  
+  <!-- Footer -->
+  <footer id="footer" class="section bg-dark footer-text-light">
+    <div class="container"> ...... </div>
+  </footer>
+  <!-- Footer end --> 
+  
+</div>
+<!-- Document Wrapper end --> 
+
+<!-- JavaScript -->
+</body>
+</html>
+

If you need more information, please visit bootstrap site: https://getbootstrap.com

+
+ +
+ + +
+

Sass

+

We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well. + You can find sass file here - HTML/assets/sass

+

Open the sass/_variables.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required .scss Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your stylesheet.scss File.

+
+ +
+ + +
+

Color Schemes

+

You can change your Website's Color Scheme in an instant. We have build 10 Color css file for change template primary color.

+
    +
  • color-blue.css - Blue Color
  • +
  • color-brown.css - Brown Color
  • +
  • color-cyan.css - Cyan Color
  • +
  • color-green.css - Green Color
  • +
  • color-orange.css - Orange Color
  • +
  • color-indigo.css - Indigo Color
  • +
  • color-purple.css - Purple Color
  • +
  • color-red.css - Red Color
  • +
  • color-teal.css - Teal Color
  • +
  • color-yellow.css - Yellow Color
  • +
+

Simply add Color CSS file link it in the Document <head>.
+ Make sure you add the css/color-blue.css stylesheet in your head after the css/stylesheet.css file linking from above mentioned 10 color css file.

+

For Example:

+
<head>
+<!-- Stylesheet
+============================== -->
+<!-- Bootstrap -->
+<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css" />
+<!-- Font Awesome Icon -->
+<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css" />
+<!-- Magnific Popup -->
+<link rel="stylesheet" type="text/css" href="assets/vendor/magnific-popup/magnific-popup.min.css" />
+<!-- Highlight Syntax -->
+<link rel="stylesheet" type="text/css" href="assets/vendor/highlight.js/styles/github.css" />
+<!-- Custom Stylesheet -->
+<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css" />
+
+<!-- Here goes your Colors Css -->
+<link rel="stylesheet" type="text/css" href="assets/css/color-orange.css" />
+</head>
+
+ +
+ + +
+

Theme Customization

+

We have include a Custom CSS File in the css Folder so that you can better handle your Customizations for New Styles or + Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the css/custom.css File and link it in the Document <head> after the css/stylesheet.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly.

+
<head>
+<!-- Stylesheet
+============================== -->
+<!-- Bootstrap -->
+<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css" />
+<!-- Font Awesome Icon -->
+<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css" />
+<!-- Magnific Popup -->
+<link rel="stylesheet" type="text/css" href="assets/vendor/magnific-popup/magnific-popup.min.css" />
+<!-- Highlight Syntax -->
+<link rel="stylesheet" type="text/css" href="assets/vendor/highlight.js/styles/github.css" />
+<!-- Custom Stylesheet -->
+<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css" />
+
+<!-- Here goes your custom.css
+============================================= -->
+<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
+</head>
+
+ +
+ + +
+

Logo Settings

+

The Logo Container can be found in the Header Container - <header>

+
<!-- Logo --> 
+<a class="logo ml-3 ml-md-0" href="index.html" title="iDocs">
+   <img src="images/logo-light.png" alt="iDocs"/>
+</a>
+<!-- Logo End -->
+
+
+ + +
+ + +
+

Layout

+

Documentation and examples for header, navbar, sidebar, footer

+
+ + + +
+

Header

+

The list of various header types & its descriptions are provided below for your reference:

+ +

Light

+

Header with white background Color & Dark text. See below image and code for more information.

+

+
<!-- Header
+============================ -->
+<header id="header" class="sticky-top"> 
+  <!-- Navbar -->
+  <nav class="primary-menu navbar navbar-expand-lg">
+    <div class="container-fluid"> 
+      .....
+    </div>
+  </nav>
+  <!-- Navbar End --> 
+</header>
+<!-- Header End -->
+
+ +

Dark

+

Header with dark background & Light text. See below image and code for more information.

+

+

Add the .bg-dark and .navbar-text-light Class to the <nav> Tag to display a Dark Header.

+
<!-- Header
+============================ -->
+<header id="header" class="sticky-top"> 
+  <!-- Navbar -->
+  <nav class="primary-menu navbar navbar-expand-lg bg-dark navbar-text-light">
+    <div class="container-fluid"> 
+      .....
+    </div>
+  </nav>
+  <!-- Navbar End --> 
+</header>
+<!-- Header End -->
+
+
+ +
+ + +
+

Navbar

+

Documentation and examples for powerful responsive navigation header

+

Left align

+

Header with Navigation alligned Left. See below image and code for more information.

+

+

Add the .justify-content-left class to the element of collapse to display a align left navbar.

+
<div id="header-nav" class="collapse navbar-collapse justify-content-start">
+  <ul class="navbar-nav">
+    .......
+  </ul>
+</div>
+
+ +

Right align

+

Header with Navigation alligned Right. See below image and code for more information.

+

+

Add the .justify-content-end class to the element of collapse to display a align right navbar.

+
<div id="header-nav" class="collapse navbar-collapse justify-content-end">
+  <ul class="navbar-nav">
+    .......
+  </ul>
+</div>
+
+ +

Center Align

+

Header with Navigation alligned Center. See below image and code for more information.

+

+

Add the .justify-content-center class to the element of collapse to display a align center navbar.

+
<div id="header-nav" class="collapse navbar-collapse justify-content-center">
+  <ul class="navbar-nav">
+    .......
+  </ul>
+</div>
+
+
+ +
+ + +
+

Sidebar

+

We have built fixed sidebar navigation with bootstrap scrollspy function for docs layout. which is automatically update navigation based on scroll position to indicate which link is currently active in the viewport.

+

The example below sidebar vertical navigation with bootstrap navs and scrollspy components and section of docs content.

+
<!-- Sidebar Navigation
+============================ -->
+<div class="idocs-navigation bg-light">
+  <ul class="nav flex-column ">
+    <li class="nav-item"><a class="nav-link active" href="#item_1">Item 1</a>
+      <ul class="nav flex-column">
+        <li class="nav-item"><a class="nav-link" href="#item_1_1">Sub Item 1.1</a></li>
+        <li class="nav-item"><a class="nav-link" href="#item_1_2">Sub Item 1.2</a></li>
+      </ul>
+    </li>
+    <li class="nav-item"><a class="nav-link" href="#item_2">Item 2</a>
+      <ul class="nav flex-column">
+        <li class="nav-item"><a class="nav-link" href="#item_2_1">Sub Item 2.1</a></li>
+        <li class="nav-item"><a class="nav-link" href="#item_2_2">Sub Item 2.2</a></li>
+      </ul>
+    </li>
+    <li class="nav-item"><a class="nav-link" href="#item_3">Item 3</a></li>
+    <li class="nav-item"><a class="nav-link" href="#item_4">Item 4</a></li>
+  </ul>
+</div>
+
+<!-- Docs Content
+============================ -->
+<div class="idocs-content">
+  <div class="container"> 
+    
+    <!-- Item 1 -->
+    <section id="item_1">
+      <h2>Item 1</h2>
+      <p>...</p>
+    </section>
+    <hr class="divider">
+    
+        <!-- Item 1.1 -->
+        <section id="item_1_1">
+          <h2>Item 1.1</h2>
+          <p>...</p>
+        </section>
+        <hr class="divider">
+        
+        <!-- Item 1.2 -->
+        <section id="item_1_2">
+          <h2>Item 1.2</h2>
+          <p>...</p>
+        </section>
+        <hr class="divider">
+    
+    <!-- Item 2 -->
+    <section id="item_2">
+      <h2>Item 2</h2>
+      <p>...</p>
+    </section>
+    <hr class="divider">
+    
+        <!-- Item 2.1 -->
+        <section id="item_2_1">
+          <h2>Item 2.1</h2>
+          <p>...</p>
+        </section>
+        <hr class="divider">
+        
+        <!-- Item 2.2 -->
+        <section id="item_2_2">
+          <h2>Item 2.2</h2>
+          <p>...</p>
+        </section>
+        <hr class="divider">
+    
+    <!-- Item 3 -->
+    <section id="item_3">
+      <h2>Item 3</h2>
+      <p>...</p>
+    </section>
+    <hr class="divider">
+    
+    <!-- Item 4 -->
+    <section id="item_4">
+      <h2>Item 4</h2>
+      <p>...</p>
+    </section>
+    
+  </div>
+</div>
+
+ +

Light Sidebar:

+

Light background Color & Dark text for light sidebar. See below image and code for more information.

+ +
+
+

+
+
+ +

Add the .bg-light class to the main sidebar navigation div element to display a light sidebar.

+
<!-- Sidebar Navigation
+============================ -->
+<div class="idocs-navigation bg-light">
+  ....
+</div>
+ +

Dark Sidebar:

+

Dark background Color & Light text for dark sidebar. See below image and code for more information.

+ +
+
+

+
+
+ +

Add the .bg-dark and .docs-navigation-dark class to the main sidebar navigation div element to display a dark sidebar.

+
<!-- Sidebar Navigation
+============================ -->
+<div class="idocs-navigation bg-dark docs-navigation-dark">
+  ....
+</div>
+
+ +
+ + + + +
+ + +
+

Box Layout Style

+
+

Default Layout Style is wide. Please add the .box class to the <body> Tag for box layout.

+
<body class="box" data-spy="scroll" data-target=".idocs-navigation" data-offset="125">
+
+
+ +
+ + +
+

Content

+

Documentation and examples for displaying typography, code, table, image and video and more..

+
+ + +
+

Typography

+

Documentation and examples for typography, headings, body text, lists, and more.

+

Headings

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeadingExample
<h1></h1>

h1. Heading

<h2></h2>

h2. Heading

<h3></h3>

h3. Heading

<h4></h4>

h4. Heading

<h5></h5>
h5. Heading
<h6></h6>
h6. Heading
+ +

Lead

+

Make a paragraph stand out by adding .lead

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

+
<p class="lead">
+   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+</p>
+ +

Inline Text elements

+

You can use the mark tag to highlight text.

+

This line of text is meant to be treated as deleted text.

+

This line of text is meant to be treated as no longer accurate.

+

This line of text is meant to be treated as an addition to the document.

+

This line of text will render as underlined

+

This line of text is meant to be treated as fine print.

+

This line rendered as bold text.

+

This line rendered as italicized text.

+ +
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
+<p><del>This line of text is meant to be treated as deleted text.</del></p>
+<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+<p><u>This line of text will render as underlined</u></p>
+<p><small>This line of text is meant to be treated as fine print.</small></p>
+<p><strong>This line rendered as bold text.</strong></p>
+<p><em>This line rendered as italicized text.</em></p>
+
+
+ +
+ + +
+

Code

+

Documentation and examples for displaying inline and multiline blocks of code

+ +

Inline code

+

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

+ +

For example, <section> should be wrapped as inline.

+
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
+ + +

Code blocks

+

Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the .pre-scrollable class, which will set a max-height of 340px and provide a y-axis scrollbar.

+

For example:

+
<p>Sample text here...</p>
+<p>And another line of sample text here...</p>
+
+

Have to use something like:

+
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
+&lt;p&gt;And another line of sample text here...&lt;/p&gt;
+</pre></code>
+
+ +

Syntax highlighter

+

We use Highlight Js for syntax highlight code snippet.

+

You can refer more information here: How to use highlight.js

+
+ +
+ + +
+

Table

+

Documentation and examples for opt-in styling of tables.

+

iDocs is based on Bootstrap 4, so you can easily use Bootstrap's table classes to style your table. Bootstrap Documentation

+ +

Bordered

+
<table class="table table-bordered">
+   .......
+</table>
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+ +

Striped

+
<table class="table table-bordered table-striped">
+   .......
+</table>
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+

NoteYou can refer more information in Bootstrap Documentation here: Bootstrap Documentation

+
+ +
+ + +
+

Icons

+

Font Awesome icon sets are used in iDocs.

+ +
<i class="fas fa-mobile-alt"></i>
+<i class="fab fa-twitter"></i>
+<i class="fas fa-credit-card"></i>
+<i class="fab fa-facebook-f"></i>
+
+

NotePlease go to their official documentation pages for a full list of icons: Font Awesome

+
+ +
+ + +
+

Image

+

Documentation and examples for opting images into responsive behavior and add lightweight styles to them—all via classes.

+ +

Responsive Images

+

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

+

Responsive image

+
<img src="assets/images/screenshot.jpg" class="img-fluid" alt="Responsive image">
+ +

Image lightbox

+

Show image popup when click on image:

+

image

+
<a class="popup-img" href="assets/images/screenshot.jpg">
+  <img src="assets/images/screenshot-thumb.jpg" class="img-fluid img-thumbnail" alt="image">
+</a>
+ +

Image Lightbox with Link

+

Show image popup when click on link: Click Here for Popup Image

+
<a class="popup-img" href="assets/images/screenshot.jpg">Click Here for Popup Image</a>
+ +

Image lightbox with Button

+

Show image popup when click on button: Click Here for Popup Image

+
<a class="btn btn-primary popup-img" href="assets/images/screenshot.jpg">Click Here for Popup Image</a>
+
+ +
+ + +
+

Video

+

Create responsive video embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

+ +

Embedded Video

+

Wrap any embed like an <iframe> in a parent element with .embed-responsive and an aspect ratio. The .embed-responsive-item isn’t strictly required, but we encourage it.

+
+ +
+
<div class="embed-responsive embed-responsive-16by9">
+  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7e90gBu4pas" allowfullscreen></iframe>
+</div>
+

NotePlease go to official bootstrap documentation for a full information of embed video: Bootstrap Documentation

+ +

Popup with Video

+

Show Youtube and Vimeo video popup when click on link:

+

Open Popup YouTube Video

+
<a class="popup-youtube" href="http://www.youtube.com/watch?v=7e90gBu4pas">Open Popup YouTube Video </a>
+ +

Open Popup Vimeo video

+
<a class="popup-vimeo" href="https://vimeo.com/45830194">Open Popup Vimeo video</a>
+
+ +
+ + +
+

Components

+

Setting up components is very easy. Here is the Some of shortcodes describe. also, iDocs is based on Bootstrap 4, so you can easily use Bootstrap's components: Bootstrap Documentation

+
+ + +
+

Accordion

+

You can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.

+

See below image and code for more information.

+

+
<div class="accordion" id="accordionDefault">
+  <div class="card">
+    <div class="card-header" id="headingOne">
+      <h5 class="mb-0"> <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Title</a> </h5>
+    </div>
+    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionDefault">
+      <div class="card-body">This is Accordion Content</div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-header" id="headingTwo">
+      <h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Title</a> </h5>
+    </div>
+    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionDefault">
+      <div class="card-body">This is Accordion Content</div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-header" id="headingThree">
+      <h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accordion Title</a> </h5>
+    </div>
+    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionDefault">
+      <div class="card-body">This is Accordion Content</div>
+    </div>
+  </div>
+</div>
+
+

Options:

+
+ + + + + + + + + + + + + + + + + + + + +
Type ClassFeaturesCode Example
.accordion-alternateAlternate Minimal Style for the accordions.
<div class="accordion accordion-alternate" id="accordionDefault">
+  .......
+</div>
.arrow-rightFor set arrow in right side in accordions
<div class="accordion arrow-right" id="accordionDefault">
+  .......
+</div>
+
+
+ +
+ + +
+

Tabs

+

Default Bootstrap Nav component combined with iDocs for unique tabs.

+

See below image and code for more information.

+

+ +
<ul class="nav nav-tabs" id="myTab" role="tablist">
+  <li class="nav-item" role="presentation">
+    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
+  </li>
+  <li class="nav-item" role="presentation">
+    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
+  </li>
+  <li class="nav-item" role="presentation">
+    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
+  </li>
+</ul>
+<div class="tab-content my-3" id="myTabContent">
+  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">This is Tab Content Home</div>
+  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">This is Tab Content Profile</div>
+  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">This is Tab Content Contact</div>
+</div>
+ +

Options:

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type ClassFeaturesCode Example
Basic NavsBasic Navs Style for the Tabs
<ul class="nav " id="myTab" role="tablist">
+  .......
+</ul>
.nav-separatorBasic Navs Style with Separator for the Tabs
<ul class="nav " id="myTab" role="tablist">
+  .......
+</ul>
.nav-tabsTabs Navs Style for the Tabs. For example - above Preview Example.
<ul class="nav nav-tabs" id="myTab" role="tablist">
+  .......
+</ul>
.nav-pillsPills Navs Style for the Tabs
<ul class="nav nav-pills" id="myTab" role="tablist">
+  .......
+</ul>
+
+
+ +
+ + +
+

Social Icon

+

Social links with different styles. See below code for more information.

+
<div class="d-flex flex-column">
+  <ul class="social-icons">
+    <li><a data-toggle="tooltip" href="http://www.facebook.com/" target="_blank" title="" data-original-title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
+    <li><a data-toggle="tooltip" href="http://www.twitter.com/" target="_blank" title="" data-original-title="Twitter"><i class="fab fa-twitter"></i></a></li>
+    <li><a data-toggle="tooltip" href="http://www.google.com/" target="_blank" title="" data-original-title="Google"><i class="fab fa-google"></i></a></li>
+    <li><a data-toggle="tooltip" href="http://www.linkedin.com/" target="_blank" title="" data-original-title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li>
+    <li><a data-toggle="tooltip" href="http://www.youtube.com/" target="_blank" title="" data-original-title="Youtube"><i class="fab fa-youtube"></i></a></li>
+    <li><a data-toggle="tooltip" href="http://www.instagram.com/" target="_blank" title="" data-original-title="Instagram"><i class="fab fa-instagram"></i></a></li>
+  </ul>
+</div>
+
+

Options:

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type ClassFeaturesCode Example
Default (Dark)Default Social Icon with Dark Color
<ul class="social-icons">
+  .......
+</ul>
.social-icons-lightSocial Icon with Light Color
<ul class="social-icons social-icons-light">
+  .......
+</ul>
.social-icons-mutedSocial Icon with Muted Color
<ul class="social-icons social-icons-muted">
+  .......
+</ul>
.social-icons-smSocial Icon with Small Icon Size +
<ul class="social-icons social-icons-sm">
+  .......
+</ul>
+
.social-icons-lgSocial Icon with Large Icon Size
<ul class="social-icons social-icons-lg">
+  .......
+</ul>
+
+
+ +
+ + +
+

Helper Classes

+

We have created some really useful helper classes for you. Here are a few of them. also, You can refer other default bootstrap helper classes here: Bootstrap Documentation

+ +
Text Size:
+
    +
  • .text-0 - Changes the Font size to 11px.
  • +
  • .text-1 - Changes the Font size to 12px.
  • +
  • .text-2 - Changes the Font size to 14px.
  • +
  • .text-3 - Changes the Font size to 16px.
  • +
  • .text-4 - Changes the Font size to 18px.
  • +
  • .text-5 - Changes the Font size to 21px.
  • +
  • .text-6 - Changes the Font size to 24px.
  • +
  • .text-7 - Changes the Font size to 28px.
  • +
  • .text-8 - Changes the Font size to 32px.
  • +
  • .text-9 - Changes the Font size to 36px.
  • +
  • .text-10 - Changes the Font size to 40px.
  • +
  • .text-11 - Changes the Font size to 44px.
  • +
  • .text-12 - Changes the Font size to 48px.
  • +
  • .text-13 - Changes the Font size to 52px.
  • +
  • .text-14 - Changes the Font size to 56px.
  • +
  • .text-15 - Changes the Font size to 60px.
  • +
  • .text-16 - Changes the Font size to 64px.
  • +
  • .text-17 - Changes the Font size to 72px.
  • +
  • .text-18 - Changes the Font size to 80px.
  • +
  • .text-19 - Changes the Font size to 84px.
  • +
  • .text-20 - Changes the Font size to 92px.
  • +
+
Font Weight:
+
    +
  • .font-weight-100 - For font weight of 100.
  • +
  • .font-weight-200 - For font weight of 200.
  • +
  • .font-weight-300 - For font weight of 300.
  • +
  • .font-weight-400 - For font weight of 400.
  • +
  • .font-weight-500 - For font weight of 500.
  • +
  • .font-weight-600 - For font weight of 600.
  • +
  • .font-weight-700 - For font weight of 700.
  • +
  • .font-weight-800 - For font weight of 800.
  • +
  • .font-weight-900 - For font weight of 900.
  • +
+
Background Color:
+
    +
  • .bg-transparent - For background color of transparent
  • +
  • .bg-light - For background color of light gray
  • +
  • .bg-light-1 - For background color of more light gray
  • +
  • .bg-light-2 - For background color of more light gray
  • +
  • .bg-light-3 - For background color of more light gray
  • +
  • .bg-light-4 - For background color of more light gray
  • +
  • .bg-dark - For background color of dark
  • +
  • .bg-dark-1 - For background color of dark gray
  • +
  • .bg-dark-2 - For background color of more dark gray
  • +
  • .bg-dark-3 - For background color of more dark gray
  • +
  • .bg-dark-4 - For background color of more dark gray
  • +
+
Box Shadow
+
    +
  • .shadow-none - For No shadow to elements with box-shadow utilities.
  • +
  • .shadow-sm - For Small shadow to elements with box-shadow utilities.
  • +
  • .shadow - For Regular shadow to elements with box-shadow utilities.
  • +
  • .shadow-md - For medium light shadows to elements with box-shadow utilities.
  • +
  • .shadow-lg - For Larger shadows to elements with box-shadow utilities.
  • +
+
Opacity
+
    +
  • .opacity-1 - For 10% opacity.
  • +
  • .opacity-2 - For 20% opacity.
  • +
  • .opacity-3 - For 30% opacity.
  • +
  • .opacity-4 - For 40% opacity.
  • +
  • .opacity-5 - For 50% opacity.
  • +
  • .opacity-6 - For 60% opacity.
  • +
  • .opacity-7 - For 70% opacity.
  • +
  • .opacity-8 - For 80% opacity.
  • +
  • .opacity-9 - For 90% opacity.
  • +
+
Border Radius
+
    +
  • .rounded-top-0 - No Border Radius for top.
  • +
  • .rounded-bottom-0 - No Border Radius for bottom.
  • +
  • .rounded-left-0 - No Border Radius for left.
  • +
  • .rounded-right-0 - No Border Radius for right.
  • +
+
Borders, Sizing, Spacing (margin & padding) and also much more....
+
You can refer for use other default bootstrap helper classes here - https://getbootstrap.com/docs/4.4/utilities/
+
+ + +
+ + +
+

FAQ

+

A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.

+ +
+
+
+
+ +
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
+
+
+
+ +
+
Iisque Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
+
+
+
+ +
+
Iisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure. Mutat tacimates id sit. Ridens mediocritatem ius an, eu nec magna imperdiet.
+
+
+
+ +
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
+
+
+
+ +
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
+
+
+
+ +
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Ad vegan excepteur butcher vice lomo.
+
+
+
+
+
+ +
+ +
+ + +
+

Source & Credits

+

Images:

+ +

Fonts:

+ +

Scripts:

+ +
+ +
+ + +
+

Support

+

If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page

+

We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

+
Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.
+

Don’t forget to Rate this template + +

+
+ Please Add your Review (Opinion) for Our template. It would be a great support for us.
+ Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
+ Thank You. +
+
+ +
+ + +
+

More Templates

+

Checkout Our Below Premium Templates

+ + + +

Our Portfolio

+ +
+ +
+ + + +
+

Changelog

+

See what's new added, changed, fixed, improved or updated in the latest versions.

+

For Future Updates Follow Us @themeforest / @facebook / @twitter / @Dribbble

+ +

Version 1.1 (12 Oct, 2020)

+
    +
  • Added Your information here for added new feature
  • +
  • Fixed Some minor bugs for browser compatibility
  • +
  • Fixed Some minor bugs for responsive
  • +
  • Updated FontAwesome to Latest Version
  • +
  • Updated Bootstrap to Latest Version
  • +
  • Updated Improvements in CSS and JS
  • +
+ +
+ +

Version 1.0 (8 April, 2020)

+

Initial Release

+
+ +
+
+ +
+ + + + + + +
+ + + + + + + + + + + + + + + + + + Index: arms/img/Document/requirementInfo.png =================================================================== diff -u Binary files differ Index: arms/img/Document/systemConfigurationDiagram.png =================================================================== diff -u Binary files differ