diff --git a/src/docs/changelog.html b/src/docs/changelog.html new file mode 100644 index 0000000..0815919 --- /dev/null +++ b/src/docs/changelog.html @@ -0,0 +1,72 @@ +{% extends "layout/layout-docs.html" %} +{% set page_title = "Changelog" %} +{% block content %} + +
+ {% include "../templates/layout/header-footer/app-header.html" %} {% include + "../templates/layout/header-footer/app-sidebar.html" %} {% include "../templates/layout/header-footer/topnavbar.html" + %} +
+
+
+
+
+ {% include "../templates/components/breadcrumbs/breadcrumbs.html" %} +
+
+ + +
+
+
+

v3.3.1 - 27 Oct 2021

+
    +
  • Updated Laravel Version to 8.65.
    • +
  • Webpack error fixies.
    • +
+
+
+

v3.3.0 - 20 Oct 2021

+
    +
  • Updated Bootstrap version to v5.1.3.
    • +
  • Added Full Calender Page.
    • +
  • Added Placeholder Page.
    • +
+
+
+

v3.2.0 - 25 Aug 2021

+
    +
  • Upgraded bootstrap version to 5.1.0 in the HTML version..
    • +
  • Fixed minor issues.
    • +
+
+
+

v3.1.0 - 25 May 2021

+
    +
  • Updated Bootstrap version to ^5.0.1.
    • +
  • Added Off-canvas page.
    • +
  • Fixed minor issues.
    • +
+
+
+

v3.0.1 - 10 March 2021

+
    +
  • Updated Bootstrap version to ^5.0.0-beta2..
    • +
+
+
+

v3.0.0 - 29 January 2021

+
    +
  • Updated version of other plugins.
    • +
+
+
+
+ + +
+
+
+
+ +{% endblock %} \ No newline at end of file diff --git a/src/docs/folder-structure.html b/src/docs/folder-structure.html new file mode 100644 index 0000000..da4b9f5 --- /dev/null +++ b/src/docs/folder-structure.html @@ -0,0 +1,68 @@ +{% extends "layout/layout-docs.html" %} +{% set page_title = "Folder Structure" %} +{% block content %} + +
+ {% include "../templates/layout/header-footer/app-header.html" %} {% include + "../templates/layout/header-footer/app-sidebar.html" %} {% include "../templates/layout/header-footer/topnavbar.html" + %} +
+
+
+
+
+ {% include "../templates/components/breadcrumbs/breadcrumbs.html" %} +
+
+ +
+
+
+

Folder & Files Structure

+

HTML

+ 
├── Admin
+              ├── Startkit
+              
+              ├── Admin
+                  ├── src directory
+                      ├── assets
+                          ├── css
+                          ├── fonts
+                          ├── images
+                          ├── js
+                          └── scss
+                              ├── custom
+                              ├── _variables.scss
+                              ├── _variables-dark.scss
+                              ├── app.scss
+                              ├── app-dark.scss
+                              ├── bootstrap.scss
+                              ├── bootstrap-dark.scss
+                              └── icons.scss
+                      ├── partials
+                          ├── body.html
+                          ├── footer.html
+                          ├── head-css.html
+                          ├── horizontal.html
+                          ├── main.html
+                          ├── menu.html
+                          ├── page-title.html
+                          ├── right-sidebar.html
+                          ├── sidebar.html
+                          ├── title-meta.html
+                          ├── topbar.html
+                          └── vendor-script.html
+                      └── all html pages
+                  ├── gulpfile.js
+                  ├── package.json
+                  └── yarn.lock
+
+
+
+
+
+
+
+
+ +{% endblock %} \ No newline at end of file diff --git a/src/docs/horizontal.html b/src/docs/horizontal.html new file mode 100644 index 0000000..ec2bc1f --- /dev/null +++ b/src/docs/horizontal.html @@ -0,0 +1,62 @@ +{% extends "layout/layout-docs.html" %} +{% set page_title = "Horizontal" %} +{% block content %} + +
+ {% include "../templates/layout/header-footer/app-header.html" %} {% include + "../templates/layout/header-footer/app-sidebar.html" %} {% include "../templates/layout/header-footer/topnavbar.html" + %} +
+
+
+
+
+ {% include "../templates/components/breadcrumbs/breadcrumbs.html" %} +
+
+ +
+
+
+

Horizontal menu configuration

