Hygguile

Hygge Style Sheets

cozy and professional user-interfaces for everyone

Hygguile is an opinionated, batteries-included UI framework written in a dialect of the Lisp programming language, Guile Scheme.

It uses OliveCSS, whose syntax is much inspired utility-class Tailwind CSS but functions 100% with vanilla CSS instead of JS.

It defines an expressive domain-specific language (DSL), and by leveraging the power of S-expressions, SXML and modern CSS.

⚙️

Utilities

🔳

Buttons

(button "button")

(submit-button "submit-button")

(danger-submit-button "danger-submit-button")

(icon-button #:icon 'gear #:content "gear" #:background '(bg-jeans-blue-500) #:hover-background '(hover:bg-jeans-blue-900) #:color '(text-stone-300 dark:text-stone-100) #:size '(text-md) #:icon-css '(text-stone-100 dark:text-stone-100 text-md))

(icon-button #:icon 'user #:content "user" #:background '(bg-naples-yellow-500) #:color '(text-onyx-500) #:hover-background '(hover:bg-naples-yellow-700) #:icon-css '(text-xl))

(icon-button #:icon 'calendar #:content "Book now" #:weight '(font-light) #:size '(text-md) #:background '(bg-wine-500) #:color '(text-papaya-whip-500) #:hover-background '(hover:bg-wine-700) #:icon-css '(text-xl))

(icon-button #:icon 'airplane-tilt #:content "airplane-tilt" #:background '(bg-china-rose-500) #:weight '(font-medium) #:color '(text-stone-300 dark:text-stone-100) #:icon-css '(text-stone-100 dark:text-stone-100 text-xl) #:hover-background '(hover:bg-orange-900))

Typography

Sphinx of black quartz, judge my vow

(h1 "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(h1 "Sphinx of black quartz, judge my vow" #:weight '(font-light))

Sphinx of black quartz, judge my vow

(h2 "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(h3 "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(h4 "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(h1 "Sphinx of black quartz, judge my vow" #:family '(font-serif))

Sphinx of black quartz, judge my vow

(h1 "Sphinx of black quartz, judge my vow" #:family '(font-serif) #:weight '(font-light))

Sphinx of black quartz, judge my vow

(h2 "Sphinx of black quartz, judge my vow" #:family '(font-serif))

Sphinx of black quartz, judge my vow

(h3 "Sphinx of black quartz, judge my vow" #:family '(font-serif))

Sphinx of black quartz, judge my vow

(h4 "Sphinx of black quartz, judge my vow" #:family '(font-serif))

Sphinx of black quartz, judge my vow

(sub-h1 "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(sub-h2 "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(sub-h3 "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(sub-h4 "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(strong "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(p "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(em "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(mono "Sphinx of black quartz, judge my vow")

Sphinx of black quartz, judge my vow

(code "Sphinx of black quartz, judge my vow")

;;; A simple Guile Scheme HTTP server
(use-modules (web server))

(define (my-handler request request-body)
  (values '((content-type . (text/plain)))
          "Hello World!"))

(run-server my-handler)

(pre "\n;;; A simple Guile Scheme HTTP server\n(use-modules (web server))\n\n(define (my-handler request request-body)\n  (values '((content-type . (text/plain)))\n          \"Hello World!\"))\n\n(run-server my-handler)")

🎨 Colors

Hygguile offers colors in the 100, 300, 500, 700 and 900 variants. Some of these colors are essential for the hygguile components, however not all of them are.

apple-green-500

ash-gray-500

asparagus-500

beaver-500

bistre-500

black-bean-500

black-olive-500

buff-500

cadet-gray-500

cambridge-green-500

castleton-green-500

charcoal-500

china-rose-500

china-violet-500

claret-500

coffee-500

dark-purple-500

ferrari-red-500

floral-white-500

glaucous-500

iris-500

jeans-blue-500

lapis-lazuli-500

light-coral-500

mantis-500

melon-500

midnight-green-500

mikado-yellow-500

moonstone-500

naples-yellow-500

onyx-500

orange-500

pale-dogwood-500

papaya-whip-500

persia-pink-500

pomp-and-power-500

prussian-blue-500

raisin-black-500

redwood-500

russia-violet-500

sienna-500

spiced-terracotta-500

stone-500

tawny-500

tyrian-500

umber-500

van-dyke-500

white-smoke-500

wine-500

olive-500

dark-khaki-500

🎠 Carousels

VENI VIDI VICI
Alea iacta est
Carpe diem
COGITO ERGO SUM
IN VINO VERITAS
ACTA NON VERBA
DEUS EX MACHINA

Hygguile Logo
WikiMusic Logo

🦋 Fly-out section

🗒️

Detail lists

foo:: bar
abcdefghij:: 1234567890
some key:: some value

📦

Containers

first element

second element

third element

first element

second element

third element

☑️

Forms

some input:

(input #:label "some input:" #:name "input-1" #:placeholder "input")

some textarea:

(textarea #:label "some textarea:" #:name "textarea-1")

(select #:name 'user-lang #:options (list (option #:value 'en_US #:content "English (US)" #:selected-value "en_US") (option #:value 'nl_NL #:content "Nederlands" #:selected-value "en_US") (option #:value 'es_ES #:content "Español" #:selected-value "en_US")))

🖌️ Gradients

simple vertical gradient

simple horizontal gradient