|
|
css.md - cl-yag - Common Lisp Yet Another website Generator |
|
|
 |
git clone git://bitreich.org/cl-yag/ git://enlrupgkhuxnvlhsf6lc3fziv5h2hhfrinws65d7roiv6bfj7d652fid.onion/cl-yag/ (git://bitreich.org) |
|
|
 |
Log |
|
|
|
Files |
|
|
|
Refs |
|
|
|
Tags |
|
|
|
README |
|
|
|
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 |
|