+ Simply update + + <body data-layout="horizontal" data-topbar="dark"> in the src/partials/body.html file and + Remove other includes and add @@include('horizontal.html') in Src/Layout/App-Sidebar.Html file. +

+
+
+

How to change width?

+

In order to change the width of left side navigation bar, open a file + src/sass/layout/_sidebar.scss and change the + value of 280px .

+
+
+

How to use pre-built layouts?

+

Each of the layout options is provided below with steps you would need to perform in: + data-layout="horizontal"

+
+
+
+
+ +
+

Topbar

+

Keep your body element with data attribute data-topbar="dark" data-layout="horizontal" E.g. + + <body data-topbar="light" data-layout="horizontal"> to have dark topbar and dark menubar. +

+
+
+
+
+
+
+
+
+
+
+
+
+ +{% endblock %} \ No newline at end of file diff --git a/src/docs/index.html b/src/docs/index.html index 2fabf7a..624dbb7 100644 --- a/src/docs/index.html +++ b/src/docs/index.html @@ -15,91 +15,23 @@

Introduction

-

- Zakir Soft is a Software company and Software Development Training Institute. We have passionate - teams like Full Stack Laravel Developer, Android Developer, UI/UX Designer. We have management - system softwares for the local market. we also have eCommerce systems for your online business. Highlight - Text -

-
-
-
-

Navigation

-
-
-
-

Getting started

- -
-
-

Layouts

- -
-
-

Components

- - -
-
-

About

- -
-
+

Thank you for purchasing Relik - HTML Admin Dashboard Template

+

Relik is available in HTML versions. You can use any one of them you + like.

+

Relik is a fully featured premium admin dashboard template built on top of awesome Bootstrap v5.1.3. It's crafted using + modern web technologies HTML5, CSS3 and jQuery.

+

Relik is an admin dashboard template that is a beautifully crafted, clean & minimal designed admin template, + Light Layouts with RTL options with Multi-Lingual supported. You can build any type of web application like Saas based + interface, eCommerce, CRM, CMS, Project management apps, Admin Panels, etc of any project.

+

Relik - HTML Admin Dashboard Template is easily customizable and developer-friendly codes. It will help your team moving + faster and saving development costs and valuable time.

+

If you’re a developer looking for an admin dashboard that is fully responsive with Bootstrap then you are at the right + place to start your project using Relik - HTML Responsive Bootstrap 5 Admin Dashboard.

+

Relik contains lots of new design widgets with responsive on all screens. Also, there are 6 different types of Layouts + we have added and also preloader for loading page. It is very easy to change any layout in your existing running + application. We have written minimum SCSS and codes to increase performance.

+

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via + our profile page or from the support link Support.

diff --git a/src/docs/started.html b/src/docs/started.html index f6d5648..d6d161c 100644 --- a/src/docs/started.html +++ b/src/docs/started.html @@ -15,42 +15,96 @@
-

Getting Started

-

- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum dignissimos eos, dicta autem incidunt qui quisquam reiciendis fuga aperiam nesciunt sequi natus ipsa possimus labore dolorem maiores dolore ducimus mollitia ea tempora est necessitatibus. Qui tempora delectus eveniet expedita, minima laborum veritatis! At tenetur magni ratione modi voluptatibus iste quis explicabo harum architecto distinctio aut consequatur, possimus, mollitia error veniam? -

-
- -
-

Set up the environment

-
-

To use our build system and run our documentation locally, you’ll need a copy of Tabler’s source files. Follow the steps below:

-
-
-
    -
  1. -

    install package dependecies via yarn or npm

    -
    2. -
  2. -

    In the comand line run gulp

    -
    3. -
  3. -

    open in http://localhost:3000/ in your browser

    -
    4. -
  4. -

    Any change in /src directory will build the aplication and refresh the page

    -
    5. -
-
-
- -
-

Bugs and feature requests

+
+

Get Started

+

Introduction

- Found a bug or have a feature request? Please open a new issue + We are using gulp which allows having complete automation for + build flow. In case if you don't know Gulp then it's easy + to use it. Gulp is a toolkit for automating painful or time-consuming tasks in the development workflow, so you can + stop + messing around while building any project. You can read it more about it here. Please follow below steps to install + and + setup all prerequisites:

-
+
+
+

Prerequisites

+

Please follow below steps to install and setup all prerequisites:

+ + + + +
+
+

Installation

+

To setup the admin theme, follow below-mentioned steps:

