Installation

Luda can be easily installed through multiple ways.

Install Pre-built JavaScript and CSS

Step 1: Download Pre-built Files

Step 2: Include Them in Your Template

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hi Luda!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <!-- Use default theme for example. The CSS of each theme is built seperately, don't include multiple themes toghther. -->
    <link rel="stylesheet" href="https://unpkg.com/luda@0.3.3/dist/css/luda-default.min.css">
  </head>
  <body>
    <h1>Hi Luda!</h1>
    <script src="https://unpkg.com/luda@0.3.3/dist/js/luda.min.js"></script>
  </body>
</html>

You can start with this template and modify it to your needs.

Install in Node.js Powered Apps

Step 1: Download With Yarn or Npm

Yarn

$ yarn add luda@0.3.3

Npm

$ npm install luda@0.3.3 --save

Step 2: Choose a Theme and Import It

// In your sass or scss entry file
// Import your custom variable overrides.
@import path_to_your_sass_variables
// Import default theme for example. Don't include multiple themes toghther.
@import 'path_to_node_modules/luda/src/sass/default/index'

Step 3: Import Luda’s JavaScript

// In your Javascript entry file
import 'luda'

Install in Ruby on Rails Apps

Webpacker is an exciting feature since Rails 6, it’s a more advanced way to manage front-end assets in Rails. So if you want to install Luda in Rails applications, Webpacker is the recommanded way. And the installation process is similar to installing Luda in Node.js powered applications. If you stick to Sprockets, you can follow the belowing steps to install Luda.

Step 1: Download With Bundler

Add luda gem to your Gemfile first:

gem 'luda', '0.3.3'

then run bundle in command line.

$ bundle

Step 2: Choose a Theme and Import It in application.sa(c)ss

// In application.sass or application.scss
// Import your custom variable overrides.
@import path_to_your_sass_variables
// Import default theme for example. Don't include multiple themes toghther.
@import luda/default

If application.css exists in your project, rename it to .sass or .scss extension. And don’t use require statement to import files, use @import instead.

Step 3: Import JavaScript in application.js

// In application.js
//= require luda

Install in Other Ruby Apps

If your project is based on Sprokets or Hanami, Luda assets will be added to load path automatically, you just need require the assets in your project. Otherwise, you need manually register Luda assets, you can check Luda gem source code and your framework documentation to do that.