wiki.kalen.pw development:css
https://wiki.kalen.pw/
2026-04-30T22:17:20+00:00wiki.kalen.pw
https://wiki.kalen.pw/
https://wiki.kalen.pw/lib/tpl/SimpleDoku/images/favicon.icotext/html2021-06-29T15:00:21+00:00Anonymous (anonymous@undisclosed.example.com)Bootstrap
https://wiki.kalen.pw/doku.php?id=development:css:bootstrap&rev=1625004021&do=diff
Bootstrap
* Animated Hamburger Menu
----------
CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
----------text/html2021-06-29T15:00:33+00:00Anonymous (anonymous@undisclosed.example.com)Bulma
https://wiki.kalen.pw/doku.php?id=development:css:bulma&rev=1625004033&do=diff
Bulma
----------
CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"/>
----------
Equal Height Cards
.bm--card-equal-height {
display: flex;
flex-direction: column;
height: 100%;
}
.bm--card-equal-height .card-footer {
margin-top: auto;
}text/html2021-06-29T15:00:43+00:00Anonymous (anonymous@undisclosed.example.com)LESS
https://wiki.kalen.pw/doku.php?id=development:css:less&rev=1625004043&do=diff
LESS
----------
Installation
sudo npm install -g less
----------
Syntax
.class {
&:hover {
/* & refers to parent of statement */
}
}
----------text/html2021-06-29T15:00:52+00:00Anonymous (anonymous@undisclosed.example.com)SASS
https://wiki.kalen.pw/doku.php?id=development:css:sass&rev=1625004052&do=diff
SASS
I prefer this over LESS simply because it has a bigger ecosystem. (also Googling it doesn't return info about the Linux command)
----------
Installation
npm install --save-dev sass
----------
Compilation
Tip: in your sass directory make everything a submodule (by naming the file with an _filename.scss) then create an app.scss which imports all the other submodules. Then you will get a single compressed app.csstext/html2021-06-29T14:59:58+00:00Anonymous (anonymous@undisclosed.example.com)CSS
https://wiki.kalen.pw/doku.php?id=development:css:start&rev=1625003998&do=diff
CSS
* Bootstrap
* Bulma
* LESS
* SASS
----------
Sticky Footer
Ensure your content (header, body, etc everything besides footer) is all wrapped in a <div> with class .content-wrapper
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content-wrapper {
flex: 1 0 auto;
}
footer {
flex-shrink: 0;
}