Lucky Webapp Add Bootstrap

published: 21st of August 2021

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 fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > compression-webpack-plugin@7.1.2" has unmet peer dependency "webpack@^5.1.0".
warning " > sass-loader@10.2.0" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
warning " > bootstrap@5.1.0" 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
└─ bootstrap@5.1.0
info All dependencies
└─ bootstrap@5.1.0
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 fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > compression-webpack-plugin@7.1.2" has unmet peer dependency "webpack@^5.1.0".
warning " > sass-loader@10.2.0" 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/core@2.9.3
info All dependencies
└─ @popperjs/core@2.9.3
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.