marcuskammer/dev.metalisp.sbt
1
1
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions
A Common Lisp library for generating Bootstrap-based HTML markup.
105 commits 1 branch 0 tags 2.2 MiB
Common Lisp 98.2%
HTML 1.5%
JavaScript 0.3%
Find a file
Marcus Kammer 9c6b1bfa2a
Add card group macro
2023-07-13 21:57:37 +02:00
examples/album Re-organize album parts 2023-07-13 15:14:10 +02:00
src Add card group macro 2023-07-13 21:57:37 +02:00
tests Init commit 2023-06-29 17:19:12 +02:00
.gitignore Init commit 2023-06-29 17:19:12 +02:00
cl-sbt.asd Re-organize album parts 2023-07-13 15:14:10 +02:00
LICENSE Add LICENSE information 2023-07-02 13:23:30 +02:00
README.md Update README 2023-07-11 21:10:11 +02:00
README.org Update README 2023-07-11 21:10:11 +02:00

README.md

Table of Contents

  1. Cl-Sbt
    1. Usage
      1. Defining a Card
      2. Defining a Dropdown
    2. Installation
    3. Author
    4. Copyright

Cl-Sbt

Common Lisp Spinneret Bootstrap Templates

Usage

Defining a Card

The following code demonstrates how to define a card using the card macro.

(cl-sbt-card:card
  (cl-sbt-card:body
    (cl-sbt-card:title "Card title")
    (cl-sbt-card:subtitle "Card subtitle")
    (cl-sbt-card:text "Some quick example text to build on the card title and make up the bulk of the card's content.")
    (cl-sbt-card:link (:href "#") "Card link")))

<div class=card>
 <div class=card-body>
  <h5 class=card-title>Card title</h5>
  <h6
      class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
  <p class=card-text>Some quick example text to build on the card title and make up
   the bulk of the card&#39;s content.
  <a class=card-link href=#>Card link</a>
 </div>
</div>

The following code demonstrates how to define a card using the card-with-img macro.

(cl-sbt-card:card-with-img (:img-src "test.jpg")
  (cl-sbt-card:title "Card title")
  (cl-sbt-card:subtitle "Card subtitle")
  (cl-sbt-card:text "Some quick example text to build on the card title and make up the bulk of the card's content.")
  (cl-sbt-card:link (:href "#") "Card link"))

<div class=card>
 <img class=card-img-top src=test.jpg
      alt="Card Image">
 <div class=card-body>
  <h5 class=card-title>Card title</h5>
  <h6
      class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
  <p class=card-text>Some quick example text to build on the card title and make up
   the bulk of the card&#39;s content.
  <a class=card-link href=#>Card link</a>
 </div>
</div>

Defining a Dropdown

The following code demonstrates how to define a dropdown using the dropdown macro.

(cl-sbt-dropdown:dropdown (:title "Dropdown button")
  (cl-sbt-dropdown:menu
    (cl-sbt-dropdown:item "Action")
    (cl-sbt-dropdown:item "Another action")
    (cl-sbt-dropdown:item "Something else here")))

<div class=dropdown>
 <button class="btn btn-secondary dropdown-toggle"
         type=button data-bs-toggle=dropdown
         aria-expanded=false>Dropdown button</button>
 <ul class=dropdown-menu>
  <li><a class=dropdown-item href=#>Action</a>
  <li><a class=dropdown-item href=#>Another action</a>
  <li><a class=dropdown-item href=#>Something else here</a>
 </ul>
</div>

Installation

git clone https://git.sr.ht/~marcuskammer/cl-sbt ~/quicklisp/local-projects/cl-sbt/

(ql:quickload :cl-sbt)

Author

Copyright

Copyright (c) 2023 Marcus Kammer (marcus.kammer@mailbox.org)