Root Zanli
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
o5t6x7pgljbm
/
www
/
intuitionexchange.com
/
docs
/
Filename :
project-structure.html
back
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Silicon Docs | Project structure</title> <!-- SEO Meta Tags --> <meta name="description" content="Silicon - Multipurpose Technology Bootstrap Template"> <meta name="keywords" content="bootstrap, business, creative agency, mobile app showcase, saas, fintech, finance, online courses, software, medical, conference landing, services, e-commerce, shopping cart, multipurpose, shop, ui kit, marketing, seo, landing, blog, portfolio, html5, css3, javascript, gallery, slider, touch, creative"> <meta name="author" content="Createx Studio"> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Favicon and Touch Icons --> <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png"> <link rel="manifest" href="../assets/favicon/site.webmanifest"> <link rel="mask-icon" href="../assets/favicon/safari-pinned-tab.svg" color="#6366f1"> <link rel="shortcut icon" href="../assets/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#080032"> <meta name="msapplication-config" content="../assets/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <!-- Vendor Styles --> <link rel="stylesheet" media="screen" href="../assets/vendor/boxicons/css/boxicons.min.css"/> <!-- Main Theme Styles + Bootstrap --> <link rel="stylesheet" media="screen" href="../assets/css/theme.min.css"> <!-- Theme mode --> <script> let mode = window.localStorage.getItem('mode'), root = document.getElementsByTagName('html')[0]; if (mode !== null && mode === 'dark') { root.classList.add('dark-mode'); } else { root.classList.remove('dark-mode'); } </script> </head> <!-- Body --> <body> <!-- Navbar --> <header class="header navbar navbar-expand bg-light border-bottom border-light shadow fixed-top" data-scroll-header> <div class="container-fluid pe-lg-4"> <div class="d-flex align-items-center"> <a href="getting-started.html" class="navbar-brand flex-shrink-0 py-1 py-lg-2"> <img src="../assets/img/logo.svg" width="47" alt="Silicon"> Silicon </a> <span class="badge bg-success">Docs</span> </div> <div class="d-flex align-items-center w-100"> <ul class="navbar-nav d-none d-lg-flex" style="padding-left: 11.75rem;"> <li class="nav-item"> <a href="../index.html" class="nav-link"> <i class="bx bx-desktop opacity-70 fs-lg me-1"></i> Live preview </a> </li> <li class="nav-item"> <a href="../components/typography.html" class="nav-link"> <i class="bx bx-layer opacity-70 fs-lg me-1"></i> UI Kit (Components) </a> </li> </ul> <button type="button" class="navbar-toggler d-block d-lg-none ms-auto me-4" data-bs-toggle="offcanvas" data-bs-target="#docsNav" aria-controls="docsNav" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="form-check form-switch mode-switch pe-lg-1 ms-lg-auto" data-bs-toggle="mode"> <input type="checkbox" class="form-check-input" id="theme-mode"> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Light</label> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Dark</label> </div> <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary btn-sm fs-sm rounded ms-4 d-none d-lg-inline-flex" target="_blank" rel="noopener"> <i class="bx bx-cart fs-5 lh-1 me-1"></i> Buy now </a> </div> </div> </header> <!-- Main sidebar navigation --> <aside class="dark-mode"> <div id="docsNav" class="offcanvas-lg offcanvas-start d-flex flex-column position-fixed top-0 start-0 vh-100 bg-dark border-end-lg" style="width: 21rem; z-index: 1045;"> <div class="offcanvas-header d-none d-lg-flex justify-content-start"> <a href="getting-started.html" class="navbar-brand text-dark d-none d-lg-flex py-0"> <img src="../assets/img/logo.svg" width="47" alt="Silicon"> Silicon </a> <span class="badge bg-success d-none d-lg-inline-block">Docs</span> </div> <div class="offcanvas-header d-block d-lg-none border-bottom"> <div class="d-flex align-items-center justify-content-between mb-3"> <h5 class="d-lg-none mb-0">Menu</h5> <button type="button" class="btn-close d-lg-none" data-bs-dismiss="offcanvas" data-bs-target="#docsNav"></button> </div> <div class="list-group list-group-flush mx-n4"> <a href="../index.html" class="list-group-item list-group-item-action d-flex align-items-center border-0 py-2 px-4"> <i class="bx bx-desktop fs-lg opacity-80 me-2"></i> Preview </a> <a href="../components/typography.html" class="list-group-item list-group-item-action d-flex align-items-center border-0 py-2 px-4"> <i class="bx bx-layer fs-lg opacity-80 me-2"></i> UI Kit (Components) </a> </div> </div> <div class="offcanvas-body p-4"> <div class="swiper-wrapper"> <div class="swiper-slide h-auto"> <h3 class="fs-lg">Contents</h3> <div class="list-group list-group-flush mx-n4 pb-2"> <a href="getting-started.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Getting started</a> <a href="dev-setup.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Dev environment setup</a> <a href="working-with-gulp.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Working with Gulp</a> <a href="project-structure.html" class="list-group-item list-group-item-action border-0 py-2 px-4 active">Project structure</a> <a href="install-vendor-plugin.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Installing Vendor plugins with Npm and Gulp</a> <a href="using-scss.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Using Sass (Scss) preprocessor</a> <a href="autoprefixer.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Browser support</a> <a href="theme-mode.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Theme mode</a> <a href="global-colors.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Global colors</a> <a href="components.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Components</a> <a href="utilities.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Utility classes</a> <a href="ui-icons.html" class="list-group-item list-group-item-action border-0 py-2 px-4">UI icons (Icon font)</a> <a href="mailchimp.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Mailchimp subscription form</a> <a href="credits.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Sources and credits</a> <a href="changelog.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Changelog</a> </div> </div> </div> <div class="swiper-scrollbar end-0"></div> </div> <div class="offcanvas-header border-top"> <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary w-100" target="_blank" rel="noopener"> <i class="bx bx-cart fs-4 lh-1 me-1"></i> Buy now </a> </div> </div> </aside> <!-- Page container --> <main class="docs-container pt-5 pb-3 pb-lg-4"> <div class="container-fluid px-xxl-5 px-lg-4 pt-4 pt-lg-5 pb-4"> <!-- Page title --> <h1 class="ps-lg-2 ps-xxl-0 mt-2 mt-lg-0 pt-4 pb-2 mb-3 mb-xl-4">Project structure</h1> <div class="card shadow-sm p-md-2 mb-4"> <div class="card-body"> <div class="d-flex align-items-start border-bottom pb-3"> <i class="bx bx-folder-open fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon</h6> <p class="fs-sm mb-0">Folder contains all template source and production files.</p> </div> </div> <div class="d-flex align-items-start border-bottom ps-4 py-3"> <i class="bx bx-folder-open fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / assets</h6> <p class="fs-sm mb-0">This folder holds all assets files both source and production versions.</p> </div> </div> <div class="border-bottom ps-5 pt-3"> <div class="d-flex align-items-start pb-3"> <i class="bx bx-folder fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / assets / audio</h6> <p class="fs-sm mb-0">Sample audio file for Podcast page demo.</p> </div> </div> <div class="d-flex align-items-start pb-3"> <i class="bx bx-folder fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / assets / css</h6> <p class="fs-sm mb-0">Here you'll find compiled .css files: <code>theme.css</code> and <code>theme.min.css</code></p> </div> </div> <div class="d-flex align-items-start pb-3"> <i class="bx bx-folder fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / assets / favicon</h6> <p class="fs-sm mb-0">Favicon images for all browsers and platforms. They are linked in the <code><head></code> section of html document.</p> </div> </div> <div class="d-flex align-items-start pb-3"> <i class="bx bx-folder fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / assets / img</h6> <p class="fs-sm mb-0">Folder contains all graphic assets like images, illustrations, icons, etc. divided into subfolders.</p> </div> </div> <div class="d-flex align-items-start pb-3"> <i class="bx bx-folder fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / assets / js</h6> <p class="fs-sm mb-0">This folder contains main <code>src/theme.js</code> that is processed (compiled / minified) to theme.min.js located in the same directory. Source file <code>src/theme.js</code> holds all module <code>@import</code>s from <code>js/src/components</code> folder.</p> </div> </div> <div class="d-flex align-items-start pb-3"> <i class="bx bx-folder fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / assets / json</h6> <p class="fs-sm mb-0">Configuration <code>.json</code> files for Lottie player animations.</p> </div> </div> <div class="d-flex align-items-start pb-3"> <i class="bx bx-folder fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / assets / scss</h6> <p class="fs-sm mb-0">This folder contains all project <code>.scss</code> files that are compiled and minified to styles in <code>assets/css</code> folder.</p> </div> </div> <div class="d-flex align-items-start pb-3"> <i class="bx bx-folder fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / assets / vendor</h6> <p class="fs-sm mb-0">This folder contains all vendor plugins' <code>.js</code> / <code>.css</code> files.</p> </div> </div> </div> <div class="d-flex align-items-start border-bottom ps-4 py-3"> <i class="bx bx-folder-open fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / components</h6> <p class="fs-sm mb-0">Silicon UI Kit - all the component <code>.html</code> pages with code snippets.</p> </div> </div> <div class="d-flex align-items-start border-bottom ps-4 py-3"> <i class="bx bx-folder-open fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / docs</h6> <p class="fs-sm mb-0">Documentation you are reading now.</p> </div> </div> <div class="d-flex align-items-start border-bottom ps-4 py-3"> <i class="bx bx-file-blank fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / package.json</h6> <p class="fs-sm mb-0">File contains meta data about your app or module. Most importantly, it includes the list of dependencies to install from npm repository when running <kbd>npm install</kbd>.</p> </div> </div> <div class="d-flex align-items-start ps-4 pt-3"> <i class="bx bx-file-blank fs-xl text-primary"></i> <div class="ps-2 ms-1"> <h6 class="opacity-80 mb-1">Silicon / gulpfile.js</h6> <p class="fs-sm mb-0">Configuration file for Gulp. It contains all Gulp tasks you will perform while working on Createx based project. Learn more about it from <a href="working-with-gulp.html">Working with Gulp</a> section or <a href="https://gulpjs.com/docs/en/getting-started/quick-start" target="_blank" rel="noopener">official Gulp documentation</a>.</p> </div> </div> </div> </div> <p class="pt-2">Whether you work with Node.js and Gulp or not you can still take advantage of SCSS (CSS preprocessor). In this case you might want to learn <a href="using-scss.html" class="fw-semibold">Using Sass (Scss) preprocessor</a>.</p> </div> </main> <!-- Back to top button --> <a href="#top" class="btn-scroll-top" data-scroll> <span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span> <i class="btn-scroll-top-icon bx bx-chevron-up"></i> </a> <!-- Vendor Scripts --> <script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../assets/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script> <!-- Main Theme Script --> <script src="../assets/js/theme.min.js"></script> </body> </html>