data/css.md (3994 bytes)
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