Browse Source

README: add container and CSS spacer notes

restyle-spring-2019
Annika Backstrom 5 months ago
parent
commit
d74ea2af9f
1 changed files with 35 additions and 0 deletions
  1. 35
    0
      README.md

+ 35
- 0
README.md View File

@@ -20,6 +20,41 @@ If you make content or theme changes and want to regenerate the site, re-run the

$ docker-compose run pelican

This command is aliased to `make all` and `make` thanks to the `Makefile`. A Vim
alias like `nnoremap <leader>m :silent make<CR>` lets you quickly rebuild the
site from within your editor.

## Editing the Docker containers

The `pelican` and `sass` containers are custom, generated from `Dockerfile` and
`Dockerfile.sass`, respectively. You can regenerate these containers using
`bin/docker-build-image`.

# Site Styles

## Margin and padding classes

Margin and padding can be controlled using spacer classes. These use a
multiplier in the class name, with a base of 6px. For example, `.p-2` would
apply 6px * 2 padding on all sides.

| Class | Attributes |
| --------------- | ---------- |
| `p-[0/1/2/3]` | `padding` |
| `p-t-[0/1/2/3]` | `padding-top` |
| `p-r-[0/1/2/3]` | `padding-right` |
| `p-b-[0/1/2/3]` | `padding-bottom` |
| `p-l-[0/1/2/3]` | `padding-left` |
| `p-x-[0/1/2/3]` | `padding-top` and `padding-bottom` |
| `p-y-[0/1/2/3]` | `padding-left` and `padding-right` |
| `m-[0/1/2/3]` | `margin` |
| `m-t-[0/1/2/3]` | `margin-top` |
| `m-r-[0/1/2/3]` | `margin-right` |
| `m-b-[0/1/2/3]` | `margin-bottom` |
| `m-l-[0/1/2/3]` | `margin-left` |
| `m-x-[0/1/2/3]` | `margin-top` and `margin-bottom` |
| `m-y-[0/1/2/3]` | `margin-left` and `margin-right` |

## Responsive CSS

[@include-media](https://include-media.com) is used for responsive CSS. To use

Loading…
Cancel
Save