Root Zanli
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
o5t6x7pgljbm
/
public_html
/
intuitionexchange.com
/
docs
/
Filename :
dev-setup.html
back
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Silicon Docs | Dev environment setup</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 active">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">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">Dev environment setup</h1> <!-- Info alert --> <div class="alert alert-info d-flex fs-md mb-4" role="alert"> <i class="bx bx-info-circle lead me-2 me-sm-3"></i> <div><strong>Please note:</strong> this step is absolutely optional. It aims for advanced users who want to speed up the development process with professional grade Front-End toolset shipped with Silicon. If you are not familiar with these tools and have no time to dive in you can still use plain HTML / CSS / JS to customize Silicon. In this case you can skip this and next sections. Happy coding :)</div> </div> <h2 class="h4 pb-1 pt-3 pt-xl-4">Silicon is built using modern development toolset</h2> <img src="../assets/img/docs/technologies.png" alt="Technologies"> <div class="my-4"> <dl> <dt class="mb-1">Node.js <a href="https://nodejs.org/en/" target="_blank" rel="noopener">Official website</a></dt> <dd class="fs-sm pb-3 border-bottom">Is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.</dd> <dt class="mb-1">Gulp <a href="https://gulpjs.com/" target="_blank" rel="noopener">Official website</a></dt> <dd class="fs-sm pb-3 border-bottom">The JavaScript task runner. It helps with performing repetitive tasks like minification, compilation, unit testing, linting, etc. This is possible thanks to extensive Gulp Plugins library.</dd> <dt class="mb-1">Sass (Syntactically Awesome Style Sheets) <a href="http://sass-lang.com/" target="_blank" rel="noopener">Official website</a></dt> <dd class="fs-sm pb-3 border-bottom">Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It is the most mature, stable, and powerful professional grade CSS extension language in the world. Sass gives you the power of variables, mixins, functions, etc.</dd> <dt class="mb-1">Bootstrap <a href="http://getbootstrap.com" target="_blank" rel="noopener">Official website</a></dt> <dd class="fs-sm pb-3 border-bottom">Latest version of the most popular HTML, CSS, and JS framework in the world. Silicon is built on Bootstrap and heavily depends on it. Silicon has all BS5 components + bunch of own plugins and components.</dd> </dl> </div> <p class="text-dark mb-4"><u>This section will explain how to setup professional Front-End development environment for fast and smooth Silicon customization using these technologies.</u></p> <h2 class="h3 pb-1 pt-3 pt-xl-4">Text Editor and Terminal (Command Line)</h2> <p>You can use any text editor at your disposal and available Command line tool (Command Prompt for Windows or Terminal on MacOS). Our personal preference is <a class="fw-semibold" href="https://code.visualstudio.com/" target="_blank" rel="noopener">Visual Studio Code.</a> It is free, has great buil-in terminal (console), built-in git client, debugging, huge extensions library and available for MacOS, Windows, Linux.</p> <h2 class="h3 pt-3">Installing Node.js and npm</h2> <p>In order to be able to setup Silicon development environment you will need to <strong>install Node.js and its Package Manager (npm)</strong>.</p> <p>Node.js is absolutely free and available for download via its official website for MacOS, Windows, Linux systems. <a class="fw-semibold" href="https://nodejs.org/en/" target="_blank" rel="noopener">Download Node.js and npm here.</a></p> <p>Learn more about Node Package Manager and available packages here: <a class="fw-semibold" href="https://www.npmjs.com" target="_blank" rel="noopener">https://www.npmjs.com</a></p> <h2 class="h3 pt-3">Installing packages necessary for Silicon development</h2> <p>When Node.js and npm is installed you are ready to install all dependencies necessary for Silicon development.</p> <u class="d-block text-dark mb-3">Inside your command line tool type:</u> <kbd class="d-inline-block mb-3">npm install</kbd> <p>This will start the process of installing all dependencies which are listed inside <code>Silicon/package.json</code> file. Wait until installation is finished and jump to the next section <a class="fw-semibold" href="working-with-gulp.html">Working with Gulp.</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>