The cl-css Reference Manual

Table of Contents

Next: , Previous: , Up: (dir)   [Contents][Index]

The cl-css Reference Manual

This is the cl-css Reference Manual, version 0.1, generated automatically by Declt version 2.4 "Will Decker" on Wed Jun 20 11:02:48 2018 GMT+0.


Next: , Previous: , Up: Top   [Contents][Index]

1 Introduction

CL-CSS

This is a dead-simple, non validating, inline CSS generator for Common Lisp. Its goals are axiomatic syntax, simple implementation to support portability, and boilerplate reduction in CSS. Execution efficiency, and CSS validation are non-goals at the moment.

Basic Usage

Use the css function to convert a list of directives into a CSS string for output. A directive is a CSS selector, followed by a list of properties.

> (css '((body :margin 5px :padding 0px)))

"body { margin: 5px; padding: 0px; }
"

Inline Usage

Use the inline-css function to convert a single, selector-free directive into contents appropriate for a style property

    > (inline-css '(:margin 5px :padding 0px))

"margin: 5px; padding: 0px;"

Compiled Usage

A function called compile-css is provided that generates a file based on your cl-css markup.

> (compile-css "/home/user-name/page-style.css" '((body :margin 5px :padding 0px)))

NIL

There will now be a file at /home/user-name/ named page-style.css that contains

"body { margin: 5px; padding: 0px; }
"

You can reference this flat file from your web-app (or host it from a non-lisp server like Apache or nginx) to save some time in generating your styles. If the directory you compile to doesn't exist, compile-css will attempt to create it before compiling the file.

Compound Selectors and Properties

Both cases are handled as strings.

> (css '(("body h1 .header" :margin "5px 0px 0px 5px")))

"body h1 .header { margin: 5px 0px 0px 5px; }
"

Case (in)Sensitivity

All output is downcased, with the exception of selectors and values specified as strings.

> (css `((.someCrazyClassName :width 30PX :font-family :Helvetica)))

".somecrazyclassname { width: 30px; font-family: helvetica; }
"

> (css `((".someCrazyClassName" :width 30px :font-family "Helvetica")))

".someCrazyClassName { width: 30px; font-family: Helvetica }
"

Nested Terms

Sublists are interpreted as nested CSS rules. This is useful in places like @media directives.

> (css '(("@media screen and (max-width: 720px)" ("body" :padding 1em))))

"@media screen and (max-width: 720px) { body { padding: 1em; } }
"

> (css '(("@media screen and (max-width: 720px)" 
	  (body :padding 1em :margin 2em) 
	  (.header :background-color :blue) 
	  :font-family "Helvetica")
	 (body :padding 10px :margin 15px)))
	 
"@media screen and (max-width: 720px) { body { padding: 1em; margin: 2em; } .header { background-color: blue; } font-family: Helvetica; }
body { padding: 10px; margin: 15px; }
"

Boilerplate reduction

You can stitch things into the directives you pass to css to eliminate repetition. Whether variables

> (defvar slim-box '(:margin 0px :padding 0px :border "1px solid #f00"))

SLIM-BOX

> (css `((.sidebar ,@slim-box :background-color \#0f0)
         (.float-box ,@slim-box :background-color \#00f :font-weight bold)))

".sidebar { margin: 0px; padding: 0px; border: 1px solid #f00; background-color: #0f0; }
.float-box { margin: 0px; padding: 0px; border: 1px solid #f00; background-color: #00f; font-weight: bold; }
"

or functions

> (defun sm-box (&optional color) 
         `(:margin 0px :padding 0px :border "1px solid #f00" 
           :background-color ,(format nil "2px solid ~a" (or color "#0f0"))))

SM-BOX

> (css `((.sidebar ,@(sm-box))
         (.float-box ,@(sm-box \#00f) :font-weight bold)))
	 
".sidebar { margin: 0px; padding: 0px; border: 1px solid #f00; background-color: #0f0; }
.float-box { margin: 0px; padding: 0px; border: 1px solid #f00; background-color: #00f; font-weight: bold; }
"

CSS3 Cross-Browser Abstractions

The CSS3 transform property is handled very slightly differently in each of the major browsers. cl-css provides a number of functions to make this easier. For example

    > (css `((.crazy-box ,@(translate 35 35))))

".crazy-box { transform: translate(35px, 35px); -ms-transform: translate(35px, 35px); -webkit-transform: translate(35px, 35px); -o-transform: translate(35px, 35px); -moz-transform: translate(35px, 35px); }
    "

A number of similar functions are provided out of the box for other transform, 3d-transform, animation and transition directive options. These include transform-origin, rotate, scale, skew and matrix, perspective, perspective-origin, keyframes, animation and transition. The list is not exhaustive, even in terms of new CSS3 selectors, let alone abstracting directives for older browsers, but it should be fairly straightforward to define more of your own (feel free to send appropriate patches if you do end up using other directives).

Noted bad stuff or non-goals


Next: , Previous: , Up: Top   [Contents][Index]

2 Systems

The main system appears first, followed by any subsystem dependency.


Previous: , Up: Systems   [Contents][Index]

2.1 cl-css

Maintainer

leo.zovic@gmail.com

Author

leo.zovic@gmail.com

License

MIT-style

Description

Simple inline CSS generator

Version

0.1

Source

cl-css.asd (file)

Components

Next: , Previous: , Up: Top   [Contents][Index]

3 Files

Files are sorted by type and then listed depth-first from the systems components trees.


Previous: , Up: Files   [Contents][Index]

3.1 Lisp


Next: , Previous: , Up: Lisp files   [Contents][Index]

3.1.1 cl-css.asd

Location

cl-css.asd

Systems

cl-css (system)


Next: , Previous: , Up: Lisp files   [Contents][Index]

3.1.2 cl-css/package.lisp

Parent

cl-css (system)

Location

package.lisp

Packages

cl-css


Next: , Previous: , Up: Lisp files   [Contents][Index]

3.1.3 cl-css/util.lisp

Dependency

package.lisp (file)

Parent

cl-css (system)

Location

util.lisp

Internal Definitions

Next: , Previous: , Up: Lisp files   [Contents][Index]

3.1.4 cl-css/cl-css.lisp

Dependency

util.lisp (file)

Parent

cl-css (system)

Location

cl-css.lisp

Exported Definitions
Internal Definitions

Next: , Previous: , Up: Lisp files   [Contents][Index]

3.1.5 cl-css/css3-transform.lisp

Dependency

cl-css.lisp (file)

Parent

cl-css (system)

Location

css3-transform.lisp

Exported Definitions

Next: , Previous: , Up: Lisp files   [Contents][Index]

3.1.6 cl-css/css3-3d-transform.lisp

Dependency

css3-transform.lisp (file)

Parent

cl-css (system)

Location

css3-3d-transform.lisp

Exported Definitions

Previous: , Up: Lisp files   [Contents][Index]

3.1.7 cl-css/css3-animations+transitions.lisp

Dependency

css3-3d-transform.lisp (file)

Parent

cl-css (system)

Location

css3-animations+transitions.lisp

Exported Definitions

Next: , Previous: , Up: Top   [Contents][Index]

4 Packages

Packages are listed by definition order.


Previous: , Up: Packages   [Contents][Index]

4.1 cl-css

A non-validating, inline CSS generator for common lisp

Source

package.lisp (file)

Nickname

mini-css

Use List

common-lisp

Exported Definitions
Internal Definitions

Next: , Previous: , Up: Top   [Contents][Index]

5 Definitions

Definitions are sorted by export status, category, package, and then by lexicographic order.


Next: , Previous: , Up: Definitions   [Contents][Index]

5.1 Exported definitions


Previous: , Up: Exported definitions   [Contents][Index]

5.1.1 Functions

Function: % VAL
Package

cl-css

Source

cl-css.lisp (file)

Function: animation NAME &key DURATION TIMING-FUNCTION DELAY ITERATION-COUNT DIRECTION PLAY-STATE
Package

cl-css

Source

css3-animations+transitions.lisp (file)

Function: backface-visibility VISIBLE/HIDDEN
Package

cl-css

Source

css3-3d-transform.lisp (file)

Function: compile-css FILE-PATH DIRECTIVES
Package

cl-css

Source

cl-css.lisp (file)

Function: css RULES
Package

cl-css

Source

cl-css.lisp (file)

Function: em VAL
Package

cl-css

Source

cl-css.lisp (file)

Function: inline-css RULE
Package

cl-css

Source

cl-css.lisp (file)

Function: keyframes ANIMATION-NAME &rest KEYFRAMES
Package

cl-css

Source

css3-animations+transitions.lisp (file)

Function: matrix &rest 6-NUMBERS

Takes six numbers and uses them to build a CSS3 transformation matrix directive

Package

cl-css

Source

css3-transform.lisp (file)

Function: matrix3d &rest 16-NUMBERS
Package

cl-css

Source

css3-3d-transform.lisp (file)

Function: perspective N
Package

cl-css

Source

css3-3d-transform.lisp (file)

Function: perspective-origin X Y
Package

cl-css

Source

css3-3d-transform.lisp (file)

Function: px VAL
Package

cl-css

Source

cl-css.lisp (file)

Function: rotate DEGREES

Takes a number of degrees, returns a cross-browser CSS3 rotate directive

Package

cl-css

Source

css3-transform.lisp (file)

Function: rotate3d DEGREES

Takes a number of degrees, returns a cross-browser CSS3 rotate directive

Package

cl-css

Source

css3-3d-transform.lisp (file)

Function: scale SCALE-X &optional SCALE-Y

Takes an x and y scale factor, returns x-browser CSS3 scale directive

Package

cl-css

Source

css3-transform.lisp (file)

Function: scale3d SCALE-X &optional SCALE-Y SCALE-Z

Takes an x and y scale factor, returns x-browser CSS3 scale directive

Package

cl-css

Source

css3-3d-transform.lisp (file)

Function: skew X-DEG Y-DEG
Package

cl-css

Source

css3-transform.lisp (file)

Function: transform-origin X Y &optional Z

Takes x, y, z percentages, returns a cross-browser CSS3 transform-origin directive

Package

cl-css

Source

css3-transform.lisp (file)

Function: transform-style FLAT/PRESERVE-3D
Package

cl-css

Source

css3-3d-transform.lisp (file)

Function: transition PROPERTY &key DURATION TIMING-FUNCTION DELAY
Package

cl-css

Source

css3-animations+transitions.lisp (file)

Function: translate X Y &key UNITS

Takes an x and y, returns a x-browser CSS3 translate directive. units should be either :px (the default) or :%.

Package

cl-css

Source

css3-transform.lisp (file)

Function: translate3d X Y Z &key UNITS

Takes an x and y, returns a x-browser CSS3 translate directive. units should be either :px (the default) or :%.

Package

cl-css

Source

css3-3d-transform.lisp (file)


Previous: , Up: Definitions   [Contents][Index]

5.2 Internal definitions


Next: , Previous: , Up: Internal definitions   [Contents][Index]

5.2.1 Macros

Macro: split-directive DIRECTIVE-NAME VALUE &optional PREFIX-LIST
Package

cl-css

Source

util.lisp (file)

Macro: with-gensyms (&rest NAMES) &body BODY
Package

cl-css

Source

util.lisp (file)


Next: , Previous: , Up: Internal definitions   [Contents][Index]

5.2.2 Functions

Function: format-declarations-list LIST-OF-DECLARATIONS
Package

cl-css

Source

cl-css.lisp (file)

Function: format-rule SELECTOR DECLARATIONS
Package

cl-css

Source

cl-css.lisp (file)

Function: prefix-symbol PREFIX SYMBOL
Package

cl-css

Source

util.lisp (file)

Function: symbol->d-string A-SYMBOL

Returns the downcased symbol-name of the given symbol

Package

cl-css

Source

util.lisp (file)


Previous: , Up: Internal definitions   [Contents][Index]

5.2.3 Generic functions

Generic Function: %-or-word VAL
Package

cl-css

Methods
Method: %-or-word (VAL null)
Source

util.lisp (file)

Method: %-or-word (VAL string)
Source

util.lisp (file)

Method: %-or-word (VAL symbol)
Source

util.lisp (file)

Method: %-or-word (VAL number)
Source

util.lisp (file)

Generic Function: format-declaration PROPERTY VALUE
Package

cl-css

Methods
Method: format-declaration (PROPERTY list) (V null)
Source

cl-css.lisp (file)

Method: format-declaration PROPERTY (VALUE list)
Source

cl-css.lisp (file)

Method: format-declaration PROPERTY (VALUE symbol)
Source

cl-css.lisp (file)

Method: format-declaration PROPERTY (VALUE string)
Source

cl-css.lisp (file)

Method: format-declaration PROPERTY (VALUE number)
Source

cl-css.lisp (file)

Generic Function: format-selector S
Package

cl-css

Methods
Method: format-selector (S string)
Source

cl-css.lisp (file)

Method: format-selector (S symbol)
Source

cl-css.lisp (file)


Previous: , Up: Top   [Contents][Index]

Appendix A Indexes


Next: , Previous: , Up: Indexes   [Contents][Index]

A.1 Concepts

Jump to:   C   F   L  
Index Entry  Section

C
cl-css.asd: The cl-css<dot>asd file
cl-css/cl-css.lisp: The cl-css/cl-css<dot>lisp file
cl-css/css3-3d-transform.lisp: The cl-css/css3-3d-transform<dot>lisp file
cl-css/css3-animations+transitions.lisp: The cl-css/css3-animations+transitions<dot>lisp file
cl-css/css3-transform.lisp: The cl-css/css3-transform<dot>lisp file
cl-css/package.lisp: The cl-css/package<dot>lisp file
cl-css/util.lisp: The cl-css/util<dot>lisp file

F
File, Lisp, cl-css.asd: The cl-css<dot>asd file
File, Lisp, cl-css/cl-css.lisp: The cl-css/cl-css<dot>lisp file
File, Lisp, cl-css/css3-3d-transform.lisp: The cl-css/css3-3d-transform<dot>lisp file
File, Lisp, cl-css/css3-animations+transitions.lisp: The cl-css/css3-animations+transitions<dot>lisp file
File, Lisp, cl-css/css3-transform.lisp: The cl-css/css3-transform<dot>lisp file
File, Lisp, cl-css/package.lisp: The cl-css/package<dot>lisp file
File, Lisp, cl-css/util.lisp: The cl-css/util<dot>lisp file

L
Lisp File, cl-css.asd: The cl-css<dot>asd file
Lisp File, cl-css/cl-css.lisp: The cl-css/cl-css<dot>lisp file
Lisp File, cl-css/css3-3d-transform.lisp: The cl-css/css3-3d-transform<dot>lisp file
Lisp File, cl-css/css3-animations+transitions.lisp: The cl-css/css3-animations+transitions<dot>lisp file
Lisp File, cl-css/css3-transform.lisp: The cl-css/css3-transform<dot>lisp file
Lisp File, cl-css/package.lisp: The cl-css/package<dot>lisp file
Lisp File, cl-css/util.lisp: The cl-css/util<dot>lisp file

Jump to:   C   F   L  

Next: , Previous: , Up: Indexes   [Contents][Index]

A.2 Functions

Jump to:   %  
A   B   C   E   F   G   I   K   M   P   R   S   T   W  
Index Entry  Section

%
%: Exported functions
%-or-word: Internal generic functions
%-or-word: Internal generic functions
%-or-word: Internal generic functions
%-or-word: Internal generic functions
%-or-word: Internal generic functions

A
animation: Exported functions

B
backface-visibility: Exported functions

C
compile-css: Exported functions
css: Exported functions

E
em: Exported functions

F
format-declaration: Internal generic functions
format-declaration: Internal generic functions
format-declaration: Internal generic functions
format-declaration: Internal generic functions
format-declaration: Internal generic functions
format-declaration: Internal generic functions
format-declarations-list: Internal functions
format-rule: Internal functions
format-selector: Internal generic functions
format-selector: Internal generic functions
format-selector: Internal generic functions
Function, %: Exported functions
Function, animation: Exported functions
Function, backface-visibility: Exported functions
Function, compile-css: Exported functions
Function, css: Exported functions
Function, em: Exported functions
Function, format-declarations-list: Internal functions
Function, format-rule: Internal functions
Function, inline-css: Exported functions
Function, keyframes: Exported functions
Function, matrix: Exported functions
Function, matrix3d: Exported functions
Function, perspective: Exported functions
Function, perspective-origin: Exported functions
Function, prefix-symbol: Internal functions
Function, px: Exported functions
Function, rotate: Exported functions
Function, rotate3d: Exported functions
Function, scale: Exported functions
Function, scale3d: Exported functions
Function, skew: Exported functions
Function, symbol->d-string: Internal functions
Function, transform-origin: Exported functions
Function, transform-style: Exported functions
Function, transition: Exported functions
Function, translate: Exported functions
Function, translate3d: Exported functions

G
Generic Function, %-or-word: Internal generic functions
Generic Function, format-declaration: Internal generic functions
Generic Function, format-selector: Internal generic functions

I
inline-css: Exported functions

K
keyframes: Exported functions

M
Macro, split-directive: Internal macros
Macro, with-gensyms: Internal macros
matrix: Exported functions
matrix3d: Exported functions
Method, %-or-word: Internal generic functions
Method, %-or-word: Internal generic functions
Method, %-or-word: Internal generic functions
Method, %-or-word: Internal generic functions
Method, format-declaration: Internal generic functions
Method, format-declaration: Internal generic functions
Method, format-declaration: Internal generic functions
Method, format-declaration: Internal generic functions
Method, format-declaration: Internal generic functions
Method, format-selector: Internal generic functions
Method, format-selector: Internal generic functions

P
perspective: Exported functions
perspective-origin: Exported functions
prefix-symbol: Internal functions
px: Exported functions

R
rotate: Exported functions
rotate3d: Exported functions

S
scale: Exported functions
scale3d: Exported functions
skew: Exported functions
split-directive: Internal macros
symbol->d-string: Internal functions

T
transform-origin: Exported functions
transform-style: Exported functions
transition: Exported functions
translate: Exported functions
translate3d: Exported functions

W
with-gensyms: Internal macros

Jump to:   %  
A   B   C   E   F   G   I   K   M   P   R   S   T   W  

Next: , Previous: , Up: Indexes   [Contents][Index]

A.3 Variables


Previous: , Up: Indexes   [Contents][Index]

A.4 Data types

Jump to:   C   P   S  
Index Entry  Section

C
cl-css: The cl-css system
cl-css: The cl-css package

P
Package, cl-css: The cl-css package

S
System, cl-css: The cl-css system

Jump to:   C   P   S