From 954affe9a8c719ac7502afd9eaafcc2bef79004d Mon Sep 17 00:00:00 2001 From: Marcus Kammer Date: Mon, 17 Jul 2023 08:37:39 +0200 Subject: [PATCH] Update cl-sbt-utility add more functions --- src/utility.lisp | 290 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 219 insertions(+), 71 deletions(-) diff --git a/src/utility.lisp b/src/utility.lisp index dbb1e99..727f604 100644 --- a/src/utility.lisp +++ b/src/utility.lisp @@ -1,14 +1,202 @@ +;; Bootstrap utilities are a set of CSS classes designed to assist in the +;; fine-tuning of various aspects of a web layout. The aim is to give +;; developers precise control over visual elements such as spacing, color, +;; opacity, sizing, overflow behavior, and many other facets of web design, +;; without the need to write custom CSS rules for every situation. + +;; These utility classes are designed to be semantic and easy to understand. +;; They provide a common language for developers, allowing team members to +;; quickly grasp the purpose of a class without needing to refer to the CSS +;; definitions. + +;; Here's a brief overview of some of the key utility areas in Bootstrap: + +;; Spacing Utilities: Bootstrap provides classes for modifying the margin and +;; padding of elements. These classes allow for changes to be applied uniformly +;; around an element, or targeted to specific sides. + +;; Color Utilities: These classes allow developers to easily apply background +;; color to elements, and they're based on the theme colors defined in +;; Bootstrap's Sass variables. + +;; Opacity Utilities: With these classes, developers can easily control the +;; transparency of an element without modifying its color properties directly. + +;; Overflow Utilities: Bootstrap provides utilities to control how content +;; overflows its container. These classes can be used to create scrollable +;; areas, hide overflowing content, or automatically wrap overflow. + +;; Sizing Utilities: These utilities offer control over an element's width and +;; height. They can be absolute (pixels), relative (%), or based on viewport +;; height/width. + +;; Text Utilities: These classes provide a way to change text alignment, +;; wrapping, weight, color, and more. They're useful for managing the +;; appearance of typography across different viewport sizes. + +;; Display Utilities: These classes control the CSS display property of +;; elements, allowing for easy adjustments to visibility and layout across +;; different screen sizes. + (defpackage :cl-sbt-utility (:use :cl) (:export + :background + :color + :opacity + :overflow + :sizing :spacing :text - :valign - :sizing) + :valign) (:documentation "A module for generating Bootstrap utility classes.")) (in-package :cl-sbt-utility) +(defun background (&key (color nil) (gradient nil)) + "Generates a Bootstrap background class. + +COLOR: Specifies the color, should be :primary, :secondary, :success, +:danger, :warning, :info, :light, :dark, :body, :muted, :white, :transparent, +or nil (default color). + +GRADIENT: Specifies if the background should have a gradient, should be :t or :nil. +If :t, it will add a 'bg-gradient' to the class string. + +Example 1: + (background :color :primary) + ; This will generate a string 'bg-primary' + +Example 2: + (background :color :danger :gradient :t) + ; This will generate a string 'bg-danger bg-gradient' + +Example 3: + (background :color :light) + ; This will generate a string 'bg-light' + +Example 4: + (background :color :dark :gradient :t) + ; This will generate a string 'bg-dark bg-gradient'" + (let ((color-str (if (null color) "" (format nil "bg-~a" color))) + (gradient-str (if (eq gradient :t) " bg-gradient" ""))) + (string-downcase (concatenate 'string color-str gradient-str)))) + +(defun color (&key (text nil) (background nil)) + "Generates a Bootstrap color class. + +TEXT: Specifies the color of the text. Should be 'primary', 'secondary', +'success', 'danger', 'warning', 'info', 'light', 'dark', 'white', 'body', +'muted', 'black-50', 'white-50', 'reset'. + +BACKGROUND: Specifies the color of the background. Should be 'primary', +'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'white', +'transparent'. + +Example 1: + (color :text :primary) + ; This will generate a string 'text-primary' + +Example 2: + (color :background :danger) + ; This will generate a string 'bg-danger' + +Example 3: + (color :text :info :background :dark) + ; This will generate a string 'text-info bg-dark' + +Example 4: + (color :text :white :background :primary) + ; This will generate a string 'text-white bg-primary'" + (string-downcase (concatenate 'string + (if (null text) "" (format nil "text-~a " text)) + (if (null background) "" (format nil "bg-~a" background))))) + +(defun opacity (&key (level nil)) + "Generates a Bootstrap opacity class. + +LEVEL: Specifies the opacity level, should be a number from 0 to 100, or :auto. + +Example 1: + (opacity :level 25) + ; This will generate a string 'opacity-25' + +Example 2: + (opacity :level 50) + ; This will generate a string 'opacity-50' + +Example 3: + (opacity :level 75) + ; This will generate a string 'opacity-75' + +Example 4: + (opacity :level :auto) + ; This will generate a string 'opacity-auto'" + (let ((level-str (if (null level) "" (if (eq level :auto) + "auto" + (format nil "~d" level))))) + (string-downcase (concatenate 'string "opacity-" level-str)))) + +(defun overflow (&key (direction nil) (value nil)) + "Generates a Bootstrap overflow class. + +DIRECTION: Specifies the direction, should be :x, :y, or nil (both directions). + +VALUE: Specifies the overflow value, should be :auto, :hidden, :visible, :scroll, or nil (default value). + +Example 1: + (overflow :direction :x :value :auto) + ; This will generate a string 'overflow-x-auto' + +Example 2: + (overflow :direction :y :value :hidden) + ; This will generate a string 'overflow-y-hidden' + +Example 3: + (overflow :value :visible) + ; This will generate a string 'overflow-visible' + +Example 4: + (overflow :direction :x :value :scroll) + ; This will generate a string 'overflow-x-scroll'" + (let* ((dir-str (if (null direction) "" (format nil "-~a" direction))) + (value-str (if (null value) "" (string value))) + (class-str (concatenate 'string "overflow" dir-str "-" value-str))) + (string-downcase class-str))) + +(defun sizing (&key (direction nil) (size nil)) + "Generates a Bootstrap sizing class. + +DIRECTION: Specifies the direction, should be :width or :height. + +SIZE: Specifies the size, should be a number from 0 to 100, :25, :50, :75, +:100, :auto, or nil (default size). + +Example 1: + (sizing :direction :width :size 50) + ; This will generate a string 'w-50' + +Example 2: + (sizing :direction :height :size :auto) + ; This will generate a string 'h-auto' + +Example 3: + (sizing :direction :width :size :100) + ; This will generate a string 'w-100' + +Example 4: + (sizing :direction :height :size 75) + ; This will generate a string 'h-75'" + (let* ((dir-str (if (null direction) "" (string direction))) + (size-str (if (null size) "" + (if (eq size :auto) + "auto" + (if (numberp size) + (format nil "~d" size) + (format nil "~a" size))))) + (class-str (concatenate 'string dir-str "-" size-str))) + (string-downcase class-str))) + (defun spacing (&key (property nil) (side nil) (size nil) (breakpoint nil)) "Generates a Bootstrap spacing class. @@ -43,99 +231,59 @@ Example 4: (let ((property-str (if (null property) "" (string property))) (side-str (if (null side) "" (string side))) (size-str (if (null size) "" (if (eq size :auto) "auto" (format nil "~d" size)))) - (breakpoint-str (if (null breakpoint) "" (format nil "~a-" (string breakpoint))))) + (breakpoint-str (if (null breakpoint) "" (format nil "~a-" breakpoint)))) (string-downcase (concatenate 'string " " property-str side-str "-" breakpoint-str size-str)))) -(defun text (&rest args) - "Generates a Bootstrap text class based on provided arguments. +(defun text (&key (alignment nil) (transform nil) (weight nil) (monospace nil)) + "Generates a Bootstrap text utility class. -ARGS: A list of keyword arguments specifying the properties of the text. For -example, (:alignment :center :transform :capitalize) would result in the string -'text-center text-capitalize'. +ALIGNMENT: Specifies the text alignment. Should be 'start', 'end', 'center'. -Returns a string that can be used as a CSS class for the text. +TRANSFORM: Specifies the text transformation. Should be 'lowercase', +'uppercase', 'capitalize'. + +WEIGHT: Specifies the text weight. Should be 'bold', 'bolder', 'normal', +'light', 'lighter'. + +MONOSPACE: If true, sets the font to monospace. Example 1: - (text :alignment :start :wrap :t :break :t) - ; This will generate a string 'text-start text-wrap text-break' + (text :alignment :start) + ; This will generate a string 'text-start' Example 2: - (text :alignment :center :wrap :no) - ; This will generate a string 'text-center text-nowrap' + (text :transform :uppercase) + ; This will generate a string 'text-uppercase' Example 3: - (text :alignment :end) - ; This will generate a string 'text-end' + (text :weight :bold :monospace t) + ; This will generate a string 'fw-bold font-monospace' Example 4: - (text :wrap :t) - ; This will generate a string 'text-wrap'." - (let ((alignment (cadr (member :alignment args))) - (wrap (cadr (member :wrap args))) - (tbreak (cadr (member :break args)))) - (concatenate 'string " " - (case alignment - (:start "text-start ") - (:center "text-center ") - (:end "text-end ") - (t "")) - (case wrap - (:t "text-wrap ") - (:no "text-nowrap ") - (t "")) - (case tbreak - (:t "text-break ") - (t ""))))) + (text :alignment :center :transform :lowercase) + ; This will generate a string 'text-center text-lowercase'" + (let ((alignment-str (if (null alignment) "" (format nil "text-~a " alignment))) + (transform-str (if (null transform) "" (format nil "text-~a " transform))) + (weight-str (if (null weight) "" (format nil "fw-~a " weight))) + (monospace-str (if (null monospace) "" "font-monospace"))) + (string-downcase (concatenate 'string alignment-str transform-str weight-str monospace-str)))) -(defun valign (align) +(defun valign (&key (align null)) "Generates a Bootstrap vertical align class. ALIGN: Specifies the alignment, should be :baseline, :top, :middle, :bottom, :text-bottom, :text-top or nil (default alignment). Example 1: - (valign :baseline) + (valign :align :baseline) ; This will generate a string 'align-baseline' Example 2: - (valign :top) + (valign :align :top) ; This will generate a string 'align-top' Example 3: - (valign :middle) + (valign :align :middle) ; This will generate a string 'align-middle'" - (let ((align-str (if (null align) "" (format nil "align-~a" (string align))))) + (let ((align-str (if (null align) "" (format nil "align-~a" align)))) (string-downcase align-str))) - -(defun sizing (&key (direction nil) (size nil)) - "Generates a Bootstrap sizing class. - -DIRECTION: Specifies the direction, should be :width or :height. - -SIZE: Specifies the size, should be a number from 0 to 100, :25, :50, :75, -:100, :auto, or nil (default size). - -Example 1: - (sizing :direction :width :size 50) - ; This will generate a string 'w-50' - -Example 2: - (sizing :direction :height :size :auto) - ; This will generate a string 'h-auto' - -Example 3: - (sizing :direction :width :size :100) - ; This will generate a string 'w-100' - -Example 4: - (sizing :direction :height :size 75) - ; This will generate a string 'h-75'" - (let* ((dir-str (if (null direction) "" (string direction))) - (size-str (if (null size) "" - (if (eq size :auto) - "auto" - (if (numberp size) - (format nil "~d" size) - (format nil "~a" size))))) - (class-str (concatenate 'string dir-str "-" size-str))) - (string-downcase class-str)))