1436 lines
60 KiB
HTML
1436 lines
60 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="../assets/favicon/favicon.ico" type="image/x-icon" />
|
||
|
||
<!-- Map CSS -->
|
||
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" />
|
||
|
||
<!-- Libs CSS -->
|
||
<link rel="stylesheet" href="../assets/css/libs.bundle.css" />
|
||
|
||
<!-- Theme CSS -->
|
||
<link rel="stylesheet" href="../assets/css/theme.bundle.css" />
|
||
|
||
<!-- Title -->
|
||
<title>Landkit</title>
|
||
</head>
|
||
<body class="bg-light" style="padding-top: 84px;">
|
||
|
||
<!-- MODALS -->
|
||
<!-- Example -->
|
||
<div class="modal fade" id="modalExample" tabindex="-1" role="dialog" aria-labelledby="modalExampleTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Image -->
|
||
<div class="text-center">
|
||
<img src="../assets/img/illustrations/illustration-1.png" alt="..." class="img-fluid mb-3" style="width: 200px;">
|
||
</div>
|
||
|
||
<!-- Heading -->
|
||
<h2 class="font-weight-bold text-center mb-1" id="modalExampleTitle">
|
||
Schedule a demo with us
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-lg text-center text-muted mb-6 mb-md-8">
|
||
We can help you solve company communication.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form>
|
||
<div class="row">
|
||
<div class="col-12 col-md-6">
|
||
|
||
<!-- First name -->
|
||
<div class="form-label-group">
|
||
<input type="text" class="form-control form-control-flush" id="registrationFirstNameModal" placeholder="First name">
|
||
<label for="registrationFirstNameModal">First name</label>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
|
||
<!-- Last name -->
|
||
<div class="form-label-group">
|
||
<input type="text" class="form-control form-control-flush" id="registrationLastNameModal" placeholder="Last name">
|
||
<label for="registrationLastNameModal">Last name</label>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12 col-md-6">
|
||
|
||
<!-- Email -->
|
||
<div class="form-label-group">
|
||
<input type="email" class="form-control form-control-flush" id="registrationEmailModal" placeholder="Email">
|
||
<label for="registrationEmailModal">Email</label>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
|
||
<!-- Password -->
|
||
<div class="form-label-group">
|
||
<input type="password" class="form-control form-control-flush" id="registrationPasswordModal" placeholder="Password">
|
||
<label for="registrationPasswordModal">Password</label>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary mt-3 lift">
|
||
Request a demo
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Signup: Horizontal -->
|
||
<div class="modal fade" id="modalSignupHorizontal" tabindex="-1" role="dialog" aria-labelledby="modalSignupHorizontalTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="card card-row">
|
||
<div class="row gx-0">
|
||
<div class="col-12 col-md-6 bg-cover card-img-left" style="background-image: url(../assets/img/photos/photo-8.jpg);">
|
||
|
||
<!-- Image (placeholder) -->
|
||
<img src="../assets/img/photos/photo-8.jpg" alt="..." class="img-fluid d-md-none invisible">
|
||
|
||
<!-- Shape -->
|
||
<div class="shape shape-right shape-fluid-y svg-shim text-white d-none d-md-block">
|
||
<svg viewBox="0 0 112 690" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M116 0H51v172C76 384 0 517 0 517v173h116V0z" fill="currentColor"/></svg> </div>
|
||
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<div class="card-body">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Heading -->
|
||
<h2 class="mb-0 font-weight-bold text-center" id="modalSignupHorizontalTitle">
|
||
Sign Up
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-6 text-center text-muted">
|
||
Simplify your workflow in minutes.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form class="mb-6">
|
||
|
||
<!-- Email -->
|
||
<div class="form-group">
|
||
<label class="sr-only" for="modalSignupHorizontalEmail">
|
||
Your email
|
||
</label>
|
||
<input type="email" class="form-control" id="modalSignupHorizontalEmail" placeholder="Your email">
|
||
</div>
|
||
|
||
<!-- Password -->
|
||
<div class="form-group mb-5">
|
||
<label class="sr-only" for="modalSignupHorizontalPassword">
|
||
Create a password
|
||
</label>
|
||
<input type="password" class="form-control" id="modalSignupHorizontalPassword" placeholder="Create a password">
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary" type="submit">
|
||
Sign up
|
||
</button>
|
||
|
||
</form>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-0 font-size-sm text-center text-muted">
|
||
Already have an account? <a href="../signin-illustration.html">Log in</a>.
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Signup: Vertical -->
|
||
<div class="modal fade" id="modalSignupVertical" tabindex="-1" role="dialog" aria-labelledby="modalSignupVerticalTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="card">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close text-white" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Image -->
|
||
<img src="../assets/img/photos/photo-7.jpg" alt="..." class="card-img-top">
|
||
|
||
<!-- Shape -->
|
||
<div class="position-relative">
|
||
<div class="shape shape-bottom shape-fluid-x svg-shim text-white">
|
||
<svg viewBox="0 0 2880 480" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2160 0C1440 240 720 240 720 240H0v240h2880V0h-720z" fill="currentColor"/></svg> </div>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="card-body">
|
||
|
||
<!-- Heading -->
|
||
<h2 class="mb-0 font-weight-bold text-center" id="modalSignupVerticalTitle">
|
||
Sign Up
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-6 text-center text-muted">
|
||
Simplify your workflow in minutes.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form class="mb-6">
|
||
|
||
<!-- Email -->
|
||
<div class="form-group">
|
||
<label class="sr-only" for="modalSignupVerticalEmail">
|
||
Your email
|
||
</label>
|
||
<input type="email" class="form-control" id="modalSignupVerticalEmail" placeholder="Your email">
|
||
</div>
|
||
|
||
<!-- Password -->
|
||
<div class="form-group mb-5">
|
||
<label class="sr-only" for="modalSignupVerticalPassword">
|
||
Create a password
|
||
</label>
|
||
<input type="password" class="form-control" id="modalSignupVerticalPassword" placeholder="Create a password">
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary" type="submit">
|
||
Sign up
|
||
</button>
|
||
|
||
</form>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-0 font-size-sm text-center text-muted">
|
||
Already have an account? <a href="../signin-illustration.html">Log in</a>.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Signin: Horizontal -->
|
||
<div class="modal fade" id="modalSigninHorizontal" tabindex="-1" role="dialog" aria-labelledby="modalSigninHorizontalTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="card card-row">
|
||
<div class="row gx-0">
|
||
<div class="col-12 col-md-6 bg-cover card-img-left" style="background-image: url(../assets/img/photos/photo-1.jpg);">
|
||
|
||
<!-- Image (placeholder) -->
|
||
<img src="../assets/img/photos/photo-1.jpg" alt="..." class="img-fluid d-md-none invisible">
|
||
|
||
<!-- Shape -->
|
||
<div class="shape shape-right shape-fluid-y svg-shim text-white d-none d-md-block">
|
||
<svg viewBox="0 0 112 690" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M116 0H51v172C76 384 0 517 0 517v173h116V0z" fill="currentColor"/></svg> </div>
|
||
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<div class="card-body">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Heading -->
|
||
<h2 class="mb-0 font-weight-bold text-center" id="modalSigninHorizontalTitle">
|
||
Sign In
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-6 text-center text-muted">
|
||
Simplify your workflow in minutes.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form class="mb-6">
|
||
|
||
<!-- Email -->
|
||
<div class="form-group">
|
||
<label class="sr-only" for="modalSigninHorizontalEmail">
|
||
Your email
|
||
</label>
|
||
<input type="email" class="form-control" id="modalSigninHorizontalEmail" placeholder="Your email">
|
||
</div>
|
||
|
||
<!-- Password -->
|
||
<div class="form-group mb-5">
|
||
<label class="sr-only" for="modalSigninHorizontalPassword">
|
||
Enter your password
|
||
</label>
|
||
<input type="password" class="form-control" id="modalSigninHorizontalPassword" placeholder="Enter your password">
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary" type="submit">
|
||
Sign in
|
||
</button>
|
||
|
||
</form>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-0 font-size-sm text-center text-muted">
|
||
Don't have an account yet? <a href="../signin-illustration.html">Sign up</a>.
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Signin: Vertical -->
|
||
<div class="modal fade" id="modalSigninVertical" tabindex="-1" role="dialog" aria-labelledby="modalSigninVerticalTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="card">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close text-white" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Image -->
|
||
<img src="../assets/img/photos/photo-21.jpg" alt="..." class="card-img-top">
|
||
|
||
<!-- Shape -->
|
||
<div class="position-relative">
|
||
<div class="shape shape-bottom shape-fluid-x svg-shim text-white">
|
||
<svg viewBox="0 0 2880 480" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2160 0C1440 240 720 240 720 240H0v240h2880V0h-720z" fill="currentColor"/></svg> </div>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="card-body">
|
||
|
||
<!-- Heading -->
|
||
<h2 class="mb-0 font-weight-bold text-center" id="modalSigninVerticalTitle">
|
||
Sign In
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-6 text-center text-muted">
|
||
Simplify your workflow in minutes.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form class="mb-6">
|
||
|
||
<!-- Email -->
|
||
<div class="form-group">
|
||
<label class="sr-only" for="modalSigninVerticalEmail">
|
||
Your email
|
||
</label>
|
||
<input type="email" class="form-control" id="modalSigninVerticalEmail" placeholder="Your email">
|
||
</div>
|
||
|
||
<!-- Password -->
|
||
<div class="form-group mb-5">
|
||
<label class="sr-only" for="modalSigninVerticalPassword">
|
||
Enter your password
|
||
</label>
|
||
<input type="password" class="form-control" id="modalSigninVerticalPassword" placeholder="Enter your password">
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary" type="submit">
|
||
Sign in
|
||
</button>
|
||
|
||
</form>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-0 font-size-sm text-center text-muted">
|
||
Don't have an account yet? <a href="../signin-illustration.html">Sign up</a>.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Payment -->
|
||
<div class="modal fade" id="modalPayment" tabindex="-1" role="dialog" aria-labelledby="modalPaymentTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Heading -->
|
||
<h2 class="font-weight-bold text-center mb-1" id="modalPaymentTitle">
|
||
Add Payment
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-lg text-center text-muted mb-6 mb-md-8">
|
||
Simplify your workflow in minutes.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form>
|
||
|
||
<!-- Name -->
|
||
<div class="form-group">
|
||
<label class="form-label" for="modalPaymentName">Name on card</label>
|
||
<input class="form-control" id="modalPaymentName" type="text" placeholder="First Last">
|
||
</div>
|
||
|
||
<!-- Name -->
|
||
<div class="form-group">
|
||
<label class="form-label" for="modalPaymentNumbber">Card number</label>
|
||
<input class="form-control" id="modalPaymentNumbber" type="number" placeholder="4242 4242 4242 4242">
|
||
</div>
|
||
|
||
<!-- Name -->
|
||
<div class="form-group">
|
||
<label class="form-label" for="modalPaymentDate">Exp. Date</label>
|
||
<input class="form-control" id="modalPaymentDate" type="text" placeholder="03/2023">
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary mt-3 lift">
|
||
Add Payment Method
|
||
</button>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- NAVBAR -->
|
||
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-white border-bottom">
|
||
<div class="container-fluid">
|
||
|
||
<!-- Brand -->
|
||
<a class="navbar-brand" href="../index.html">
|
||
<img src="../assets/img/brand.svg" class="navbar-brand-img" alt="...">
|
||
</a>
|
||
|
||
<!-- Toggler -->
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<!-- Collapse -->
|
||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||
|
||
<!-- Toggler -->
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||
<i class="fe fe-x"></i>
|
||
</button>
|
||
|
||
<!-- Navigation -->
|
||
<ul class="navbar-nav ml-auto">
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" id="navbarLandings" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
|
||
Landings
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-xl p-0" aria-labelledby="navbarLandings">
|
||
<div class="row gx-0">
|
||
<div class="col-12 col-lg-6">
|
||
<div class="dropdown-img-left" style="background-image: url(../assets/img/photos/photo-3.jpg);">
|
||
|
||
<!-- Heading -->
|
||
<h4 class="font-weight-bold text-white mb-0">
|
||
Want to see an overview?
|
||
</h4>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-sm text-white">
|
||
See all the pages at once.
|
||
</p>
|
||
|
||
<!-- Button -->
|
||
<a href="../overview.html" class="btn btn-sm btn-white shadow-dark fonFt-size-sm">
|
||
View all pages
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-lg-6">
|
||
<div class="dropdown-body">
|
||
<div class="row gx-0">
|
||
<div class="col-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Services
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../coworking.html">
|
||
Coworking
|
||
</a>
|
||
<a class="dropdown-item" href="../rental.html">
|
||
Rental
|
||
</a>
|
||
<a class="dropdown-item mb-5" href="../job.html">
|
||
Job Listing
|
||
</a>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Apps
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../desktop-app.html">
|
||
Desktop
|
||
</a>
|
||
<a class="dropdown-item" href="../mobile-app.html">
|
||
Mobile
|
||
</a>
|
||
|
||
</div>
|
||
<div class="col-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Web
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../index.html">
|
||
Basic
|
||
</a>
|
||
<a class="dropdown-item" href="../startup.html">
|
||
Startup
|
||
</a>
|
||
<a class="dropdown-item" href="../enterprise.html">
|
||
Enterprise
|
||
</a>
|
||
<a class="dropdown-item" href="../service.html">
|
||
Service
|
||
</a>
|
||
<a class="dropdown-item" href="../cloud.html">
|
||
Cloud Hosting
|
||
</a>
|
||
<a class="dropdown-item" href="../agency.html">
|
||
Agency
|
||
</a>
|
||
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" id="navbarPages" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
|
||
Pages
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-lg" aria-labelledby="navbarPages">
|
||
<div class="row gx-0">
|
||
<div class="col-6">
|
||
<div class="row gx-0">
|
||
<div class="col-12 col-lg-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Career
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../careers.html">
|
||
Listing
|
||
</a>
|
||
<a class="dropdown-item mb-5" href="../career-single.html">
|
||
Opening
|
||
</a>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Company
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../about.html">
|
||
About
|
||
</a>
|
||
<a class="dropdown-item" href="../pricing.html">
|
||
Pricing
|
||
</a>
|
||
<a class="dropdown-item mb-5 mb-lg-0" href="../terms-of-service.html">
|
||
Terms
|
||
</a>
|
||
|
||
</div>
|
||
<div class="col-12 col-lg-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Help center
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../help-center.html">
|
||
Overview
|
||
</a>
|
||
<a class="dropdown-item mb-5" href="../help-center-article.html">
|
||
Article
|
||
</a>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Contact
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../contact.html">
|
||
Basic
|
||
</a>
|
||
<a class="dropdown-item" href="../contact-alt.html">
|
||
Cover
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="row gx-0">
|
||
<div class="col-12 col-lg-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Blog
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../blog.html">
|
||
Rich View
|
||
</a>
|
||
<a class="dropdown-item" href="../blog-post.html">
|
||
Article
|
||
</a>
|
||
<a class="dropdown-item" href="../blog-showcase.html">
|
||
Showcase
|
||
</a>
|
||
<a class="dropdown-item mb-5 mb-lg-0" href="../blog-search.html">
|
||
Search
|
||
</a>
|
||
|
||
</div>
|
||
<div class="col-12 col-lg-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Portfolio
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../portfolio-masonry.html">
|
||
Masonry
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-grid-rows.html">
|
||
Grid Rows
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-parallax.html">
|
||
Parallax
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-case-study.html">
|
||
Case Study
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-sidebar.html">
|
||
Sidebar
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-sidebar-fluid.html">
|
||
Sidebar: Fluid
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-grid.html">
|
||
Basic Grid
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" id="navbarAccount" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
|
||
Account
|
||
</a>
|
||
<ul class="dropdown-menu" aria-labelledby="navbarAccount">
|
||
<li class="dropdown-item dropright">
|
||
<a class="dropdown-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Settings
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="../account-general.html">
|
||
General
|
||
</a>
|
||
<a class="dropdown-item" href="../account-security.html">
|
||
Security
|
||
</a>
|
||
<a class="dropdown-item" href="../account-notifications.html">
|
||
Notifications
|
||
</a>
|
||
<a class="dropdown-item" href="../billing-plans-and-payment.html">
|
||
Plans & Payment
|
||
</a>
|
||
<a class="dropdown-item" href="../billing-users.html">
|
||
Users
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="dropdown-item dropright">
|
||
<a class="dropdown-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Sign In
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="../signin-cover.html">
|
||
Side Cover
|
||
</a>
|
||
<a class="dropdown-item" href="../signin-illustration.html">
|
||
Illustration
|
||
</a>
|
||
<a class="dropdown-item" href="../signin.html">
|
||
Basic
|
||
</a>
|
||
<a class="dropdown-item" data-toggle="modal" href="#modalSigninHorizontal">
|
||
Modal Horizontal
|
||
</a>
|
||
<a class="dropdown-item" data-toggle="modal" href="#modalSigninVertical">
|
||
Modal Vertical
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="dropdown-item dropright">
|
||
<a class="dropdown-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Sign Up
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="../signup-cover.html">
|
||
Side Cover
|
||
</a>
|
||
<a class="dropdown-item" href="../signup-illustration.html">
|
||
Illustration
|
||
</a>
|
||
<a class="dropdown-item" href="../signup.html">
|
||
Basic
|
||
</a>
|
||
<a class="dropdown-item" data-toggle="modal" href="#modalSignupHorizontal">
|
||
Modal Horizontal
|
||
</a>
|
||
<a class="dropdown-item" data-toggle="modal" href="#modalSignupVertical">
|
||
Modal Vertical
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="dropdown-item dropright">
|
||
<a class="dropdown-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Password Reset
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="../password-reset-cover.html">
|
||
Side Cover
|
||
</a>
|
||
<a class="dropdown-item" href="../password-reset-illustration.html">
|
||
Illustration
|
||
</a>
|
||
<a class="dropdown-item" href="../password-reset.html">
|
||
Basic
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="dropdown-item dropright">
|
||
<a class="dropdown-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Error
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="../error-cover.html">
|
||
Side Cover
|
||
</a>
|
||
<a class="dropdown-item" href="../error-illustration.html">
|
||
Illustration
|
||
</a>
|
||
<a class="dropdown-item" href="../error.html">
|
||
Basic
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" id="navbarDocumentation" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
|
||
Documentation
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-md" aria-labelledby="navbarDocumentation">
|
||
<div class="list-group list-group-flush">
|
||
<a class="list-group-item" href="../docs/index.html">
|
||
|
||
<!-- Icon -->
|
||
<div class="icon icon-sm text-primary">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="M8 3v.5A1.5 1.5 0 009.5 5h5A1.5 1.5 0 0016 3.5V3h2a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2h2z" fill="#335EEA" opacity=".3"/><path d="M11 2a1 1 0 012 0h1.5a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-5a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5H11z" fill="#335EEA"/><rect fill="#335EEA" opacity=".3" x="7" y="10" width="5" height="2" rx="1"/><rect fill="#335EEA" opacity=".3" x="7" y="14" width="9" height="2" rx="1"/></g></svg> </div>
|
||
|
||
<!-- Content -->
|
||
<div class="ml-4">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="font-weight-bold text-uppercase text-primary mb-0">
|
||
Documentation
|
||
</h6>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-sm text-gray-700 mb-0">
|
||
Customizing and building
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
<a class="list-group-item" href="../docs/alerts.html">
|
||
|
||
<!-- Icon -->
|
||
<div class="icon icon-sm text-primary">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><rect fill="#335EEA" x="4" y="4" width="7" height="7" rx="1.5"/><path d="M5.5 13h4a1.5 1.5 0 011.5 1.5v4A1.5 1.5 0 019.5 20h-4A1.5 1.5 0 014 18.5v-4A1.5 1.5 0 015.5 13zm9-9h4A1.5 1.5 0 0120 5.5v4a1.5 1.5 0 01-1.5 1.5h-4A1.5 1.5 0 0113 9.5v-4A1.5 1.5 0 0114.5 4zm0 9h4a1.5 1.5 0 011.5 1.5v4a1.5 1.5 0 01-1.5 1.5h-4a1.5 1.5 0 01-1.5-1.5v-4a1.5 1.5 0 011.5-1.5z" fill="#335EEA" opacity=".3"/></g></svg> </div>
|
||
|
||
<!-- Content -->
|
||
<div class="ml-4">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="font-weight-bold text-uppercase text-primary mb-0">
|
||
Components
|
||
</h6>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-sm text-gray-700 mb-0">
|
||
Full list of components
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
<a class="list-group-item" href="../docs/changelog.html">
|
||
|
||
<!-- Icon -->
|
||
<div class="icon icon-sm text-primary">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="M5.857 2h7.88a1.5 1.5 0 01.968.355l4.764 4.029A1.5 1.5 0 0120 7.529v12.554c0 1.79-.02 1.917-1.857 1.917H5.857C4.02 22 4 21.874 4 20.083V3.917C4 2.127 4.02 2 5.857 2z" fill="#335EEA" opacity=".3"/><rect fill="#335EEA" x="6" y="11" width="9" height="2" rx="1"/><rect fill="#335EEA" x="6" y="15" width="5" height="2" rx="1"/></g></svg> </div>
|
||
|
||
<!-- Content -->
|
||
<div class="ml-4">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="font-weight-bold text-uppercase text-primary mb-0">
|
||
Changelog
|
||
</h6>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-sm text-gray-700 mb-0">
|
||
Keep track of changes
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<!-- Badge -->
|
||
<span class="badge rounded-pill bg-primary-soft ml-auto">
|
||
2.0.0-alpha
|
||
</span>
|
||
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Button -->
|
||
<a class="navbar-btn btn btn-sm btn-primary lift ml-auto" href="https://themes.getbootstrap.com/product/landkit/" target="_blank">
|
||
Buy now
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- BREADCRUMB -->
|
||
<nav class="d-lg-none bg-gray-800">
|
||
<div class="container-fluid">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
|
||
<!-- Breadcrumb -->
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item">
|
||
<span class="text-white">
|
||
Docs
|
||
</span>
|
||
</li>
|
||
<li class="breadcrumb-item active" aria-current="page">
|
||
<span class="text-white">
|
||
Introduction
|
||
</span>
|
||
</li>
|
||
</ol>
|
||
|
||
</div>
|
||
<div class="col-auto">
|
||
|
||
<!-- Toggler -->
|
||
<div class="navbar-dark">
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidenavCollapse" aria-controls="sidenavCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
</div> <!-- / .container -->
|
||
</nav>
|
||
|
||
<!-- CONTENT -->
|
||
<section>
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-12 col-lg-3 col-xl-2 px-lg-0 border-bottom border-bottom-lg-0 border-right-lg border-gray-300 sidenav sidenav-left">
|
||
|
||
<div class="collapse d-lg-block" id="sidenavCollapse">
|
||
<div class="py-7 py-lg-9 px-lg-7">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Getting started
|
||
</h6>
|
||
|
||
<!-- Links -->
|
||
<ul class="list mb-6">
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/index.html">Introduction</a>
|
||
</li>
|
||
<li class="list-item d-flex">
|
||
<a class="list-link" href="../docs/changelog.html">Changelog</a> <span class="badge rounded-pill bg-primary-soft ml-auto align-self-center">2.0.0-alpha</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Components
|
||
</h6>
|
||
|
||
<!-- Links -->
|
||
<ul class="list mb-6">
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/alerts.html">Alerts</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/avatars.html">Avatars</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/badges.html">Badges</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/buttons.html">Buttons</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/cards.html">Cards</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/devices.html">Devices</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/dropdowns.html">Dropdowns</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/forms.html">Forms</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/icons.html">Icons</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/lists.html">Lists</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/modal.html">Modal</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/navbar.html">Navbar</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/navs.html">Navs</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/pagination.html">Pagination</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/popovers.html">Popovers</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/progress.html">Progress</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/screenshot.html">Screenshot</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/shapes.html">Shapes</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/spinners.html">Spinners</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/switches.html">Switches</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/tables.html">Tables</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/toasts.html">Toasts</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/tooltips.html">Tooltips</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/typography.html">Typography</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Plugins
|
||
</h6>
|
||
|
||
<!-- Links -->
|
||
<ul class="list mb-6">
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/aos.html">AOS</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/bigpicture.html">BigPicture</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/choices.html">Choices</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/countup.html">Count up</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/dropzone.html">Dropzone</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/flickity.html">Flickity</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/isotope.html">Isotope</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/jarallax.html">Jarallax</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/map.html">Map</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/quill.html">Quill</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/smooth-scroll.html">Smooth scroll</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/typed.html">Typed</a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Utilities
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<ul class="list mb-6">
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/background.html">Background</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/borders.html">Borders</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/images.html">Images</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/lift.html">Lift</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/overlay.html">Overlay</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/position.html">Position</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/shadows.html">Shadows</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/sizing.html">Sizing</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/type.html">Type</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/visibility.html">Visibility</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Design
|
||
</h6>
|
||
|
||
<!-- Links -->
|
||
<ul class="list mb-0">
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/figma.html">Figma</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/illustrations.html">Illustrations</a>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-12 col-lg-6 col-xl-8 offset-lg-3 offset-xl-2 py-7 py-lg-9 px-lg-7">
|
||
|
||
<!-- Heading -->
|
||
<h1 class="mb-1">Introduction</h1>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-lg text-gray-700 mb-5">
|
||
How to get started with Landkit!
|
||
</p>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700">
|
||
This guide will help you get started with Landkit! All the important stuff – compiling the source, file structure, build tools, file includes – is documented here, but should you have any questions, always feel free to reach out to support@goodthemes.co.
|
||
</p>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Heading -->
|
||
<h3 class="font-weight-bold" id="newAndExtendedComponents">
|
||
New & extended components
|
||
</h3>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700">
|
||
Landkit extends Bootstrap by not only building on top of its existing components, but also introducing entirely new components and plugins. The best way to get an overview of this is to run through our <a href="alerts.html">components</a>.
|
||
</p>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Heading -->
|
||
<h3 class="font-weight-bold" id="devSetup">
|
||
Dev setup
|
||
</h3>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700">
|
||
To get started, you need to do the following:
|
||
</p>
|
||
|
||
<!-- List -->
|
||
<ol class="text-gray-700">
|
||
<li><strong>Make sure you have Node installed</strong> since Landkit uses npm to manage dependencies. If you don't, installing is quite easy, just visit the <a href="https://nodejs.org/en/download/">Node Downloads page</a> and install it. </li>
|
||
<li><strong>Unzip your theme and open your command line</strong>, making sure your command line prompt is at the root of the unzipped theme directory. </li>
|
||
<li><strong class="badge bg-danger-soft"><code>npm install</code></strong>: Open your command line to the root directory of your unzipped theme and run to install all of Landkit's dependencies.</li>
|
||
</ol>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700">
|
||
It's that simple! If you're not used to using terminal, don't worry, this is as advanced as it gets. If you want to kill the server and stop Webpack, just hit <code>Control + C</code>.
|
||
</p>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Heading -->
|
||
<h3 class="font-weight-bold" id="compiling">
|
||
Compiling
|
||
</h3>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700">
|
||
Webpack is used to manage Landkit development. Open your command line to the root directory of the theme to use the following commands:
|
||
</p>
|
||
|
||
<!-- List -->
|
||
<ul class="text-gray-700">
|
||
<li>
|
||
<strong class="badge bg-danger-soft"><code>npm start</code></strong>: Compile and watch the SCSS/JS/HTML, use Live Reload to update browsers instantly, start a server, and pop a tab in your default browser. Any changes made to the source files will be compiled as soon as you save the file.
|
||
</li>
|
||
<li>
|
||
<strong class="badge bg-danger-soft"><code>npm run build</code></strong>: Generates a <code>/dist</code> directory with all the production files.
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Heading -->
|
||
<h3 class="font-weight-bold mb-5" id="fileStructure">
|
||
File structure
|
||
</h3>
|
||
|
||
<!-- List -->
|
||
<ul>
|
||
<li>
|
||
<strong>📁 dist</strong> - Generated production files
|
||
</li>
|
||
<li>
|
||
<strong>📁 node_modules</strong> - Directory where <code>npm</code> installs dependencies
|
||
</li>
|
||
<li>
|
||
<strong>📁 src</strong>
|
||
<ul>
|
||
<li>
|
||
<strong>📁 favicon</strong> - Favicon files
|
||
</li>
|
||
<li>
|
||
<strong>📁 fonts</strong> - HK Grotesk Pro font and Feather Icon font
|
||
</li>
|
||
<li>
|
||
<strong>📁 html</strong> - HTML source
|
||
</li>
|
||
<li>
|
||
<strong>📁 img</strong> - Image assets
|
||
</li>
|
||
<li>
|
||
<strong>📁 js</strong> - Javascript source
|
||
</li>
|
||
<li>
|
||
<strong>📁 partials</strong> - HTML partials
|
||
</li>
|
||
<li>
|
||
<strong>📁 scss</strong> - SCSS source for theme
|
||
</li>
|
||
<li>
|
||
<strong>📁 video</strong> - Video assets
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<strong>📄 .browserslistrc</strong> - Config to share target browsers and Node.js versions between different front-end tools
|
||
</li>
|
||
<li>
|
||
<strong>📄 .gitignore</strong> - Hide all unnecessary files from Git
|
||
</li>
|
||
<li>
|
||
<strong>📄 LICENSE.md</strong> - Theme license
|
||
</li>
|
||
<li>
|
||
<strong>📄 package.json</strong> - List of dependencies and npm information
|
||
</li>
|
||
<li>
|
||
<strong>📄 package-lock.json</strong> - Describes the exact dependency tree that was generated
|
||
</li>
|
||
<li>
|
||
<strong>📄 README.md</strong> - Theme info
|
||
</li>
|
||
<li>
|
||
<strong>📄 webpack.config.js</strong> - Webpack config file
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Heading -->
|
||
<h3 class="font-weight-bold" id="gulpFileIncludes">
|
||
Handlebars Webpack Plugin
|
||
</h3>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700">
|
||
The <a href="https://www.npmjs.com/package/handlebars-webpack-plugin" target="_blank">handlebars-webpack-plugin</a> package is used to make partials easier to use for initial development. For Landkit, we only use it for a handful of components that are found on most pages. The following partials are available:
|
||
</p>
|
||
|
||
<!-- List -->
|
||
<ul class="text-gray-700">
|
||
<li>
|
||
<code>footer.html</code>
|
||
<ul>
|
||
<li>
|
||
<code>classList (string)</code> - Parameter for passing additional classnames
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<code>head.html</code>
|
||
<ul>
|
||
<li>
|
||
<code>title (string)</code> - Parameter for the page title
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<code>modals.html</code>
|
||
</li>
|
||
<li>
|
||
<code>navbar.html</code>
|
||
<ul>
|
||
<li>
|
||
<code>classList (string)</code> - Parameter for passing additional classnames
|
||
</li>
|
||
<li>
|
||
<code>container (string)</code> - Parameter for passing container classname
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<code>scripts.html</code>
|
||
</li>
|
||
<li>
|
||
<code>sidenav.html</code>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700">
|
||
Easily create new <code>.html</code> partials inside the <code>/partials</code> folder and point to them
|
||
from any file by specifying the path to the partial file inside <code>{{> }}</code> curly brackets.
|
||
</p>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700">
|
||
Please read the <a href="https://www.npmjs.com/package/handlebars-webpack-plugin" target="_blank">official package documentation</a> for more info.
|
||
</p>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Heading -->
|
||
<h3 class="font-weight-bold mb-5" id="customizingScss">
|
||
Customizing SCSS
|
||
</h3>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700">
|
||
There are 2 basic ways to customize your theme...
|
||
</p>
|
||
|
||
<!-- List -->
|
||
<ol class="text-gray-700">
|
||
<li>
|
||
<strong>Customizing SCSS.</strong> This is more versatile and sustainable way to customize Landkit, but requires the <code>webpack</code> compilation steps outlined above. The 2 major benefits of this strategy are using variable overrides to easily customize theme styles, plus you never have to touch Bootstrap or Landkit's source, meaning future updates will be much, much, simpler. There are 2 provided files that make this strategy simple to implement:
|
||
<ul>
|
||
<li>
|
||
<code>user-variables.scss</code>: This file can be used to override Bootstrap core and Landkit variables for customizing elements that have been tied to variables.
|
||
</li>
|
||
<li>
|
||
<code>user.scss</code>: This file can be used for writing custom SCSS that will be compiled alongside Bootstrap and Landkit's core files.
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<strong>Compiled CSS.</strong> If you plan on using Landkit "as is", or only need limited customization, feel free to simply attach the compiled <code>theme.bundle.css</code> file in the <code>dist/assets/css</code> directory.
|
||
</li>
|
||
</ol>
|
||
|
||
</div>
|
||
<div class="col-12 col-lg-3 col-xl-2 d-none d-lg-block px-lg-0 sidenav sidenav-right">
|
||
<div class="my-7 my-lg-9 px-lg-7 border-left-lg border-gray-300">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Jump to
|
||
</h6>
|
||
|
||
<!-- Links -->
|
||
<ul class="list mb-0">
|
||
<li class="list-item">
|
||
<a class="list-link" href="#newAndExtendedComponents" data-scroll>New & extended components</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#devSetup" data-scroll>Dev setup</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#compiling" data-scroll>Compiling</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#fileStructure" data-scroll>File structure</a>
|
||
</li>
|
||
<li class="list-item d-flex">
|
||
<a class="list-link" href="#gulpFileIncludes" data-scroll>Handlebars Webpack Plugin</a>
|
||
</li>
|
||
<li class="list-item d-flex">
|
||
<a class="list-link" href="#customizingScss" data-scroll>Customizing SCSS</a>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- JAVASCRIPT -->
|
||
<!-- Map JS -->
|
||
<script src='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
|
||
|
||
<!-- Vendor JS -->
|
||
<script src="../assets/js/vendor.bundle.js"></script>
|
||
|
||
<!-- Theme JS -->
|
||
<script src="../assets/js/theme.bundle.js"></script>
|
||
|
||
</body>
|
||
</html>
|