css.md - cl-yag - Common Lisp Yet Another website Generator
HTML git clone git://bitreich.org/cl-yag/ git://enlrupgkhuxnvlhsf6lc3fziv5h2hhfrinws65d7roiv6bfj7d652fid.onion/cl-yag/
DIR Log
DIR Files
DIR Refs
DIR Tags
DIR README
DIR LICENSE
---
css.md (3994B)
---
1 # CSS For cl-yag
2
3 cl-yag provides you with a default theme and a useful approach to
4 handle CSS style sheets as well as CSS frameworks.
5
6
7 ## Where The Style Sheets Live
8
9 All of cl-yag's style sheets are located in **static/css/**.
10 Currently there are the following files:
11
12 css/
13 |-- clym.css
14 |-- custom.css
15 |-- pure_r1.0.0/
16 | |-- LICENSE.md
17 | `-- pure.css
18 `-- style.css
19
20
21 ## style.css -- One Sheet To Rule Them All
22
23 In order to keep it simple cl-yag uses **static/css/style.css** to
24 administrate all of its style sheets. Use the ``@import`` rule to
25 include your own, or comments to get rid of what is already there -
26 but mind the [cascade](https://www.w3.org/TR/css-cascade-3/ "W3C: CSS Cascading and Inheritance Level 3").
27
28 Currently, **style.css** looks like this:
29
30 /* =================================================================== */
31 /* style.css for cl-yag */
32 /* =================================================================== */
33 @charset "utf-8";
34
35
36 /* ~ PURE ~ */
37 @import url("pure_r1.0.0/pure.css");
38
39
40 /* ~ CLYM ~ */
41 @import url("clym.css");
42
43
44 /* ~ LAST ENTRY ~ */
45 /* ~ use custom.css for overriding rules ~ */
46 @import url("custom.css");
47
48
49
50 ## Pure -- "A Set Of Small, Responsive CSS Modules"
51
52 cl-yag uses a style sheet called **pure.css**, taken from
53 [Pure](https://purecss.io/ "purecss.io"), a minimal, BSD licensed CSS
54 framework, to provide a set of expected UI features, among which are
55 sane resets (such as
56 [normalize.css](https://necolas.github.io/normalize.css/
57 "Normalize.css - A modern, HTML5-ready alternative to CSS resets")'s
58 reset rules) and usable menus.
59
60 To deactivate Pure, put the *PURE.CSS* ``@import`` rule in
61 **static/css/style.css** in comments and re-run ``make``.
62
63
64 ## clym -- A Default Theme
65
66 Additionally, cl-yag comes with its first theme: *clym*.
67
68 *clym* stands for *cl-yag minimal*. It is a set of css rules designed to
69 work with cl-yag's html skeleton. It provides an unobtrusive color
70 scheme, basic typography, as well as basic responsiveness. You'll find
71 it in **static/css/clym.css**.
72
73 **clym.css** doesn't provide neither css resets nor a menu layout. This
74 is handled by [Pure](https://purecss.io/ "purecss.io")'s
75 **pure.css**. Further, it doesn't need any JavaScript.
76
77 If you don't like *clym*, put comments around the line ``@import
78 url("clym.css");`` in **static/css/style.css**, around all pure-rules
79 in **static/css/custom.css**, and re-run ``make``.
80
81
82 ## **custom.css**
83
84 For information about **custom.css** you need to read it, as well as
85 the following section "Working With Style Sheets".
86
87
88 ## Working With Style Sheets
89
90 ### Current Styles And Minor Tweaks
91
92 If you are already using a combination of style sheets and you need to
93 adjust some parts of the layout, use cl-yag's
94 **static/css/custom.css**. It is currently used to override Pure's
95 default layout for horizontal menus with *clym*'s colorscheme.
96
97 #### MIND
98
99 - In order to override rules located in all previous(!) style sheets
100 **custom.css** needs to get sourced in as the last(!) file in
101 **static/css/style.css** (see section: "style.css – One Sheet To Rule Them
102 All").
103 - Respect the [cascade](https://www.w3.org/TR/css-cascade-3/ "W3C: CSS Cascading and Inheritance Level 3") :-).
104
105
106 ### Frameworks
107
108 CSS frameworks provide an easy way to create your own theme. To make use
109 of a framework's rulesets,
110
111 - its style sheets need to get included via your **static/css/style.css**,
112 - their ids and classes need to get wired into cl-yag's template files and
113 - the template files need to get used by cl-yag's **generator.lisp**.
114
115 So you need to edit cl-yag's template files in **templates/** and - in
116 case you've choosen to rename your templates - you need to adjust their
117 corresponding paths and filenames in **generator.lisp**.
118
119
120
121
122
123