Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
development:css:start [2020/03/19 12:55] kalenpw |
development:css:start [2021/06/29 14:59] (current) kalenpw |
||
|---|---|---|---|
| Line 3: | Line 3: | ||
| * [[ .: bulma | Bulma ]] | * [[ .: bulma | Bulma ]] | ||
| * [[ .: less | LESS ]] | * [[ .: less | LESS ]] | ||
| + | * [[ .: sass | SASS ]] | ||
| + | |||
| + | ---- | ||
| + | ===== Sticky Footer ===== | ||
| + | Ensure your content (header, body, etc everything besides footer) is all wrapped in a ''< | ||
| + | <code css> | ||
| + | html, | ||
| + | body { | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | body { | ||
| + | display: flex; | ||
| + | flex-direction: | ||
| + | } | ||
| + | |||
| + | .content-wrapper { | ||
| + | flex: 1 0 auto; | ||
| + | } | ||
| + | |||
| + | footer { | ||
| + | flex-shrink: | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | ---- | ||
| + | ===== Misc Notes ===== | ||
| + | <code css> | ||
| + | /* center element vertial & horizontal */ | ||
| + | .element { | ||
| + | display: flex; | ||
| + | align-items: | ||
| + | justify-content: | ||
| + | } | ||
| + | </ | ||
| + | ---- | ||