59 lines
2.1 KiB
Org Mode
59 lines
2.1 KiB
Org Mode
|
#+title: Using cl-sbt/card Macros in a Web Application
|
||
|
|
#+author: Marcus Kammer
|
||
|
|
#+email: marcus.kammer@mailbox.org
|
||
|
|
#+date: [2023-09-02 Sat]
|
||
|
|
* Introduction
|
||
|
|
|
||
|
|
The card component is a versatile and flexible container for displaying content
|
||
|
|
in a neat and organized fashion. Cards can hold a variety of elements such as
|
||
|
|
images, text, links, and even other components like buttons. This makes them
|
||
|
|
ideal for showcasing related pieces of information, or for creating a grid of
|
||
|
|
similar elements.
|
||
|
|
|
||
|
|
** Bootstrap Cards
|
||
|
|
|
||
|
|
[[https://getbootstrap.com/docs/][Bootstrap]] is a well-known front-end framework offering a range of components,
|
||
|
|
one of which is the [[https://getbootstrap.com/docs/5.3/components/card/][card]]. It allows developers to create attractive and
|
||
|
|
functional card components easily.
|
||
|
|
|
||
|
|
*** How Bootstrap Cards Work
|
||
|
|
|
||
|
|
Bootstrap cards are mainly constructed using HTML and CSS. Bootstrap provides
|
||
|
|
various classes to style and align the content within the card:
|
||
|
|
|
||
|
|
- Cards can contain multiple elements like headers, footers, and body content.
|
||
|
|
- Cards are flexible; you can add images, buttons, and other elements inside
|
||
|
|
them.
|
||
|
|
- Bootstrap classes can be used to control the card's appearance and behavior,
|
||
|
|
such as rounded corners, shadow, and so on.
|
||
|
|
|
||
|
|
* Integrating cl-sbt/card Macros
|
||
|
|
|
||
|
|
If you're working on a Common Lisp web application and want to include
|
||
|
|
Bootstrap-style cards, the cl-sbt/card macros can help. Below is an example of
|
||
|
|
how to integrate this functionality into your project:
|
||
|
|
|
||
|
|
#+begin_src lisp
|
||
|
|
(defpackage my-web-app
|
||
|
|
(:use :cl :cl-sbt/card)
|
||
|
|
(:export :generate-card-page))
|
||
|
|
|
||
|
|
(in-package :my-web-app)
|
||
|
|
|
||
|
|
(defun generate-card-page ()
|
||
|
|
"Generates an HTML page featuring a card using cl-sbt/card macros."
|
||
|
|
(spinneret:with-html-string
|
||
|
|
(:html
|
||
|
|
(:head
|
||
|
|
(:title "Card Example")
|
||
|
|
;; Include Bootstrap CSS here
|
||
|
|
)
|
||
|
|
(:body
|
||
|
|
(:h1 "Card Example")
|
||
|
|
(card (:title "Card Title" :content "This is the content of the card."))
|
||
|
|
;; Include Bootstrap JavaScript initialization script here
|
||
|
|
))))
|
||
|
|
|
||
|
|
(generate-card-page)
|
||
|
|
#+end_src
|