Semantic HTML theme for Coleslaw with LASS and CLASSIE
Written onI've recently was facinated by Shinmera's LASS - a system to generate CSS in a way similar to SCSS / LESS but in a Common Lisp way.
I've compiled a small utility CLASSIE which addresses some common pains of using LASS
- arithmetic with unit values, including files and some color manipulation.
Lisp setup
ros install Shinmera/lass
ros install egao1980/classie
Emacs configuration
Edit and compile .lass
file with bells and whistles:
(defun lass-compile-current ()
(interactive)
(or
(when (and (sly-connected-p)
(or (sly-eval '(cl:not (cl:null (cl:find-package :classie))))
(and (sly-eval '(cl:not (cl:null (cl:find-package :ql))))
(sly-eval '(ql:quickload :classie)))))
(message "LASS compiled to %s" (sly-eval
`(uiop:native-namestring
(lass:generate
(uiop:parse-native-namestring ,(buffer-file-name))
:pretty t)))))
(message "LASS compiled. %s" (shell-command-to-string (format "lass %s" (shell-quote-argument (buffer-file-name)))))))
(define-derived-mode lass-mode common-lisp-mode
"LASS" "Mode with auto-compiling for LASS files."
(add-hook 'after-save-hook 'lass-compile-current nil t))
(add-to-list 'auto-mode-alist '("\\.lass\\'" . lass-mode))
(provide 'lass)
Theme details
Modern HTML5 provides host of semantic tags enough to represent a blog without resorting to CSS classes and with minimal styling.
After discovering minimalist Marx CSS reset I've built a LASS code to replicate it - Engels.
This blog theme is loosely based on Coleslaw Hyde theme and Brutalist version of Engels. Please check coleslaw-theme-brutal for implementation details.