Lucky Webapp Add Bootstrap

Published: 2021-08-21

Intro

In this post, I will show you how to add Bootstrap styling to a Lucky webapp.

Software Used

The following software versions are used in this post.

  • Lucky - 0.28.0
  • Bootstrap - 5.1.0

Installation

First up, use Yarn to install Bootstrap.

cmd
yarn add bootstrap

# output
   
yarn add v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "webpack@^5.1.0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
warning " > [email protected]" has unmet peer dependency "@popperjs/core@^2.9.3".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
Done in 7.70s.

Next, import Bootstrap near the top of the src/css/app.scss file.

file
// src/css/app.scss
@import "bootstrap";

That takes care of the CSS component. For some of the Bootstrap components to work correctly (dropdown, popovers, etc..) Javascript plugins are required.

Install PopperJS with Yarn.

cmd
yarn add @popperjs/core

# output
   
yarn add v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "webpack@^5.1.0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @popperjs/[email protected]
info All dependencies
└─ @popperjs/[email protected]
Done in 3.72s.

Now, import the Bootstrap JS component in the src/js/app.js file.

file
// src/js/app.js
import "bootstrap";

Finally, restart the dev server.

Usage

The following snippet from here can be used as is, except it needs to be converted to Lucky syntax.

html
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Lucky templates are written in Crystal and are therefore type safe. This is one of the reasons I was attracted to Lucky. This tool can be used to convert HTML to a Lucky template.

This excellent VSCode plugin by Stephen Dolan, can also be used to translate HTML to Lucky syntax from within VSCode.

The resulting template is below.

crystal
div class: "card", style: "width: 18rem;" do
  div class: "card-body" do
    h5 "Special title treatment", class: "card-title"
    para "With supporting text below as a natural lead-in to additional content.", class: "card-text"
    a "Go somewhere", class: "btn btn-primary", href: "#"
  end
end

Add the snippet to a page view and Bob's your uncle.

Outro

In this post, we added the Bootstrap framework to a Lucky webapp.