+ +

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the + root directory of the project to run the project locally or build for production use:

+ +
+ + + + + + + + + + + + + + + + + + + + + + +
CommandDescription
yarn installThis would install all the required dependencies in the node_modules folder.
gulpRuns the project locally, starts the development server and watches for any changes in your code, including your HTML, + javascript, sass, etc. The development server is accessible at
gulp buildGenerates a /dist directory with all the production files.
+
+

Tips

+

SCSS: We suggest you to do not change any scss files from the assets/scss/custom folders because to get new updates will + might be break your SCSS changes if any you have made. We strongly suggest you to create new custom.scss file and use + that instead of overwrite any theme's custom scss files.

+
+
diff --git a/src/docs/typography.html b/src/docs/typography.html new file mode 100644 index 0000000..79177bc --- /dev/null +++ b/src/docs/typography.html @@ -0,0 +1,190 @@ +{% extends "layout/layout-docs.html" %} +{% set page_title = "Typography" %} +{% block content %} + +
+ {% include "../templates/layout/header-footer/app-header.html" %} {% include + "../templates/layout/header-footer/app-sidebar.html" %} {% include "../templates/layout/header-footer/topnavbar.html" + %} +
+
+
+
+
+ {% include "../templates/components/breadcrumbs/breadcrumbs.html" %} +
+
+ + +
+
+
+

Typography

+

Typography Plays An Important Role In Creating An Attractive And Clear Interface Design. Good Typography Will Make The + Content Easy To Follow And Improve The Usability Of Your Website.

+
+
+
+ +
+
+
+

Base colors

+

Choose one of the available colors from the basic color palette and make your design attractive for users. You + can use + the colors to customize the design of components, indicate different states or suggest actions you want users to + take.

+
+
+ #7b878c +
+
+ #005ce8 +
+
+ #fff266, +
+
+ #0faf62, +
+
+ #ff9500 +
+
+ #e84646 +
+
+
+
+

Use Text Color

+ + <p class="text-gray"></p> +
+ <p class="text-primary"></p> +
+ <p class="text-secondary"></p> +
+ <p class="text-success"></p> +
+ <p class="text-warning"></p> +
+ <p class="text-danger"></p> +
+ +
+

Use Background Color

+ + <p class="bg-gray"></p> +
+ <p class="bg-primary"></p> +
+ <p class="bg-secondary"></p> +
+ <p class="bg-success"></p> +
+ <p class="bg-warning"></p> +
+ <p class="bg-danger"></p> +
+ + + +
+
+
+
+ +
+
+
+

Headings

+

Use HTML headings to organize content on your website and make the structure clear and user-friendly.

+
+
+
+

H1 Heading

+

H2 Heading

+

H3 Heading

+

H4 Heading

+
H5 Heading
+
H6 Heading
+
+
+ + <h1>H1 Heading</h1> +
+ <h2>H2 Heading</h2> +
+ <h3>H3 Heading</h3> +
+ <h4>H4 Heading</h4> +
+ <h5>H5 Heading</h5> +
+ <h6>H6 Heading</h6> + +
+
+ +
+
+
+

Paragraphs

+

Organize longer pieces of text into paragraphs using the (p) tag.

+
+
+
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua.

+

At vero eos et accusam et justo duo dolores et ea rebum.

+
+
+ + <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> +
+ <p>At vero eos et accusam et justo duo dolores et ea rebum.</p> + + +
+
+
+
+
+

Text transform

+

Transform the content of components with text capitalization classes.

+
+
+
+

lowercased text.

+

UPPERCASED TEXT.

+

Capitalized Text.

+
+
+ <p class="text-lowercase" + >Lowercased text.</p> +
+ + <p class="text-uppercase">Uppercased text.</p> +
+ <p class="text-capitalize">Capitalized text.</p> + +
+
+
+
+
+
+ +{% endblock %} \ No newline at end of file diff --git a/src/docs/vertical.html b/src/docs/vertical.html new file mode 100644 index 0000000..fd91c33 --- /dev/null +++ b/src/docs/vertical.html @@ -0,0 +1,78 @@ +{% extends "layout/layout-docs.html" %} +{% set page_title = "Vertical" %} +{% block content %} + +
+ {% include "../templates/layout/header-footer/app-header.html" %} {% include + "../templates/layout/header-footer/app-sidebar.html" %} {% include "../templates/layout/header-footer/topnavbar.html" + %} +
+
+
+
+
+ {% include "../templates/components/breadcrumbs/breadcrumbs.html" %} +
+
+ +
+
+
+

