Added Docs - Initial draft

This commit is contained in:
Adi Chirilov
2020-08-21 17:55:22 +03:00
parent 5405b9733d
commit ae44dcb68f
93 changed files with 56581 additions and 0 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,896 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets/img/dashboard/free/apple-icon.png">
<link rel="icon" type="image/png" href="../../../assets/img/dashboard/free/favicon.png">
<title>
Black Dashboard Flask by Creative Tim
</title>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- Nucleo Icons -->
<link href="../../../assets/css/nucleo-icons.css" rel="stylesheet" />
<!-- CSS Files -->
<link href="../../../assets/css/dashboard-free.css?v=1.0.0" rel="stylesheet" />
<!-- Documentation extras -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<link rel="stylesheet" href="../../../assets/demo/docs.min.css">
<style>
.navbar-absolute-logo{
padding-left: 45px;
}
.navbar-absolute-logo img{
position: absolute;
left: 15px;
margin-top: -6px;
}
body{
background: white;
}
</style>
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../../../assets/demo/dashboard/free/demo.css" rel="stylesheet" />
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Skip to main content</span>
</div>
</a>
<header class="navbar navbar-expand bg-primary flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/black-dashboard-flask" target="_blank">
Black Dashboard Flask
</a>
<ul class="navbar-nav flex-row d-none d-md-flex">
<li class="nav-item">
<a class="nav-link p-2" href="#version">
1.0.0
</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v2.0.0
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/docs/1.0/">BS4 - 1.0.0</a>
<a class="dropdown-item" href="">BS3 - 1.2.1</a>
</div>
</li> -->
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
</ul>
<div class="navbar-nav-scroll ml-md-auto ">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a target="_blank" href="javascript:void(0)" rel="nofollow" class="btn btn-round btn-default disabled"><i class="tim-icons icon-send mr-2"></i>Upgrade to PRO</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="../../../docs/1.0/getting-started/introduction.html"><i class="tim-icons icon-app"></i> Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.creative-tim.com/live/black-dashboard-flask"><i class="tim-icons icon-tv-2"></i> Live Preview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener"><i class="tim-icons icon-shape-star"></i> Help with a star</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
</li>
</ul>
</div>
<a href="https://github.com/creativetimofficial/black-dashboard-flask" class="github-corner" aria-label="View source on Github"><svg width="60" height="60" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- <a class="btn btn-white d-none d-lg-inline-block" href="">Download</a> -->
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav">
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Getting started
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/getting-started/getting-started-flask.html">
Getting Started Flask
</a>
</li>
<li class="">
<a href="../../../docs/1.0/getting-started/license.html">
License
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Foundation
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/foundation/colors.html">
Colors
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/components/alerts.html">
Alerts
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/badge.html">
Badge
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/breadcrumb.html">
Breadcrumb
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/buttons.html">
Buttons
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/card.html">
Card
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/collapse.html">
Collapse
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/dropdowns.html">
Dropdowns
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/forms.html">
Forms
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/google-maps.html">
Google Maps
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/modal.html">
Modal
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/navs.html">
Navs
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/navbar.html">
Navbar
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/nucleo-icons.html">
Nucleo Icons
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/tables.html">
Tables
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Plugins
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/plugins/perfect-scrollbar.html">
Perfect Scrollbar
</a>
</li>
<li class="">
<a href="../../../docs/1.0/plugins/chart-js.html">
Chart.js
</a>
</li>
</ul>
</div>
</nav>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">License</h1>
<p class="bd-lead"></p>
<p>Currently, on <a href="https://www.creative-tim.com/">Creative Tim</a> you can get the products with two types of licenses: Personal or Developer. All the freebies are licensed to Personal License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what is the best fit for you. View the rights table and the description for each license on our <a href="http://www.creative-tim.com/license?ref=license-page-bd">Official License Page</a>.</p>
</main>
</div>
</div>
<!-- Core JS Files -->
<script src="../../../assets/js/core/jquery.min.js" ></script>
<script src="../../../assets/js/core/popper.min.js" ></script>
<script src="../../../assets/js/core/bootstrap.min.js" ></script>
<script src="../../../assets/js/plugins/dashboard/free/perfect-scrollbar.jquery.min.js" ></script>
<!-- Google Maps Plugin -->
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chart JS -->
<script src="../../../assets/js/plugins/dashboard/free/chartjs.min.js"></script>
<!-- Notifications Plugin -->
<script src="../../../assets/js/plugins/dashboard/free/bootstrap-notify.js"></script>
<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc --><script src="../../../assets/js/dashboard-free.js?v=1.0.0"></script><!-- Black Dashboard DEMO methods, don't include it in your project! -->
<script src="../../../assets/demo/dashboard/free/demo.js"></script>
<script>
$(document).ready(function(){
$().ready(function(){
$sidebar = $('.sidebar');
$navbar = $('.navbar');
$main_panel = $('.main-panel');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
sidebar_mini_active = true;
white_color = false;
window_width = $(window).width();
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
$('.fixed-plugin a').click(function(event){
if($(this).hasClass('switch-trigger')){
if(event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .background-color span').click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if($sidebar.length != 0){
$sidebar.attr('data',new_color);
}
if($main_panel.length != 0){
$main_panel.attr('data',new_color);
}
if($full_page.length != 0){
$full_page.attr('filter-color',new_color);
}
if($sidebar_responsive.length != 0){
$sidebar_responsive.attr('data',new_color);
}
});
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function(){
var $btn = $(this);
if(sidebar_mini_active == true){
$('body').removeClass('sidebar-mini');
sidebar_mini_active = false;
blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
}else{
$('body').addClass('sidebar-mini');
sidebar_mini_active = true;
blackDashboard.showSidebarMessage('Sidebar mini activated...');
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function(){
window.dispatchEvent(new Event('resize'));
},180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function(){
clearInterval(simulateWindowResize);
},1000);
});
$('.switch-change-color input').on("switchChange.bootstrapSwitch", function(){
var $btn = $(this);
if(white_color == true){
$('body').addClass('change-background');
setTimeout(function(){ $('body').removeClass('change-background');
$('body').removeClass('white-content'); }, 900);
white_color = false;
}else{
$('body').addClass('change-background');
setTimeout(function(){ $('body').removeClass('change-background');
$('body').addClass('white-content');}, 900);
white_color = true;
}
});
$('.light-badge').click(function(){
$('body').addClass('white-content');
});
$('.dark-badge').click(function(){
$('body').removeClass('white-content');
});
});
});
</script>
<script src="../../../assets/demo/docs.min.js"></script>
<script src="../../../assets/demo/vendor/anchor.min.js"></script>
<script src="../../../assets/demo/vendor/clipboard.min.js"></script>
<script src="../../../assets/demo/vendor/holder.min.js"></script>
<script src="../../../assets/demo/src/application.js"></script>
<script>
$(document).ready(function(){
if($('#lineChartExample').length != 0){
demo.initDocChart();
}
});
</script>
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
</script>
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script><script>
window.TrackJS &&
TrackJS.install({
token: "ee6fab19c5a04ac1a32a645abde4613a",
application: "black-dashboard-free"
});
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,978 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets/img/dashboard/free/apple-icon.png">
<link rel="icon" type="image/png" href="../../../assets/img/dashboard/free/favicon.png">
<title>
Black Dashboard Flask by Creative Tim
</title>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- Nucleo Icons -->
<link href="../../../assets/css/nucleo-icons.css" rel="stylesheet" />
<!-- CSS Files -->
<link href="../../../assets/css/dashboard-free.css?v=1.0.0" rel="stylesheet" />
<!-- Documentation extras -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<link rel="stylesheet" href="../../../assets/demo/docs.min.css">
<style>
.navbar-absolute-logo{
padding-left: 45px;
}
.navbar-absolute-logo img{
position: absolute;
left: 15px;
margin-top: -6px;
}
body{
background: white;
}
</style>
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../../../assets/demo/dashboard/free/demo.css" rel="stylesheet" />
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Skip to main content</span>
</div>
</a>
<header class="navbar navbar-expand bg-primary flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/black-dashboard-flask" target="_blank">
Black Dashboard Flask
</a>
<ul class="navbar-nav flex-row d-none d-md-flex">
<li class="nav-item">
<a class="nav-link p-2" href="#version">
1.0.0
</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v2.0.0
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/docs/1.0/">BS4 - 1.0.0</a>
<a class="dropdown-item" href="">BS3 - 1.2.1</a>
</div>
</li> -->
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
</ul>
<div class="navbar-nav-scroll ml-md-auto ">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a target="_blank" href="javascript:void(0)" rel="nofollow" class="btn btn-round btn-default disabled"><i class="tim-icons icon-send mr-2"></i>Upgrade to PRO</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="../../../docs/1.0/getting-started/introduction.html"><i class="tim-icons icon-app"></i> Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.creative-tim.com/live/black-dashboard-flask"><i class="tim-icons icon-tv-2"></i> Live Preview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener"><i class="tim-icons icon-shape-star"></i> Help with a star</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
</li>
</ul>
</div>
<a href="https://github.com/creativetimofficial/black-dashboard-flask" class="github-corner" aria-label="View source on Github"><svg width="60" height="60" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- <a class="btn btn-white d-none d-lg-inline-block" href="">Download</a> -->
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav">
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Getting started
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/getting-started/getting-started-flask.html">
Getting Started Flask
</a>
</li>
<li class="">
<a href="../../../docs/1.0/getting-started/license.html">
License
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Foundation
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/foundation/colors.html">
Colors
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/components/alerts.html">
Alerts
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/badge.html">
Badge
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/breadcrumb.html">
Breadcrumb
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/buttons.html">
Buttons
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/card.html">
Card
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/collapse.html">
Collapse
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/dropdowns.html">
Dropdowns
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/forms.html">
Forms
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/google-maps.html">
Google Maps
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/modal.html">
Modal
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/navs.html">
Navs
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/navbar.html">
Navbar
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/nucleo-icons.html">
Nucleo Icons
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/tables.html">
Tables
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Plugins
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/plugins/perfect-scrollbar.html">
Perfect Scrollbar
</a>
</li>
<li class="">
<a href="../../../docs/1.0/plugins/chart-js.html">
Chart.js
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h1"><a href="#setup-ubuntu-for-developers">Setup Ubuntu for developers</a>
<ul>
<li class="toc-entry toc-h2"><a href="#install-basic-development-tools">Install basic development tools</a></li>
<li class="toc-entry toc-h2"><a href="#install-git">Install Git</a></li>
<li class="toc-entry toc-h2"><a href="#install-python3">Install Python3</a></li>
<li class="toc-entry toc-h2"><a href="#installing-nodejs">Installing Node.js</a></li>
<li class="toc-entry toc-h2"><a href="#installing-yarn">Installing Yarn</a></li>
</ul>
</li>
</ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Setup Ubuntu for Developers</h1>
<p class="bd-lead"></p>
<h1 id="setup-ubuntu-for-developers">Setup <a href="https://ubuntu.com/">Ubuntu</a> for developers</h1>
<hr />
<p><a href="https://ubuntu.com/">Ubuntu</a> is a complete Linux operating system, freely available with both community and professional support. Ubuntu is suitable for both desktop and server use. The current Ubuntu release supports many architectures: Intel x86 (IBM-compatible PC), AMD64 (x86-64), ARMv7, ARMv8.</p>
<p>Ubuntu includes thousands of pieces of software, starting with the Linux kernel version 4.15 and GNOME 3.28, and covering every standard desktop application from word processing and spreadsheet applications to internet access applications, web server software, email software, programming languages and tools and of course several games. For more information please access the official website: <a href="https://ubuntu.com/">Ubuntu.com</a></p>
<p><br /></p>
<h2 id="install-basic-development-tools">Install basic development tools</h2>
<hr />
<p>The <code class="highlighter-rouge">Build Essential</code> package group provides the GNU Compiler Collection (GCC), GNU Debugger (GDB), and other related development tools.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="c"># install Development Tools bundle</span>
<span class="nv">$ </span><span class="nb">sudo </span>apt <span class="nb">install </span>build-essential
</code></pre></div></div>
<p><br /></p>
<h2 id="install-git">Install <a href="https://git-scm.com/">Git</a></h2>
<hr />
<p><a href="https://git-scm.com/">Git</a> is the most popular version control system on Linux. It is easy to use, amazingly fast, its very efficient with large projects, and it has an incredible branching system for non-linear development.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>apt <span class="nb">install install </span>git
</code></pre></div></div>
<p><br /></p>
<h2 id="install-python3">Install Python3</h2>
<p>Ubuntu comes with both Python 2.7 and Python 3.5 by default. You can install Python 3.6 along with them via a <a href="https://launchpad.net/~jonathonf/+archive/ubuntu/python-3.6">third-party PPA</a> by doing the following steps:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>add-apt-repository ppa:jonathonf/python-3.6
</code></pre></div></div>
<blockquote>
<p>And Python3 libraries for development</p>
</blockquote>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>apt-get update
<span class="nv">$ </span><span class="nb">sudo </span>apt-get <span class="nb">install </span>python3.6
</code></pre></div></div>
<p><br /></p>
<h2 id="installing-nodejs">Installing <a href="https://nodejs.org/">Node.js</a></h2>
<p>Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>apt-get <span class="nb">install install </span>nodejs
<span class="err">$</span>
<span class="nv">$ </span><span class="c"># check the version</span>
<span class="nv">$ </span>node <span class="nt">--version</span>
</code></pre></div></div>
<p><br /></p>
<h2 id="installing-yarn">Installing <a href="https://yarnpkg.com/">Yarn</a></h2>
<p>The yarn is an advanced package management software for Node.js applications. It is a fast, secure, and reliable alternative that any other Nodejs package manager.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>npm <span class="nb">install </span>yarn <span class="nt">-g</span>
<span class="err">$</span>
<span class="nv">$ </span><span class="c"># check the version</span>
<span class="nv">$ </span>yarn <span class="nt">-v</span>
</code></pre></div></div>
</main>
</div>
</div>
<!-- Core JS Files -->
<script src="../../../assets/js/core/jquery.min.js" ></script>
<script src="../../../assets/js/core/popper.min.js" ></script>
<script src="../../../assets/js/core/bootstrap.min.js" ></script>
<script src="../../../assets/js/plugins/dashboard/free/perfect-scrollbar.jquery.min.js" ></script>
<!-- Google Maps Plugin -->
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chart JS -->
<script src="../../../assets/js/plugins/dashboard/free/chartjs.min.js"></script>
<!-- Notifications Plugin -->
<script src="../../../assets/js/plugins/dashboard/free/bootstrap-notify.js"></script>
<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc --><script src="../../../assets/js/dashboard-free.js?v=1.0.0"></script><!-- Black Dashboard DEMO methods, don't include it in your project! -->
<script src="../../../assets/demo/dashboard/free/demo.js"></script>
<script>
$(document).ready(function(){
$().ready(function(){
$sidebar = $('.sidebar');
$navbar = $('.navbar');
$main_panel = $('.main-panel');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
sidebar_mini_active = true;
white_color = false;
window_width = $(window).width();
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
$('.fixed-plugin a').click(function(event){
if($(this).hasClass('switch-trigger')){
if(event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .background-color span').click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if($sidebar.length != 0){
$sidebar.attr('data',new_color);
}
if($main_panel.length != 0){
$main_panel.attr('data',new_color);
}
if($full_page.length != 0){
$full_page.attr('filter-color',new_color);
}
if($sidebar_responsive.length != 0){
$sidebar_responsive.attr('data',new_color);
}
});
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function(){
var $btn = $(this);
if(sidebar_mini_active == true){
$('body').removeClass('sidebar-mini');
sidebar_mini_active = false;
blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
}else{
$('body').addClass('sidebar-mini');
sidebar_mini_active = true;
blackDashboard.showSidebarMessage('Sidebar mini activated...');
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function(){
window.dispatchEvent(new Event('resize'));
},180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function(){
clearInterval(simulateWindowResize);
},1000);
});
$('.switch-change-color input').on("switchChange.bootstrapSwitch", function(){
var $btn = $(this);
if(white_color == true){
$('body').addClass('change-background');
setTimeout(function(){ $('body').removeClass('change-background');
$('body').removeClass('white-content'); }, 900);
white_color = false;
}else{
$('body').addClass('change-background');
setTimeout(function(){ $('body').removeClass('change-background');
$('body').addClass('white-content');}, 900);
white_color = true;
}
});
$('.light-badge').click(function(){
$('body').addClass('white-content');
});
$('.dark-badge').click(function(){
$('body').removeClass('white-content');
});
});
});
</script>
<script src="../../../assets/demo/docs.min.js"></script>
<script src="../../../assets/demo/vendor/anchor.min.js"></script>
<script src="../../../assets/demo/vendor/clipboard.min.js"></script>
<script src="../../../assets/demo/vendor/holder.min.js"></script>
<script src="../../../assets/demo/src/application.js"></script>
<script>
$(document).ready(function(){
if($('#lineChartExample').length != 0){
demo.initDocChart();
}
});
</script>
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
</script>
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script><script>
window.TrackJS &&
TrackJS.install({
token: "ee6fab19c5a04ac1a32a645abde4613a",
application: "black-dashboard-free"
});
</script>
</body>
</html>

