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