79 lines
2.3 KiB
Markdown
79 lines
2.3 KiB
Markdown
# CSS For cl-yag
|
|
|
|
Well, now cl-yag comes with a default css-stylesheet.
|
|
|
|
## Where The Stylesheets Live
|
|
|
|
All of cl-yag's style sheets are located in **css/**. Of course you
|
|
can change that, but we recommend sticking to it. Currently there are
|
|
the following files:
|
|
|
|
css/
|
|
|-- clym.css
|
|
|-- custom.css
|
|
`-- style.css
|
|
|
|
|
|
## style.css -- One Sheet To Rule Them All
|
|
|
|
In order to keep it simple cl-yag uses **data/css/style.css** to
|
|
administrate all of its stylesheets. Use the ``@import`` rule to include
|
|
your own, or comments to get rid of what is already there.
|
|
|
|
Currently, it looks like this:
|
|
|
|
/* ==================================================================== */
|
|
/* style.css for cl-yag */
|
|
/* ==================================================================== */
|
|
@charset "utf-8";
|
|
|
|
|
|
/* ~ PURE.CSS ~ */
|
|
@import url("pure_r1.0.0/pure.css");
|
|
@import url("pure_r1.0.0/grids.css");
|
|
@import url("pure_r1.0.0/grids-responsive.css");
|
|
|
|
|
|
/* ~ Stylesheet for cl-yag ~ */
|
|
@import url("clym.css");
|
|
|
|
|
|
/* ~ LAST ENTRY ~ */
|
|
/* ~ custom.css to override styles. ~ */
|
|
@import url("custom.css");
|
|
|
|
|
|
## Pure.css
|
|
|
|
cl-yag uses stylesheets from [pure.css](https://purecss.io/ "Pure.css"),
|
|
"a set of small, responsive CSS modules", as a minimal css framework: It
|
|
employs **pure.css**, **grids.css** and **grids-responsive.css** to
|
|
provide a limited set of expected features, e.g. usable menus and basic
|
|
responsiveness.
|
|
|
|
Additionally, cl-yag puts its first, own stylesheet as a topping on
|
|
pure's magic: clym.
|
|
|
|
## clym.css -- A Default Stylesheet
|
|
|
|
*clym* stands for *cl-yag minimal* and is a set af rules designed to
|
|
work with cl-yags specific skeleton. It also provides an unbtrusive
|
|
color scheme and some basic typography. You'll find it in
|
|
**static/css/clym.css**.
|
|
|
|
If you don't like it, deactivate it by uncommenting the following line
|
|
in **data/css/style.css**:
|
|
|
|
@import url("clym.css");
|
|
|
|
|
|
## custom.css -- Tweak Your Style
|
|
|
|
cl-yag provides you with **data/css/custom.css** to tweak your styles.
|
|
In order to override rules located in all previous style sheets it needs
|
|
to get sourced in as the last file in **data/css/style.css**.
|
|
|
|
|
|
|
|
|