Introduction

How to get started with Landkit!

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 [email protected].

New & extended components

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 components.

Dev setup

To get started, you need to do the following:

  1. Make sure you have Node installed since Landkit uses npm to manage dependencies. If you don't, installing is quite easy, just visit the Node Downloads page and install it.
  2. Unzip your theme and open your command line, making sure your command line prompt is at the root of the unzipped theme directory.
  3. npm install: Open your command line to the root directory of your unzipped theme and run to install all of Landkit's dependencies.

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 Control + C.

Compiling

Webpack is used to manage Landkit development. Open your command line to the root directory of the theme to use the following commands:

  • npm start: 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.
  • npm run build: Generates a /dist directory with all the production files.

File structure

  • 📁 dist - Generated production files
  • 📁 node_modules - Directory where npm installs dependencies
  • 📁 src
    • 📁 favicon - Favicon files
    • 📁 fonts - HK Grotesk Pro font and Feather Icon font
    • 📁 html - HTML source
    • 📁 img - Image assets
    • 📁 js - Javascript source
    • 📁 partials - HTML partials
    • 📁 scss - SCSS source for theme
    • 📁 video - Video assets
  • 📄 .browserslistrc - Config to share target browsers and Node.js versions between different front-end tools
  • 📄 .gitignore - Hide all unnecessary files from Git
  • 📄 LICENSE.md - Theme license
  • 📄 package.json - List of dependencies and npm information
  • 📄 package-lock.json - Describes the exact dependency tree that was generated
  • 📄 README.md - Theme info
  • 📄 webpack.config.js - Webpack config file

Handlebars Webpack Plugin

The handlebars-webpack-plugin 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:

  • footer.html
    • classList (string) - Parameter for passing additional classnames
  • head.html
    • title (string) - Parameter for the page title
  • modals.html
  • navbar.html
    • classList (string) - Parameter for passing additional classnames
    • container (string) - Parameter for passing container classname
  • scripts.html
  • sidenav.html

Easily create new .html partials inside the /partials folder and point to them from any file by specifying the path to the partial file inside {{> }} curly brackets.

Please read the official package documentation for more info.

Customizing SCSS

There are 2 basic ways to customize your theme...

  1. Customizing SCSS. This is more versatile and sustainable way to customize Landkit, but requires the webpack 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:
    • user-variables.scss: This file can be used to override Bootstrap core and Landkit variables for customizing elements that have been tied to variables.
    • user.scss: This file can be used for writing custom SCSS that will be compiled alongside Bootstrap and Landkit's core files.
  2. Compiled CSS. If you plan on using Landkit "as is", or only need limited customization, feel free to simply attach the compiled theme.bundle.css file in the dist/assets/css directory.
Jump to