Vertical menu configuration

+

In order to add, change or remove menu items from the left side navigation, simply edit in file + src/layout/app-sidebar.html . The change would reflect in all the html files automatically. We are using gulp-file-include + which would actually take care of including the app-sidebar.html file content in the all html pages.

+
+ +
+

How to change width?

+

In order to change the width of left side navigation bar, open a file src/sass/layout/_sidebar.scss and change the + value of 280px .

+
+ +
+

How to use pre-built layouts?

+

Each of the layout options is provided below with steps you would need to perform in: data-layout="vertical"

+
+
+
+
+ +
+

White Sidebar

+

Remove data attribute data-sidebar="white" body element to have white sidebar.

+
+
+
+
+
+ +
+

black Sidebar

+

Remove data attribute data-sidebar="black" body element to have black sidebar.

+
+
+
+
+
+ +
+

Blue Sidebar

+

Remove data attribute data-sidebar="blue" body element to have blue sidebar.

+
+
+
+
+ + + +
+
+
+
+
+
+
+
+ +{% endblock %} \ No newline at end of file diff --git a/src/images/all-img/ss1.png b/src/images/all-img/ss1.png new file mode 100644 index 0000000..9ee0c24 Binary files /dev/null and b/src/images/all-img/ss1.png differ diff --git a/src/images/all-img/ss2.png b/src/images/all-img/ss2.png new file mode 100644 index 0000000..ce430df Binary files /dev/null and b/src/images/all-img/ss2.png differ diff --git a/src/images/all-img/ss3.png b/src/images/all-img/ss3.png new file mode 100644 index 0000000..4a5b73c Binary files /dev/null and b/src/images/all-img/ss3.png differ diff --git a/src/images/all-img/ss4.png b/src/images/all-img/ss4.png new file mode 100644 index 0000000..859d35f Binary files /dev/null and b/src/images/all-img/ss4.png differ diff --git a/src/sass/base/_helpers.scss b/src/sass/base/_helpers.scss index 2224eaa..cc4b728 100644 --- a/src/sass/base/_helpers.scss +++ b/src/sass/base/_helpers.scss @@ -108,49 +108,48 @@ blockquote { .rt-mb-15 { margin-bottom: 15px; } -.rt-mb-8{ +.rt-mb-8 { margin-bottom: 8px; } -.rt-mb-2{ +.rt-mb-2 { margin-bottom: 2px; } -.rt-mb-4{ +.rt-mb-4 { margin-bottom: 4px; } .rt-pt-15 { padding-top: 15px; } -.rt-mb-12{ +.rt-mb-12 { margin-bottom: 12px; } .rt-spacer-15 { height: 15px; } -.rt-mb-16{ +.rt-mb-16 { margin-bottom: 16px; } -.rt-mb-25{ +.rt-mb-25 { margin-bottom: 25px; } -.rt-mb-24{ +.rt-mb-24 { margin-bottom: 24px; } -.rt-mb-28{ +.rt-mb-28 { margin-bottom: 28px; } -.rt-mb-48{ +.rt-mb-48 { margin-bottom: 48px; } -.rt-mb-32{ +.rt-mb-32 { margin-bottom: 32px; } .hr-0 { margin: 0; padding: 0; - } -.text-gray{ - color: #7B878C; +.text-gray { + color: #7b878c; } @each $color, $shades in $colors { @each $shade, $value in $shades { @@ -262,7 +261,7 @@ blockquote { .pointer { cursor: pointer; } -.text-hide{ +.text-hide { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -472,7 +471,6 @@ blockquote { margin-bottom: 0px; } border-color: var(--gray-50); - } .modal-content { border-radius: 16px; @@ -481,48 +479,46 @@ blockquote { padding: 24px; } - - -.bg-primary{ +.bg-primary { background-color: var(--primary-500) !important; } -.bg-secondary{ +.bg-secondary { background-color: var(--secondary-500) !important; } -.bg-success{ -background-color: var(--success-500) !important; +.bg-success { + background-color: var(--success-500) !important; } -.bg-warning{ +.bg-warning { background-color: var(--warning-500) !important; } -.bg-danger{ +.bg-danger { background-color: var(--danger-500) !important; } -.bg-dark{ - background-color: var(--gray-900) !important; +.bg-dark { + background-color: var(--gray-900) !important; } -.text-primary{ +.text-primary { color: var(--primary-500) !important; } -.text-secondary{ - color: var(--secondary-500) !important; +.text-secondary { + color: var(--secondary-500) !important; } -.text-success{ -color: var(--success-500) !important; +.text-success { + color: var(--success-500) !important; } -.text-warning{ +.text-warning { color: var(--warning-500) !important; } -.text-danger{ - color: var(--danger-500) !important; +.text-danger { + color: var(--danger-500) !important; } -.text-dark{ - color: var(--gray-900) !important; +.text-dark { + color: var(--gray-900) !important; } -.alert-info{ +.alert-info { color: var(--primary-500); - background-color: rgba(95,99,242,.04) !important; -} \ No newline at end of file + background-color: rgba(95, 99, 242, 0.04) !important; +} diff --git a/src/sass/pages/_documentation.scss b/src/sass/pages/_documentation.scss index 4a6c6eb..295985f 100644 --- a/src/sass/pages/_documentation.scss +++ b/src/sass/pages/_documentation.scss @@ -1,14 +1,11 @@ .docu { - - - // section - &-section { + // section + &-section { margin-bottom: 24px; } - - // Cards wrapper - &-card { + // Cards wrapper + &-card { padding: 24px; overflow: hidden; border-radius: 8px; @@ -17,25 +14,24 @@ box-shadow: 0px 8px 24px 0px #00000008; } - - &-sub-section { + &-sub-section { padding: 24px; margin-bottom: 24px; background-color: #fff; - p { + p { @extend %text-two; font-weight: 400; } - ol { + ol { padding-left: 16px; li { list-style: decimal; - p { + p { font-size: 14px; line-height: 24px; color: var(--gray-900); - span { + span { font-weight: 600; color: var(--primary-500); } @@ -44,7 +40,6 @@ } } - &-typography { margin-top: 15px; li { @@ -108,33 +103,31 @@ &-title { @extend %text-five; - margin-bottom: 20px; + margin-bottom: 10px; + font-size: 20px; text-transform: capitalize; &-sub { - @extend %text-two; + @extend %text-two; font-weight: 600; } } - &-navigation { - ul { - li { + &-navigation { + ul { + li { margin: 6px 0px; - a { + a { font-size: 14px; line-height: 21px; text-transform: capitalize; color: var(--gray-700); - &:hover { + &:hover { color: var(--gray-900); } } } } } - - - } .color-box { @@ -176,3 +169,97 @@ margin: 8px; } } + +// new +.docu-section { + height: 100vh; +} +.docu-card { + height: 100%; +} +h2.docu-header-title { + font-size: 30px; + margin-bottom: 15px; +} +h2.docu-title { + span { + font-weight: normal; + font-size: 14px; + color: #74788d !important; + } +} +ul.docu-li { + padding-left: 30px; + li { + padding-left: 20px; + position: relative; + &:before { + content: ""; + left: 0; + top: 8px; + width: 5px; + height: 5px; + border-radius: 100%; + position: absolute; + background-color: var(--gray-900); + } + } +} + +.table.docs { + th, + td { + border: 1px solid var(--gray-100); + padding: 10px 20px; + white-space: nowrap; + &:first-child { + min-width: 220px; + } + } +} + +.example-code, +.example-content { + padding: 24px; +} + +.na { + color: #006ee0; +} +.s { + color: #d73038; +} + +p { + &:last-child { + margin-bottom: 0; + } +} + +.docu-thumb { + &-wrap { + display: flex; + flex-wrap: wrap; + } + &-item { + margin: 8px; + flex: 0 0 33.33%; + width: 100%; + border: 1px solid var(--gray-100); + text-align: center; + img { + width: 100%; + height: 100%; + object-fit: cover; + margin-bottom: 10px; + } + h3 { + font-size: 20px; + margin-bottom: 10px; + line-height: 1; + } + } + &-content { + padding: 20px; + } +} diff --git a/src/templates/layout/header-footer/app-sidebar.html b/src/templates/layout/header-footer/app-sidebar.html index 6762328..819e0cd 100644 --- a/src/templates/layout/header-footer/app-sidebar.html +++ b/src/templates/layout/header-footer/app-sidebar.html @@ -141,12 +141,52 @@
  • Documentation
  • -
    • -
  • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + + + + +