3.9 KiB

Raw Permalink Blame History

CSS For cl-yag

cl-yag provides you with a default theme and a useful approach to handle CSS style sheets as well as CSS frameworks.

Where The Style Sheets Live

All of cl-yag's style sheets are located in static/css/.
Currently there are the following files:

css/
|-- clym.css
|-- custom.css
|-- pure_r1.0.0/
|   |-- LICENSE.md
|   `-- pure.css
`-- style.css

style.css -- One Sheet To Rule Them All

In order to keep it simple cl-yag uses static/css/style.css to administrate all of its style sheets. Use the @import rule to include your own, or comments to get rid of what is already there - but mind the cascade.

Currently, style.css looks like this:

/* =================================================================== */
                       /* style.css for cl-yag */
/* =================================================================== */
@charset "utf-8";


/* ~                             PURE                                ~ */
@import url("pure_r1.0.0/pure.css");


/* ~                             CLYM                                ~ */
@import url("clym.css");


/* ~                          LAST ENTRY                             ~ */
/* ~             use custom.css for overriding rules                 ~ */
@import url("custom.css");

Pure -- "A Set Of Small, Responsive CSS Modules"

cl-yag uses a style sheet called pure.css, taken from Pure, a minimal, BSD licensed CSS framework, to provide a set of expected UI features, among which are sane resets (such as normalize.css's reset rules) and usable menus.

To deactivate Pure, put the PURE.CSS @import rule in static/css/style.css in comments and re-run make.

clym -- A Default Theme

Additionally, cl-yag comes with its first theme: clym.

clym stands for cl-yag minimal. It is a set of css rules designed to work with cl-yag's html skeleton. It provides an unobtrusive color scheme, basic typography, as well as basic responsiveness. You'll find it in static/css/clym.css.

clym.css doesn't provide neither css resets nor a menu layout. This is handled by Pure's pure.css. Further, it doesn't need any JavaScript.

If you don't like clym, put comments around the line @import url("clym.css"); in static/css/style.css, around all pure-rules in static/css/custom.css, and re-run make.

custom.css

For information about custom.css you need to read it, as well as the following section "Working With Style Sheets".

Working With Style Sheets

Current Styles And Minor Tweaks

If you are already using a combination of style sheets and you need to adjust some parts of the layout, use cl-yag's static/css/custom.css. It is currently used to override Pure's default layout for horizontal menus with clym's colorscheme.

MIND

In order to override rules located in all previous(!) style sheets custom.css needs to get sourced in as the last(!) file in static/css/style.css (see section: "style.css – One Sheet To Rule Them All").
Respect the cascade :-).

Frameworks

CSS frameworks provide an easy way to create your own theme. To make use of a framework's rulesets,

its style sheets need to get included via your static/css/style.css,
their ids and classes need to get wired into cl-yag's template files and
the template files need to get used by cl-yag's generator.lisp.

So you need to edit cl-yag's template files in templates/ and - in case you've choosen to rename your templates - you need to adjust their corresponding paths and filenames in generator.lisp.

3.9 KiB Raw Permalink Blame History Unescape Escape