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 [2021/01/04 13:02] 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 ===== | ===== Misc Notes ===== | ||
| <code css> | <code css> | ||
| - | .col { | + | /* center element vertial & horizontal */ |
| - | flex: 1; // 100%, could be 2 for a specific one for twice | + | .element |
| + | | ||
| + | align-items: center; | ||
| + | justify-content: | ||
| } | } | ||
| </ | </ | ||
| + | ---- | ||