View File

@ -0,0 +1,998 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets/img/dashboard/free/apple-icon.png">
<link rel="icon" type="image/png" href="../../../assets/img/dashboard/free/favicon.png">
<title>
Black Dashboard Flask by Creative Tim
</title>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- Nucleo Icons -->
<link href="../../../assets/css/nucleo-icons.css" rel="stylesheet" />
<!-- CSS Files -->
<link href="../../../assets/css/dashboard-free.css?v=1.0.0" rel="stylesheet" />
<!-- Documentation extras -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<link rel="stylesheet" href="../../../assets/demo/docs.min.css">
<style>
.navbar-absolute-logo{
padding-left: 45px;
}
.navbar-absolute-logo img{
position: absolute;
left: 15px;
margin-top: -6px;
}
body{
background: white;
}
</style>
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../../../assets/demo/dashboard/free/demo.css" rel="stylesheet" />
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Skip to main content</span>
</div>
</a>
<header class="navbar navbar-expand bg-primary flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/black-dashboard-flask" target="_blank">
Black Dashboard Flask
</a>
<ul class="navbar-nav flex-row d-none d-md-flex">
<li class="nav-item">
<a class="nav-link p-2" href="#version">
1.0.0
</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v2.0.0
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/docs/1.0/">BS4 - 1.0.0</a>
<a class="dropdown-item" href="">BS3 - 1.2.1</a>
</div>
</li> -->
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
</ul>
<div class="navbar-nav-scroll ml-md-auto ">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a target="_blank" href="javascript:void(0)" rel="nofollow" class="btn btn-round btn-default disabled"><i class="tim-icons icon-send mr-2"></i>Upgrade to PRO</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="../../../docs/1.0/getting-started/introduction.html"><i class="tim-icons icon-app"></i> Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.creative-tim.com/live/black-dashboard-flask"><i class="tim-icons icon-tv-2"></i> Live Preview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener"><i class="tim-icons icon-shape-star"></i> Help with a star</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
</li>
</ul>
</div>
<a href="https://github.com/creativetimofficial/black-dashboard-flask" class="github-corner" aria-label="View source on Github"><svg width="60" height="60" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- <a class="btn btn-white d-none d-lg-inline-block" href="">Download</a> -->
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav">
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Getting started
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/getting-started/getting-started-flask.html">
Getting Started Flask
</a>
</li>
<li class="">
<a href="../../../docs/1.0/getting-started/license.html">
License
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Foundation
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/foundation/colors.html">
Colors
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/components/alerts.html">
Alerts
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/badge.html">
Badge
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/breadcrumb.html">
Breadcrumb
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/buttons.html">
Buttons
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/card.html">
Card
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/collapse.html">
Collapse
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/dropdowns.html">
Dropdowns
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/forms.html">
Forms
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/google-maps.html">
Google Maps
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/modal.html">
Modal
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/navs.html">
Navs
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/navbar.html">
Navbar
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/nucleo-icons.html">
Nucleo Icons
</a>
</li>
<li class="">
<a href="../../../docs/1.0/components/tables.html">
Tables
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
Plugins
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../docs/1.0/plugins/perfect-scrollbar.html">
Perfect Scrollbar
</a>
</li>
<li class="">
<a href="../../../docs/1.0/plugins/chart-js.html">
Chart.js
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h1"><a href="#setup-windows-for-developers">Setup Windows for developers</a>
<ul>
<li class="toc-entry toc-h2"><a href="#install-basic-development-tools">Install basic development tools</a></li>
<li class="toc-entry toc-h2"><a href="#visual-studio-code">Visual Studio Code</a></li>
<li class="toc-entry toc-h2"><a href="#install-python">Install Python</a></li>
<li class="toc-entry toc-h2"><a href="#install-git">Install Git</a></li>
<li class="toc-entry toc-h2"><a href="#install-nodejs">Install Node.js</a></li>
</ul>
</li>
</ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Setup Windows for Developers</h1>
<p class="bd-lead"></p>
<h1 id="setup-windows-for-developers">Setup <a href="https://www.microsoft.com/en-us/windows">Windows</a> for developers</h1>
<hr />
<p>Microsoft Windows, commonly referred to as Windows, is a group of several proprietary graphical operating system families, all of which are developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. Active Microsoft Windows families include Windows NT and Windows IoT; these may encompass subfamilies, e.g. Windows Server or Windows Embedded Compact (Windows CE). Defunct Microsoft Windows families include Windows 9x, Windows Mobile and Windows Phone.</p>
<p><br /></p>
<h2 id="install-basic-development-tools">Install basic development tools</h2>
<hr />
<p>This guide is written for Windows 10 version but can be used as a starting point for older versions of Windows.</p>
<p><br /></p>
<h2 id="visual-studio-code"><a href="https://code.visualstudio.com/">Visual Studio Code</a></h2>
<p>Visual Studio Code is a lightweight but powerful source code editor that runs on your desktop and is available for Windows, MacOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).</p>
<p><strong>Links</strong>:</p>
<ul>
<li><a href="https://code.visualstudio.com/">Visual Studio Code</a> - the official page</li>
<li><a href="https://code.visualstudio.com/docs">Visual Studio Code</a> - documentation</li>
</ul>
<p><br /></p>
<h2 id="install-python">Install <a href="https://www.python.org">Python</a></h2>
<p>It is highly unlikely that your Windows system shipped with Python already installed. Fortunately, installing does not involve much more than downloading the Python installer from the python.org website and running it. Lets take a look at how to install Python3 on Windows:</p>
<ul>
<li>Access the <a href="https://www.python.org/downloads/windows/">download page</a></li>
<li>Click on the installer that matches your operating system version 32b or 64b</li>
<li>Run the installer and mark the option that includes Python executable to your PATH variable (image credit: RealPython )</li>
</ul>
<p><img src="https://files.realpython.com/media/win-install-dialog.40e3ded144b0.png" alt="Install Python - The Visual Installer Screen." /></p>
<p>If the installation goes well, test the Python execution from the terminal:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>python <span class="nt">--version</span>
Python 3.7.2
</code></pre></div></div>
<p><br /></p>
<h2 id="install-git">Install <a href="https://git-scm.com/downloads">Git</a></h2>
<p>To install Git on Windows you will need to download the installer from the <a href="https://git-scm.com/downloads">Git</a> website:</p>
<ul>
<li>Download the installer</li>
<li>Execute the installer, using the default options</li>
<li>Test the installation by typing <code class="highlighter-rouge">git</code></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>git
usage: git <span class="o">[</span><span class="nt">--version</span><span class="o">]</span> <span class="o">[</span><span class="nt">--help</span><span class="o">]</span> <span class="o">[</span><span class="nt">-C</span> &lt;path&gt;] <span class="o">[</span><span class="nt">-c</span> <span class="nv">name</span><span class="o">=</span>value]
<span class="o">[</span><span class="nt">--exec-path</span><span class="o">[=</span>&lt;path&gt;]] <span class="o">[</span><span class="nt">--html-path</span><span class="o">]</span> <span class="o">[</span><span class="nt">--man-path</span><span class="o">]</span> <span class="o">[</span><span class="nt">--info-path</span><span class="o">]</span>
<span class="o">[</span><span class="nt">-p</span> | <span class="nt">--paginate</span> | <span class="nt">--no-pager</span><span class="o">]</span> <span class="o">[</span><span class="nt">--no-replace-objects</span><span class="o">]</span> <span class="o">[</span><span class="nt">--bare</span><span class="o">]</span>
<span class="o">[</span><span class="nt">--git-dir</span><span class="o">=</span>&lt;path&gt;] <span class="o">[</span><span class="nt">--work-tree</span><span class="o">=</span>&lt;path&gt;] <span class="o">[</span><span class="nt">--namespace</span><span class="o">=</span>&lt;name&gt;]
&lt;<span class="nb">command</span><span class="o">&gt;</span> <span class="o">[</span>&lt;args&gt;]
</code></pre></div></div>
<p>For more information about Git please access:</p>
<ul>
<li><a href="https://www.linode.com/docs/development/version-control/how-to-install-git-on-linux-mac-and-windows/">How to Install Git on Linux, Mac or Windows</a></li>
<li><a href="https://www.linode.com/docs/development/version-control/how-to-configure-git/">Getting Started with Git</a></li>
</ul>
<p><br /></p>
<h2 id="install-nodejs">Install <a href="https://nodejs.org/en/">Node.js</a></h2>
<p>Node.js is a run-time environment that includes everything you need to execute a program written in JavaScript. Its used for running scripts on the server to render content before it is delivered to a web browser. NPM stands for Node Package Manager, which is an application and repository for developing and sharing JavaScript code.</p>
<p><strong>Download the installer</strong></p>
<p>In a web browser, navigate to https://nodejs.org/en/download/. Click the Windows Installer button to download the latest default version. At the time this article was written, version 10.16.0-x64 was the latest version. The Node.js installer includes the NPM package manager.</p>
<p><img src="https://raw.githubusercontent.com/app-generator/docs-creativetim/master/static/donwload-nodejs-installer-windows-1.png" alt="NodeJs Installer." /></p>
<p>Execute the installer, and choosing the default options should be enough to have a successfull installation:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>node <span class="nt">-v</span>
<span class="nv">$ </span>npm <span class="nt">-v</span>
</code></pre></div></div>
</main>
</div>
</div>
<!-- Core JS Files -->
<script src="../../../assets/js/core/jquery.min.js" ></script>
<script src="../../../assets/js/core/popper.min.js" ></script>
<script src="../../../assets/js/core/bootstrap.min.js" ></script>
<script src="../../../assets/js/plugins/dashboard/free/perfect-scrollbar.jquery.min.js" ></script>
<!-- Google Maps Plugin -->
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chart JS -->
<script src="../../../assets/js/plugins/dashboard/free/chartjs.min.js"></script>
<!-- Notifications Plugin -->
<script src="../../../assets/js/plugins/dashboard/free/bootstrap-notify.js"></script>
<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc --><script src="../../../assets/js/dashboard-free.js?v=1.0.0"></script><!-- Black Dashboard DEMO methods, don't include it in your project! -->
<script src="../../../assets/demo/dashboard/free/demo.js"></script>
<script>
$(document).ready(function(){
$().ready(function(){
$sidebar = $('.sidebar');
$navbar = $('.navbar');
$main_panel = $('.main-panel');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
sidebar_mini_active = true;
white_color = false;
window_width = $(window).width();
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
$('.fixed-plugin a').click(function(event){
if($(this).hasClass('switch-trigger')){
if(event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .background-color span').click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if($sidebar.length != 0){
$sidebar.attr('data',new_color);
}
if($main_panel.length != 0){
$main_panel.attr('data',new_color);
}
if($full_page.length != 0){
$full_page.attr('filter-color',new_color);
}
if($sidebar_responsive.length != 0){
$sidebar_responsive.attr('data',new_color);
}
});
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function(){
var $btn = $(this);
if(sidebar_mini_active == true){
$('body').removeClass('sidebar-mini');
sidebar_mini_active = false;
blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
}else{
$('body').addClass('sidebar-mini');
sidebar_mini_active = true;
blackDashboard.showSidebarMessage('Sidebar mini activated...');
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function(){
window.dispatchEvent(new Event('resize'));
},180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function(){
clearInterval(simulateWindowResize);
},1000);
});
$('.switch-change-color input').on("switchChange.bootstrapSwitch", function(){
var $btn = $(this);
if(white_color == true){
$('body').addClass('change-background');
setTimeout(function(){ $('body').removeClass('change-background');
$('body').removeClass('white-content'); }, 900);
white_color = false;
}else{
$('body').addClass('change-background');
setTimeout(function(){ $('body').removeClass('change-background');
$('body').addClass('white-content');}, 900);
white_color = true;
}
});
$('.light-badge').click(function(){
$('body').addClass('white-content');
});
$('.dark-badge').click(function(){
$('body').removeClass('white-content');
});
});
});
</script>
<script src="../../../assets/demo/docs.min.js"></script>
<script src="../../../assets/demo/vendor/anchor.min.js"></script>
<script src="../../../assets/demo/vendor/clipboard.min.js"></script>
<script src="../../../assets/demo/vendor/holder.min.js"></script>
<script src="../../../assets/demo/src/application.js"></script>
<script>
$(document).ready(function(){
if($('#lineChartExample').length != 0){
demo.initDocChart();
}
});
</script>
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
</script>
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script><script>
window.TrackJS &&
TrackJS.install({
token: "ee6fab19c5a04ac1a32a645abde4613a",
application: "black-dashboard-free"
});
</script>
</body>
</html>